{{-- Global importación (global-importaciones) de Brinsa y Groupe SEB: cada cliente tiene su componente (consulta y
     columnas propias) y comparten esta vista. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a).
     Parámetros: $titulo, $headers, $anchas (columnas de texto largo), $filas (paginador). --}}
@php $vacio = '<span class="text-[var(--texto-tenue)]">—</span>'; @endphp
<div>
<x-pagina>
    <x-encabezado-pagina ruta="Importaciones · Reportes" :titulo="$titulo">
        <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">Exportar</span>
                <span wire:loading wire:target="exportar">Generando…</span>
            </x-secondary-button>
        </x-slot>
    </x-encabezado-pagina>

    <x-barra-busqueda modelo="search" accion="consultar" placeholder="Buscar por DO, OC, proveedor o material" :abierto="true" :activos="$search ? 1 : 0">
        <x-slot name="filtros">
            <x-campo etiqueta="Fecha inicial" para="startDate"><x-input type="date" id="startDate" wire:model="startDate" /></x-campo>
            <x-campo etiqueta="Fecha final" para="endDate"><x-input type="date" id="endDate" wire:model="endDate" /></x-campo>
        </x-slot>
        @if ($search)
            <x-slot name="chips"><x-chip-filtro etiqueta="Búsqueda" :valor="$search" wire:click="limpiarFiltro('search')" /></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 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($filas->total(), 0, ',', '.') }}</b> registros</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>@foreach ($headers as $header)<th>{{ str_replace('_', ' ', $header) }}</th>@endforeach</tr></thead>
                <tbody>
                    @forelse ($filas as $fila)
                        <tr>
                            @foreach ($headers as $header)
                                @php $valor = $fila[$header] ?? ''; @endphp
                                @if (in_array($header, $anchas))
                                    <td class="max-w-[240px] truncate text-[12.5px]" title="{{ $valor }}">{!! $valor !== '' ? e($valor) : $vacio !!}</td>
                                @elseif ($valor === '' || $valor === null)
                                    <td>{!! $vacio !!}</td>
                                @else
                                    <td class="whitespace-nowrap {{ is_numeric($valor) ? 'text-right' : '' }} {{ $loop->first ? 'font-semibold' : '' }}">{{ $valor }}</td>
                                @endif
                            @endforeach
                        </tr>
                    @empty
                        <tr data-sin-hover>
                            <td colspan="{{ max(1, count($headers)) }}" 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 los filtros seleccionados.</p></div>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($filas->hasPages())
            <div class="border-t border-[var(--borde)] px-5 py-3">{{ $filas->links('vendor.pagination.ctc-livewire') }}</div>
        @endif
    </section>
</x-pagina>
</div>