@push('js')
@php $countryCode = getCountryCode() ; @endphp
    <script src="{{ asset('vendors/intl-tel-input/js/intlTelInput.js') }}"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function() {

            var input = document.querySelector("#phone") || document.querySelector("#address_phone") ;
            if (!input) {
                return;
            }
            window.formSubmit = false ;

            function normalizePhoneDigits(value) {
                var v = (value || '').toString();
                var out = '';
                for (var i = 0; i < v.length; i++) {
                    var code = v.charCodeAt(i);
                    if (code >= 48 && code <= 57) {
                        out += v[i];
                        continue;
                    }
                    if (code >= 0x0660 && code <= 0x0669) {
                        out += String(code - 0x0660);
                        continue;
                    }
                    if (code >= 0x06F0 && code <= 0x06F9) {
                        out += String(code - 0x06F0);
                        continue;
                    }
                }
                return out;
            }

            var options = {
                separateDialCode: true,
                nationalMode: true,
                hiddenInput: "full_phone",
                autoPlaceholder: "off",
                formatOnDisplay: false,
                utilsScript: "{{ asset('vendors/intl-tel-input/js/utils.js') }}",
            };

            @if(isset($account) && isset($account->accounts_multiple_countries) && $account->accounts_multiple_countries == 0)
                // Single Country Mode
                options.onlyCountries = ["{{ strtolower($account->accounts_country ?? '') }}"];
                options.initialCountry = "{{ strtolower($account->accounts_country ?? '') }}";
                options.allowDropdown = false;
            @elseif(!empty($allowed_countries))
                // Selected Countries Mode: only the countries chosen for this account
                options.onlyCountries = @json(array_values((array) $allowed_countries));
                options.initialCountry = @json(in_array(strtolower($account->accounts_country ?? ''), (array) $allowed_countries) ? strtolower($account->accounts_country) : array_values((array) $allowed_countries)[0]);
            @else
                // Multiple Countries Mode (Default)
                options.preferredCountries = ['eg','sa','ae','qa','ps','pk','om','ma','kw','dz','bh','iq','jo','tr','ye','ly'];
                options.excludeCountries = ["il"];
                options.initialCountry = "{{ isset($countryCode) ? $countryCode : 'auto' }}";
                options.geoIpLookup = function(callback) {
                    fetch("https://ipapi.co/json")
                    .then(res => res.json())
                    .then(data => callback(data.country_code))
                    .catch(() => callback("us"));
                };
            @endif

            var iti = window.intlTelInput(input, options);
            window.itiPhoneInput = iti;

            // Initialize for clientsphone (Step 3) if it exists
            var clientsInput = document.querySelector("#clientsphone");
            var itiClients;
            if(clientsInput) {
                var clientsOptions = Object.assign({}, options);
                clientsOptions.allowDropdown = false; // Disable dropdown for display only
                itiClients = window.intlTelInput(clientsInput, clientsOptions);
            }

            errorMsg = document.querySelector("#error-msg"),
            validMsg = document.querySelector("#valid-msg");
            // here, the index maps to the error code returned from getValidationError - see readme
            var errorMap = ["{{ __('lang.InvalidNumber') }}", "{{ __('lang.InvalidCountryCode') }}", "{{ __('lang.TooShort') }}", "{{ __('lang.TooLong') }}", "{{ __('lang.InvalidNumber') }} "];

            // initialise plugin


            var reset = function() {
                input.classList.remove("error");
                errorMsg.innerHTML = "";
                errorMsg.classList.add("hidden");
                validMsg.classList.add("hidden");
                window.formSubmit = false ;
                invalidFeedback = document.querySelector('.mobile-dev .invalid-feedback')
                if(invalidFeedback != undefined){
                    invalidFeedback.remove()
                }
            };

            window.validatePhoneInput = function (){
                reset();
                if (input.value.trim()) {
                    if (iti.isValidNumber()) {
                        validMsg.classList.remove("hidden");
                        window.formSubmit = true ;
                    } else {
                        input.classList.add("error");
                        var errorCode = iti.getValidationError();
                        errorMsg.innerHTML = errorMap[errorCode] ?? "{{ __('lang.InvalidNumber') }}";
                        errorMsg.classList.remove("hidden");
                        window.formSubmit = false ;
                    }
                }
                // else{
                //     errorMsg.innerHTML = "{{ __('validation.required',['attribute' => __('lang.phone')]) }}";
                //     errorMsg.classList.remove("hidden");
                // }
                return  window.formSubmit ;
            }

            // on blur: validate
            input.addEventListener('blur', function (){ window.validatePhoneInput();});

            //to make number format (عرض الرقم للمستخدم بدون كود الدولة ولا مسافات)
            input.addEventListener('input', function () {
                let number = input.value || '';

                // إزالة أي علامة + في البداية (لو المستخدم كتبها)
                number = number.replace(/^\+/, '');

                // إزالة المسافات
                number = number.replace(/\s+/g, '');

                number = normalizePhoneDigits(number);

                // إزالة الأصفار في البداية
                number = number.replace(/^0+/, '');

                input.value = number;

                @if(isset($coutryCodeField) && $coutryCodeField != '')
                    let nationalNumber = '';
                    if (window.intlTelInputUtils) {
                        nationalNumber = iti.getNumber(window.intlTelInputUtils.numberFormat.NATIONAL);
                    } else {
                        nationalNumber = input.value;
                    }

                    nationalNumber = normalizePhoneDigits(nationalNumber);

                    // إزالة أول صفر (leading zero) إن وجد
                    nationalNumber = nationalNumber.replace(/^0+/, '');
                    // alert(nationalNumber);
                    // حفظه في hidden input
                    document.getElementById('full_phone').value = nationalNumber;

                    // الكود الدولي (+20 مثلاً)
                    const dialCode = "+" + iti.getSelectedCountryData().dialCode;
                    document.getElementById('{{ $coutryCodeField }}').value = dialCode;

                @else
                    const fullNumber = iti.getNumber();
                    document.getElementById('full_phone').value = fullNumber;
                @endif
            });

            // on keyup / change flag: reset
            input.addEventListener('change', reset);
            input.addEventListener('keyup', reset);

            const form = document.querySelector("#formSubmit");

            // form.addEventListener('submit', function(e) {


            // });

            if (form) {
                form.addEventListener("submit", function(e){
                    validatePhoneInput()

                    if(formSubmit == false){
                        e.preventDefault();
                    }
                });
            }
        })

    </script>
@endpush

@push('css')
    <link rel="stylesheet" href="{{ asset('vendors/intl-tel-input/css/intlTelInput.css') }}">
    <style>
        #phone{
            direction: ltr;
        }
        .iti {
            display: block;
        }
        .hidden{
            display: none;
        }
        .spinner-img {
            display: inline-block;
            vertical-align: middle;
            animation: spin 1s linear infinite;
        }
        .iti__country-list{
            z-index: 100 !important;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

    </style>
@endpush