{% extends 'frontend/layouts/index.html.twig' %}
{% block title %}Reset Password{% endblock %}
{% block stylesheets %}
    <style>
        .error {
            color: red;
        }

        .password-strength-message {
            margin-top: 5px;
            font-size: 0.875rem; /* Adjust font size as needed */
        }

        .password-strength-message i {
            margin-right: 5px;
        }

        .text-danger {
            color: red;
        }

        .text-success {
            color: green;
        }
        .password_eye {
            position: absolute;
            right: 15px;
            top: 8px;
            z-index: 5;
        }
        .ph.ph-eye-slash::before {
            content: '\f070'; /* Assuming using FontAwesome or a similar icon library */
        }
    </style>
{% endblock %}
{% block logincontent %}
    <div class="content-wrapper">
        <div class="content-inner">
            <div class="content d-flax justify-content-center align-items-center d-md-flex">
                <div class="card mb-0 login-form">
                    <div class="card-body">
                        {% include 'helper/messages.html.twig' %}
                        <div class="text-center mb-3">
                            <div class="d-inline-flex bg-primary bg-opacity-10 text-primary lh-1 rounded-pill p-3 mb-3 mt-1">
                                <i class="ph-arrows-counter-clockwise ph-2x"></i>
                            </div>
                            <h5 class="mb-0">Reset Password</h5>
                        </div>
                        {{ form_start(form ,{'attr': {'id': 'reset_password_form'}}) }}
                        <div class="mb-3">
                            <label class="form-label">Password</label>
                            <div class="password-container position-relative">
                                {{ form_widget(form.password.first, {'attr': {'class': 'form-control', 'id': 'signup_password_first', 'placeholder': '•••••••••••', 'oninput': 'validatePassword(event)'}}) }}
                                <div class="password_eye" id="togglePasswordFirst" style="cursor: pointer;">
                                    <i class="ph-eye text-muted"></i>
                                </div>
                                <small id="passwordHelp" class="form-text text-danger"></small>
                                <div id="passwordStrengthMessage" class="password-strength-message"></div>
                            </div>
                        </div>
                        <div class="mb-3">
                            <label class="form-label">Confirm Password</label>
                            <div class="password-container position-relative">
                                {{ form_widget(form.password.second, {'attr': {'class': 'form-control', 'id': 'signup_password_second', 'placeholder': '•••••••••••', 'oninput': 'validateConfirmPassword(event)'}}) }}
                                <div class="password_eye" id="togglePasswordSecond" style="cursor: pointer;">
                                    <i class="ph-eye text-muted"></i>
                                </div>
                                <small id="confirmPasswordHelp" class="form-text text-danger"></small>
                            </div>
                        </div>


                        <button type="submit" class="btn btn-primary w-100">
                            <i class="ph-arrow-counter-clockwise me-2"></i>
                            Change Password
                        </button>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script src="{{ asset('admin/js/jquery/jquery.min.js') }}"></script>
    <script src="{{ asset('admin/js/jquery/jquery.validate.min.js') }}"></script>
    <script>
        $(document).ready(function() {
            const passwordInput = $('#reset_password_password_first');
            const confirmPasswordInput = $('#reset_password_password_second');
            const submitButton = $('button[type="submit"]');

            // Add the password help and strength message elements after the password input
            $('<small id="passwordHelp" class="form-text text-danger"></small>').insertAfter(passwordInput);
            $('<div id="passwordStrengthMessage" class="password-strength-message"></div>').insertAfter('#passwordHelp');

            // Initialize validation for the form
            $('#reset_password_form').validate({
                rules: {
                    'reset_password[password][first]': {
                        required: true,
                        passwordPattern: true,
                    },
                    'reset_password[password][second]' : {
                        required: true,
                        passwordPattern: true,
                        confirmPassword: true, // Use custom validation rule to check if passwords match
                    }
                },
                messages: {
                    'reset_password[password][first]': {
                        required: "Password is required",
                    },
                    'reset_password[password][second]': {
                        required: "Repeat Password is required",
                    },
                },
                errorPlacement: function(error, element) {
                    if (element.attr("id") === "reset_password_password_first" || element.attr("id") === "reset_password_password_second") {
                        error.insertAfter(element); // Display error message after the input field
                    } else {
                        error.insertAfter(element.parent()); // For other fields, insert error message after the parent element
                    }
                }
            });

            // Add event listener for password input to validate password strength
            passwordInput.on('input', function() {
                validatePasswordStrength($(this).val(), $('#passwordHelp'), $('#passwordStrengthMessage'));
            });

            // Add event listener for confirm password input to validate password match
            confirmPasswordInput.on('input', function() {
                validateConfirmPassword($('#reset_password_password_second').val(), $('#confirmPasswordHelp'));
            });

            // Toggle password visibility for the first password field
            $('#togglePasswordFirst').on('click', function() {
                const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
                passwordInput.attr('type', type);
                const icon = $(this).find('i');
                icon.toggleClass('ph-eye ph-eye-slash');
            });

            // Toggle password visibility for the second password field
            $('#togglePasswordSecond').on('click', function() {
                const type = confirmPasswordInput.attr('type') === 'password' ? 'text' : 'password';
                confirmPasswordInput.attr('type', type);
                const icon = $(this).find('i');
                icon.toggleClass('ph-eye ph-eye-slash');
            });

        });

        // Function to validate password strengths
        function validatePasswordStrength(password, helpElement, strengthElement) {
            const minLength = 8;
            const hasUppercase = /[A-Z]/.test(password);
            const hasLowercase = /[a-z]/.test(password);
            const hasNumbers = /\d/.test(password);

            if (password.length === 0) {
                helpElement.text(''); // Clear help text if password is empty
                strengthElement.empty(); // Clear strength message if password is empty
            } else if (password.length < minLength || !hasUppercase || !hasLowercase || !hasNumbers) {
                helpElement.text(
                    'Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.'
                );
                displayPasswordStrength('weak', strengthElement);
            } else {
                helpElement.text(''); // Clear help text if password meets requirements
                const strength = getPasswordStrength(password);
                displayPasswordStrength(strength, strengthElement);
            }
        }

        // Function to validate confirm password match
        function validateConfirmPassword(confirmPassword, helpElement) {
            const password = $('#reset_password_password_first').val();

            if (password !== confirmPassword) {
                helpElement.text('Passwords do not match');
            } else {
                helpElement.text('');
            }
            toggleSubmitButton();
        }

        // Function to determine password strength
        function getPasswordStrength(password) {
            const minLength = 8;
            const hasUppercase = /[A-Z]/.test(password);
            const hasLowercase = /[a-z]/.test(password);
            const hasNumbers = /\d/.test(password);

            if (password.length < minLength || !hasUppercase || !hasLowercase || !hasNumbers) {
                return 'weak';
            }

            // Password with required criteria and a length of at least 12 is considered strong
            if (password.length >= 12 && hasUppercase && hasLowercase && hasNumbers) {
                return 'strong';
            }

            // Password with required criteria but less than 12 characters is medium
            return 'medium';
        }

        // Function to display password strength message
        function displayPasswordStrength(strength, targetElement) {
            targetElement.empty();

            let message = '';
            let iconClass = '';

            switch (strength) {
                case 'weak':
                    message = 'Password is Weak';
                    iconClass = 'fas fa-exclamation-circle text-danger';
                    textClass = 'text-danger';
                    break;
                case 'medium':
                    message = 'Password is Medium';
                    iconClass = 'fas fa-lock text-warning';
                    textClass = 'text-warning';
                    break;
                case 'strong':
                    message = 'Password is Strong';
                    iconClass = 'fas fa-check-circle text-success';
                    textClass = 'text-success';
                    break;
            }

            const iconElement = $('<i>').addClass(iconClass);
            const textElement = $('<span>').addClass(textClass).text(' ' + message);
            targetElement.append(iconElement).append(textElement);
        }
        function toggleSubmitButton() {
            const password = $('#reset_password_password_first').val();
            const confirmPassword = $('#reset_password_password_second').val();
            const strength = getPasswordStrength(password);

            const submitButton = $('button[type="submit"]');

            if (password.length >= 8 && confirmPassword === password && strength === 'strong') {
                submitButton.prop('disabled', false);
            } else {
                submitButton.prop('disabled', true);
            }
        }
    </script>
{% endblock %}