@extends('Layouts.main')
@section('container')
    <div class="row">
        <div class="col-md-3">

            <!-- Profile Image -->
            <div class="card card-primary card-outline">
                <div class="card-body box-profile">
                    <div class="text-center">
                        @if (!empty(auth()->user()->photo))
                            @php
                                $imgs = asset('storage/' . auth()->user()->photo);
                            @endphp
                        @else
                            @php
                                $imgs = asset('images/nopic.jpg');
                            @endphp
                        @endif
                        <img class="profile-user-img img-fluid img-circle border-0" src="{{ $imgs }}"
                            alt="User profile picture">
                    </div>
                    @if (auth()->user()->role == 'mahasiswa')
                        <h3 class="profile-username text-center">{{ auth()->user()->username }}</h3>

                        <p class="text-muted text-center">{{ auth()->user()->name }}</p>
                    @else
                        <h3 class="profile-username text-center">{{ auth()->user()->name }}</h3>

                        <p class="text-muted text-center">{{ auth()->user()->role }}</p>
                    @endif


                    <form enctype="multipart/form-data" method="post" name="myForm" class="" id="myForm"
                        onsubmit="return validatePhoto()" action="{{ route('photochange') }}">
                        @csrf
                        <label class="fileContainer d-block mt-n3 mb-3">
                            <a href="#" class="btn btn-primary btn-block" title="Pilih Foto">Ubah Foto</a>
                            <input type="file" name="photo" id="ubahfoto" />
                            <input type="hidden" name="image_old" value="{{ auth()->user()->photo }}" />
                        </label>
                        <button type="submit" class="btn btn-default" name="changePhoto" id="changePhoto"
                            value="changePhoto" style="position: absolute;left: 15px;z-index: -1;"></button>
                    </form>
                </div>
                <!-- /.card-body -->
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
        <div class="col-md-9">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title">Ubah Password</h3>
                </div>
                <!-- form start -->
                <form class="form-horizontal" id="formProfil" method="post" action="{{ url('/user/changepassword') }}">
                    @csrf
                    <div class="card-body">
                        <form class="form-horizontal" method="POST" enctype="multipart/form-data">
                            <div class="form-group row">
                                <label for="inputPasswordLama" class="col-sm-2 col-form-label">
                                    Password Lama
                                </label>
                                <div class="col-sm-4">
                                    <input type="password" name="password_lama"
                                        class="form-control @error('password_lama') is-invalid @enderror"
                                        id="inputPasswordLama" placeholder="Password Lama">
                                    @error('password_lama')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPasswordBaru" class="col-sm-2 col-form-label">Password Baru</label>
                                <div class="col-sm-4">
                                    <input type="password" name="password_baru"
                                        class="form-control @error('password_baru') is-invalid @enderror"
                                        id="inputPasswordBaru" placeholder="Password Baru">
                                    @error('password_baru')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row">
                                <label for="inputPasswordConfr" class="col-sm-2 col-form-label">Konfirmasi</label>
                                <div class="col-sm-4">
                                    <input type="password" name="confirm_password"
                                        class="form-control @error('confirm_password') is-invalid @enderror"
                                        id="inputPasswordConfr" placeholder="Konfirmasi Password Baru">
                                    @error('confirm_password')
                                        <div class="invalid-feedback">
                                            {{ $message }}
                                        </div>
                                    @enderror
                                </div>
                            </div>
                            <div class="form-group row mb-0">
                                <label for="inputEmail" class="col-sm-2 col-form-label">&nbsp;</label>
                                <div class="col-sm-4 text-right">
                                    <button type="submit" name="ubahPassword" class="btn btn-primary">Simpan</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <!-- /.card-body -->
                </form>
            </div>
            <!-- /.card -->
        </div>
        <!-- /.col -->
    </div>

    <script>
        $(function() {
            $('#ubahfoto').change(function() {
                $('#changePhoto').trigger('click');
            });

            // Form initialize by validate
            $('#formProfil').validate({
                rules: {
                    password_lama: {
                        required: true
                    },
                    password_baru: {
                        required: true,
                        minlength: 6
                    },
                    confirm_password: {
                        required: true,
                        equalTo: "#inputPasswordBaru"
                    }
                },
                errorElement: 'span',
                errorPlacement: function(error, element) {
                    error.addClass('invalid-feedback');
                    element.closest('.form-group div').append(error);
                },
                highlight: function(element, errorClass, validClass) {
                    $(element).addClass('is-invalid');
                },
                unhighlight: function(element, errorClass, validClass) {
                    $(element).removeClass('is-invalid');
                }
            });
        });

        function validatePhoto() {
            function hasExtension(inputID, exts) {
                var fileName = document.getElementById(inputID).value;
                return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
            }

            if (!hasExtension('ubahfoto', ['.png', '.jpg', 'jpeg'])) {
                alert("Hanya file .png .jpg dan .jpeg yang diizinkan.");
                return false;

            } else {
                var file = document.getElementById('ubahfoto').files[0];

                if (file && file.size < 500000) { // 500Kb (this size is in bytes)
                    $('.loading-wrapper').removeClass('hide-this')
                } else {
                    alert('Ukuran max 500kb');
                    return false;
                }
            }
        }
    </script>
@endsection