{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_dashboard' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': 'Change Password',
    }
]%}
{% block title %}User Change Password{% 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="position-relative">
                        {{ form_row(form.password, {'attr': {'class': 'form-control', 'id': 'password-input', 'placeholder': 'Enter your password'}}) }}
                        <div class="password_eye" id="togglePassword">
                            <i class="ph-eye text-muted"></i>
                        </div>
                        <small id="passwordHelp" class="form-text text-danger"></small>
                    </div>
                </div>
                <div class="col-lg-12">
                <div class="position-relative">
                    {{ form_row(form.newPassword.first, {'attr': {'class': 'form-control', 'oninput': 'validateNewPassword(event)', 'id': 'new-password-input', 'placeholder': '•••••••••••','autocomplete':'new-password'}}) }}
                    <div class="password_eye" id="toggleNewPassword">
                        <i class="ph-eye text-muted"></i>
                    </div>
                    <small id="newPasswordHelp" class="form-text text-danger"></small>
                    <div id="newPasswordStrengthMessage" class="password-strength-message"></div>
                </div>
            </div>
            <div class="col-lg-12">
                <div class="position-relative">
                    {{ form_row(form.newPassword.second, {'attr': {'class': 'form-control', 'id': 'confirm-password-input', 'placeholder': '•••••••••••','autocomplete' : 'new-password'}}) }}
                    <div class="password_eye" id="toggleConfirmPassword">
                        <i class="ph-eye text-muted"></i>
                    </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: 42px;
        z-index: 5;
        cursor: pointer;
        
    }
    .error {
            color: red;
        }
    .ph.ph-eye-slash::before {
        content: '\f070'; /* Assuming using FontAwesome or a similar icon library */
    }
</style>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const newPasswordInput = document.getElementById('user_change_password_newPassword_first');
            const confirmPasswordInput = document.getElementById('confirm-password-input');

            // Create the newPasswordStrengthMessage div
            const newPasswordStrengthMessage = document.createElement('div');
            newPasswordStrengthMessage.id = 'newPasswordStrengthMessage';
            const newPasswordSuggestion = document.createElement('div');
            newPasswordSuggestion.id = 'newPasswordHelp';
            newPasswordSuggestion.className = "form-text text-danger";

            // Insert the new div after the newPasswordInput
            newPasswordInput.parentNode.insertBefore(newPasswordStrengthMessage, newPasswordInput.nextSibling);
            newPasswordInput.parentNode.insertBefore(newPasswordSuggestion, newPasswordInput.nextSibling);

            newPasswordInput.addEventListener('input', validateNewPassword);
            confirmPasswordInput.addEventListener('input', validateNewPassword);
        });

        function validateNewPassword(event) {
            const newPassword = event.target.value;
            const newPasswordHelp = document.getElementById('newPasswordHelp');
            const newPasswordStrengthMessage = document.getElementById('newPasswordStrengthMessage');
            updatePasswordStrength(newPassword, newPasswordHelp, newPasswordStrengthMessage);
        }

        function updatePasswordStrength(password, helpElement, strengthElement) {
            const minLength = 8;
            const hasUppercase = /[A-Z]/.test(password); // Checks for uppercase letters
            const hasLowercase = /[a-z]/.test(password); // Checks for lowercase letters
            const hasNumbers = /\d/.test(password); // Checks for numbers

            // Check if password meets all criteria
            if (password.length < minLength || !hasUppercase || !hasLowercase || !hasNumbers) {
                displayPasswordStrength('weak', strengthElement);
            } else {
                helpElement.textContent = '';
                const strength = getPasswordStrength(password);
                displayPasswordStrength(strength, strengthElement);
            }
        }

        function getPasswordStrength(password) {
            const hasUppercase = /[A-Z]/.test(password); // Checks for uppercase letters
            const hasLowercase = /[a-z]/.test(password); // Checks for lowercase letters
            const hasNumbers = /\d/.test(password); // Checks for numbers

            if (hasUppercase && hasLowercase && hasNumbers) {
                if (password.length >= 12) {
                    return 'strong'; // Password is strong if it meets criteria and is at least 12 characters long
                }
                return 'medium'; // Password is medium if it meets criteria but is less than 12 characters
            }

            return 'weak'; // Password is weak if it does not meet criteria
        }


        function displayPasswordStrength(strength, targetElement) {
            targetElement.innerHTML = '';

            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 = document.createElement('i');
            iconElement.className = iconClass;
            const textElement = document.createElement('span');
            textElement.className = textClass;
            textElement.textContent = ' ' + message;
            targetElement.appendChild(iconElement);
            targetElement.appendChild(textElement);
        }
        // Password validation method for standard pattern
        $.validator.addMethod("passwordPattern", function(value) {
            return /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/.test(value);
        }, "Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.");

        // Validation method to check if password is strong
        $.validator.addMethod("strongPassword", function(value) {
            return value.length >= 12 && /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{12,}$/.test(value);
        }, "Password is strong");

        // Validation method to check if password is weak
        $.validator.addMethod("weakPassword", function(value) {
            return value.length < 8 || !/^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9]).{8,}$/.test(value);
        }, "Password is weak");


        $(document).ready(function() {
            const togglePassword = $('#togglePassword');
            const passwordInput = $('#user_change_password_password');
            const toggleNewPassword = $('#toggleNewPassword');
            const newPasswordInput = $('#user_change_password_newPassword_first');
            const toggleConfirmPassword = $('#toggleConfirmPassword');
            const confirmPasswordInput = $('#user_change_password_newPassword_second');
            
            togglePassword.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 new password field
            toggleNewPassword.on('click', function() {
                const type = newPasswordInput.attr('type') === 'password' ? 'text' : 'password';
                newPasswordInput.attr('type', type);
                const icon = $(this).find('i');
                icon.toggleClass('ph-eye ph-eye-slash');
            });

            // Toggle password visibility for the confirm password field
            toggleConfirmPassword.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');
            });
            $('#user_change_password').validate({
                rules: {
                    'user_change_password[password]': {
                        required: true
                    },
                    'user_change_password[newPassword][first]': {
                        required: true,
                        passwordPattern: true
                    },
                    'user_change_password[newPassword][second]': {
                        required: true,
                        equalTo: '#user_change_password_newPassword_first'
                    }
                },
                messages: {
                    'user_change_password[password]': {
                        required: "Current password is required"
                    },
                    'user_change_password[newPassword][first]': {
                        required: "New password is required"
                    },
                    'user_change_password[newPassword][second]': {
                        required: "Please confirm your new password",
                        equalTo: "Passwords do not match"
                    }
                },
                submitHandler: function(form) {
                    form.submit(); // or use AJAX to submit the form
                }
            });
            $('#user_change_password').on('submit', function(e) {
                        // Check if the form is valid
                        if ($(this).valid()) {
                            Swal.fire({
                                title: 'Processing...',
                                allowOutsideClick: false,
                                didOpen: () => {
                                    Swal.showLoading();
                                }
                            });
                            this.submit();
                        }
                    });
                });       
    </script>
{% endblock %}