{{-- Línea de tiempo de etapas (impo y expo): un paso numerado por actividad, en el orden de la consulta, con la etapa
     y su fecha; sin fecha, en --texto-tenue. Parámetros:
       $actividades   paginador o colección (campos etapa, fecha);
       $descendente   true: numera de N a 1 (como antes en impo y en expo con timeline DESC); false: de 1 a N;
       $marcarFuturas true: la fecha posterior a hoy va en rojo (convención de expo, antes con el color de la empresa
                      para las demás). --}}
@php
    $marcarFuturas = $marcarFuturas ?? false;
    $totalPasos = $actividades->count();
    $hoy = date('Y-m-d');
@endphp
<x-tarjeta titulo="Etapas" descripcion="Línea de tiempo de las actividades del pedido.">
    <x-slot name="acciones">
        <span class="flex flex-wrap items-center gap-3 text-[12px] text-[var(--texto-suave)]">
            <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-[var(--acento)]"></span>Con fecha</span>
            @if ($marcarFuturas)
                <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full bg-red-600 dark:bg-red-500"></span>Fecha futura</span>
            @endif
            <span class="flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-full border border-[var(--borde-fuerte)] bg-[var(--superficie)]"></span>Sin fecha</span>
        </span>
    </x-slot>

    @if ($totalPasos > 0)
        <ol class="flex overflow-x-auto pb-1">
            @foreach ($actividades as $fil)
                @php
                    $numeroPaso = $descendente ? $totalPasos - $loop->index : $loop->iteration;
                    $conFecha = $fil->fecha !== null && $fil->fecha !== '';
                    $futura = $marcarFuturas && $conFecha && $hoy < $fil->fecha;
                    $claseCirculo = $futura
                        ? 'bg-red-600 text-white dark:bg-red-500'
                        : ($conFecha ? 'bg-[var(--acento)] text-[var(--acento-contraste)]' : 'border border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto-tenue)]');
                @endphp
                <li class="relative flex min-w-[8.5rem] flex-1 flex-col items-center px-2 text-center">
                    @unless ($loop->last)
                        <span aria-hidden="true" class="absolute left-1/2 top-4 h-px w-full bg-[var(--borde-fuerte)]"></span>
                    @endunless
                    <span class="relative flex h-8 w-8 items-center justify-center rounded-full text-[13px] font-semibold tabular-nums {{ $claseCirculo }}"
                          @if ($futura) title="Fecha futura" @endif>{{ $numeroPaso }}</span>
                    <span class="mt-2 text-[12px] font-semibold leading-snug {{ $conFecha ? 'text-[var(--texto)]' : 'text-[var(--texto-tenue)]' }}">{{ $fil->etapa }}</span>
                    <span class="mt-0.5 whitespace-nowrap text-[12px] tabular-nums {{ $futura ? 'font-semibold text-red-600 dark:text-red-400' : ($conFecha ? 'text-[var(--texto-suave)]' : 'text-[var(--texto-tenue)]') }}">{{ $conFecha ? $fil->fecha : 'Sin fecha' }}</span>
                </li>
            @endforeach
        </ol>
    @else
        <p class="py-4 text-center text-[13px] text-[var(--texto-suave)]">El pedido no tiene actividades registradas.</p>
    @endif
</x-tarjeta>