{{--
	Historial de cambios de modalidad (RN-5.3): orden cronológico, solo lectura.
	Solo para una OC guardada.
--}}
@if ($idPurchaseOrder)
	<section class="min-w-0 overflow-hidden rounded-xl border border-[var(--borde)] bg-[var(--superficie)]">
		<header class="flex flex-wrap items-center justify-between gap-3 border-b border-[var(--borde)] px-4 py-3">
			<div>
				<h2 class="text-[15px] font-bold text-[var(--texto)]">Cambios de modalidad</h2>
				<p class="mt-0.5 text-[12px] text-[var(--texto-suave)]">Cada cambio con su motivo. No se puede editar ni borrar.</p>
			</div>
			<x-etiqueta>{{ count($historialModalidad) }}</x-etiqueta>
		</header>

		@if (count($historialModalidad) === 0)
			<div class="px-4 py-6 text-center text-[13px] text-[var(--texto-suave)]">
				<x-icono nombre="clock" class="mx-auto h-6 w-6 text-[var(--texto-tenue)]" />
				<p class="mt-2">La modalidad no ha cambiado desde la carga de la orden.</p>
			</div>
		@else
			<div class="ctc-tabla-caja" style="--alto-tabla: 20rem">
				<table class="ctc-tabla">
					<thead>
						<tr>
							<th>Fecha</th>
							<th>Cambio</th>
							<th>Motivo</th>
							<th>Usuario</th>
						</tr>
					</thead>
					<tbody>
						@foreach ($historialModalidad as $i => $cambio)
							<tr wire:key="cambio-modalidad-{{ $i }}">
								<td class="whitespace-nowrap align-top font-mono">
									{{ \Carbon\Carbon::parse($cambio['fecha'])->format('d/m/Y H:i') }}
								</td>
								<td class="align-top">
									<span class="text-[var(--texto-suave)]">{{ $cambio['anterior'] ?? 'Sin modalidad' }}</span>
									<x-icono nombre="arrow-right" variante="m" class="mx-1 inline h-3.5 w-3.5 text-[var(--texto-tenue)]" />
									<strong>{{ $cambio['nuevo'] }}</strong>
								</td>
								<td class="align-top">
									{{ $cambio['motivo'] }}
									@if ($cambio['observacion'])
										<div class="mt-0.5 text-[12px] text-[var(--texto-suave)]">{{ $cambio['observacion'] }}</div>
									@endif
								</td>
								<td class="align-top">
									{{ $cambio['usuario'] }}
									@if ($cambio['sistema'] === 'CENTRAL')
										<div><x-etiqueta variante="info" class="mt-1">Central</x-etiqueta></div>
									@endif
								</td>
							</tr>
						@endforeach
					</tbody>
				</table>
			</div>
		@endif
	</section>
@endif