@extends('layouts.auth')

@section('title')
    Login
@endsection

@section('content')
    <style>
        /* Password Toggle Icon Styling */
        .password-toggle-icon {
            position: absolute !important;
            top: 50% !important;
            right: 15px !important;
            transform: translateY(-50%) !important;
            cursor: pointer !important;
            color: #525f7f !important;
            transition: all 0.2s ease-in-out !important;
            z-index: 999 !important;
            padding: 8px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            background: transparent !important;
            pointer-events: auto !important;
            width: 36px !important;
            height: 36px !important;
            user-select: none !important;
            border: none !important;
            outline: none !important;
        }

        .password-toggle-icon:hover {
            color: #5e72e4 !important;
            background: rgba(94, 114, 228, 0.1) !important;
            border-radius: 6px !important;
        }

        .password-toggle-icon svg {
            width: 20px !important;
            height: 20px !important;
            fill: currentColor !important;
            pointer-events: none !important;
        }

        .password-toggle-icon .eye-icon {
            pointer-events: none !important;
        }

        .password-toggle-icon .eye-slash {
            display: block;
        }

        .password-toggle-icon .eye-open {
            display: none;
        }

        /* When password is visible */
        .password-toggle-icon .eye-slash.hide {
            display: none !important;
        }

        .password-toggle-icon .eye-open.show {
            display: block !important;
        }

        /* Adjust password input padding to accommodate eye icon */
        .position-relative input[type="password"],
        .position-relative input[type="text"].password-field {
            padding-right: 50px !important;
        }

        /* Ensure position relative is set */
        .position-relative {
            position: relative !important;
            display: block !important;
        }

        /* Override any conflicting input styles */
        #password,
        #confirm_password {
            padding-right: 50px !important;
        }

        /* Make form-control-lg respect padding */
        .form-control-lg.form-control {
            padding-right: 50px !important;
        }
    </style>


    <div class="col-xl-4 col-lg-5 col-md-7 d-flex flex-column mx-lg-0 mx-auto">
        <div class="card card-plain">
            <div class="card-header pb-0 text-start">
                <h4 class="font-weight-bolder">Reset Your Password</h4>
            </div>
            <div class="card-body">
                <form role="form" id="passwordResetForm" method="POST" action="{{ route('create-reset-password') }}">
                    @csrf

                    <div class="mb-3">
                        <input type="hidden" name="ref_no" id="ref_no" value="{{ $ref_no }}">
                        <div class="position-relative">
                            <input type="password" name="password" id="password"
                                class="form-control form-control-lg @error('password') is-invalid @enderror"
                                placeholder="Password" aria-label="Password">
                            <span class="password-toggle-icon" data-target="password" title="Show/Hide Password"
                                id="togglePassword">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-slash" viewBox="0 0 16 16">
                                    <path
                                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
                                    <path
                                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
                                    <path
                                        d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-open" style="display: none;" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                                    <path
                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                                </svg>
                            </span>
                        </div>
                        @error('password')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>

                    <div class="mb-3">
                        <div class="position-relative">
                            <input type="password" name="confirm_password" id="confirm_password"
                                class="form-control form-control-lg @error('password') is-invalid @enderror"
                                placeholder="Confirm Password" aria-label="Password">
                            <span class="password-toggle-icon" data-target="confirm_password" title="Show/Hide Password"
                                id="toggleConfirmPassword">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-slash" viewBox="0 0 16 16">
                                    <path
                                        d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z" />
                                    <path
                                        d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z" />
                                    <path
                                        d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z" />
                                </svg>
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
                                    class="eye-icon eye-open" style="display: none;" viewBox="0 0 16 16">
                                    <path
                                        d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z" />
                                    <path
                                        d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z" />
                                </svg>
                            </span>
                        </div>
                        @error('confirm_password')
                            <div class="invalid-feedback d-block">
                                {{ $message }}
                            </div>
                        @enderror
                    </div>


                    <div class="text-center">
                        <button type="submit" id="loginBtn" class="btn btn-lg btn-primary btn-lg w-100 mt-4 mb-0">
                            <span class="btn-text">Reset Password</span>
                            <span class="btn-loading d-none">
                                <span class="spinner-border spinner-border-sm me-2" role="status"
                                    aria-hidden="true"></span>
                                Emailing reset link...
                            </span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div
        class="col-6 d-lg-flex d-none h-100 my-auto pe-0 position-absolute top-0 end-0 text-center justify-content-center flex-column">
        <div class="position-relative bg-gradient-primary h-100 m-3 px-7 border-radius-lg d-flex flex-column justify-content-center overflow-hidden"
            style="background-image:url('{{ asset('img/cover.png') }}');
        background-size: cover;">
            <span class="mask "></span>

        </div>
    </div>

    <script>
        // Pure JavaScript - Password Toggle Function
        function togglePasswordVisibility(fieldId, toggleButtonId) {
            const passwordField = document.getElementById(fieldId);
            const toggleButton = document.getElementById(toggleButtonId);
            const eyeSlash = toggleButton.querySelector('.eye-slash');
            const eyeOpen = toggleButton.querySelector('.eye-open');

            if (passwordField && eyeSlash && eyeOpen) {
                if (passwordField.type === 'password') {
                    // Show password in plain text
                    passwordField.type = 'text';
                    eyeSlash.classList.add('hide');
                    eyeOpen.classList.add('show');
                } else {
                    // Hide password
                    passwordField.type = 'password';
                    eyeSlash.classList.remove('hide');
                    eyeOpen.classList.remove('show');
                }
            }
        }

        // Wait for page to load, then attach events
        document.addEventListener('DOMContentLoaded', function() {
            // Toggle for Password field
            const togglePassword = document.getElementById('togglePassword');
            if (togglePassword) {
                togglePassword.addEventListener('click', function() {
                    togglePasswordVisibility('password', 'togglePassword');
                });
            }

            // Toggle for Confirm Password field
            const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
            if (toggleConfirmPassword) {
                toggleConfirmPassword.addEventListener('click', function() {
                    togglePasswordVisibility('confirm_password', 'toggleConfirmPassword');
                });
            }
        });

        $(document).ready(function() {
            // Handle form submission
            $('#passwordResetForm').on('submit', function(e) {
                e.preventDefault();

                // Clear previous errors
                clearErrors();

                // Show loading state
                showLoading(true);

                // Get form data
                var formData = {
                    email: $('#email').val(),
                    _token: $('meta[name="csrf-token"]').attr('content')
                };

                // Submit form via AJAX
                $.ajax({
                    url: $(this).attr('action'),
                    type: 'POST',
                    data: formData,
                    success: function(response) {},
                    error: function(xhr) {
                        showLoading(false);

                        if (xhr.status === 422) {
                            // Validation errors
                            var errors = xhr.responseJSON.errors;
                            displayErrors(errors);
                        } else if (xhr.status === 419) {
                            // CSRF token mismatch
                            displayError(
                                'Session expired. Please refresh the page and try again.');
                        } else {
                            // Other errors
                            displayError('An error occurred. Please try again.');
                        }
                    }
                });
            });

            // Clear errors when user starts typing
            $('#email, #password').on('input', function() {
                $(this).removeClass('is-invalid');
                $(this).siblings('.invalid-feedback').remove();
            });

            function clearErrors() {
                $('.form-control').removeClass('is-invalid');
                $('.invalid-feedback').remove();
            }

            function displayErrors(errors) {
                $.each(errors, function(field, messages) {
                    var input = $('#' + field);
                    input.addClass('is-invalid');

                    // Remove existing error message
                    input.siblings('.invalid-feedback').remove();

                    // Add new error message
                    input.after('<div class="invalid-feedback d-block">' + messages[0] + '</div>');
                });
            }

            function displayError(message) {
                // Display general error message
                if ($('.alert-danger').length === 0) {
                    $('#passwordResetForm').prepend(
                        '<div class="alert alert-danger alert-dismissible fade show" role="alert">' +
                        message +
                        '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>' +
                        '</div>');
                } else {
                    $('.alert-danger').text(message);
                }
            }

            function showLoading(show) {
                if (show) {
                    $('#loginBtn').prop('disabled', true);
                    $('.btn-text').addClass('d-none');
                    $('.btn-loading').removeClass('d-none');
                } else {
                    $('#loginBtn').prop('disabled', false);
                    $('.btn-text').removeClass('d-none');
                    $('.btn-loading').addClass('d-none');
                }
            }
        });
    </script>
@endsection