{{--
    Reusable phone input with country-code dropdown.
    Only include this once per page — element ids are fixed, not namespaced per instance.

    Country list comes from Modules\DigitalMenu\Support\Countries — add a country there
    and every page that includes this partial picks it up automatically.

    Usage:
        @include('digitalmenu::partials.phone_country_selector', [
            'fieldName'  => 'phone',               // optional, defaults to 'phone'; sets the hidden input's name
            'phoneValue' => old('phone'),           // optional, defaults to old($fieldName)
            'phoneError' => $errors->has('phone'), // optional, defaults to $errors->has($fieldName)
        ])
--}}
@php
    $phoneCountries = \Modules\DigitalMenu\Support\Countries::all();
    $defaultCountry = $phoneCountries[0];
    $fieldName = $fieldName ?? 'phone';
    $phoneValue = $phoneValue ?? old($fieldName);
    $phoneError = $phoneError ?? $errors->has($fieldName);
@endphp

<div id="phone_country" class="relative">
    <div class="flex items-stretch w-full bg-surface-container-high rounded-lg overflow-hidden focus-within:ring-2 focus-within:ring-primary transition-all duration-200 {{ $phoneError ? 'ring-2 ring-error' : '' }}">
        <button type="button" id="phone_country_btn"
                class="flex items-center gap-2 shrink-0 pl-4 pr-3 py-4 text-on-surface text-sm font-semibold outline-none border-r border-on-surface/10 hover:bg-surface-container-highest/60 transition-colors">
            <span id="phone_country_badge" class="inline-flex items-center justify-center w-8 h-5 rounded-md bg-primary/10 text-primary text-[10px] font-bold tracking-wider">{{ $defaultCountry['code'] }}</span>
            <span id="phone_country_dial">{{ $defaultCountry['dial'] }}</span>
            <span class="material-symbols-outlined text-base leading-none text-on-surface-variant/60">expand_more</span>
        </button>
        <input id="phone_number" type="text" inputmode="numeric" autocomplete="off" maxlength="15"
               class="flex-1 min-w-0 bg-surface-container-high border-none px-4 py-4 text-on-surface placeholder:text-on-surface-variant/40 outline-none focus:ring-0"/>
    </div>
    <div id="phone_country_menu"
         class="hidden absolute left-0 top-[calc(100%+8px)] w-64 bg-surface-container-lowest rounded-xl shadow-[0px_12px_32px_rgba(25,28,29,0.16)] border border-surface-container-high z-20 overflow-hidden">
        <div class="p-2 border-b border-surface-container-high">
            <input type="text" id="phone_country_search" placeholder="Search country…" autocomplete="off"
                   class="w-full bg-surface-container-high border-none rounded-lg px-3 py-2 text-sm text-on-surface placeholder:text-on-surface-variant/40 outline-none focus:ring-2 focus:ring-primary"/>
        </div>
        <div class="max-h-64 overflow-y-auto py-1.5">
            @foreach ($phoneCountries as $country)
                <button type="button" class="phone-country-option w-full flex items-center justify-between gap-2 px-3 py-2.5 text-sm text-on-surface hover:bg-surface-container-high transition-colors" data-code="{{ $country['code'] }}" data-dial="{{ $country['dial'] }}" data-search="{{ strtolower($country['name'] . ' ' . $country['code'] . ' ' . $country['dial']) }}">
                    <span class="flex items-center gap-2"><span class="inline-flex items-center justify-center w-8 h-5 rounded-md bg-primary/10 text-primary text-[10px] font-bold tracking-wider">{{ $country['code'] }}</span><span>{{ $country['name'] }}</span></span>
                    <span class="text-on-surface-variant/60">{{ $country['dial'] }}</span>
                </button>
            @endforeach
            <p id="phone_country_no_results" class="hidden px-3 py-3 text-sm text-on-surface-variant/60 text-center">No countries found.</p>
        </div>
    </div>
</div>
<input type="hidden" id="phone" name="{{ $fieldName }}" value="{{ $phoneValue }}"/>

<script>
    (function () {
        const countryWrap = document.getElementById('phone_country');
        const countryBtn  = document.getElementById('phone_country_btn');
        const countryMenu = document.getElementById('phone_country_menu');
        const countrySearch = document.getElementById('phone_country_search');
        const noResults   = document.getElementById('phone_country_no_results');
        const badgeLabel  = document.getElementById('phone_country_badge');
        const dialLabel   = document.getElementById('phone_country_dial');
        const numberInput = document.getElementById('phone_number');
        const hiddenPhone = document.getElementById('phone');
        const options     = Array.from(document.querySelectorAll('.phone-country-option'));

        let selectedDial = dialLabel.textContent;

        function syncHiddenPhone() {
            hiddenPhone.value = numberInput.value ? selectedDial + numberInput.value : '';
        }

        function selectCountry(option) {
            badgeLabel.textContent = option.dataset.code;
            dialLabel.textContent = option.dataset.dial;
            selectedDial = option.dataset.dial;
            syncHiddenPhone();
        }

        function filterOptions() {
            const term = countrySearch.value.trim().toLowerCase();
            let visibleCount = 0;
            options.forEach(function (option) {
                const match = !term || option.dataset.search.includes(term);
                option.classList.toggle('hidden', !match);
                if (match) visibleCount++;
            });
            noResults.classList.toggle('hidden', visibleCount > 0);
        }

        function openMenu() {
            countryMenu.classList.remove('hidden');
            countrySearch.value = '';
            filterOptions();
            countrySearch.focus();
        }

        countryBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (countryMenu.classList.contains('hidden')) {
                openMenu();
            } else {
                countryMenu.classList.add('hidden');
            }
        });
        countrySearch.addEventListener('click', function (e) {
            e.stopPropagation();
        });
        countrySearch.addEventListener('input', filterOptions);
        options.forEach(function (option) {
            option.addEventListener('click', function () {
                selectCountry(option);
                countryMenu.classList.add('hidden');
            });
        });
        document.addEventListener('click', function (e) {
            if (!countryWrap.contains(e.target)) {
                countryMenu.classList.add('hidden');
            }
        });

        // Prefill from the hidden field's initial value (old('phone') on validation redisplay, or a saved value)
        (function prefill() {
            const old = hiddenPhone.value;
            if (!old) return;
            const matched = options
                .slice()
                .sort((a, b) => b.dataset.dial.length - a.dataset.dial.length)
                .find(option => old.startsWith(option.dataset.dial));
            if (matched) {
                selectCountry(matched);
                numberInput.value = old.slice(matched.dataset.dial.length);
            } else {
                numberInput.value = old.replace(/^\+?/, '');
            }
        })();

        numberInput.addEventListener('focus', function () {
            countryMenu.classList.add('hidden');
        });
        numberInput.addEventListener('keydown', function (e) {
            if (e.key === '0' && this.selectionStart === 0 && this.value.length === 0) {
                e.preventDefault();
            }
        });
        numberInput.addEventListener('input', function () {
            this.value = this.value.replace(/\D/g, '').replace(/^0+/, '');
            syncHiddenPhone();
        });

        syncHiddenPhone();
    })();
</script>