{{-- Detalle de un DO de exportación (kit ui-ctc): reserva de contenedores, SAE y unidades de carga. Mismo panel que el
     detalle de importación (partials/detalle-importacion/panel). $ped: fila de Exportaciones\PedidosCurso. --}}
@php
    $reserva = [
        'Número de viaje' => $ped->NUMERO_VIAJE, 'Código de la motonave' => $ped->CODIGO_VAPOR, 'Nombre de la motonave' => $ped->NOMBRE_VAPOR,
        'Línea marítima' => $ped->VIAJE_LINEA, 'Transportador' => $ped->TRANSPORTADOR, 'Lugar de embarque' => $ped->PUERTO_EMBARQUE,
        'Lugar de destino' => $ped->LUGAR_DESTINO, 'Fecha llegada destino' => $ped->ETA, 'Cantidad' => $ped->CANTIDAD,
        'Cantidad embarcada' => null, 'Total peso bruto' => $ped->TOTAL_PESO_BRUTO, 'Total peso neto' => $ped->TOTAL_PESO_NETO,
    ];
    $sae = [
        'Número de SAE' => $ped->SAE, 'Entrega de SAE al puerto' => $ped->FECHA_SAE_PUERTO, 'Entrega de SAE al naviero' => $ped->FECHA_SAE_NAVIERO,
        'Arribo de la motonave' => $ped->ARRIBO_MOTONAVE, 'Fecha de zarpe' => $ped->FECHA_ZARPE, 'Firma DEX' => $ped->FIRMA_DEX,
    ];
    $unidades = $ped->UNIDADES_CARGA ?? [];
    $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="sticky left-0 pb-5 pl-16 pr-5 pt-1" :style="'width:' + ancho + 'px'">
    <div class="rounded-[10px] border border-[var(--borde)] bg-[var(--superficie)]" x-data="{ pestanaDetalle: 'reserva' }">
        <div class="flex gap-1 overflow-x-auto border-b border-[var(--borde)] px-4" role="tablist">
            <x-pestana etiqueta="Reserva contenedores" icono="magnifying-glass" tamano="chica" :conteo="$ped->BOOKING ?: null" alpine="pestanaDetalle === 'reserva'" x-on:click="pestanaDetalle = 'reserva'" />
            <x-pestana etiqueta="SAE" icono="list-bullet" tamano="chica" :conteo="$ped->SAE ?: null" alpine="pestanaDetalle === 'sae'" x-on:click="pestanaDetalle = 'sae'" />
            <x-pestana etiqueta="Unidades de carga" icono="truck" tamano="chica" :conteo="count($unidades)" alpine="pestanaDetalle === 'unidades'" x-on:click="pestanaDetalle = 'unidades'" />
        </div>
        @foreach (['reserva' => $reserva, 'sae' => $sae] as $clave => $campos)
            <dl x-show="pestanaDetalle === '{{ $clave }}'" @if ($clave !== 'reserva') x-cloak @endif
                class="grid gap-x-6 gap-y-[18px] px-5 py-[18px] [grid-template-columns:repeat(auto-fill,minmax(220px,1fr))]">
                @foreach ($campos as $etiqueta => $valor)
                    <div>
                        <dt class="text-[11px] font-semibold uppercase tracking-[0.05em] text-[var(--texto-tenue)]">{{ $etiqueta }}</dt>
                        <dd class="mt-1 text-[14px] font-semibold text-[var(--texto)]">{{ ($valor === null || $valor === '') ? '—' : $valor }}</dd>
                    </div>
                @endforeach
            </dl>
        @endforeach
        <div x-show="pestanaDetalle === 'unidades'" x-cloak class="overflow-x-auto px-5 pb-3.5 pt-2">
            <table class="min-w-full">
                <thead>
                    <tr class="border-b border-[var(--borde)]">
                        <th class="{{ $th }}">Contenedor</th>
                        <th class="{{ $th }}">Tipo</th>
                        <th class="{{ $th }}">Tamaño</th>
                        <th class="{{ $th }}">Número precinto</th>
                        <th class="{{ $th }}">Fecha ingreso a puerto</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($unidades as $uc)
                        <tr class="border-b border-[var(--borde)] last:border-0">
                            <td class="{{ $td }} font-semibold">{{ $uc->NUMERO_ID_CONTENEDOR }}</td>
                            <td class="{{ $td }}">{{ data_get($uc, 'tipo_equipo.NOMBRE_TIPO_EQUIPO') }}</td>
                            <td class="{{ $td }}">{{ data_get($uc, 'tamano.NOMBRE_TAMANO_CONTENEDOR') }}</td>
                            <td class="{{ $td }}">{{ $uc->NUMERO_PRECINTO }}</td>
                            <td class="{{ $td }}">{{ !empty($uc->FECHA_INGRESO_PUERTO) ? date('Y-m-d', strtotime($uc->FECHA_INGRESO_PUERTO)) : '' }}</td>
                        </tr>
                    @empty
                        <tr><td colspan="5" class="px-2.5 py-6 text-center text-[13px] text-[var(--texto-tenue)]">Sin unidades de carga registradas.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>