@php
    $currencyCatalog = app(\App\Services\CurrencyPricingService::class)->catalog();
    $currencyContext = $currencyContext ?? $currencyCatalog;
    $currencyWidgetId = $currencyWidgetId ?? 'currency-price-preview';
@endphp
<div id="{{ $currencyWidgetId }}" class="currency-price-preview my-3" data-currency-widget>
    <label class="d-block mb-2">View price in
        <select class="form-select form-select-sm" data-display-currency aria-label="Display currency">
            @foreach(array_keys($currencyContext['rates']) as $currencyCode)
                <option value="{{ $currencyCode }}" @selected($currencyCode === $currencyContext['currency'])>
                    {{ $currencyCode }}
                </option>
            @endforeach
        </select>
    </label>
    <div>Course price: <strong data-display-price>-</strong></div>
    <div class="mt-2">Amount to pay: <strong data-treasury-price>-</strong></div>
    <small class="text-muted">Deposit amounts are entered in <span
            data-base-currency>{{ $currencyContext['currency'] }}</span>.</small>
</div>
<script>
    (() => {
        const id = @json($currencyWidgetId);
        const initialContext = @json($currencyContext);
        const fixedAmount = @json($currencyAmount ?? null);
        const priceSelector = @json($currencyPriceSelector ?? null);
        const dueSelector = @json($currencyDueSelector ?? $currencyPriceSelector ?? null);
        const paymentSelectors = @json($currencyPaymentSelectors ?? []);
        const treasurySelectors = @json($currencyTreasurySelectors ?? ['select[name="treasury_id"]', 'select[name="payment_gateway"]']);
        const scopeSelector = @json($currencyScopeSelector ?? null);
        const setup = () => {
            const root = document.getElementById(id);
            if (!root) return;
            const scope = scopeSelector ? document.querySelector(scopeSelector) : root.closest('form') || document;
            if (!scope) return;
            let context = initialContext;
            const displaySelect = root.querySelector('[data-display-currency]');
            const parseAmount = text => Number(String(text || '').replace(/[^0-9.-]/g, '')) || 0;
            const read = selector => {
                if (!selector) return Number(fixedAmount || 0);
                const element = scope.querySelector(selector);
                if (!element || element.dataset.currencyBaseAmount === '') return null;
                return element.dataset.currencyBaseAmount != null
                    ? Number(element.dataset.currencyBaseAmount) : parseAmount(element.textContent);
            };
            const write = (element, value) => {
                if (element && element.textContent !== value) element.textContent = value;
            };
            const money = (amount, target) => {
                const from = Number(context.rates?.[context.currency]);
                const to = Number(context.rates?.[target]);
                if (!(from > 0 && to > 0)) return 'Exchange rate unavailable';
                return `${(Math.round((amount * from / to + Number.EPSILON) * 100) / 100).toFixed(2)} ${target}`;
            };
            const render = () => {
                root.querySelector('[data-base-currency]').textContent = context.currency;
                root.querySelector('[data-display-price]').textContent = money(read(priceSelector), displaySelect.value);
                const type = scope.querySelector('select[name="payment_type"]')?.value;
                const treasuryName = type === 'online' ? 'payment_gateway' : 'treasury_id';
                let option = scope.querySelector(`select[name="${treasuryName}"]`)?.selectedOptions?.[0];
                if (!type) option = treasurySelectors.map(s => scope.querySelector(s)?.selectedOptions?.[0]).find(o => o?.value && o?.dataset.currency);
                const target = option?.value ? option.dataset.currency : null;
                let due = read(dueSelector);
                if (due == null) due = read(priceSelector);
                const deposit = scope.querySelector('input[name="deposite"]');
                if (deposit?.value && Number(deposit.value) > 0) due = Math.min(due, Number(deposit.value));
                write(root.querySelector('[data-treasury-price]'), target ? money(due, target) : 'Select a payment treasury');
                paymentSelectors.forEach(selector => {
                    const element = scope.querySelector(selector);
                    const amount = read(selector);
                    if (element && amount != null) write(element, money(amount, target || context.currency));
                });
            };
            scope.addEventListener('change', render);
            scope.addEventListener('input', render);
            document.addEventListener('currency-pricing-context', event => {
                if (event.detail.id !== id) return;
                context = event.detail.context;
                displaySelect.replaceChildren(...Object.keys(context.rates).map(code => {
                    const option = document.createElement('option');
                    option.value = code; option.textContent = code; return option;
                }));
                displaySelect.value = context.currency;
                render();
            });
            [...new Set([priceSelector, dueSelector, ...paymentSelectors].filter(Boolean))].forEach(selector => {
                const source = scope.querySelector(selector);
                if (source) new MutationObserver(render).observe(source, { childList: true, subtree: true, characterData: true, attributes: true, attributeFilter: ['data-currency-base-amount'] });
            });
            treasurySelectors.forEach(selector => {
                const select = scope.querySelector(selector);
                if (select) new MutationObserver(render).observe(select, { childList: true, subtree: true, attributes: true, attributeFilter: ['data-currency', 'selected'] });
            });
            render();
        };
        if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', setup); else setup();
    })();
</script>