{{-- Tabla de pedidos en curso (Otros procesos o Prórrogas temporales), kit ui-ctc. Cabecera fija y las tres primeras
     columnas fijas a la izquierda. Parámetros: $lista (paginador), $clave, $dinamicos, $orderBy, $orderType, $coloresEtapa.
     El detalle de cada DO se pide a /detalle-importacion al desplegarlo; su panel es uno solo para toda la página
     (#plantilla-detalle-do en ordenes-compra) y se copia en la fila al abrirla. Íconos de fila: sprite. --}}
@php
    $detalleEnLinea = $detalleEnLinea ?? false;
    $conDeclaracion = $conDeclaracion ?? true; // el histórico no tiene la columna
    $columnas = $conDeclaracion ? 18 : 17;
    $conPendientesOp = in_array(Auth::user()->operacion, ['E']);
    // Hito de la operación: con fecha, completado; sin fecha y con el hito anterior cumplido, pendiente.
    $hito = function ($valor, $anteriorCumplido) {
        if (!empty($valor)) { return ['exito', $valor]; }
        return $anteriorCumplido ? ['peligro', 'Pendiente'] : [null, null];
    };
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<div class="ctc-tabla-caja">
    <table class="ctc-tabla">
        <thead>
            <tr>
                <th class="ctc-fija w-11 min-w-11" style="left: 0"><span class="sr-only">Detalle</span></th>
                <th class="ctc-fija w-[136px] min-w-[136px]" style="left: 44px">Acciones</th>
                <th class="ctc-fija ctc-fija-ultima" style="left: 180px"># DO</th>
                <th>Pedido</th>
                <th>Cliente</th>
                <th>Doc. transporte</th>
                <th>Fecha BL</th>
                <th>Pto arribo</th>
                <th><x-orden-columna etiqueta="ETA" :activo="$orderBy == 'importaciones.FECHA_ESTIMADA_ARRIBO'" :direccion="$orderType" wire:click="ordenarInfo('importaciones.FECHA_ESTIMADA_ARRIBO', '{{ $orderType }}')" /></th>
                @if ($conDeclaracion)<th>Declaración</th>@endif
                <th><x-orden-columna etiqueta="Fecha arribo" :activo="$orderBy == 'importaciones.FECHA_LLEGADA_MCIA'" :direccion="$orderType" wire:click="ordenarInfo('importaciones.FECHA_LLEGADA_MCIA', '{{ $orderType }}')" /></th>
                <th>Fecha levante</th>
                <th>Fecha liberación</th>
                <th>Entrega doc. transp.</th>
                <th>Analista cliente</th>
                <th>Proceso</th>
                <th>Status</th>
                <th>Pendientes</th>
            </tr>
        </thead>
        <tbody>
            @forelse ($lista as $ped)
                @php
                    $do = (string) $ped['NUMERO_DO'];
                    $doJs = \Illuminate\Support\Js::from($do)->toHtml();
                    $bl = !empty($ped['FECHA_DOC_TRANSPORTE']);
                    $hitos = [
                        $hito($ped['FECHA_ARRIBO'], $bl),
                        $hito($ped['FECHA_LEVANTE'], !empty($ped['FECHA_ARRIBO'])),
                        $hito($ped['FECHA_LIBERACION'], !empty($ped['FECHA_LEVANTE'])),
                        $hito($ped['FECHA_ENTREGA_TRANSPORTE'], !empty($ped['FECHA_LIBERACION'])),
                    ];
                @endphp
                <tr wire:key="{{ $clave }}-{{ $do }}" :class="abierto === @js($do) && '[&>td]:!bg-[var(--superficie-3)]'">
                    <td class="ctc-fija !px-2" style="left: 0">
                        <button type="button" x-on:click="alternar(@js($do), @js($ped['NUMERO_PEDIDO'] ?: $do))" :aria-expanded="abierto === @js($do)" aria-label="Ver detalle del DO {{ $do }}" title="Ver detalle"
                                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" sprite class="h-4 w-4 transition-transform" x-bind:class="abierto === {{ $doJs }} && 'rotate-90'" />
                        </button>
                    </td>
                    <td class="ctc-fija !px-1.5" style="left: 44px">
                        <div class="flex gap-0.5">
                            <a href="{{ pantalla('/seguimiento-imp/' . rawurlencode($do)) }}" class="ctc-accion" title="Seguimiento DO {{ $do }}" aria-label="Seguimiento del DO {{ $do }}"><x-icono nombre="calendar-days" sprite class="h-[18px] w-[18px]" /></a>
                            @if ($dinamicos)
                                <a href="{{ pantalla('/dinamicos-imp/' . rawurlencode($do)) }}" class="ctc-accion" title="Información personalizada DO {{ $do }}" aria-label="Información personalizada del DO {{ $do }}"><x-icono nombre="plus-circle" sprite class="h-[18px] w-[18px]" /></a>
                            @endif
                            @if ($conPendientesOp)
                                <a href="{{ pantalla('/impo/seguimiento-pendiente/' . rawurlencode($do)) }}" class="ctc-accion" title="Seguimiento de pendientes DO {{ $do }}" aria-label="Seguimiento de pendientes del DO {{ $do }}"><x-icono nombre="queue-list" sprite class="h-[18px] w-[18px]" /></a>
                            @endif
                            <button type="button" x-on:click="verPendientes(@js($do))" class="ctc-accion" title="Pendientes y anotaciones DO {{ $do }}" aria-label="Pendientes y anotaciones del DO {{ $do }}"><x-icono nombre="magnifying-glass" sprite class="h-[18px] w-[18px]" /></button>
                        </div>
                        <template id="pend-{{ $clave }}-{{ $do }}">@include('partials.pendientes-operacion', ['pendientes' => $ped['detallePendientesCliente']])</template>
                    </td>
                    <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 180px">{{ $do }}</td>
                    <td class="max-w-[200px] truncate {{ $ped['NUMERO_PEDIDO'] ? '' : 'text-[var(--texto-tenue)]' }}" title="{{ $ped['NUMERO_PEDIDO'] }}">{{ $ped['NUMERO_PEDIDO'] ?: 'Sin pedido' }}</td>
                    <td class="min-w-[180px] text-[12px] leading-snug">{{ $ped['CLIENTE'] }}</td>
                    <td class="whitespace-nowrap">{!! $ped['DOCUMENTO_TRANSPORTE'] ? e($ped['DOCUMENTO_TRANSPORTE']) : $vacio !!}</td>
                    <td>@if ($bl)<x-etiqueta variante="exito">{{ $ped['FECHA_DOC_TRANSPORTE'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                    <td>@if ($ped['SUCURSAL_OP'])<x-etiqueta variante="acento" class="font-bold">{{ $ped['SUCURSAL_OP'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                    <td class="whitespace-nowrap">{!! $ped['ETA'] ? e($ped['ETA']) : $vacio !!}</td>
                    @if ($conDeclaracion)
                        <td>@if ($ped['TIPO_DECLARACION'])<x-etiqueta class="text-[11.5px]">{{ $ped['TIPO_DECLARACION'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                    @endif
                    @foreach ($hitos as [$variante, $texto])
                        <td>@if ($variante)<x-etiqueta :variante="$variante">{{ $texto }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                    @endforeach
                    <td class="min-w-[140px] text-[12.5px] text-[var(--texto-suave)]">{{ $ped['ANALISTA_CLIENTE'] }}</td>
                    <td class="min-w-[140px] text-[12px]">{{ $ped['PROCESO'] }}</td>
                    <td>@if ($ped['ETAPA'])<x-etiqueta :color="$coloresEtapa[$ped['ETAPA']] ?? null">{{ $ped['ETAPA'] }}</x-etiqueta>@endif</td>
                    <td class="min-w-[160px]">
                        <div class="flex flex-wrap gap-1">
                            @foreach ($ped['pendientes'] as $item)
                                <x-etiqueta :variante="$item['status'] ? 'exito' : 'peligro'" class="text-[11px] capitalize">{{ mb_strtolower($item['nombre']) }}</x-etiqueta>
                            @endforeach
                        </div>
                    </td>
                </tr>
                {{-- Detalle del DO: el panel compartido se copia aquí la primera vez que se abre --}}
                <tr wire:key="{{ $clave }}-{{ $do }}-detalle" data-sin-hover x-show="abierto === @js($do)" x-cloak>
                    @if ($detalleEnLinea)
                        <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0">
                            @include('partials.detalle-importacion.panel', ['local' => ['etiqueta' => $ped['NUMERO_PEDIDO'] ?: $do] + $ped['detalle']])
                        </td>
                    @else
                        <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0" wire:ignore
                            x-effect="if (abierto === @js($do) && !$el.firstElementChild) { $el.append(document.getElementById('plantilla-detalle-do').content.cloneNode(true)); }"></td>
                    @endif
                </tr>
            @empty
                <tr data-sin-hover>
                    <td colspan="{{ $columnas }}" class="!p-0">
                        <div class="ctc-vacio py-12 text-center text-[14px] text-[var(--texto-suave)]"><x-icono nombre="magnifying-glass" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                        <p class="mt-2">No hay pedidos con estos filtros.</p></div>
                    </td>
                </tr>
            @endforelse
        </tbody>
    </table>
</div>
@if ($lista && $lista->hasPages())
    <div class="border-t border-[var(--borde)] px-5 py-3">{{ $lista->links('vendor.pagination.ctc-livewire') }}</div>
@endif