{{-- Cambio de modalidad de una OC guardada: motivo obligatorio (RN-5.2). Diálogo del kit ui-ctc. --}}
<div x-data="{ abierto: false }"
	x-on:abrir-modal-modalidad.window="abierto = true"
	x-on:cerrar-modal-modalidad.window="abierto = false"
	x-on:keydown.escape.window="abierto = false">
	<template x-teleport="body">
		<div x-show="abierto" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center px-4"
			role="dialog" aria-modal="true" aria-labelledby="oc-modalidad-titulo">
			<div class="fixed inset-0 bg-black/40" x-on:click="abierto = false"></div>

			<div class="relative flex max-h-[90vh] w-full max-w-lg flex-col overflow-hidden rounded-2xl border border-[var(--borde)] bg-[var(--superficie)] shadow-[var(--sombra-panel)]">
				<div class="flex items-center gap-3 border-b border-[var(--borde)] px-5 py-4">
					<span class="flex h-9 w-9 items-center justify-center rounded-full bg-[var(--acento-suave)] text-[var(--acento-texto)]">
						<x-icono nombre="arrows-right-left" class="h-5 w-5" />
					</span>
					<div class="min-w-0">
						<h2 id="oc-modalidad-titulo" class="text-[15px] font-bold text-[var(--texto)]">Cambiar la modalidad de transporte</h2>
						<p class="text-[12px] text-[var(--texto-suave)]">
							Vigente: {{ $modalidadVigente !== null ? rtrim($lstModalidades[$modalidadVigente] ?? $modalidadVigente, '. ') : '—' }}
							· El cambio queda en el historial de la orden y no se puede borrar.
						</p>
					</div>
					<button type="button" x-on:click="abierto = false" class="ctc-accion ml-auto" title="Cerrar" aria-label="Cerrar">
						<x-icono nombre="x-mark" class="h-[18px] w-[18px]" />
					</button>
				</div>

				<div class="space-y-4 overflow-y-auto px-5 py-4">
					<x-campo etiqueta="Nueva modalidad *" para="oc-m-nueva" error="mNueva">
						<x-select id="oc-m-nueva" wire:model="mNueva">
							<option value="">- Seleccione -</option>
							@foreach ($lstModalidades as $codigo => $nombre)
								@if ((string) $codigo !== (string) $modalidadVigente)
									<option value="{{ $codigo }}">{{ $nombre }}</option>
								@endif
							@endforeach
						</x-select>
					</x-campo>

					<x-campo etiqueta="Motivo *" para="oc-m-motivo" error="mMotivo">
						<x-select id="oc-m-motivo" wire:model="mMotivo">
							<option value="">- Seleccione -</option>
							@foreach ($motivosModalidad as $id => $nombre)
								<option value="{{ $id }}">{{ $nombre }}</option>
							@endforeach
						</x-select>
					</x-campo>

					<x-campo etiqueta="Observación" para="oc-m-observacion" error="mObservacion">
						<textarea id="oc-m-observacion" wire:model="mObservacion" rows="3" maxlength="500"
							class="form-textarea block w-full rounded-md text-[13px] shadow-sm border-[var(--borde-fuerte)] bg-[var(--superficie)] text-[var(--texto)] focus:border-[var(--acento)] focus:ring-[var(--acento)]"></textarea>
					</x-campo>
				</div>

				<div class="flex justify-end gap-2 border-t border-[var(--borde)] bg-[var(--superficie-2)] px-5 py-3">
					<x-secondary-button x-on:click="abierto = false">Cancelar</x-secondary-button>
					<x-button type="button" wire:click="cambiarModalidad" wire:loading.attr="disabled" wire:target="cambiarModalidad">
						<x-icono nombre="arrow-path" class="h-4 w-4 animate-spin" wire:loading wire:target="cambiarModalidad" />
						<span wire:loading.remove wire:target="cambiarModalidad">Cambiar modalidad</span>
						<span wire:loading wire:target="cambiarModalidad">Guardando…</span>
					</x-button>
				</div>
			</div>
		</div>
	</template>
</div>