{{-- Auditoría ETA (/auditorias). Kit ui-ctc (MigracionLayout.MD, L3): rango de fechas por GET (fecha_inicial,
     fecha_final), descarga en Excel con el mismo rango (/auditorias/export) y lista paginada de 10. --}}
@php
    $fecha_inicial_default = date('Y-m-01'); // Primer día del mes actual
    $fecha_final_default = date('Y-m-d');    // Fecha actual
    $vacio = '<span class="text-[var(--texto-tenue)]">N/A</span>';
@endphp
<x-app-layout titulo="Auditoría ETA">
    <x-pagina>
        <x-encabezado-pagina ruta="Importaciones · Operaciones" titulo="Auditoría ETA" descripcion="Buscar actividades por fecha de actualización de la ETA.">
            <x-slot name="acciones">
                <form action="{{ route('auditoria.export') }}" method="GET">
                    <input type="hidden" name="fecha_inicial" value="{{ request('fecha_inicial', $fecha_inicial_default) }}">
                    <input type="hidden" name="fecha_final" value="{{ request('fecha_final', $fecha_final_default) }}">
                    <x-secondary-button type="submit"><x-icono nombre="table-cells" class="h-4 w-4 text-emerald-600 dark:text-emerald-400" /> Descargar en Excel</x-secondary-button>
                </form>
            </x-slot>
        </x-encabezado-pagina>

        <x-tarjeta titulo="Filtros">
            <form action="{{ route('auditoria-eta') }}" method="GET" class="flex flex-wrap items-end gap-4">
                <x-campo etiqueta="Fecha inicial" para="fecha_inicial" class="w-full sm:w-56">
                    <x-input type="date" id="fecha_inicial" name="fecha_inicial" value="{{ request('fecha_inicial', $fecha_inicial_default) }}" required />
                </x-campo>
                <x-campo etiqueta="Fecha final" para="fecha_final" class="w-full sm:w-56">
                    <x-input type="date" id="fecha_final" name="fecha_final" value="{{ request('fecha_final', $fecha_final_default) }}" required />
                </x-campo>
                <x-button><x-icono nombre="magnifying-glass" class="h-4 w-4" /> Buscar</x-button>
            </form>
        </x-tarjeta>

        <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">
                <h2 class="flex items-center gap-2 text-[14px] font-bold text-[var(--texto)]">
                    Actividades
                    <span class="rounded-full bg-[var(--superficie-2)] px-2 py-0.5 text-[11px] font-bold tabular-nums text-[var(--texto-suave)]">{{ number_format($actividades->total(), 0, ',', '.') }}</span>
                </h2>
            </div>
            <div class="ctc-tabla-caja">
                <table class="ctc-tabla">
                    <thead>
                        <tr>
                            <th>Número DO</th>
                            <th>Orden compra</th>
                            <th>ETA anterior</th>
                            <th>Nueva ETA</th>
                            <th>Número BL</th>
                            <th>Fecha actualización</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($actividades as $actividad)
                            <tr>
                                <td class="font-mono">{!! isset($actividad['numero_do']) ? e($actividad['numero_do']) : $vacio !!}</td>
                                <td>{!! isset($actividad['po']) ? e($actividad['po']) : $vacio !!}</td>
                                <td class="whitespace-nowrap">{{ $actividad['eta_anterior'] }}</td>
                                <td class="whitespace-nowrap">{{ $actividad['eta_nueva'] }}</td>
                                <td>{{ $actividad['documento_transporte'] }}</td>
                                <td class="whitespace-nowrap">{{ $actividad['updated_at'] }}</td>
                            </tr>
                        @empty
                            <tr data-sin-hover><td colspan="6" 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 se encontraron actividades en el rango de fechas seleccionado.</p>
                                </div>
                            </td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($actividades->hasPages())
                <div class="border-t border-[var(--borde)] px-5 py-3">{{ $actividades->links('vendor.pagination.ctc') }}</div>
            @endif
        </section>
    </x-pagina>
</x-app-layout>