@extends('layouts.user.app')
@push('style')
<link rel="stylesheet" href="/assets/vendor/libs/sweetalert2/sweetalert2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/select2/select2.css" />
<link rel="stylesheet" href="/assets/vendor/libs/@form-validation/form-validation.css" />
<link rel="stylesheet" href="/assets/vendor/libs/flatpickr/flatpickr.css" />
@endpush
@section('content')
<h4 class="py-3 mb-4">{{$title}}</h4>
<div class="row">
    <!-- User Sidebar -->
    <div class="col-xl-3 col-lg-5 order-1 order-md-1">
        @include('User.profile.sidebar')
    </div>
    <!--/ User Sidebar -->

    <div class="col-xl-9 col-lg-7 order-2 order-md-2">
        @include('User.profile.tabs')
        <div class="card mb-4">
            <h5 class="card-header">Change Password</h5>
            <div class="card-body">
                <form id="formChangePassword" method="POST" action="{{route('user.profile.password', $user->id)}}" class="fv-plugins-bootstrap5 fv-plugins-framework" novalidate="novalidate">
                    @csrf
                    <div class="row">
                        <div class="mb-3 col-12 col-sm-6 form-password-toggle">
                            <label class="form-label" for="password">New Password</label>
                            <div class="input-group input-group-merge">
                                <input class="form-control" type="password" id="password" name="password" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
                            </div>
                        </div>

                        <div class="mb-3 col-12 col-sm-6 form-password-toggle">
                            <label class="form-label" for="password_confirmation">Confirm New Password</label>
                            <div class="input-group input-group-merge">
                                <input class="form-control" type="password" name="password_confirmation" id="password_confirmation" placeholder="&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;&#xb7;" required />
                            </div>
                        </div>
                        <div>
                            <button type="submit" class="btn btn-primary me-2">Change Password</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

    </div>
</div>

@include('User.profile.modal')

@endsection

@push('script')
<script src="/assets/vendor/libs/sweetalert2/sweetalert2.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave.js"></script>
<script src="/assets/vendor/libs/cleavejs/cleave-phone.js"></script>
<script src="/assets/vendor/libs/select2/select2.js"></script>
<script src="/assets/vendor/libs/@form-validation/popular.js"></script>
<script src="/assets/vendor/libs/@form-validation/bootstrap5.js"></script>
<script src="/assets/vendor/libs/@form-validation/auto-focus.js"></script>


<!-- Main JS -->


<!-- Page JS -->
<script src="/assets/js/modal-edit-user.js"></script>
<script src="/assets/js/modal-enable-otp.js"></script>
<script src="/assets/js/app-user-view.js"></script>
<script src="/assets/js/app-user-view-security.js"></script>
<script src="/assets/js/forms-pickers.js"></script>
<script>
    $('#saveUserInformation').on('click', function(e){
        e.preventDefault();
        let name = $('#name').val();
        let phone = $('#phone').val();
        let birth_date = $('input[name=birth_date]').val();
        let address = $('#address').val();
        let country = $('#country').val();
        let gender = $('#gender').val();
        $.ajax({
            url: '/user/profile/update/{{$user->id}}',
            data : {
                name : name,
                phone: phone,
                birth_date: birth_date,
                address: address,
                country: country,
                gender: gender,
            },
            success: function (response) {
                if(response.status == 'success'){
                    $('#editUser').modal('hide');
                }
                new Notify ({
                    title: '',
                    text: response.message,
                    status: response.status,
                    effect: 'slide',
                    autoclose: true,
                    type: 2,
                    autotimeout: 4000
                });
            },
        });

    });
</script>
@endpush