@extends('admin.layout.app')
@section('title', 'Change Password')
@section('content')

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="content-area">
                    <main id="main" class="main-content">
                        <div class="tfcl-dashboard">
                            <h1 class="admin-title mb-3">Change Password</h1>

                            <div id="password-status-message" style="display:none;" class="status-alert-bar">
                                <span id="pass-msg-text"></span>
                            </div>

                            <div class="tfcl-add-listing profile-inner">
                                <h3>Update your security</h3>
                                <form id="passwordUpdateForm">
                                    @csrf
                                    <div class="tfcl-add-listing profile-password">
                                        <div class="form-group mb-3 position-relative">
                                            <label>Old password</label>
                                            <input type="password" class="form-control pass-input"
                                                   name="old_password" placeholder="Enter old password">
                                            <i class="far fa-eye toggle-password"></i>
                                            <span class="text-danger error-text old_password_error"></span>
                                        </div>

                                        <div class="form-group mb-3 position-relative">
                                            <label>New password</label>
                                            <input type="password" id="new_password" class="form-control pass-input"
                                                   name="password" placeholder="New password">
                                            <i class="far fa-eye toggle-password"></i>
                                            <span class="text-danger error-text password_error"></span>
                                        </div>

                                        <ul class="list-check-req mb-3">
                                            <li id="rule-length" class="uncheck"><span>8 characters minimum</span>
                                            </li>
                                            <li id="rule-upper" class="uncheck"><span>One uppercase character</span>
                                            </li>
                                            <li id="rule-lower" class="uncheck"><span>One lowercase character</span>
                                            </li>
                                            <li id="rule-number" class="uncheck"><span>One number</span></li>
                                        </ul>

                                        <div class="form-group mb-3 position-relative">
                                            <label>Confirm password</label>
                                            <input type="password" class="form-control pass-input"
                                                   name="password_confirmation" placeholder="Confirm password">
                                            <i class="far fa-eye toggle-password"></i>
                                            <span class="text-danger error-text password_confirmation_error"></span>
                                        </div>

                                        <div class="group-button-submit left mb-0">
                                            <button type="submit" id="passSubmitBtn" class="pre-btn">Change
                                                Password
                                            </button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </main>
                </div>
            </div>
        </div>

        <style>

        </style>
        @endsection
        @push('scripts')
            <script>
                $(document).ready(function () {
                    // 1. Show/Hide Password Toggle
                    $('.toggle-password').on('click', function () {
                        $(this).toggleClass('fa-eye fa-eye-slash');
                        let input = $(this).siblings('input');
                        input.attr('type', input.attr('type') === 'password' ? 'text' : 'password');
                    });

                    // 2. Real-time Password Validation
                    $('#new_password').on('keyup', function () {
                        let val = $(this).val();

                        // Length check
                        $('#rule-length').toggleClass('check', val.length >= 8).toggleClass('uncheck', val.length < 8);
                        // Uppercase check
                        $('#rule-upper').toggleClass('check', /[A-Z]/.test(val)).toggleClass('uncheck', !/[A-Z]/.test(val));
                        // Lowercase check
                        $('#rule-lower').toggleClass('check', /[a-z]/.test(val)).toggleClass('uncheck', !/[a-z]/.test(val));
                        // Number check
                        $('#rule-number').toggleClass('check', /[0-9]/.test(val)).toggleClass('uncheck', !/[0-9]/.test(val));
                    });

                    // 3. AJAX Submission
                    $('#passwordUpdateForm').on('submit', function (e) {
                        e.preventDefault();
                        $('#passSubmitBtn').text('Updating...').prop('disabled', true);
                        $('.error-text').text('');

                        $.ajax({
                            url: "{{ route('admin.password.update') }}", // Apna route set karein
                            method: "POST",
                            data: $(this).serialize(),
                            success: function (response) {
                                $('#passSubmitBtn').text('Change Password').prop('disabled', false);
                                $('#password-status-message').removeClass('error-bg').fadeIn();
                                $('#pass-msg-text').text('Success! Your password has been changed.');
                                $('#passwordUpdateForm')[0].reset();
                                $('.list-check-req li').removeClass('check').addClass('uncheck');
                            },
                            error: function (xhr) {
                                $('#passSubmitBtn').text('Change Password').prop('disabled', false);
                                $('#password-status-message').addClass('error-bg').fadeIn();

                                if (xhr.status === 422) {
                                    $('#pass-msg-text').text('Validation failed! Please check the requirements.');
                                    let errors = xhr.responseJSON.errors;
                                    $.each(errors, function (key, value) {
                                        $('.' + key + '_error').text(value[0]);
                                    });
                                } else {
                                    $('#pass-msg-text').text('Server error! Please try again later.');
                                }
                            }
                        });
                    });
                });
            </script>
    @endpush