{{-- Reportes específicos (reportes-espe): reportes configurados en `reportes_especificos` para el grupo o para todos.
     Consultar descarga el Excel y muestra el resultado debajo. Kit ui-ctc (MigracionLayout.MD L3, pantallas de L2a). --}}
@php
    $vacio = '<span class="text-[var(--texto-tenue)]">—</span>';
@endphp
<div>
<x-pagina>
    <x-encabezado-pagina ruta="Reportes · Reportes especiales" titulo="Reportes específicos"
                         descripcion="Reportes generados a partir de la información de nuestros sistemas." />

    @if ($errors->any())
        <x-alerta tipo="error">
            <p class="font-semibold">Se presentaron los siguientes errores:</p>
            <ul class="mt-1 list-inside list-disc">@foreach ($errors->all() as $error)<li>{{ $error }}</li>@endforeach</ul>
        </x-alerta>
    @endif

    <x-tarjeta titulo="Reporte" descripcion="Al consultar se descarga el Excel y el resultado se muestra abajo.">
        <div class="grid gap-4 sm:grid-cols-2 {{ $filtroCompania ? 'lg:grid-cols-4' : 'lg:grid-cols-3' }}">
            @if ($filtroCompania)
                <x-campo etiqueta="Importador" para="idCompania">
                    <x-select id="idCompania" wire:model="idCompania">
                        <option value="">Todos</option>
                        @foreach ($lstCompanias as $id => $nombre)<option value="{{ $id }}">{{ $nombre }}</option>@endforeach
                    </x-select>
                </x-campo>
            @endif
            <x-campo etiqueta="Reporte" para="idReporte">
                <x-select id="idReporte" wire:model.live="idReporte">
                    <option value="">Seleccione un reporte</option>
                    @foreach ($reportes as $id => $nombre)<option value="{{ $id }}">{{ $nombre }}</option>@endforeach
                </x-select>
            </x-campo>
            <x-campo etiqueta="Fecha inicial" para="fechaInicial" ayuda="Vacía: el primer día del mes.">
                <x-input type="date" id="fechaInicial" wire:model="fechaInicial" />
            </x-campo>
            <x-campo etiqueta="Fecha final" para="fechaFinal" ayuda="Vacía: hoy.">
                <x-input type="date" id="fechaFinal" wire:model="fechaFinal" />
            </x-campo>
        </div>
        <div class="mt-4 flex flex-wrap items-center gap-3">
            <x-button type="button" wire:click="consultarInformacion()" wire:loading.attr="disabled" wire:target="consultarInformacion">
                <x-icono nombre="table-cells" /> Consultar y descargar
            </x-button>
            <span wire:loading.flex wire:target="consultarInformacion" class="items-center gap-1.5 text-[12px] text-[var(--texto-suave)]" role="status">
                <x-icono nombre="arrow-path" class="h-3.5 w-3.5 animate-spin" /> Generando la consulta; puede tardar unos segundos…
            </span>
        </div>
    </x-tarjeta>

    @if ($consultado)
        <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">
                <p class="text-[13px] text-[var(--texto-suave)]"><span class="font-semibold tabular-nums text-[var(--texto)]">{{ number_format($filas ? $filas->total() : 0, 0, ',', '.') }}</span> registros</p>
            </div>
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            @foreach ($cabecera as $columna)<th>{{ str_replace('_', ' ', $columna) }}</th>@endforeach
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($filas ?? [] as $fila)
                            <tr>
                                @foreach ($fila as $valor)
                                    @if ($valor === null || $valor === '')
                                        <td>{!! $vacio !!}</td>
                                    @elseif (is_numeric($valor))
                                        <td class="whitespace-nowrap text-right">{{ $valor }}</td>
                                    @else
                                        <td class="min-w-[8rem] text-[12.5px]">{{ $valor }}</td>
                                    @endif
                                @endforeach
                            </tr>
                        @empty
                            <tr data-sin-hover>
                                <td colspan="{{ max(count($cabecera), 1) }}" 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">{{ $filas ? 'La consulta no arrojó resultados.' : 'El resultado ya no está disponible: consulte de nuevo.' }}</p>
                                    </div>
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($filas && $filas->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $filas->links('vendor.pagination.ctc-livewire') }}</div>
            @endif
        </section>
    @endif
</x-pagina>
</div>