{% extends 'admin/layouts/base.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 */
        }

        .text-danger {
            color: red;
        }

        .text-warning {
            color: orange;
        }

        .text-success {
            color: green;
        } 
    </style> 
{% endblock %}
{% block logincontent %}
    <div class="content-wrapper bg-dark">
        <div class="content-inner">
            <div class="content d-flex 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-1">
                            <label class="form-label">New Password</label>
                            <div class="position-relative">
                                {{ form_widget(form.password.first, {'attr': {'class': 'form-control', 'id': 'reset_password_password_first', 'oninput': 'validatePassword(event)'}}) }}
                                <div class="password_eye">
                                    <i class="ph-eye text-muted" id="toggleNewPassword" style="cursor: pointer;"></i>
                                </div>
                            </div>
                            <small id="passwordHelp" class="form-text text-danger"></small>
                            <div id="passwordStrengthMessage" class="password-strength-message"></div>
                        </div>
                        <div class="mb-1">
                            <label class="form-label">Repeat New Password</label>
                            <div class="position-relative">
                                {{ form_widget(form.password.second, {'attr': {'class': 'form-control', 'id': 'reset_password_password_second', 'oninput': 'validateConfirmPassword(event)'}}) }}
                                <div class="password_eye">
                                    <i class="ph-eye text-muted" id="toggleRepeatNewPassword" style="cursor: pointer;"></i>
                                </div>
                            </div>
                            <small id="confirmPasswordHelp" class="form-text text-danger"></small>
                        </div>
                        <button type="submit" class="btn btn-primary w-100 mt-2">
                            <i class="ph-arrow-counter-clockwise me-2"></i>
                            Change Password
                        </button>
                        {{ form_end(form) }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <style>
        .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 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"]');

            // Custom method to ensure password and confirm password fields match
            $.validator.addMethod("confirmPassword", function(value, element) {
                return value === $('#reset_password_password_first').val();
            }, "Password and Repeat password fields must match");

            // 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'));
            });

        });

        // Function to validate password strength
        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);
            }
            toggleSubmitButton();
        }

        // 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);
            }
        }

        document.addEventListener("DOMContentLoaded", function() {
            const toggleNewPassword = document.getElementById('toggleNewPassword');
            const newPasswordInput = document.getElementById('reset_password_password_first');
            const toggleRepeatNewPassword = document.getElementById('toggleRepeatNewPassword');
            const repeatNewPasswordInput = document.getElementById('reset_password_password_second');

            toggleNewPassword.addEventListener('click', function (e) {
                // Toggle the type attribute for new password field
                const type = newPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                newPasswordInput.setAttribute('type', type);

                // Toggle the eye icon
                this.classList.toggle('ph-eye-slash');
            });

            toggleRepeatNewPassword.addEventListener('click', function (e) {
                // Toggle the type attribute for repeat new password field
                const type = repeatNewPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                repeatNewPasswordInput.setAttribute('type', type);

                // Toggle the eye icon
                this.classList.toggle('ph-eye-slash');
            });
        });
    </script>
{% endblock %}