{{-- Facturas de un DO de importación, con el detalle de ítems desplegable (respuesta de /detalle-importacion, kit ui-ctc). --}}
@php
    $th = 'whitespace-nowrap px-2.5 py-2 text-left text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--texto-tenue)]';
    $td = 'whitespace-nowrap px-2.5 py-2.5 text-[13px] text-[var(--texto)]';
@endphp
<div class="overflow-x-auto px-5 pb-3.5 pt-2" x-data="{ abierta: null }">
    <table class="min-w-full">
        <thead>
            <tr class="border-b border-[var(--borde)]">
                <th class="{{ $th }} w-8"><span class="sr-only">Detalle</span></th>
                <th class="{{ $th }}">Factura</th>
                <th class="{{ $th }}">Fecha</th>
                <th class="{{ $th }}">Exportador</th>
                <th class="{{ $th }}">Término de negociación</th>
                <th class="{{ $th }} text-right">Valor</th>
                <th class="{{ $th }}">Moneda</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($facturas as $i => $factura)
                <tr class="border-b border-[var(--borde)] last:border-0">
                    <td class="px-1 py-1">
                        <button type="button" x-on:click="abierta = abierta === {{ $i }} ? null : {{ $i }}" :aria-expanded="abierta === {{ $i }}"
                                aria-label="Ítems de la factura {{ $factura['NUMERO_FACTURA'] }}"
                                class="flex h-7 w-7 items-center justify-center rounded-md text-[var(--texto-suave)] hover:bg-[var(--nav-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--acento)]">
                            <x-icono nombre="chevron-right" variante="m" class="h-4 w-4 transition" x-bind:class="abierta === {{ $i }} && 'rotate-90'" />
                        </button>
                    </td>
                    <td class="{{ $td }} font-semibold">{{ $factura['NUMERO_FACTURA'] }}</td>
                    <td class="{{ $td }}">{{ $factura['FECHA_FACTURA'] }}</td>
                    <td class="{{ $td }}">{{ $factura['EXPORTADOR'] }}</td>
                    <td class="{{ $td }}">{{ $factura['CODIGO_CONDICION_ENTREGA'] }}</td>
                    <td class="{{ $td }} text-right tabular-nums">${{ number_format((float) $factura['TOTAL_FACTURA'], 2) }}</td>
                    <td class="{{ $td }}">{{ $factura['CODIGO_MONEDA'] }}</td>
                </tr>
                <tr x-show="abierta === {{ $i }}" x-cloak>
                    <td colspan="7" class="bg-[var(--superficie-3)] p-3">
                        <div class="overflow-x-auto rounded-lg border border-[var(--borde)] bg-[var(--superficie)]">
                            <table class="min-w-full">
                                <thead>
                                    <tr class="border-b border-[var(--borde)]">
                                        @foreach (['#', 'Código producto', 'Nombre comercial', 'Código posición', 'Peso neto', 'Cantidad', 'Total ítem', 'Total ítem USD', 'Número declaración', 'Base arancel', '% Arancel', 'Modalidad'] as $col)
                                            <th class="{{ $th }}">{{ $col }}</th>
                                        @endforeach
                                    </tr>
                                </thead>
                                <tbody>
                                    @foreach ($factura['DETALLE'] ?? [] as $detalle)
                                        <tr class="border-b border-[var(--borde)] last:border-0">
                                            <td class="{{ $td }} text-[var(--texto-tenue)]">{{ $loop->iteration }}</td>
                                            <td class="{{ $td }} font-semibold">{{ $detalle['CODIGO'] }}</td>
                                            <td class="{{ $td }}">{{ $detalle['NOMBRE_COMERCIAL_PROD'] }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['CODIGO_POSICION'] }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['PESO_NETO'] }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['CANTIDAD'] }}</td>
                                            <td class="{{ $td }} tabular-nums">${{ number_format((float) $detalle['TOTAL_ITEM'], 2) }}</td>
                                            <td class="{{ $td }} tabular-nums">${{ number_format((float) $detalle['TOTAL_ITEM_USD'], 2) }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['NUMERO_ACEPTACION'] }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['BASE_ARANCEL'] === null ? '—' : '$' . number_format((float) $detalle['BASE_ARANCEL'], 2) }}</td>
                                            <td class="{{ $td }} tabular-nums">{{ $detalle['PORCENTAJE_ARANCEL'] === null ? '—' : number_format((float) $detalle['PORCENTAJE_ARANCEL']) . '%' }}</td>
                                            <td class="{{ $td }}">{{ $detalle['CODIGO_MODALIDAD'] }}</td>
                                        </tr>
                                    @endforeach
                                </tbody>
                            </table>
                        </div>
                    </td>
                </tr>
            @empty
                <tr><td colspan="7" class="px-2.5 py-6 text-center text-[13px] text-[var(--texto-tenue)]">Sin facturas registradas.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>