<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.6.0/build/css/intlTelInput.css">
<style>
    .iti {
        width: 100%;
    }

    .iti__country-container {
        z-index: 40;
    }

    .iti__selected-country-primary {
        height: 100%;
        padding: 0 0.85rem 0 0.95rem;
        border-radius: 12px 0 0 12px;
    }

    .iti input[data-phone-input] {
        padding-left: 104px !important;
    }

    .iti--separate-dial-code .iti__selected-dial-code {
        color: #334155;
        font-weight: 600;
        margin-left: 0.35rem;
    }

    .iti__arrow {
        margin-left: 0.4rem;
        border-top-color: #64748b;
    }

    .iti__country-list {
        border: 1px solid #dbe2ea;
        border-radius: 16px;
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.16);
        margin-top: 10px;
    }
</style>

<script>
(() => {
    const instances = new WeakMap();
    let libraryPromise = null;

    function loadLibrary() {
        if (window.intlTelInput) return Promise.resolve(window.intlTelInput);
        if (libraryPromise) return libraryPromise;

        libraryPromise = new Promise((resolve, reject) => {
            const script = document.createElement('script');
            script.src = 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.6.0/build/js/intlTelInput.min.js';
            script.async = true;
            script.onload = () => resolve(window.intlTelInput);
            script.onerror = reject;
            document.head.appendChild(script);
        });

        return libraryPromise;
    }

    function normalizeFallbackInternational(rawPhone) {
        const raw = (rawPhone || '').trim();
        if (!raw) return null;

        let compact = raw.replace(/[^\d+]/g, '');
        if (compact.startsWith('00')) compact = '+' + compact.slice(2);

        if (/^\+\d{8,15}$/.test(compact)) return compact;
        if (/^8801\d{9}$/.test(compact)) return '+' + compact;
        if (/^01\d{9}$/.test(compact)) return '+88' + compact;
        if (/^1\d{9}$/.test(compact)) return '+880' + compact;

        return null;
    }

    async function initInput(input) {
        if (!input || instances.has(input)) return instances.get(input) || null;

        try {
            await loadLibrary();
        } catch (error) {
            return null;
        }

        if (!window.intlTelInput) return null;

        const instance = window.intlTelInput(input, {
            initialCountry: input.dataset.initialCountry || 'bd',
            preferredCountries: ['bd', 'in', 'pk', 'my', 'sg', 'ae', 'gb', 'us', 'ca', 'au'],
            separateDialCode: true,
            nationalMode: true,
            autoPlaceholder: 'aggressive',
            utilsScript: 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.6.0/build/js/utils.js',
        });

        instances.set(input, instance);

        const form = input.closest('form');
        if (form && !form.dataset.phoneFieldBound) {
            form.dataset.phoneFieldBound = '1';
            form.addEventListener('submit', () => {
                const phoneFields = form.querySelectorAll('[data-phone-input]');
                phoneFields.forEach((field) => {
                    const normalized = getValue(field);
                    if (normalized) field.value = normalized;
                });
            });
        }

        if (input.value) {
            setTimeout(() => {
                const normalized = normalizeFallbackInternational(input.value);
                if (normalized) {
                    instance.setNumber(normalized);
                }
            }, 0);
        }

        return instance;
    }

    function getInstance(input) {
        return input ? instances.get(input) || null : null;
    }

    function getValue(input) {
        if (!input) return null;

        const instance = getInstance(input);
        if (instance) {
            const number = instance.getNumber();
            if (instance.isValidNumber() && /^\+\d{8,15}$/.test(number)) {
                return number;
            }
        }

        return normalizeFallbackInternational(input.value);
    }

    function validate(input) {
        return !!getValue(input);
    }

    function setValue(input, value) {
        if (!input) return;

        const instance = getInstance(input);
        const normalized = normalizeFallbackInternational(value);
        if (instance && normalized) {
            instance.setNumber(normalized);
            return;
        }

        input.value = value || '';
    }

    function initAll(root = document) {
        root.querySelectorAll('[data-phone-input]').forEach((input) => {
            initInput(input);
        });
    }

    window.PhoneFieldEnhancer = {
        initAll,
        initInput,
        getValue,
        setValue,
        validate,
        normalizeFallbackInternational,
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => initAll());
    } else {
        initAll();
    }
})();
</script>
<?php /**PATH C:\xampp\htdocs\gps-migration\resources\views/partials/public-phone-inputs.blade.php ENDPATH**/ ?>