@extends('../backend/layout/' . $layout)

@section('subhead')
<title>Change Password - EccomerceLaravel</title>
@endsection

@section('subcontent')
<div class="grid grid-cols-12 gap-6">
    <!-- BEGIN: Profile Menu -->
    @include('backend.users.sidebars', $user)
    <!-- END: Profile Menu -->
    <div class="col-span-12 lg:col-span-8 2xl:col-span-9">
        <!-- BEGIN: Display Information -->
        <div class="intro-y box lg:mt-5">
            <div class="flex items-center p-5 border-b border-slate-200/60 dark:border-darkmode-400">
                <h2 class="font-medium text-base mr-auto">Change Password</h2>
            </div>

            <div class="grid grid-cols-12 gap-6">
                <!-- BEGIN: Profile Menu -->
                <!-- END: Profile Menu -->
                <div class="col-span-12 lg:col-span-12 2xl:col-span-12">
                    <!-- BEGIN: Change Password -->
                    <div class="intro-y box lg:mt-5 form-validation">
                        <div id="form-validation">
                            <form id="change-password" enctype="multipart/form-data">
                                @csrf
                                <div class="p-5">
                                    <div>
                                        <label for="change-password-form-1" class="form-label">Old Password</label>
                                        <div class="input-form">
                                            <input type="password" id="old_password" name="old_password"
                                                class="form-control" required>
                                        </div>
                                        <div id="error-old_password" class="form__input-error text-danger mt-1">
                                        </div>
                                    </div>
                                    <div class="mt-3">
                                        <label for="change-password-form-2" class="form-label">New Password</label>
                                        <div class="input-form">
                                            <input type="password" id="password" name="password" class="form-control" required>
                                        </div>
                                        <div id="error-password" class="form__input-error text-danger mt-1"></div>
                                    </div>
                                    <div class="mt-3">
                                        <label for="change-password-form-3" class="form-label">Confirm New
                                            Password</label>
                                        <div class="input-form">
                                            <input type="password" name="password_confirmation"
                                                id="password_confirmation" class="form-control" required>
                                        </div>
                                        <div id="error-password_confirmation"
                                            class="form__input-error text-danger mt-1"></div>
                                    </div>
                                    <button type="submit" id="btn-submit" class="btn btn-primary mt-4">Change
                                        Password</button>
                                </div>
                            </form>
                        </div>
                        <div id="success-notification-content" class="toastify-content hidden flex">
                            <div id="icon">
                                <i id="icon_message" data-lucide="check-circle"></i>
                            </div>
                            <div class="ml-4 mr-4">
                                <div class="font-medium" id="s_message"></div>
                            </div>
                        </div>
                    </div>
                    <!-- END: Change Password -->
                </div>
            </div>
            <div id="success-notification-content" class="toastify-content hidden flex">
                <i id="icon_message" data-lucide="check-circle"></i>
                <div class="ml-4 mr-4">
                    <div class="font-medium" id="s_message"></div>
                </div>
            </div>
        </div>
        <!-- END: Display Information -->
        <!-- BEGIN: Personal Information -->
        <!-- END: Personal Information -->
    </div>
</div>
@endsection
@section('script')
<script>
    let routeChangePassword = "{{ route('users.update_change_password', ['user' => $user->id])}}"
</script>
<script src="{{asset(mix("js/backend/pages/users/changePassword.js"))}}"></script>
@endsection