@include('header')
<div class="body-wrapper">
    <!--  Header Start -->
    <header class="app-header">
        <nav class="navbar navbar-expand-lg navbar-light">

            <ul class="navbar-nav">
                <li class="nav-item d-block d-xl-none">
                    <a class="nav-link sidebartoggler nav-icon-hover" id="headerCollapse" href="javascript:void(0)">
                        <i class="fa-solid fa-bars"></i>
                    </a>
                </li>
            </ul>
            <h2 class="title_red">{{$title}}</h2>
            <div class="navbar-collapse justify-content-end px-0" id="navbarNav">
                <ul class="navbar-nav flex-row ms-auto align-items-center justify-content-end">

                    <li class="nav-item dropdown">
                        <span class=" nav-link nav-icon-hover" href="javascript:void(0)" id="initials"
                              data-bs-toggle="dropdown"
                              aria-expanded="false">
                        </span>
                        <div class="dropdown-menu dropdown-menu-end dropdown-menu-animate-up" aria-labelledby="drop2">
                            <div class="message-body">
                                @if(Auth::user()->role == 'mr')
                                    <a href="javascript:void(0)" class="d-flex align-items-center gap-2 dropdown-item"
                                       data-bs-toggle="modal" id="change_password_m">
                                        Change Password
                                    </a>
                                @endif
                                <a href="{{route('logout')}}"
                                   class="d-flex align-items-center gap-2 dropdown-item bt_top">Logout</a>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!--  Header End -->

    <div class="modal fade" id="change_password" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Change Password</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form id="change_password_form" method="post" class="w-100">
                    @csrf
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="old_password_id" class="form-label">Old Password</label>
                            <input type="password" name="old_password" id="old_password_id" class="form-control"
                                   placeholder="Enter Old Password" autocomplete="off">
                        </div>
                        <div class="mb-3">
                            <label for="new_password_id" class="form-label">Add new password</label>
                            <input id="new_password_id" name="new_password" type="password" class="form-control"
                                   placeholder="Enter add new password" autocomplete="off">
                        </div>
                        <div class="mb-3">
                            <label for="new_password_confirmation_id" class="form-label">Confirm New Password</label>
                            <input type="password" name="new_password_confirmation" class="form-control"
                                   id="new_password_confirmation_id" placeholder="Enter confirm new password"
                                   autocomplete="off">
                        </div>
                    </div>
                    <div class="modal-footer justify-content-center mb-3">
                        <button type="submit" class="btn btn-primary">Change Password</button>
                    </div>
                </form>

            </div>
        </div>
    </div>

    @yield('main')
    @include('footer')
</div>
<script>
    $("#change_password_m").click(function () {
        $('#change_password_form')[0].reset();
        $('#change_password_form').validate().resetForm();
        $('#change_password').modal('show');
    });

    // $.validator.addMethod("customPassword", function(value, element) {
    //     return /^[a-zA-Z0-9!@#$%^&*()_+|~-]+$/i.test(value);
    // }, "Password must contain only letters, numbers, and the following special characters: !@#$%^&*()_+|~-");


    $.validator.addMethod("customPassword", function(value, element) {
        // Use a regular expression to check for valid characters (letters, numbers, and special characters)
        return /^[a-zA-Z0-9!@#$%^&*()_+|~-]+$/i.test(value);
    }, "Password must contain only letters, numbers, and special characters.");


    $("#change_password_form").validate({
        ignore: ".ignore",
        rules: {
            old_password: {
                required: true,
                minlength: 4,
                maxlength: 14,
                customPassword: true,
            },
            new_password: {
                required: true,
                minlength: 4,
                maxlength: 14,
                customPassword: true,
            },
            new_password_confirmation: {
                required: true,
                minlength: 4,
                maxlength: 14,
                customPassword: true,
                equalTo: "#new_password_id",
            },
        },
        messages: {
            old_password: {
                required: "Please enter your old password.",
                alphanumeric: "Old password can only contain letters and digits.",
                minlength: "Your old password must be at least {0} characters long.",
                maxlength: "Your old password cannot exceed {0} characters."
            },
            new_password: {
                required: "Please enter a new password.",
                minlength: "Your new password must be at least {0} characters long.",
                maxlength: "Your new password cannot exceed {0} characters.",
                customPassword: "Password must contain only letters, numbers, and special characters."
            },
            new_password_confirmation: {
                required: "Please confirm your new password.",
                minlength: "Your confirmation password must be at least {0} characters long.",
                maxlength: "Your confirmation password cannot exceed {0} characters.",
                customPassword: "Confirmation password must contain only letters, numbers, and special characters.",
                equalTo: "Password and confirmation password do not match.",
            },
        },
        errorPlacement: function (error, element) {
            error.insertAfter(element);
            element.on('change', function () {
                error.remove();
            });
        },
        submitHandler: function (form) {
            var formData = new FormData($("#change_password_form")[0]);

            $.ajax({
                url: "{{ route('update-password') }}",
                type: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                dataType: "json",
                success: function (data) {
                    if (data.status == 0) {
                        $.notify(data.message, "error");
                    } else if (data.status == 1) {
                        $('#change_password').modal('hide');
                        $.notify(data.message, "success");
                    }
                }
            });
        }
    });
</script>