{{-- Tabla de actividades (impo y expo) con cabecera fija. Parámetros:
       $actividades  paginador (campos id, codigo, etapa, fecha, hora, descripcion);
       $conCodigo    muestra la columna Código;
       $conAcciones  editar y eliminar por fila (antes columnas Editar y Eliminar);
       $controlador  'ActividadController' o 'ExActividadController' (action() del formulario de eliminar, como antes);
       $rutaBase     'ractividad' o 'rexactividad' (enlace de editar: {rutaBase}/{id}/edit);
       $ordenTabla   campo por el que se ordenan las filas, como las ordenaba DataTables por la primera columna
                     ('codigo' o 'etapa');
       $filtrable    campo para filtrar las filas en el navegador (la búsqueda de DataTables del detalle). --}}
@php
    $conAcciones = $conAcciones ?? false;
    $filtrable = $filtrable ?? false;
    $filas = $actividades->getCollection()->sortBy(fn ($f) => (string) $f->{$ordenTabla}, SORT_NATURAL | SORT_FLAG_CASE)->values();
    $columnas = 4 + ($conCodigo ? 1 : 0) + ($conAcciones ? 1 : 0);
@endphp
<section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]"
         @if ($filtrable) x-data="{ filtro: '' }" @endif>
    @if ($conAcciones)
        <x-icono-simbolos :nombres="['o:pencil-square', 'o:trash']" />
    @endif
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-5 py-3">
        <h2 class="text-[15px] font-bold text-[var(--texto)]">Actividades
            <span class="ml-1 text-[13px] font-normal tabular-nums text-[var(--texto-suave)]">{{ number_format($filas->count(), 0, ',', '.') }}</span>
        </h2>
        @if ($filtrable)
            <div class="relative w-full max-w-xs">
                <x-icono nombre="magnifying-glass" class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--texto-tenue)]" />
                <input type="search" x-model="filtro" placeholder="Filtrar actividades" aria-label="Filtrar actividades"
                       class="form-input block h-9 w-full rounded-md border-[var(--borde-fuerte)] bg-[var(--superficie)] pl-9 text-[13px] text-[var(--texto)] placeholder:text-[var(--texto-tenue)] focus:border-[var(--acento)] focus:ring-[var(--acento)]">
            </div>
        @endif
    </div>
    <div class="ctc-tabla-caja">
        <table class="ctc-tabla">
            <thead>
                <tr>
                    @if ($conAcciones)
                        <th class="ctc-fija ctc-fija-ultima" style="left: 0">Acciones</th>
                    @endif
                    @if ($conCodigo)
                        <th class="text-right">Código</th>
                    @endif
                    <th>Etapa</th>
                    <th>Fecha</th>
                    <th>Hora</th>
                    <th>Descripción</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($filas as $fil)
                    <tr @if ($filtrable) x-show="!filtro || $el.innerText.toLowerCase().includes(filtro.toLowerCase())" @endif>
                        @if ($conAcciones)
                            <td class="ctc-fija ctc-fija-ultima !px-2" style="left: 0">
                                <div class="flex items-center gap-1">
                                    <a href="{{ pantalla('/' . $rutaBase . '/' . $fil->id . '/edit') }}" class="ctc-accion" aria-label="Editar actividad" title="Editar">
                                        <x-icono nombre="pencil-square" sprite class="h-[18px] w-[18px]" />
                                    </a>
                                    <form action="{{ action($controlador . '@destroy', $fil->id) }}" method="post" onsubmit="return confirm('¿Seguro que deseas eliminarlo?')">
                                        @csrf
                                        <input name="_method" type="hidden" value="DELETE">
                                        <button type="submit" class="ctc-accion text-red-600 dark:text-red-400" aria-label="Eliminar actividad" title="Eliminar">
                                            <x-icono nombre="trash" sprite class="h-[18px] w-[18px]" />
                                        </button>
                                    </form>
                                </div>
                            </td>
                        @endif
                        @if ($conCodigo)
                            <td class="text-right tabular-nums">{{ $fil->codigo }}</td>
                        @endif
                        <td>{{ $fil->etapa }}</td>
                        <td class="whitespace-nowrap tabular-nums">@if (filled($fil->fecha)){{ $fil->fecha }}@else<span class="text-[var(--texto-tenue)]">—</span>@endif</td>
                        <td class="whitespace-nowrap tabular-nums">@if (filled($fil->hora)){{ $fil->hora }}@else<span class="text-[var(--texto-tenue)]">—</span>@endif</td>
                        <td>@if (filled($fil->descripcion)){{ $fil->descripcion }}@else<span class="text-[var(--texto-tenue)]">—</span>@endif</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="queue-list" class="mx-auto h-7 w-7 text-[var(--texto-tenue)]" />
                                <p class="mt-2">No hay actividades registradas.</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>