{{--
    Currency dropdown mapping each supported country to its currency.
    Only include this once per page — element ids are fixed, not namespaced per instance.

    Country/currency list comes from Modules\DigitalMenu\Support\Countries — add a country
    there and make sure a matching row (by ISO code) exists in the `currencies` table
    (see database/migrations/2026_07_31_000100_add_world_currencies.php).

    Usage:
        @include('digitalmenu::partials.currency_selector', [
            'fieldName'   => 'currency_id',           // optional, defaults to 'currency_id'
            'selectedId'  => old('currency_id', $shop->currency_id),
            'currencyError' => $errors->has('currency_id'), // optional
        ])
--}}
@php
    $currencyIdsByCode = \Modules\DigitalMenu\Entities\Currency::whereIn('symbol', array_keys(\Modules\DigitalMenu\Support\Countries::currencies()))
        ->pluck('id', 'symbol');

    // Multiple countries can share a currency (USD, EUR, XOF…). Prefer the currency's
    // home country (e.g. United States for USD) over whichever one appears first —
    // detected by the currency code starting with the country's ISO code (USD -> US).
    $byCurrency = [];
    foreach (\Modules\DigitalMenu\Support\Countries::all() as $country) {
        if (!isset($currencyIdsByCode[$country['currency']])) {
            continue;
        }
        $isHomeCountry = strpos($country['currency'], $country['code']) === 0;
        if (!isset($byCurrency[$country['currency']]) || $isHomeCountry) {
            $country['id'] = (int) $currencyIdsByCode[$country['currency']];
            $byCurrency[$country['currency']] = $country;
        }
    }
    $currencyOptions = array_values($byCurrency);

    $fieldName = $fieldName ?? 'currency_id';
    $selectedId = (int) ($selectedId ?? old($fieldName));
    $currencyError = $currencyError ?? $errors->has($fieldName);

    $selectedCurrency = null;
    foreach ($currencyOptions as $country) {
        if ($country['id'] === $selectedId) {
            $selectedCurrency = $country;
            break;
        }
    }
    $selectedCurrency = $selectedCurrency ?? $currencyOptions[0];
@endphp

<div id="currency_select" class="relative">
    <button type="button" id="currency_select_btn"
            class="flex items-center gap-2 w-full bg-surface-container-high border-none rounded-lg px-4 py-3 text-on-surface text-sm font-semibold outline-none hover:bg-surface-container-highest/60 transition-colors {{ $currencyError ? 'ring-2 ring-error' : '' }}">
        <span id="currency_select_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">{{ $selectedCurrency['code'] }}</span>
        <span id="currency_select_symbol">{{ $selectedCurrency['symbol'] }}</span>
        <span id="currency_select_name" class="text-on-surface-variant">{{ $selectedCurrency['currency'] }}</span>
        <span class="material-symbols-outlined text-base leading-none text-on-surface-variant/60 ml-auto">expand_more</span>
    </button>
    <div id="currency_select_menu"
         class="hidden absolute left-0 top-[calc(100%+8px)] w-72 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="currency_select_search" placeholder="Search country or currency…" 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 ($currencyOptions as $country)
                <button type="button" class="currency-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-id="{{ $country['id'] }}" data-code="{{ $country['code'] }}" data-symbol="{{ $country['symbol'] }}" data-currency="{{ $country['currency'] }}" data-search="{{ strtolower($country['name'] . ' ' . $country['code'] . ' ' . $country['currency']) }}">
                    <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['symbol'] }} {{ $country['currency'] }}</span>
                </button>
            @endforeach
            <p id="currency_select_no_results" class="hidden px-3 py-3 text-sm text-on-surface-variant/60 text-center">No currencies found.</p>
        </div>
    </div>
</div>
<input type="hidden" id="currency_select_input" name="{{ $fieldName }}" value="{{ $selectedCurrency['id'] }}"/>

<script>
    (function () {
        const wrap      = document.getElementById('currency_select');
        const btn       = document.getElementById('currency_select_btn');
        const menu      = document.getElementById('currency_select_menu');
        const search    = document.getElementById('currency_select_search');
        const noResults = document.getElementById('currency_select_no_results');
        const badge     = document.getElementById('currency_select_badge');
        const symbol    = document.getElementById('currency_select_symbol');
        const name      = document.getElementById('currency_select_name');
        const hidden    = document.getElementById('currency_select_input');
        const options   = Array.from(document.querySelectorAll('.currency-option'));

        function filterOptions() {
            const term = search.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() {
            menu.classList.remove('hidden');
            search.value = '';
            filterOptions();
            search.focus();
        }

        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (menu.classList.contains('hidden')) {
                openMenu();
            } else {
                menu.classList.add('hidden');
            }
        });
        search.addEventListener('click', function (e) {
            e.stopPropagation();
        });
        search.addEventListener('input', filterOptions);
        options.forEach(function (option) {
            option.addEventListener('click', function () {
                badge.textContent  = option.dataset.code;
                symbol.textContent = option.dataset.symbol;
                name.textContent   = option.dataset.currency;
                hidden.value       = option.dataset.id;
                menu.classList.add('hidden');
            });
        });
        document.addEventListener('click', function (e) {
            if (!wrap.contains(e.target)) {
                menu.classList.add('hidden');
            }
        });
    })();
</script>