{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'app_admin' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home',
    },
    {
        'title': 'Change Password',
    }
]%}
{% block stylesheets %}
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        .error {
            color: red;
        }
        .flex-container {
            display: flex;
            justify-content: space-between;
            align-items: center; /* This will align items vertically centered if they have different heights */
        }
        .weak {
            color: red;
        }
        .strong {
            color: green;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="card">
        <div class="card-body">
            {{ form_start(form, {'attr': {'id': 'user_change_password'}}) }}
            <div class="row">
                <div class="col-lg-12">
                    <div class="password-container mb-3">
                        <label class="form-label">Current Password</label>
                        <div class="position-relative">
                            {{ form_widget(form.password) }}
                            <div class="password_eye">
                                <i class="ph-eye text-muted" id="toggleCurrentPassword" style="cursor: pointer;"></i>
                            </div>
                            <small id="currentPasswordHelp" class="form-text text-danger"></small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="password-container mb-3">
                        <label class="form-label">New Password</label>
                        <div class="position-relative">
                            {{ form_widget(form.newPassword.first,{'attr': {'class': 'form-control', 'placeholder': 'Enter new password', 'autocomplete': 'new-password'}}) }}
                            <div class="password_eye">
                                <i class="ph-eye text-muted" id="toggleNewPassword" style="cursor: pointer;"></i>
                            </div>
                            <small id="passwordHelp" class="form-text text-danger"></small>
                            <div id="passwordStrengthMessage" class="password-strength-message"></div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12">
                    <div class="password-container mb-3">
                        <label class="form-label">Repeat New Password</label>
                        <div class="position-relative">
                            {{ form_widget(form.newPassword.second,{'attr': {'class': 'form-control', 'placeholder': 'Enter repeat new password', 'autocomplete': 'new-password'}}) }}
                            <div class="password_eye">
                                <i class="ph-eye text-muted" id="toggleRepeatNewPassword" style="cursor: pointer;"></i>
                            </div>
                            <small id="confirmPasswordHelp" class="form-text text-danger"></small>
                        </div>
                    </div>
                </div>
                <div class="col-lg-2">
                    <button type="submit" class="btn btn-primary">Update Password</button>
                </div>
            </div>
            {{ form_end(form) }}
        </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.validate.min.js') }}"></script>
    <script>
        $(document).ready(function() {

            const passwordInput = $('#user_change_password_newPassword_first');
            const confirmPasswordInput = $('#user_change_password_newPassword_second');
            const currentPasswordInput = $('#user_change_password_password');
            const submitButton = $('button[type="submit"]');

            // Initially disable the submit button
            submitButton.prop('disabled', true);

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

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

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

            // Function to check for empty fields and show error
            function checkForEmptyField(value, helpElement) {
                if (value === '') {
                    helpElement.text('This field is required');
                } else {
                    helpElement.text('');
                }
            }

            // 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 >= minLength && 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 = passwordInput.val();
                const confirmPassword = confirmPasswordInput.val();
                const strength = getPasswordStrength(password);

                if (password.length >= 8 && confirmPassword === password && strength === 'strong' && currentPasswordInput.val() !== '' ) {
                    submitButton.prop('disabled', false);
                } else {
                    submitButton.prop('disabled', true);
                }
            }

            // Validate on keyup event for newPassword input
            $('input[name="user_change_password[newPassword][first]"]').on('keyup', function() {
                $('#user_change_password').valid();
            });
             /* ================= Initialize the validator for Product form - Start ============= */
            // Validate form before submission
                $('#user_change_password').on('submit', function(e) {
                    let isValid = true;
                    checkForEmptyField(currentPasswordInput.val(), $('#currentPasswordHelp'));
                    checkForEmptyField(passwordInput.val(), $('#passwordHelp'));
                    checkForEmptyField(confirmPasswordInput.val(), $('#confirmPasswordHelp'));

                    if (currentPasswordInput.val() === '' || passwordInput.val() === '' || confirmPasswordInput.val() === '') {
                        isValid = false;
                    }

                    if (!isValid) {
                        e.preventDefault();
                        Swal.fire({
                            icon: 'error',
                            title: 'Error',
                            text: 'Please fill in all required fields.',
                        });
                    } else {
                        Swal.fire({
                            title: 'Processing...',
                            allowOutsideClick: false,
                            didOpen: () => {
                                Swal.showLoading();
                            }
                        });
                    }
                });
            });

        document.addEventListener("DOMContentLoaded", function() {
            const toggleCurrentPassword = document.getElementById('toggleCurrentPassword');
            const currentPasswordInput = document.getElementById('user_change_password_password');
            const toggleNewPassword = document.getElementById('toggleNewPassword');
            const newPasswordInput = document.getElementById('user_change_password_newPassword_first');
            const toggleRepeatNewPassword = document.getElementById('toggleRepeatNewPassword');
            const repeatNewPasswordInput = document.getElementById('user_change_password_newPassword_second');

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

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

            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 %}