{{-- Detalle de órdenes de compra (detalleoc): una fila por material de la OC, con status. Kit ui-ctc (MigracionLayout.MD
     L3, pantallas de L2a). La búsqueda y los filtros consultan al cambiar, como antes. --}}
@php
    // Color de cada status (los mismos de antes, como color de la etiqueta).
    $coloresStatus = [
        'SIN CONFIRMAR OC' => '#94a3b8',
        'SIN EMBARCAR' => '#84cc16',
        'EN TRANSITO' => '#0ea5e9',
        'CON ARRIBO' => '#f97316',
        'COMPLETADO' => '#71717a',
    ];
    $chips = [];
    if ($buscar !== '') { $chips['buscar'] = ['Búsqueda', $buscar]; }
    if ($status !== '') { $chips['status'] = ['Status', $status]; }
    if ($compania !== '') { $chips['compania'] = ['Compañía', $compania]; }
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
    // Antes lo hacía un @php dentro del script de doble clic: se ejecutaba al pintar la página.
    session(['BuscarAct' => '']);
@endphp
<div>
<x-pagina>
    <x-icono-simbolos :nombres="['o:calendar-days']" />

    <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Detalle de órdenes de compra">
        <x-slot name="acciones">
            <x-secondary-button wire:click="exportar" wire:loading.attr="disabled" wire:target="exportar">
                <x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" />
                <span wire:loading.remove wire:target="exportar">Descargar Excel</span>
                <span wire:loading wire:target="exportar">Generando…</span>
            </x-secondary-button>
        </x-slot>
    </x-encabezado-pagina>

    <x-barra-busqueda modelo="buscar" accion="$refresh" vivo placeholder="Buscar por código, material, orden de compra o número DO" :activos="count($chips)" :abierto="true">
        <x-slot name="filtros">
            <x-campo etiqueta="Status" para="status">
                <x-select id="status" wire:model.live="status">
                    <option value="">Todos</option>
                    @foreach (array_keys($coloresStatus) as $valor)<option value="{{ $valor }}">{{ $valor }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Compañía" para="compania">
                <x-select id="compania" wire:model.live="compania">
                    <option value="">Todas</option>
                    @foreach ($companias ?? [] as $c)<option value="{{ $c->razon_social }}">{{ $c->razon_social }}</option>@endforeach
                </x-select>
            </x-campo>
        </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 }}')" />
                @endforeach
            </x-slot>
        @endif
    </x-barra-busqueda>

    <section 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-3 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($rows->total(), 0, ',', '.') }}</b> registros · doble clic en una fila abre el seguimiento</span>
            <span wire:loading.delay class="flex items-center gap-1.5 text-[var(--acento-texto)]" role="status"><x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" /> Consultando…</span>
        </div>
        <div class="ctc-tabla-caja">
            <table class="ctc-tabla">
                <thead>
                    <tr>
                        <th class="ctc-fija ctc-fija-ultima" style="left: 0"><span class="sr-only">Seguimiento</span></th>
                        <th>Status</th>
                        <th>Compañía</th>
                        <th>DO</th>
                        <th>Orden de compra</th>
                        <th>Fecha OC</th>
                        <th>Proveedor</th>
                        <th>Código</th>
                        <th>Material</th>
                        <th class="!text-right">Cant. solicitada</th>
                        <th>UM</th>
                        <th>Posible ETA</th>
                        <th>ETA</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($rows as $r)
                        <tr class="cursor-pointer" ondblclick="window.open('/rbactivivades?txtBuscar=' + encodeURIComponent({{ \Illuminate\Support\Js::from((string) $r->numped) }}), 'Seguimiento de la Orden de Compra', 'width=1024,height=768')">
                            <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0">
                                <a href="{{ pantalla('/rbactivivades?txtBuscar=' . $r->numped) }}" class="ctc-accion" title="Seguimiento" aria-label="Seguimiento de la orden"><x-icono nombre="calendar-days" sprite class="h-[18px] w-[18px]" /></a>
                            </td>
                            <td>@if ($r->STATUS)<x-etiqueta :color="$coloresStatus[$r->STATUS] ?? null">{{ $r->STATUS }}</x-etiqueta>@else{!! $vacio !!}@endif</td>
                            <td class="min-w-[160px] text-[12px] leading-snug">{!! $r->RAZON_SOCIAL ? e($r->RAZON_SOCIAL) : $vacio !!}</td>
                            <td class="whitespace-nowrap font-semibold">{!! $r->numero_do ? e($r->numero_do) : $vacio !!}</td>
                            <td class="whitespace-nowrap">{!! $r->ORDEN_DE_COMPRA ? e($r->ORDEN_DE_COMPRA) : $vacio !!}</td>
                            <td class="whitespace-nowrap">{!! $r->FECHA_OC ? e($r->FECHA_OC) : $vacio !!}</td>
                            <td class="min-w-[160px] text-[12px] leading-snug">{!! $r->PROVEEDOR ? e($r->PROVEEDOR) : $vacio !!}</td>
                            <td class="whitespace-nowrap font-mono text-[12px]">{!! $r->CODIGO ? e($r->CODIGO) : $vacio !!}</td>
                            <td class="min-w-[220px] text-[12px] leading-snug">{!! $r->MATERIAL ? e($r->MATERIAL) : $vacio !!}</td>
                            <td class="text-right">{{ $r->CANTIDAD_SOLICITADA ?? 0 }}</td>
                            <td>{!! $r->UM ? e($r->UM) : $vacio !!}</td>
                            <td class="whitespace-nowrap">{!! $r->POSIBLE_ETA ? e($r->POSIBLE_ETA) : $vacio !!}</td>
                            <td class="whitespace-nowrap">{!! $r->ETA ? e($r->ETA) : $vacio !!}</td>
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="13" 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 registros con los filtros aplicados.</p></div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($rows->hasPages())
            <div class="border-t border-[var(--borde)] px-5 py-3">{{ $rows->links('vendor.pagination.ctc-livewire') }}</div>
        @endif
    </section>
</x-pagina>
</div>