@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="pl-5 pr-5">
        <!-- Temporal Layering: Step Indicator / Status Area -->
        <div class="mb-6">
            <span
                class="font-['Inter'] text-[10px] uppercase font-bold tracking-wider text-primary bg-primary-container px-2 py-1 rounded">Configuración
                de Turno</span>
            <p class="text-on-surface-variant text-sm mt-2">Complete los detalles para asignar un chofer a una unidad
                disponible.
            </p>
        </div>
        <!-- Form Cards -->
        <form class="space-y-4">
            <!-- Chofer Section -->
            <div
                class="bg-surface shadow-sm rounded-xl p-4 transition-all border border-transparent focus-within:border-primary/20">
                <label
                    class="block font-['Inter'] text-[10px] uppercase font-bold tracking-wider text-secondary mb-3">Seleccionar
                    Chofer</label>
                <div
                    class="flex items-center gap-3 p-3 rounded-lg bg-surface-container-low border border-outline-variant hover:border-primary/50 transition-colors cursor-pointer group">
                    <div class="w-12 h-12 rounded-full overflow-hidden bg-surface-container-highest flex-shrink-0">
                        <img alt="Avatar del chofer" class="w-full h-full object-cover"
                            data-alt="Close up portrait of a professional male driver"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuA0A4re9u6nk843Za3GczBhMP0RaMWsKm5DbSZWtG1Q9SSvrdFlxGwXwEiUccv5R5DBas5nq4e1rsY80H4ovcoXB3dLfdX5dqo13EXymrHLuylRQnIW0BYN-ALXWqFT1EPDdeoo6Hsa9mNDnXJUvjWWgkYoJTERXfPu-KQZPMlAQDCUQds_47X3UWZY4AYNnVxMl7zM7nPdPCC6qjJGWIQ7ctPnHqRGyP_YY63W2fhW5juwfKmfYcmvbo55zDC-Yxf81nhJpkstLrY" />
                    </div>
                    <div class="flex-grow">
                        <div class="text-sm font-semibold text-on-surface">Roberto Jiménez</div>
                        <div class="text-xs text-on-surface-variant">Licencia Federal • Vigente</div>
                    </div>
                    <span class="material-symbols-outlined text-outline group-hover:text-primary"
                        data-icon="expand_more">expand_more</span>
                </div>
            </div>
            <!-- Unidad Section -->
            <div class="bg-surface shadow-sm rounded-xl p-4 border border-transparent focus-within:border-primary/20">
                <label
                    class="block font-['Inter'] text-[10px] uppercase font-bold tracking-wider text-secondary mb-3">Seleccionar
                    Unidad</label>
                <div
                    class="flex items-center gap-3 p-3 rounded-lg bg-surface-container-low border border-outline-variant hover:border-primary/50 transition-colors cursor-pointer group">
                    <div
                        class="w-12 h-12 rounded-lg bg-primary-container flex items-center justify-center text-primary-container text-on-primary-container">
                        <span class="material-symbols-outlined text-3xl" data-icon="local_taxi">local_taxi</span>
                    </div>
                    <div class="flex-grow">
                        <div class="text-sm font-semibold text-on-surface">TX-402 • Nissan Versa</div>
                        <div class="text-xs text-on-surface-variant">Último servicio: Hace 3 días</div>
                    </div>
                    <span class="material-symbols-outlined text-outline group-hover:text-primary"
                        data-icon="expand_more">expand_more</span>
                </div>
            </div>
            <!-- Temporal Timeline Section -->
            <div class="bg-surface shadow-sm rounded-xl p-4">
                <label
                    class="block font-['Inter'] text-[10px] uppercase font-bold tracking-wider text-secondary mb-4">Cronograma
                    de Asignación</label>
                <div class="relative pl-6 space-y-6">
                    <!-- Timeline connector -->
                    <div class="absolute left-[11px] top-2 bottom-2 w-[2px] bg-outline-variant"></div>
                    <!-- Start Date -->
                    <div class="relative">
                        <div class="absolute -left-[23px] top-1 w-4 h-4 rounded-full border-2 border-primary bg-white z-10">
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Fecha de
                                Inicio</span>
                            <div
                                class="flex items-center bg-surface-container-low rounded-lg p-3 border border-outline-variant focus-within:ring-1 focus-within:ring-primary">
                                <span class="material-symbols-outlined text-secondary mr-2 text-xl"
                                    data-icon="calendar_today">calendar_today</span>
                                <input
                                    class="bg-transparent border-none p-0 text-sm font-medium w-full focus:ring-0 text-on-surface"
                                    placeholder="Seleccionar inicio" type="text" value="15 Oct, 2023 - 08:00 AM" />
                            </div>
                        </div>
                    </div>
                    <!-- End Date -->
                    <div class="relative">
                        <div class="absolute -left-[23px] top-1 w-4 h-4 rounded-full border-2 border-outline bg-white z-10">
                        </div>
                        <div class="flex flex-col gap-1">
                            <span class="text-xs font-bold text-on-surface-variant uppercase tracking-tighter">Fecha de Fin
                                (Opcional)</span>
                            <div
                                class="flex items-center bg-surface-container-low rounded-lg p-3 border border-outline-variant">
                                <span class="material-symbols-outlined text-secondary mr-2 text-xl"
                                    data-icon="event_busy">event_busy</span>
                                <input
                                    class="bg-transparent border-none p-0 text-sm font-medium w-full focus:ring-0 text-on-surface"
                                    placeholder="Sin fecha definida" type="text" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Observaciones -->
            <div class="bg-surface shadow-sm rounded-xl p-4">
                <label
                    class="block font-['Inter'] text-[10px] uppercase font-bold tracking-wider text-secondary mb-3">Observaciones</label>
                <textarea
                    class="w-full bg-surface-container-low border border-outline-variant rounded-lg p-3 text-sm focus:ring-primary focus:border-primary placeholder:text-slate-400"
                    placeholder="Notas adicionales sobre la entrega de la unidad o condiciones especiales..." rows="3"></textarea>
            </div>
            <!-- Submit Button -->
            <div class="pt-4 pb-8">
                <button
                    class="w-full h-14 bg-primary text-white rounded-xl font-bold flex items-center justify-center gap-2 shadow-lg shadow-primary/20 active:scale-95 transition-transform duration-200"
                    type="submit">
                    <span class="material-symbols-outlined" data-icon="assignment_turned_in">assignment_turned_in</span>
                    Crear Asignación
                </button>
            </div>
        </form>
    </div>
@endsection