{% extends 'frontend/layouts/index.html.twig' %}
{% block stylesheets %}
    <style>
        .password-container {
            position: relative;
        }

        .form-control-feedback-icon {
            position: absolute !important;
            right: 10px;
            top: 70%; /* Center vertically */
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 10;
        }

        .password-strength {
            margin-top: 10px; /* Adjust as needed */
        }

        .showerror-eye{
            margin-top:-13px;
        }
    </style>
{% endblock %}{% block logincontent %}
    <div class="page-content ">
        <div class="content-wrapper">
            <div class="content-inner">
                <div class="content d-flex justify-content-center align-items-center">
                    <div class="col-md-2 col-lg-3"> <!-- Adjust column width using Bootstrap classes -->
                        {{ form_start(signupForm, {'attr': {'id': 'signup_form', 'novalidate': 'novalidate'}}) }}
                        <div class="login-form">
                            <div class="card mb-0">
                                <div class="card-body">
                                    {% include 'helper/messages.html.twig' %}
                                    <div class="text-center mb-3">
                                        <div class="d-inline-flex align-items-center justify-content-center">
                                            {% if getSiteLogo() %}
                                                <img src="{{ getSiteLogo() }}" class="h-48px" alt="logo">
                                            {% endif %}
                                        </div>
                                        <h5 class="mb-0">Signup To Your Account</h5>
                                    </div>
                                    {{ form_row(signupForm.firstname,{'label' : 'First Name'}) }}
                                    {{ form_row(signupForm.lastname,{'label' : 'Last Name'}) }}
                                    {{ form_row(signupForm.email) }}
                                    <div class="password-container mb-3">
                                        <label class="form-label">Password</label>
                                        <div class="position-relative">
                                            {{ form_widget(signupForm.password.first, {'attr': {'placeholder': '•••••••••••'}}) }}
                                            <div class="password_eye">
                                                <i class="ph-eye text-muted" id="togglePassword" style="cursor: pointer;"></i>
                                            </div>
                                            <div id="passwordStrengthMessage" class="password-strength"></div>
                                        </div>
                                    </div>
                                    <div class="password-container mb-3">
                                        <label class="form-label">Confirm Password</label>
                                        <div class="position-relative">
                                            {{ form_widget(signupForm.password.second, {'attr': {'placeholder': '•••••••••••', 'id': 'inputConfirmPassword'}}) }}
                                            <div class="password_eye">
                                                <i class="ph-eye text-muted" id="toggleConfirmPassword" style="cursor: pointer;"></i>
                                            </div>
                                            <div id="confirmPasswordMessage" class="password-strength"></div>
                                        </div>
                                    </div>
                                    <div class="form-check mb-3">
                                        {#                                        {{ form_row(signupForm.recaptcha) }}#}
                                        <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}"></div>
                                    </div>
                                    <div class="form-check mb-3">
                                        <input type="checkbox" class="form-check-input" id="termsCheckbox" name="terms">
                                        <label class="form-check-label" for="termsCheckbox">
                                            I agree to the <a href="{{ termUrl }}">terms to conditions</a> and
                                            <a href="{{ privacyUrl }}">privacy policy</a>.
                                        </label>
                                        <div class="text-danger mt-2" id="termsError" style="display: none;">
                                            Please tick this box if you want to proceed.
                                        </div>
                                    </div>
                                    {{ form_row(signupForm.submit) }}
                                    <div class="text-center mb-2">
                                        You already have an account?
                                        <a href="{{ path('app_front_login') }}">Login</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        {{ form_end(signupForm) }}
                    </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 */
        }
        iframe {
            background-color: #2c2d33 !important;
        }
    </style>
{% endblock %}
{% block javascripts %}
    <script src="https://www.google.com/recaptcha/api.js?hl={{ recaptcha_lang|default('en') }}" async defer></script>
    <script src="{{ asset('admin/js/jquery/jquery.validate.min.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.querySelector('#signup_form');
            const inputs = form.querySelectorAll('input[required]');
            const password = form.querySelector('input[name="signup[password][first]"]');
            const confirmPassword = form.querySelector('input[name="signup[password][second]"]');
            const togglePassword = document.getElementById('togglePassword');
            const passwordInput = document.getElementById('signup_password_first');
            const toggleConfirmPassword = document.getElementById('toggleConfirmPassword');
            const confirmPasswordInput = document.getElementById('signup_password_second');
            // const passwordStrengthMessage = document.querySelector('#passwordStrengthMessage');
            // const confirmPasswordMessage = document.querySelector('#confirmPasswordMessage');
            const passwordStrengthMessage = document.createElement('div');
            passwordStrengthMessage.className = 'passwordStrengthMessage';
            password.parentNode.insertBefore(passwordStrengthMessage, password.nextSibling);

            togglePassword.addEventListener('click', function () {
                // Toggle the type attribute
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);

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

            toggleConfirmPassword.addEventListener('click', function () {
                // Toggle the type attribute for confirm password field
                const type = confirmPasswordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                confirmPasswordInput.setAttribute('type', type);

                // Toggle the eye icon
                this.classList.toggle('ph-eye-slash');
            });
            form.addEventListener('submit', function (event) {
                let valid = true;
                const termsCheckbox = document.getElementById('termsCheckbox');
                const termsError = document.getElementById('termsError');

                if (!termsCheckbox.checked) {
                    valid = false;
                    termsError.style.display = 'block';
                } else {
                    termsError.style.display = 'none';
                }

                inputs.forEach(function (input) {
                    if (!input.checkValidity()) {
                        valid = false;
                        showError(input, input.validationMessage);
                    } else {
                        clearError(input);
                    }
                });

                if (!validatePassword(password.value)) {
                    valid = false;
                    showError(password, 'Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.');
                } else {
                    clearError(password);
                }

                if (password.value !== confirmPassword.value) {
                    valid = false;
                    showError(confirmPassword, 'Passwords do not match');
                } else {
                    clearError(confirmPassword);
                }

                if (!valid) {
                    event.preventDefault();
                    event.stopPropagation();
                }
            });

            inputs.forEach(function (input) {
                input.addEventListener('input', function () {
                    if (input.checkValidity()) {
                        clearError(input);
                    } else {
                        showError(input, input.validationMessage);
                    }
                });
            });

            password.addEventListener('input', function () {
                const strength = getPasswordStrength(password.value);
                displayPasswordStrength(strength);
                if (password.value.trim() !== '') {
                    if (!validatePassword(password.value)) {
                        showError(password, 'Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, and one number.');
                    } else {
                        clearError(password);
                    }
                } else {
                    clearError(password);
                }
            });

            confirmPassword.addEventListener('input', function () {
                if (password.value !== confirmPassword.value) {
                    showError(confirmPassword, 'Passwords do not match');
                } else {
                    clearError(confirmPassword);
                }
            });

            function validatePassword(password) {
                const minLength = 8;
                const hasUppercase = /[A-Z]/.test(password);
                const hasLowercase = /[a-z]/.test(password);
                const hasNumbers = /\d/.test(password);
                return password.length >= minLength && hasLowercase && hasNumbers && hasUppercase;
            }

            function showError(input, message) {
                let error = input.nextElementSibling;
                if (!error || !error.classList.contains('error-message')) {
                    error = document.createElement('div');
                    error.className = 'error-message text-danger';
                    input.parentNode.insertBefore(error, input.nextSibling);
                }
                error.textContent = message;
            }

            function clearError(input) {
                let error = input.nextElementSibling;
                if (error && error.classList.contains('error-message')) {
                    error.parentNode.removeChild(error);
                }
            }

            function getPasswordStrength(password) {
                if (password.length < 8) {
                    return 'weak';
                }
                const hasLetters = /[a-zA-Z]/.test(password);
                const hasNumbers = /\d/.test(password);
                // Determine strength based on the presence of letters and numbers
                if (hasLetters && hasNumbers) {
                    return 'strong';
                }
                if (hasLetters || hasNumbers) {
                    return 'medium';
                }
                return 'weak';
            }

            function displayPasswordStrength(strength) {
                passwordStrengthMessage.innerHTML = '';
                passwordStrengthMessage.classList.remove('strength-weak', 'strength-medium', 'strength-strong');

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

                switch (strength) {
                    case 'weak':
                        message = 'Weak Password';
                        iconClass = 'fas fa-exclamation-circle text-danger';
                        textClass = 'text-danger';
                        passwordStrengthMessage.classList.add('strength-weak');
                        break;
                    case 'medium':
                        message = 'Meduim Password';
                        iconClass = 'fas fa-exclamation-circle text-danger';
                        textClass = 'text-danger';
                        passwordStrengthMessage.classList.add('strength-medium');
                        break;
                    case 'strong':
                        message = 'Strong Password';
                        color = 'text-success';
                        iconClass = 'fas fa-check-circle text-success';
                        textClass = 'text-success';
                        passwordStrengthMessage.classList.add('strength-strong');
                        break;
                }
                passwordStrengthMessage.classList.add(textClass);

                const iconElement = document.createElement('i');
                iconElement.className = iconClass;

                const textElement = document.createElement('span');
                textElement.className = textClass;
                textElement.textContent = ' ' + message;

                passwordStrengthMessage.appendChild(iconElement);
                passwordStrengthMessage.appendChild(textElement);
            }
        });
        $(document).ready(function () {
            const togglePasswordFirst = $('#togglePasswordFirst');
            const passwordInputFirst = $('#signup_password_first');
            const togglePasswordSecond = $('#togglePasswordSecond');
            const passwordInputSecond = $('#signup_password_second');

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

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


    </script>

{% endblock %}