{{-- Pedidos en curso de zona franca (impo/pedidos-zf). Kit ui-ctc, como Pedidos en curso (importaciones/ordenes-compra):
     indicadores por status, búsqueda con filtros y etiquetas, tabla con cabecera y columnas fijas, paginada, con el
     detalle de cada DO (panel compartido) y el diálogo de pendientes. MigracionLayout.MD L3, pantallas de L2a. --}}
@php
    // Color de cada status (el mismo que daba colorStatus en el componente), para el indicador y la etiqueta.
    $coloresEtapa = [
        'PEDIDOS SIN EMBARCAR' => '#f97316',
        'PEDIDOS EN TRANSITO MARITIMO' => '#eab308',
        'FINALIZACION OTM EN ZF' => '#94a3b8',
        'PEDIDOS INGRESO ZF' => '#10b981',
        'PEDIDOS CON LEVANTE' => '#3b82f6',
    ];
    $formatoFecha = fn ($f) => $f ? implode('/', array_reverse(explode('-', $f))) : '';
    $chips = [];
    if ($search) { $chips['search'] = ['Búsqueda', $search]; }
    if ($codigoProceso) { $chips['codigoProceso'] = ['Proceso', $procesos[$codigoProceso] ?? $codigoProceso]; }
    if ($tipoDeclaracion) { $chips['tipoDeclaracion'] = ['Tipo declaración', $tipoDeclaracion]; }
    if ($codigoSucursal) { $chips['codigoSucursal'] = ['Sucursal', $sucursales[$codigoSucursal] ?? $codigoSucursal]; }
    if ($status) { $chips['status'] = ['Status', $status]; }
    if ($delayProcess) { $chips['delayProcess'] = ['Pendiente', $delayProcess]; }
    if (($fechaAperturaInicial && $fechaAperturaInicial != '2023-03-19') || ($fechaAperturaFinal && $fechaAperturaFinal != date('Y-m-d'))) {
        $chips['fechas'] = ['Apertura', $formatoFecha($fechaAperturaInicial) . ' – ' . $formatoFecha($fechaAperturaFinal)];
    }
    $conPendientesOp = in_array(Auth::user()->operacion, ['E']);
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $columnas = 13;
@endphp
<div x-data="{
        ...ctcDetalleDo(),
        pendientesDe: null,
        verPendientes(numeroDo) {
            const plantilla = document.getElementById('pend-zf-' + numeroDo);
            this.$refs.contenidoPendientes.innerHTML = plantilla ? plantilla.innerHTML : '';
            this.pendientesDe = numeroDo;
        },
     }"
     x-on:keydown.escape.window="pendientesDe = null">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Pedidos en Curso ZF">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/impo/ordenes-compra-historico') }}" class="ctc-no-imprimir">
                    <x-icono nombre="clock" /> Histórico
                </x-enlace-boton>
                <x-secondary-button wire:click="descargarPedidos" wire:loading.attr="disabled" wire:target="descargarPedidos" :disabled="count($pedidosCurso) == 0">
                    <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                    <span wire:loading.remove wire:target="descargarPedidos">Descargar</span>
                    <span wire:loading wire:target="descargarPedidos">Generando…</span>
                </x-secondary-button>
            </x-slot>
        </x-encabezado-pagina>

        {{-- Indicadores por status: clic filtra la lista (otro clic quita el filtro) --}}
        @if (count($dashboard))
            <div class="grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(170px,1fr))]">
                @foreach ($dashboard as $db)
                    <x-indicador :titulo="$db['titulo']" :valor="$db['total']" :total="$db['totalMuestra']" :porcentaje="$db['porcentaje']"
                                 :color="$coloresEtapa[$db['titulo']] ?? null" :alerta="$db['totalPendiente']" :activo="$status == $db['titulo']"
                                 wire:click="filtroDashboard({{ \Illuminate\Support\Js::from($db['titulo']) }})" wire:key="indicador-{{ $loop->index }}" />
                @endforeach
            </div>
        @endif

        <x-barra-busqueda modelo="search" accion="consultarPedidos" placeholder="Buscar por N° documento de transporte, N° DO o pedido" :activos="count($chips)">
            <x-slot name="filtros">
                <x-campo etiqueta="Procesos" para="codigoProceso">
                    <x-select id="codigoProceso" wire:model="codigoProceso">
                        <option value="">Todos</option>
                        @foreach ($procesos as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Sucursales" para="codigoSucursal">
                    <x-select id="codigoSucursal" wire:model="codigoSucursal">
                        <option value="">Todas</option>
                        @foreach ($sucursales as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Tipo declaración" para="tipoDeclaracion">
                    <x-select id="tipoDeclaracion" wire:model="tipoDeclaracion">
                        <option value="">Todos</option>
                        @foreach ($lstTipoDeclaracion as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Status" para="status">
                    <x-select id="status" wire:model="status">
                        <option value="">Todos</option>
                        @foreach ($lstStatus as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <x-campo etiqueta="Pendientes" para="delayProcess">
                    <x-select id="delayProcess" wire:model="delayProcess">
                        <option value="">Todos</option>
                        @foreach ($lstDelayProcess as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
                <div class="sm:col-span-2">
                    <x-label for="fechaAperturaInicial" value="Fecha apertura" />
                    <div class="mt-1 flex h-[38px] items-center gap-1 rounded-md border border-[var(--borde-fuerte)] bg-[var(--superficie)] px-2 shadow-sm focus-within:border-[var(--acento)] focus-within:ring-1 focus-within:ring-[var(--acento)]">
                        <input type="date" id="fechaAperturaInicial" wire:model="fechaAperturaInicial" aria-label="Fecha apertura inicial"
                               class="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-[var(--texto)] focus:ring-0">
                        <x-icono nombre="arrow-right" variante="m" class="h-3 w-3 text-[var(--texto-tenue)]" />
                        <input type="date" wire:model="fechaAperturaFinal" aria-label="Fecha apertura final"
                               class="min-w-0 flex-1 border-0 bg-transparent p-0 text-[13px] text-[var(--texto)] focus:ring-0">
                    </div>
                </div>
            </x-slot>
            <x-slot name="ayuda">Busque por número de documento de transporte, número DO o pedido; Enter o Consultar filtran la información.</x-slot>
            @if (count($chips))
                <x-slot name="chips">
                    @foreach ($chips as $campo => [$etiqueta, $valor])
                        <x-chip-filtro :etiqueta="$etiqueta" :valor="$valor" wire:click="limpiarFiltro('{{ $campo }}')" wire:key="chip-{{ $campo }}" />
                    @endforeach
                    <button type="button" wire:click="limpiarFiltros" class="text-[12px] text-[var(--texto-suave)] underline hover:text-[var(--texto)]">Limpiar todo</button>
                </x-slot>
            @endif
        </x-barra-busqueda>

        <section x-ref="lista" class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
            <div class="flex flex-wrap items-center justify-between gap-4 border-b border-[var(--borde)] px-5 py-3 text-[12px] text-[var(--texto-suave)]">
                <span><b class="font-bold text-[var(--texto)]">{{ number_format(count($pedidosCurso), 0, ',', '.') }}</b> registros consultados</span>
                <span class="flex flex-wrap items-center gap-3">
                    <span wire:loading.delay class="flex items-center gap-1.5 whitespace-nowrap text-[var(--acento-texto)]" role="status">
                        <x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…
                    </span>
                </span>
            </div>

            <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>Declaración</th>
                            <th>Fecha levante</th>
                            <th>Analista cliente</th>
                            <th>Proceso</th>
                            <th>Status</th>
                            <th>Pendientes</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($pedidos as $ped)
                            @php
                                $do = (string) $ped['NUMERO_DO'];
                                $doJs = \Illuminate\Support\Js::from($do)->toHtml();
                            @endphp
                            <tr wire:key="zf-{{ $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="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-zf-{{ $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 (!empty($ped['FECHA_DOC_TRANSPORTE']))<x-etiqueta variante="exito">{{ $ped['FECHA_DOC_TRANSPORTE'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td>@if ($ped['TIPO_DECLARACION'])<x-etiqueta class="text-[11.5px]">{{ $ped['TIPO_DECLARACION'] }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{!! $ped['FECHA_LEVANTE'] ? e($ped['FECHA_LEVANTE']) : $vacio !!}</td>
                                <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="zf-{{ $do }}-detalle" data-sin-hover x-show="abierto === @js($do)" x-cloak>
                                <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>
                            </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">Sin resultados para la consulta de información.</p></div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($pedidos->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $pedidos->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </section>
    </x-pagina>

    <x-icono-simbolos :nombres="['m:chevron-right', 'o:calendar-days', 'o:plus-circle', 'o:queue-list', 'o:magnifying-glass']" />

    <template id="plantilla-detalle-do">
        @include('partials.detalle-importacion.panel', ['local' => null])
    </template>

    {{-- Pendientes y anotaciones del DO --}}
    <template x-teleport="body">
        <div x-show="pendientesDe" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4" role="dialog" aria-modal="true" aria-labelledby="pendientes-titulo">
            <div class="fixed inset-0 bg-black/40" x-on:click="pendientesDe = null"></div>
            <div class="relative flex max-h-[85vh] w-full max-w-xl flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
                <div class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
                    <span class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]"><x-icono nombre="queue-list" class="h-5 w-5" /></span>
                    <h2 id="pendientes-titulo" class="text-[15px] font-bold text-[var(--texto)]">Pendientes del DO <span x-text="pendientesDe"></span></h2>
                </div>
                <div x-ref="contenidoPendientes" class="overflow-y-auto px-5 py-4"></div>
                <div class="flex justify-end border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
                    <x-secondary-button x-on:click="pendientesDe = null">Cerrar</x-secondary-button>
                </div>
            </div>
        </div>
    </template>
</div>