{{-- Pedidos en curso de importación (impo/pedidos). Layout nuevo con el kit ui-ctc (diseño "Rediseño de Pedidos en
     Curso"): indicadores por status, búsqueda con filtros desplegables y etiquetas de filtros aplicados, y la lista en
     dos pestañas (Otros procesos y Prórrogas temporales) con cabecera fija, paginada y con el detalle de cada DO. --}}
@php
    // Color de cada status, para la barra del indicador y la etiqueta de la tabla.
    $coloresEtapa = [
        'SIN EMBARCAR' => '#94a3b8',
        'EN TRANSITO' => '#3b82f6',
        'ARRIBO SIN LEVANTE' => '#f59e0b',
        'ARRIBO CON LEVANTE' => '#8b5cf6',
        'ENTREGA DOCUMENTOS TRANSPORTE' => '#ef4444',
        'CON RETIRO EN PUERTO' => '#10b981',
    ];
    $formatoFecha = fn ($f) => $f ? implode('/', array_reverse(explode('-', $f))) : '';

    // Filtros aplicados, para las etiquetas (chips) y el contador del botón Filtros.
    $chips = [];
    if ($search) { $chips['search'] = ['Búsqueda', $search]; }
    if ($codigoProceso) { $chips['codigoProceso'] = ['Proceso', $procesos[$codigoProceso] ?? $codigoProceso]; }
    if ($codigoSucursal) { $chips['codigoSucursal'] = ['Sucursal', $sucursales[$codigoSucursal] ?? $codigoSucursal]; }
    if ($tipoDeclaracion) { $chips['tipoDeclaracion'] = ['Tipo declaración', $tipoDeclaracion]; }
    if ($filtroCompania && $idCompania) { $chips['idCompania'] = ['Importador', $lstCompanias[$idCompania] ?? $idCompania]; }
    if ($segmento && $idSegmentoCliente) { $chips['idSegmentoCliente'] = [$tituloSegmento, $lstSegmentosClientes[$idSegmentoCliente] ?? $idSegmentoCliente]; }
    if ($status) { $chips['status'] = ['Status', $status]; }
    if ($delayProcess) { $chips['delayProcess'] = ['Pendiente', $delayProcess]; }
    if (($fechaAperturaInicial && $fechaAperturaInicial != $aperturaDesde) || ($fechaAperturaFinal && $fechaAperturaFinal != date('Y-m-d'))) {
        $chips['fechas'] = ['Apertura', $formatoFecha($fechaAperturaInicial) . ' – ' . $formatoFecha($fechaAperturaFinal)];
    }
    $totalConsultado = count($pedidosCurso) + count($pedidosCursoTemporales);
@endphp
<div x-data="{
        ...ctcDetalleDo(),
        pestana: 'otros', pendientesDe: null,
        verPendientes(numeroDo) {
            const plantilla = document.getElementById('pend-' + this.pestana + '-' + 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">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/impo/ordenes-compra-historico') }}" class="ctc-no-imprimir">
                    <x-icono nombre="clock" class="h-4 w-4" />
                    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

        {{-- Búsqueda y filtros --}}
        <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>
                @if ($filtroCompania)
                    <x-campo etiqueta="Importador" para="idCompania">
                        <x-select id="idCompania" wire:model.live="idCompania">
                            <option value="">Todos</option>
                            @foreach ($lstCompanias as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                        </x-select>
                    </x-campo>
                @endif
                @if ($segmento)
                    <x-campo :etiqueta="$tituloSegmento" para="idSegmentoCliente">
                        <x-select id="idSegmentoCliente" wire:model="idSegmentoCliente">
                            <option value="">Todos</option>
                            @foreach ($lstSegmentosClientes as $valor => $nombre)<option value="{{ $valor }}">{{ $nombre }}</option>@endforeach
                        </x-select>
                    </x-campo>
                @endif
                <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>
            @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>

        {{-- Lista --}}
        <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">
                <div class="flex gap-1" role="tablist">
                    <x-pestana etiqueta="Otros procesos" :conteo="count($pedidosCurso)" icono="list-bullet" alpine="pestana === 'otros'" x-on:click="pestana = 'otros'; abierto = null" />
                    <x-pestana etiqueta="Prórrogas temporales" :conteo="count($pedidosCursoTemporales)" icono="list-bullet" alpine="pestana === 'temporales'" x-on:click="pestana = 'temporales'; abierto = null" />
                </div>
                <div class="flex flex-wrap items-center gap-4 py-2 text-[12px] text-[var(--texto-suave)]">
                    <span><b class="font-bold text-[var(--texto)]">{{ number_format($totalConsultado, 0, ',', '.') }}</b> registros consultados</span>
                    <span class="flex items-center gap-3 border-l border-[var(--borde)] pl-4">
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-rose-300 bg-rose-100 dark:border-rose-500/50 dark:bg-rose-500/20"></span>Pendiente</span>
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-emerald-300 bg-emerald-100 dark:border-emerald-500/50 dark:bg-emerald-500/20"></span>Completado</span>
                    </span>
                    <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>
                </div>
            </div>

            <div x-show="pestana === 'otros'">
                @include('livewire.importaciones.partials.pedidos-tabla', ['lista' => $otros, 'clave' => 'otros'])
            </div>
            <div x-show="pestana === 'temporales'" x-cloak>
                @include('livewire.importaciones.partials.pedidos-tabla', ['lista' => $temporales, 'clave' => 'temporales'])
            </div>
        </section>
    </x-pagina>

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

    {{-- Panel de detalle del DO abierto (uno para toda la página; cada fila copia este al abrirse). Ocupa el ancho
         visible de la tabla y no se desplaza con ella. --}}
    <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>