{{-- Histórico de pedidos de importación (impo/ordenes-compra-historico): DO ya facturados. Layout nuevo con el kit
     ui-ctc (pantalla de tabla y filtros, sin indicadores). Solo consulta cuando se pulsa Consultar (o llegan filtros
     por la URL); la tabla es la de Pedidos en curso, paginada en la base y con el detalle de cada DO en la fila. --}}
@php
    $coloresEtapa = ['ENVIO FACTURA AL CLIENTE' => '#14b8a6'];
    $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 ($codigoSucursal) { $chips['codigoSucursal'] = ['Sucursal', $sucursales[$codigoSucursal] ?? $codigoSucursal]; }
    if ($delayProcess) { $chips['delayProcess'] = ['Pendiente', $delayProcess]; }
    if ($fechaAperturaInicial || $fechaAperturaFinal) {
        $chips['fechas'] = ['Apertura', $formatoFecha($fechaAperturaInicial) . ' – ' . $formatoFecha($fechaAperturaFinal)];
    }
@endphp
<div x-data="{
        abierto: null, ancho: 1100, pendientesDe: null, pestana: 'historico',
        init() {
            const medir = () => { if (this.$refs.lista) { this.ancho = this.$refs.lista.clientWidth; } };
            medir();
            new ResizeObserver(medir).observe(this.$refs.lista);
        },
        // El detalle ya viene en la fila: solo se despliega (uno a la vez).
        alternar(numeroDo) { this.abierto = this.abierto === numeroDo ? null : numeroDo; },
        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="Histórico de pedidos"
                             descripcion="Operaciones ya facturadas. Sin fechas, se consulta desde el 01/01/2025 hasta hoy.">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/impo/ordenes-compra-ws') }}">
                    <x-icono nombre="arrow-uturn-left" class="h-4 w-4" />
                    Regresar a Pedidos
                </x-enlace-boton>
                <x-secondary-button wire:click="descargarPedidos" wire:loading.attr="disabled" wire:target="descargarPedidos">
                    <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>

        <x-barra-busqueda modelo="search" accion="consultarPedidos" placeholder="Buscar por N° documento de transporte, N° DO o pedido" :activos="count($chips)" :abierto="true">
            <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="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 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 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>

        <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">
                <h2 class="flex items-center gap-2 text-[14px] font-semibold text-[var(--texto)]">
                    <x-icono nombre="archive-box" class="h-[18px] w-[18px] text-[var(--texto-suave)]" />
                    Pedidos facturados
                    @if ($paginador)
                        <span class="rounded-full bg-[var(--acento-suave)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--acento-texto)]">{{ number_format($totalRegistros, 0, ',', '.') }}</span>
                    @endif
                </h2>
                <div class="flex flex-wrap items-center gap-4 text-[12px] text-[var(--texto-suave)]">
                    <span class="flex items-center gap-3">
                        <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>

            @if ($paginador)
                @include('livewire.importaciones.partials.pedidos-tabla', ['lista' => $paginador->setCollection(collect($pedidos)), 'clave' => 'historico', 'detalleEnLinea' => true, 'conDeclaracion' => false])
            @else
                <div class="px-5 py-14 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">Use la búsqueda o los filtros y pulse <b class="font-semibold text-[var(--texto)]">Consultar</b> para ver el histórico.</p>
                </div>
            @endif
        </section>
    </x-pagina>

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

    {{-- 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>