@props([
    'value' => '',
    'fallback' => '—',
    'flag' => true,
])
@php $digits = preg_replace('/\D/', '', (string) $value); @endphp

<span data-phone-display="{{ $digits }}"
      data-fallback="{{ $fallback }}"
      data-flag="{{ $flag ? '1' : '0' }}"
      {{ $attributes }}>{{ $digits ? ('+' . $digits) : $fallback }}</span>

@once
@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
<script>
    window.PhoneDisplay = (function () {
        const UTILS = 'https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js';
        let helperIti = null;

        function ensureHelper() {
            if (helperIti || typeof window.intlTelInput !== 'function') return;
            const input = document.createElement('input');
            input.type = 'tel';
            input.setAttribute('aria-hidden', 'true');
            input.style.cssText = 'position:absolute;left:-9999px;width:1px;height:1px;opacity:0;';
            document.body.appendChild(input);
            helperIti = window.intlTelInput(input, { utilsScript: UTILS });
        }

        function flagEmoji(iso) {
            if (!iso || iso.length !== 2) return '';
            return iso.toUpperCase().replace(/./g, function (c) {
                return String.fromCodePoint(127397 + c.charCodeAt(0));
            });
        }

        // Formatea dígitos E.164 (con código de país) al formato internacional del país.
        function format(digits, withFlag) {
            digits = String(digits || '').replace(/\D/g, '');
            if (!digits) return '';
            ensureHelper();
            if (helperIti && window.intlTelInput && intlTelInput.utils) {
                helperIti.setNumber('+' + digits);
                const intl = helperIti.getNumber(intlTelInput.utils.numberFormat.INTERNATIONAL) || ('+' + digits);
                if (withFlag) {
                    const iso  = (helperIti.getSelectedCountryData() || {}).iso2;
                    const flag = flagEmoji(iso);
                    return flag ? (flag + ' ' + intl) : intl;
                }
                return intl;
            }
            return '+' + digits;
        }

        function renderAll() {
            const nodes = document.querySelectorAll('[data-phone-display]');
            if (!nodes.length) return;
            ensureHelper(); // dispara la carga de utils.js
            nodes.forEach(function (el) {
                const digits   = (el.getAttribute('data-phone-display') || '').replace(/\D/g, '');
                const fallback = el.getAttribute('data-fallback') || '—';
                const withFlag = el.getAttribute('data-flag') !== '0';
                if (!digits) { el.textContent = fallback; return; }

                const paint = function () { el.textContent = format(digits, withFlag); };
                if (window.intlTelInput && intlTelInput.utils) { paint(); return; }
                let n = 0;
                const t = setInterval(function () {
                    if (window.intlTelInput && intlTelInput.utils) { paint(); clearInterval(t); }
                    else if (++n > 30) { el.textContent = '+' + digits; clearInterval(t); }
                }, 100);
            });
        }

        document.addEventListener('DOMContentLoaded', renderAll);

        return { format: format, renderAll: renderAll };
    })();
</script>
@endpush
@endonce