{% extends 'frontend/layouts/index.html.twig' %}
{% set active = 'app_front_dashboard' %}
{% set breadcrumbs = [
    {
        'link': path('app_front_dashboard'), 'title': 'Home'
    },
    {
        'title': isProfile ? 'Update profile' : 'Edit'
    }
]%}
{% block title %}{{ title }}{% endblock %}
{% block content %}
    {{ include('admin/users/_form.html.twig', {'submit_button_label': 'Update'}) }}
{% endblock %}
{% block javascripts %}
    <script>
        $(document).ready(function() {
            $('#users_country').change(function() {
                var countryId = $(this).val();
                console.log(countryId);
                if(countryId){
                    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();
                            var stateExists = false;

                            $.each(data, function(key, value) {
                                $('#users_state').append($('<option>').text(value).attr('value', key));
                                if (key == selectedState) {
                                    stateExists = true;
                                }
                            });

                            // If the previously selected state exists in the new data, select it again
                            if (stateExists) {
                                $('#users_state').val(selectedState);
                                $('#users_state').select2({
                                    minimumResultsForSearch: 1,
                                    placeholder: "Select State"
                                });
                            }
                        }
                    });
                }else{
                    // Reset the state dropdown if no country is selected
                    $('#users_state').select2('destroy'); // Destroy current select2 instance
                    $('#users_state').empty(); // Clear options
                    $('#users_state').append($('<option>').text('Select State').attr('value', '')); // Add placeholder option
                    // Reinitialize select2 with placeholder
                    $('#users_state').select2({
                        minimumResultsForSearch: 1,
                        placeholder: "Select State"
                    });
                }
            });
            $('#update_profile').on('submit', function(e) {
            if ($(this).valid()) {
                Swal.fire({
                    title: 'Processing...',
                    allowOutsideClick: false,
                    didOpen: () => {
                        Swal.showLoading();
                    }
                });
                this.submit();
            }
        });
        });
        document.addEventListener('DOMContentLoaded', function() {
            const input = document.querySelector('.intl-tel-input');
            const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
            
            const iti = window.intlTelInput(input, {
                initialCountry: "auto",
                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 (input.value) {
                    iti.setNumber(input.value); // Set the full number including the country code
                } else {
                    const initialCountryData = iti.getSelectedCountryData();
                    input.value = `+${initialCountryData.dialCode}`;
                }
                console.log("Phone number input initialized with value:", input.value);
            }

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

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