@php
    $fieldName = $name ?? 'sku_id';
    $fieldId = $id ?? $fieldName;
    $selectedValue = old($fieldName, $selected ?? null);
@endphp

<select name="{{ $fieldName }}" id="{{ $fieldId }}" class="sku-line-select" @if (!empty($required)) required @endif>
    <option value="">— Select SKU —</option>
    @foreach ($skus ?? [] as $sku)
        @php
            $allowedUnitIds = [(int) ($sku->variant?->item?->base_unit_id ?? 0)];
            if ($sku->relationLoaded('uomConversions')) {
                foreach ($sku->uomConversions as $conversion) {
                    $allowedUnitIds[] = (int) $conversion->unit_id;
                }
            }
            $allowedUnitIds = array_values(array_unique(array_filter($allowedUnitIds)));
        @endphp
        <option
            value="{{ $sku->id }}"
            data-default-unit-id="{{ $sku->variant?->item?->base_unit_id ?? '' }}"
            data-allowed-unit-ids="{{ implode(',', $allowedUnitIds) }}"
            data-default-tax-id="{{ $sku->default_tax_id ?? '' }}"
            @selected((string) $selectedValue === (string) $sku->id)
        >
            {{ $sku->sku_code }}
            @if ($sku->relationLoaded('variant') && $sku->variant)
                — {{ $sku->variant->item->name ?? '' }} {{ $sku->variant->variant ?? '' }}
            @endif
        </option>
    @endforeach
</select>

@once
    @push('scripts')
    <script>
    (function () {
        function filterUnitOptions(unitSelect, allowedIds, preferredUnitId) {
            if (!unitSelect) {
                return;
            }

            const allowed = (allowedIds || []).map(String).filter(Boolean);
            let matchedPreferred = false;

            Array.from(unitSelect.options).forEach(function (option) {
                if (!option.value) {
                    option.hidden = false;
                    option.disabled = false;
                    return;
                }

                const isAllowed = allowed.length === 0 || allowed.includes(String(option.value));
                option.hidden = !isAllowed;
                option.disabled = !isAllowed;
                if (isAllowed && preferredUnitId && String(option.value) === String(preferredUnitId)) {
                    matchedPreferred = true;
                }
            });

            if (preferredUnitId && matchedPreferred) {
                unitSelect.value = String(preferredUnitId);
            } else if (allowed.length) {
                unitSelect.value = allowed[0];
            } else {
                unitSelect.value = '';
            }
        }

        function applySkuDefaults(skuSelect) {
            const row = skuSelect.closest('[data-line-row]') || skuSelect.closest('.line-row');
            if (!row) {
                return;
            }

            const selected = skuSelect.selectedOptions[0];
            const unitSelect = row.querySelector('[data-line-unit]') || row.querySelector('select[name$="[unit_id]"]');
            const allowed = (selected?.dataset.allowedUnitIds || '')
                .split(',')
                .map(function (value) { return value.trim(); })
                .filter(Boolean);
            const defaultUnitId = selected?.dataset.defaultUnitId || allowed[0] || '';

            filterUnitOptions(unitSelect, allowed, defaultUnitId);

            const taxSelect = row.querySelector('[data-line-tax]');
            if (taxSelect) {
                const defaultTaxId = selected?.dataset.defaultTaxId;
                if (defaultTaxId) {
                    taxSelect.value = defaultTaxId;
                    taxSelect.dispatchEvent(new Event('change', { bubbles: true }));
                } else if (!skuSelect.value) {
                    taxSelect.value = '';
                    taxSelect.dispatchEvent(new Event('change', { bubbles: true }));
                }
            }

            if (window.InventoryDispatchStock) {
                window.InventoryDispatchStock.updateRow(row);
            }
        }

        document.addEventListener('change', function (event) {
            if (event.target.matches('.sku-line-select, select[name*="[sku_id]"]')) {
                applySkuDefaults(event.target);
            }
        });

        document.querySelectorAll('.sku-line-select, select[name*="[sku_id]"]').forEach(function (skuSelect) {
            if (skuSelect.value) {
                applySkuDefaults(skuSelect);
            }
        });
    })();
    </script>
    @endpush
@endonce