{% extends 'frontend/layouts/index.html.twig' %}
{% block content %}
    <div class="content d-flex justify-content-center align-items-center row" style="min-height: 80vh; overflow-y: auto;">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-body border-top">
                    <div class="row">
                        <div class="col-lg-8 offset-lg-2">
                            <div class="text-center mb-3">
                                <div class="d-inline-flex align-items-center justify-content-center mb-4 mt-2">
                                    {% if getSiteLogo() %}
                                        <img src="{{ getSiteLogo() }}" class="h-48px" alt="logo">
                                    {% endif %}
                                </div>
                                <h5 class="mb-0">Register Your Affiliate Account</h5>
                            </div>
                            {{ form_start(form, {'attr': {'id': 'become_affiliate', 'novalidate': 'novalidate'}}) }}

                            {% if user.firstname %}
                                {{ form_row(form.firstname, {'attr': {'value': user.firstname, 'readonly': 'readonly'}}) }}
                            {% endif %}
                            {% if user.lastname %}
                                {{ form_row(form.lastname, {'attr': {'value': user.lastname, 'readonly': 'readonly'}}) }}
                            {% endif %}
                            {% if user.email %}
                                {{ form_row(form.email, {'attr': {'value': user.email, 'readonly': 'readonly'}}) }}
                            {% endif %}
                            {% if user.mobileno  %}
                                {{ form_row(form.mobileno, {'attr': {'value': user.mobileno, 'readonly': 'readonly'}}) }}
                            {% endif %}
                            {% if refid %}
                                {{ form_row(form.refid, {'attr': {'value': refid, 'readonly': 'readonly'}}) }}
                            {% endif %}
                            {{ form_end(form) }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block logincontent %}
    <div class="content d-flex justify-content-center align-items-center row" style="min-height: 80vh; overflow-y: auto;">
        <div class="col-lg-5">
            <div class="card">
                <div class="card-body border-top">
                    <div class="row">
                        <div class="col-lg-8 offset-lg-2">
                            <div class="text-center mb-3">
                                <div class="d-inline-flex align-items-center justify-content-center mb-4 mt-2">
                                    {% if getSiteLogo() %}
                                        <img src="{{ getSiteLogo() }}" class="h-48px" alt="logo">
                                    {% endif %}
                                </div>
                                <h5 class="mb-0">Register Your Affiliate Account</h5>
                            </div>
                            {{ form_start(form, {'attr': {'id': 'direct_affiliate', 'novalidate': 'novalidate'}}) }}

                            {{ form_row(form.firstname) }}
                            {{ form_row(form.lastname) }}
                            {{ form_row(form.email) }}
                            {{ form_row(form.mobileno)}}
                            {% if refid %}
                                {{ form_row(form.refid, {'attr': {'value': refid, 'readonly': 'readonly'}}) }}
                            {% else %}
                                {{ form_row(form.refid) }}
                            {% endif %}
                            <div class="password-container mb-3">
                                <label class="form-label">{{ form_label(form.password.first) }}</label>
                                <div class="position-relative">
                                    {{ form_widget(form.password.first, {'attr': {'class': 'form-control', 'placeholder': '•••••••••••', 'id': 'password-input'}}) }}
                                    <div class="password_eye">
                                        <i class="ph-eye text-muted toggle-password-icon" id="togglePassword" style="cursor: pointer;"></i>
                                    </div>
                                    <div id="password-strength-text-first" class="text-danger"></div>
                                </div>
                            </div>
                            <div class="password-container mb-3">
                                <label class="form-label">{{ form_label(form.password.second) }}</label>
                                <div class="position-relative">
                                    {{ form_widget(form.password.second, {'attr': {'class': 'form-control', 'placeholder': '•••••••••••', 'id': 'confirm-password-input'}}) }}
                                    <div class="password_eye">
                                        <i class="ph-eye text-muted toggle-password-icon" id="toggleConfirmPassword" style="cursor: pointer;"></i>
                                    </div>
                                    <div id="password-strength-text-second" class="text-danger"></div>
                                </div>
                            </div>
                            <div class="form-check mb-3">
                                {#                                        {{ form_row(form.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_end(form) }}

                        </div>
                    </div>
                </div>
            </div>
        </div>      
    </div>
{% endblock %}
{% block stylesheets %}
    <style>

        .iti{
            display: block;
        }
        .iti__flag.iti__de {
            position: absolute;
            top: 12px;
        }
        .iti__country-list .iti__country {
            background-color: #444; /* Dark background for each country item */
        }
        .iti__country-list .iti__country:hover,
        .iti__country-list .iti__country:focus {
            background-color: #555; /* Slightly lighter dark background on hover/focus */
        }

        form#become_affiliate .iti__highlight {
            background: #555;
        }
        form#become_affiliate .iti__divider{
            display: none;
        }

        form#become_affiliate .iti__flag-container{
            height: 42px;
        }

        form#become_affiliate .iti {
            display: block;
        }

        .iti__country-list .iti__dial-code {
            color: #aaa; /* Light color for dial code */
        }

        .iti__country-list .iti__country-name {
            color: #fff; /* Light color for country name */
        }

        .iti__country-list .iti__preferred {
            background-color: #444; /* Dark background for preferred countries */
        }
        .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 */
        }
        .rc-anchor-normal{
            border: none !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 becomeAffiliateForm = document.querySelector('#become_affiliate'); // Use the form ID or class
            const directAffiliateForm = document.querySelector('#direct_affiliate');

            function initializeFormHandlers(form) {
                if (!form)
                    return;
                const inputs = form.querySelectorAll('input[required], textarea[required], select[required]');

                const password = form.querySelector('input[name="affiliate_registration_form[password][first]"]');
                const confirmPassword = form.querySelector('input[name="affiliate_registration_form[password][second]"]');
                const mobileInput = form.querySelector('.intl-tel-input');
                const passwordStrengthText = document.createElement('div');
                passwordStrengthText.className = 'password-strength-text';
                if (password)
                    password.parentNode.insertBefore(passwordStrengthText, password.nextSibling);

                // Initialize intl-tel-input
                const iti = window.intlTelInput(mobileInput, {
                    initialCountry: "DE",
                    geoIpLookup: function (callback) {
                        fetch('https://ipinfo.io/json', {headers: {'Accept': 'application/json'}})
                                .then(resp => resp.json())
                                .then(resp => {
                                    const countryCode = (resp && resp.country) ? resp.country : 'us';
                                    callback(countryCode);
                                })
                                .catch(() => {
                                    callback('us');
                                });
                    },
                    utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"

                });

                function initializeMobileInput() {
                    if (!mobileInput.value) {
                        const initialCountryData = iti.getSelectedCountryData();
                        mobileInput.value = `+${initialCountryData.dialCode}`;
                    } else {
                        iti.setNumber(mobileInput.value);
                    }
                }
                initializeMobileInput();


                // Add event listener for country change
                mobileInput.addEventListener('countrychange', function () {
                    const countryData = iti.getSelectedCountryData();
                    const dialCode = countryData.dialCode;
                    if (dialCode != undefined) {
                        mobileInput.value = `+${dialCode}${input.value.replace(/^\+?\d{1,4}/, '')}`;
                    }
                });

                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);
                            clearError(confirmPassword);
                        }

                        // Validate mobile number
                        if (!iti.isValidNumber()) {
                            valid = false;
                            const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
                            const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                            showError(mobileInput, errorMessage);
                        } else {
                            clearError(mobileInput);
                            mobileInput.value = iti.getNumber();
                        }

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

                    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.');
                        updatePasswordStrength('weak');
                    } else {
                        clearError(password);
                        updatePasswordStrength('strong');
                    }

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

                function handlePasswordInput() {
                    const strength = getPasswordStrength(password.value);
                    updatePasswordStrength(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);
                    }
                }

                if (password) {
                    password.addEventListener('input', handlePasswordInput);
                    password.addEventListener('keypress', handlePasswordInput);

                    confirmPassword.addEventListener('input', function () {
                        if (password.value !== confirmPassword.value) {
                            showError(confirmPassword, 'Passwords do not match');
                        } else {
                            clearError(confirmPassword);
                            // Validate mobile number on blur
                            mobileInput.addEventListener('blur', function () {
                                if (!iti.isValidNumber()) {
                                    const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
                                    const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                                    showError(mobileInput, errorMessage);
                                } else {
                                    clearError(mobileInput);
                                }
                            });

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

                function getPasswordStrength(password) {
                    if (password.length < 8) {
                        return 'weak';
                    }
                    const hasLetters = /[a-zA-Z]/.test(password);
                    const hasNumbers = /\d/.test(password);
                    const hasSpecialChars = /[!@#$%^&*(),.?":{}|<>]/.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 updatePasswordStrength(strength) {
                    passwordStrengthText.innerHTML = '';
                    passwordStrengthText.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';
                            passwordStrengthText.classList.add('strength-weak');
                            break;
                        case 'medium':
                            message = 'Meduim Password';
                            iconClass = 'fas fa-exclamation-circle text-danger';
                            textClass = 'text-danger';
                            passwordStrengthText.classList.add('strength-medium');
                            break;
                        case 'strong':
                            message = 'Strong Password';
                            color = 'text-success';
                            iconClass = 'fas fa-check-circle text-success';
                            textClass = 'text-success';
                            passwordStrengthText.classList.add('strength-strong');
                            break;
                    }
                    passwordStrengthText.classList.add(textClass);

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

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

                    passwordStrengthText.appendChild(iconElement);
                    passwordStrengthText.appendChild(textElement);
                }

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

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

            // Initialize handlers for both forms
            initializeFormHandlers(becomeAffiliateForm);
            initializeFormHandlers(directAffiliateForm);
        });

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

            // Toggle password visibility for the second password field
            $('#toggleConfirmPassword').on('click', function () {
                const passwordInput = $('#affiliate_registration_form_password_second');
                const type = passwordInput.attr('type') === 'password' ? 'text' : 'password';
                passwordInput.attr('type', type);
                $(this).toggleClass('ph-eye ph-eye-slash');
            });
        });
    </script>
{% endblock %}