@extends('admin.layouts.layout')

@section('content')

<div class="page-container">

    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header border-bottom border-dashed d-flex align-items-center">
                    <h4 class="header-title">Change Password</h4>
                </div>

                <div class="card-body">
                    <form action="{{ route('change.password') }}" method="POST" id="changePasswordForm">
                        @csrf
                        @method('PUT')
                        <div class="row">
                            <div class="mb-3 col-lg-6">
                                <label for="current_password" class="form-label">Current Password</label>
                                <input type="text" id="current_password" name="current_password" value="" placeholder="Enter Current Password" class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="new_password" class="form-label">New Password</label>
                                <input type="text" id="new_password" name="new_password" value="" placeholder="Enter New Password" class="form-control whitespace-trim">
                            </div>
                            <div class="mb-3 col-lg-6">
                                <label for="password_confirmation" class="form-label">Confirm Password</label>
                                <input type="text" id="password_confirmation" name="password_confirmation" value="" placeholder="Enter Confirm Password" class="form-control whitespace-trim">
                            </div>
                            <div>
                                <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div> <!-- container -->


@endsection

@section('footer-script')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>

<script>
    $(document).ready(function () {
        // Trim leading spaces from input fields
        $('.whitespace-trim').on('input', function () {
            var value = $(this).val();
            if (value && value.charAt(0) === ' ') {
                $(this).val(value.trimStart());
            }
        });

        // Form validation
        $('#changePasswordForm').validate({
            errorElement: 'span',
            errorClass: 'text-danger',

            highlight: function (element) {
                $(element).addClass('is-invalid');
            },
            unhighlight: function (element) {
                $(element).removeClass('is-invalid');
            },

            rules: {
                current_password: { required: true },
                new_password: {
                    required: true,
                    minlength: 6,
                    notEqualToCurrentPassword: true // Custom rule to check password
                },
                password_confirmation: {
                    required: true,
                    equalTo: "#new_password"
                }
            },

            messages: {
                current_password: {
                    required: "Please enter your current password",
                },
                new_password: {
                    required: "Please enter a new password",
                    minlength: "Password must be at least 6 characters",
                    notEqualToCurrentPassword: "New password must be different from current password"
                },
                password_confirmation: {
                    required: "Please confirm your new password",
                    equalTo: "Passwords do not match"
                }
            }
        });

        // Custom jQuery validation rule to ensure new password isn't the same as the current password
        $.validator.addMethod("notEqualToCurrentPassword", function(value, element) {
            var currentPassword = $('#current_password').val();
            return value !== currentPassword; // Returns true if new password is different
        });
    });
</script>

@endsection