{{-- Histórico de pedidos de exportación (expo/pedidos/historico): DO con la factura enviada al cliente (etapa 3504) en el
     rango de fechas. Gemelo de importaciones.ordenes-compra-historico. Kit ui-ctc: búsqueda con filtros y etiquetas, y la
     tabla de Pedidos en Curso (cut off con semáforo y el detalle del DO en la fila). La lista sale al pulsar Consultar. --}}
@php
    $luz = ['green' => 'exito', 'yellow' => 'aviso', 'red' => 'peligro'];
    $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 ($fechaAperturaInicial != date('Y-m-01') || $fechaAperturaFinal != date('Y-m-d')) {
        $chips['fechas'] = ['Apertura', $formatoFecha($fechaAperturaInicial) . ' – ' . $formatoFecha($fechaAperturaFinal)];
    }
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    $columnas = 15;
@endphp
<div x-data="{
        abierto: null, ancho: 1100,
        init() {
            const medir = () => { if (this.$refs.lista) { this.ancho = this.$refs.lista.clientWidth; } };
            medir();
            new ResizeObserver(medir).observe(this.$refs.lista);
        },
        alternar(numeroDo) { this.abierto = this.abierto === numeroDo ? null : numeroDo; },
     }">
    <x-pagina>
        <x-encabezado-pagina ruta="Exportaciones · Pedidos en Curso" titulo="Histórico de pedidos"
                             descripcion="Operaciones con la factura enviada al cliente, por fecha de apertura.">
            <x-slot name="acciones">
                <x-enlace-boton href="{{ pantalla('/expo/pedidos-ws') }}"><x-icono nombre="arrow-left" /> Pedidos en Curso</x-enlace-boton>
            </x-slot>
        </x-encabezado-pagina>

        <x-barra-busqueda modelo="search" accion="consultar" placeholder="Buscar por N° DO, pedido, booking o cliente" :abierto="true" :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>
                <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
                </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="clock" class="h-[18px] w-[18px] text-[var(--texto-suave)]" />
                    Histórico
                    @if ($consultado)<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($totalPedidos, 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" title="Tiempo hasta el cut off (o con que se cumplió)">
                        <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>3 días o más</span>
                        <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-[3px] border border-amber-300 bg-amber-100 dark:border-amber-500/50 dark:bg-amber-500/20"></span>1 a 3 días</span>
                        <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>1 día o menos</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, por favor espere…
                    </span>
                </div>
            </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-[52px] min-w-[52px]" style="left: 44px"><span class="sr-only">Acciones</span></th>
                            <th class="ctc-fija ctc-fija-ultima" style="left: 96px"># DO</th>
                            <th>Booking</th>
                            <th>Pedido</th>
                            <th>Cliente</th>
                            <th><x-orden-columna etiqueta="Apertura" :activo="$orderBy == 'estados_do.FECHA_APERTURA'" :direccion="$orderType" wire:click="ordenarInfo('estados_do.FECHA_APERTURA', '{{ $orderType }}')" /></th>
                            <th>Suc. oper.</th>
                            <th>Pto salida</th>
                            <th><x-orden-columna etiqueta="Cut off documental" :activo="$orderBy == 'viajes_motonaves.CUT_OFF_DOCUMENTAL'" :direccion="$orderType" wire:click="ordenarInfo('viajes_motonaves.CUT_OFF_DOCUMENTAL', '{{ $orderType }}')" /></th>
                            <th>Cut off físico</th>
                            <th>Ingreso mercancía</th>
                            <th>Analista</th>
                            <th>Proceso</th>
                            <th>Status EH</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="hexpo-{{ $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))" :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">
                                    <a href="{{ pantalla('/seguimiento-exp/' . 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>
                                </td>
                                <td class="ctc-fija ctc-fija-ultima whitespace-nowrap font-semibold" style="left: 96px">{{ $do }}</td>
                                <td>@if ($ped->BOOKING)<x-etiqueta>{{ $ped->BOOKING }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{!! $ped->NUMERO_PEDIDO ? e($ped->NUMERO_PEDIDO) : $vacio !!}</td>
                                <td class="min-w-[180px] text-[12px] leading-snug">{{ $ped->CLIENTE }}</td>
                                <td class="whitespace-nowrap tabular-nums">{{ $ped->APERTURA }}</td>
                                <td>@if ($ped->SUCURSAL)<x-etiqueta variante="acento" class="font-bold">{{ $ped->SUCURSAL }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                                <td class="whitespace-nowrap">{{ $ped->SUCURSAL_OP }}</td>
                                @foreach ([['CUT_OFF_DOCUMENTAL', 'colorLuzDoc', 'textoDoc', 'diferenciaDoc'], ['CUT_OFF_FISICO', 'colorLuz', 'texto', 'diferencia']] as [$campo, $color, $texto, $diferencia])
                                    <td class="min-w-[150px]">
                                        @if ($ped->$campo)
                                            <x-etiqueta :variante="$luz[$ped->$color] ?? 'neutro'">{{ $ped->$campo }}</x-etiqueta>
                                            <p class="mt-1 text-[11.5px] text-[var(--texto-suave)]">{{ $ped->$texto }} {{ $ped->$diferencia }}</p>
                                        @else
                                            {!! $vacio !!}
                                        @endif
                                    </td>
                                @endforeach
                                <td class="whitespace-nowrap">{!! $ped->INGRESO_MERCANCIA ? e($ped->INGRESO_MERCANCIA) : $vacio !!}</td>
                                <td class="min-w-[160px] text-[12px]">{!! $ped->ANALISTA ? e($ped->ANALISTA) : $vacio !!}</td>
                                <td class="min-w-[120px] text-[12px]">{{ $ped->PROCESO }}</td>
                                <td>@if ($ped->ETAPA)<x-etiqueta color="#14b8a6">{{ $ped->ETAPA }}</x-etiqueta>@endif</td>
                            </tr>
                            <tr wire:key="hexpo-{{ $do }}-detalle" data-sin-hover x-show="abierto === @js($do)" x-cloak>
                                <td colspan="{{ $columnas }}" class="!border-b !bg-[var(--superficie-3)] !p-0">
                                    @include('livewire.exportaciones.partials.detalle-pedido', ['ped' => $ped])
                                </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">{{ $consultado ? 'No hay operaciones con estos filtros.' : 'Elija los filtros y pulse Consultar.' }}</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']" />
</div>