@props([
    'id' => 'phone',
    'name' => 'phone',
    'placeholder' => __('Seu Telefone / WhatsApp'),
    'required' => true,
    'value' => '',
    'inputClass' => 'w-full px-4 py-3 bg-white/5 border border-white/10 rounded-xl text-white outline-none focus:border-brand-green/60 transition-colors font-sans text-sm',
])

<input type="tel"
       id="{{ $id }}"
       name="{{ $name }}"
       value="{{ $value }}"
       placeholder="{{ $placeholder }}"
       {{ $required ? 'required' : '' }}
       class="phone-input-field {{ $inputClass }} @error($name) border-red-500/60 @enderror"
       {{ $attributes->except('class') }}>

@once
@push('styles')
    <!-- intl-tel-input CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/css/intlTelInput.css">
    <style>
        /* Contenedor general */
        .iti {
            width: 100%;
        }

        /* El diseño del input (fondo, borde, radio) lo controlan las clases Tailwind
           vía la prop input-class, para que combine con cada vista. */

        /* Wrapper del menú desplegable (v23) para combinar con el tema Lined */
        .iti__dropdown-content {
            background-color: #0a0a0a !important;
            border: 1px solid rgba(255, 255, 255, 0.12) !important;
            border-radius: 16px !important;
            box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7) !important;
            padding: 8px !important;
        }

        /* Elemento de país individual */
        .iti__country {
            border-radius: 8px !important;
            padding: 10px 12px !important;
            color: rgba(255, 255, 255, 0.85) !important;
            font-family: 'DM Sans', sans-serif !important;
            transition: background-color 0.15s ease, color 0.15s ease !important;
        }

        .iti__country:hover, .iti__country.iti__highlight {
            background-color: rgba(34, 197, 94, 0.12) !important;
            color: #ffffff !important;
        }

        .iti__country-name {
            font-size: 0.825rem !important;
            font-weight: 500 !important;
        }

        .iti__dial-code {
            font-size: 0.8rem !important;
            color: rgba(255, 255, 255, 0.45) !important;
        }

        /* Input de búsqueda interno en el dropdown de intl-tel-input */
        .iti__search-input {
            background-color: rgba(255, 255, 255, 0.05) !important;
            border: 1px solid rgba(255, 255, 255, 0.1) !important;
            color: #ffffff !important;
            border-radius: 10px !important;
            padding: 8px 12px !important;
            font-size: 0.825rem !important;
            margin-bottom: 6px !important;
        }

        .iti__search-input:focus {
            border-color: rgba(34, 197, 94, 0.5) !important;
            outline: none !important;
        }
    </style>
@endpush
@endonce

@once
@push('scripts')
    <!-- intl-tel-input JS -->
    <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/intlTelInput.min.js"></script>
    <script>
        // Global initialization function so dynamic views can call it if needed
        window.initializeAllPhoneInputs = function() {
            const phoneInputs = document.querySelectorAll(".phone-input-field");
            if (!window.intlTelInput) return;

            phoneInputs.forEach(phoneInput => {
                // Skip if already initialized
                if (phoneInput.iti) return;

                const iti = window.intlTelInput(phoneInput, {
                    initialCountry: "br",
                    separateDialCode: true,
                    dropdownContainer: document.body,
                    utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@23.0.12/build/js/utils.js"
                });

                // Save instance directly on the element for easy access
                phoneInput.iti = iti;

                // Setter programático (edición / prellenado) sin disparar el "clear" de countrychange
                let skipClear = false;
                phoneInput.itiSetNumber = function (raw) {
                    raw = String(raw || '').replace(/\D/g, '');
                    if (!raw) return;
                    const val = '+' + raw;
                    const doSet = function () { skipClear = true; iti.setNumber(val); skipClear = false; };
                    if (window.intlTelInput && intlTelInput.utils) { doSet(); return; }
                    let n = 0;
                    const t = setInterval(function () {
                        if (window.intlTelInput && intlTelInput.utils) { doSet(); clearInterval(t); }
                        else if (++n > 30) { doSet(); clearInterval(t); }
                    }, 100);
                };

                let currentMaxDigits = 15; // default dynamic fallback

                const updateMaxDigits = () => {
                    if (!(window.intlTelInput && intlTelInput.utils)) return;
                    const iso   = iti.getSelectedCountryData().iso2;
                    const types = intlTelInput.utils.numberType || {};
                    // getExampleNumber(iso, national, numberType) → cadena en formato nacional.
                    // Máximo entre móvil y fijo: en Brasil el móvil (11 díg.) es más largo que el fijo (10).
                    let max = 0;
                    [types.MOBILE, types.FIXED_LINE].forEach(function (t) {
                        const ex = (t === undefined) ? null : intlTelInput.utils.getExampleNumber(iso, true, t);
                        if (ex) max = Math.max(max, ex.replace(/\D/g, '').length);
                    });
                    if (max) currentMaxDigits = max;
                };

                // Poll dynamically to detect when utils.js finishes loading internally
                let utilsCheckInterval = setInterval(() => {
                    if (window.intlTelInput && intlTelInput.utils) {
                        updateMaxDigits();
                        clearInterval(utilsCheckInterval);
                    }
                }, 100);
                setTimeout(() => clearInterval(utilsCheckInterval), 10000); // safety timeout

                // Clear value and update max digits on country change (salvo prellenado por código)
                phoneInput.addEventListener('countrychange', () => {
                    if (!skipClear) phoneInput.value = '';
                    updateMaxDigits();
                });

                // Formateo nacional dinámico según el país seleccionado
                phoneInput.addEventListener('input', () => {
                    const countryData = iti.getSelectedCountryData();
                    let cleaned = phoneInput.value.replace(/\D/g, '');

                    if (currentMaxDigits > 0 && cleaned.length > currentMaxDigits) {
                        cleaned = cleaned.substring(0, currentMaxDigits);
                    }

                    if (cleaned && window.intlTelInput && intlTelInput.utils) {
                        const formatted = intlTelInput.utils.formatNumber(
                            cleaned,
                            countryData.iso2,
                            intlTelInput.utils.numberFormat.NATIONAL
                        );
                        phoneInput.value = formatted;
                    } else {
                        phoneInput.value = cleaned;
                    }
                });

                // Solo dígitos (permitiendo edición) y tope por país
                phoneInput.addEventListener('keypress', (e) => {
                    if (!/^\d$/.test(e.key) && e.key !== 'Backspace' && e.key !== 'Delete') {
                        e.preventDefault();
                        return;
                    }

                    const cleanedLength = phoneInput.value.replace(/\D/g, '').length;
                    if (currentMaxDigits > 0 && cleanedLength >= currentMaxDigits) {
                        e.preventDefault();
                    }
                });

                // Prellenado (edición): formatea el valor existente y ajusta la bandera
                if (phoneInput.value.trim()) {
                    phoneInput.itiSetNumber(phoneInput.value);
                }
            });
        };

        // Helper reutilizable: obtener solo dígitos (DDI + número) y setear por código
        window.PhoneInput = {
            digits: function (id) {
                const el = document.getElementById(id);
                if (el && el.iti && typeof el.iti.getNumber === 'function') {
                    const full = el.iti.getNumber();
                    if (full) return full.replace(/\D/g, '');
                }
                return (el && el.value ? el.value : '').replace(/\D/g, '');
            },
            setNumber: function (id, raw) {
                const el = document.getElementById(id);
                if (el && el.itiSetNumber) el.itiSetNumber(raw);
                else if (el) el.value = String(raw || '').replace(/\D/g, '');
            }
        };

        // Initialize automatically on load
        document.addEventListener('DOMContentLoaded', () => {
            window.initializeAllPhoneInputs();
        });
    </script>
@endpush
@endonce