{{--
	Trazabilidad de la ejecución. Los hitos se derivan del ERP, igual que el
	embudo de la vista principal: no se persisten.
--}}
<x-tarjeta titulo="Trazabilidad de la ejecución">
	<ol class="grid grid-cols-2 gap-y-5 lg:grid-cols-4">
		@foreach ($trazabilidad as $indice => $paso)
			@php
				$siguiente = $trazabilidad[$indice + 1] ?? null;
				$lineaActiva = $siguiente && $siguiente['estado'] !== 'pendiente';
			@endphp
			<li class="flex flex-col gap-2 pr-4">
				<div class="flex items-center">
					<span @class([
						'h-3.5 w-3.5 flex-none rounded-full',
						'bg-[var(--acento)] ring-[3px] ring-[var(--acento-suave)]' => $paso['estado'] === 'cumplido',
						'bg-amber-500 ring-[3px] ring-amber-100 dark:ring-amber-500/20' => $paso['estado'] === 'curso',
						'border-2 border-[var(--borde-fuerte)] bg-[var(--superficie)]' => $paso['estado'] === 'pendiente',
					])></span>
					@if ($indice < count($trazabilidad) - 1)
						<span @class([
							'ml-1 h-0.5 flex-1',
							'bg-[var(--acento)]' => $lineaActiva,
							'bg-[var(--borde)]' => !$lineaActiva && $paso['estado'] === 'cumplido',
						])></span>
					@endif
				</div>

				<div class="flex flex-col gap-0.5">
					<span @class(['text-[13px] font-semibold',
						'text-[var(--texto)]' => $paso['estado'] !== 'pendiente',
						'text-[var(--texto-tenue)]' => $paso['estado'] === 'pendiente'])>{{ $paso['titulo'] }}</span>
					<span class="whitespace-nowrap font-mono text-[12px] text-[var(--texto-suave)]">
						{{ $paso['fecha'] ? \Carbon\Carbon::parse($paso['fecha'])->format('d M Y') : '—' }}
					</span>
					<span class="text-[12px] leading-snug text-[var(--texto-suave)]">{{ $paso['detalle'] }}</span>
				</div>
			</li>
		@endforeach
	</ol>

	@if (empty($idPurchaseOrder))
		<p class="mt-4 rounded-lg bg-[var(--superficie-2)] px-3 py-2 text-[12px] text-[var(--texto-suave)]">
			La ejecución se alimenta del ERP y aparecerá cuando la orden tenga órdenes de servicio asociadas.
		</p>
	@endif
</x-tarjeta>