{% extends 'admin/layouts/base.html.twig' %}
{% set active = 'cp_admin' %}
{% set breadcrumbs = [
    {
        'link': path('app_admin_dashboard'), 'title': 'Home'
    },
    {
        'title': 'User Management',
    },
    {
        'link': path('app_admin_users'), 'title': 'Users',
    },
    {
        'title': 'New'
    }
]%}

{% block content %}
    {{ include('admin/users/_form.html.twig') }}
{% endblock %}

{% block javascripts %}
    <script>
        $(document).ready(function() {
            $('#users_country').change(function() {
                var countryId = $(this).val();
                let userStateUrl = "{{ path('get_states', {countryId: '_countryId'}) }}";
                userStateUrl = userStateUrl.replace('_countryId', countryId);
                $.ajax({
{#                    url: '/admin/users/get-states/' + countryId,#}
                    url: userStateUrl,
                    type: 'GET',
                    success: function(data) {
                        $('#users_state').empty();
                        $.each(data, function(key, value) {
                            $('#users_state').append($('<option>').text(value).attr('value', key));
                        });
                    }
                });
            });
        });

        document.addEventListener('DOMContentLoaded', function() {
            const input = document.querySelector('.intl-tel-input');
            const iti = window.intlTelInput(input, {
                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"
            });

            const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

            // Set the initial country dial code in the input field if it's empty
            if (!input.value) {
                const initialCountryData = iti.getSelectedCountryData();
                input.value = `+${initialCountryData.dialCode}`;
            } else {
                iti.setNumber(input.value);
            }

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

            // Add custom validation on form submit
            const form = input.closest('form');
            form.addEventListener('submit', function(event) {
                if (!iti.isValidNumber()) {
                    event.preventDefault();
                    const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                    showError(input, errorMessage);
                }
            });

            // Ensure the input is formatted correctly on load if it has a value
            if (input.value) {
                iti.setNumber(input.value);
            }

            // Add validation on input change
            input.addEventListener('blur', function() {
                if (!iti.isValidNumber()) {
                    const errorMessage = iti.getValidationError() !== -1 ? errorMap[iti.getValidationError()] : "Invalid number";
                    showError(input, errorMessage);
                } else {
                    clearError(input);
                }
            });

            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);
                }
            }
        });
    </script>
{% endblock %}