@extends('layouts.panel-tamplate')

@section('header-content')
    <div class="flex items-center gap-4">
        <button onclick="history.back()"
            class="text-slate-500 hover:bg-slate-100 transition-colors p-2 rounded-full active:scale-95 duration-200">
            <span class="material-symbols-outlined" data-icon="arrow_back">arrow_back</span>
        </button>
        <h1 class="font-['Inter'] text-[20px] font-bold tracking-tight text-[#248aeb]">Nuevo conductor</h1>
    </div>
@endsection

@section('main-content')
    <!-- Section 1: Datos Personales -->
    <section class="bg-surface rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 space-y-6">
            <div class="flex items-center gap-3 border-b border-outline-variant pb-4">
                <span class="material-symbols-outlined text-primary" data-icon="person">person</span>
                <h2 class="text-sm font-bold uppercase tracking-wider text-on-surface-variant">Datos Personales</h2>
            </div>
            <div class="space-y-4">
                <div class="group">
                    <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Nombre completo</label>
                    <div
                        class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                        <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                            data-icon="badge">badge</span>
                        <input
                            class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm placeholder:text-outline"
                            placeholder="Ej. Juan Pérez García" type="text" />
                    </div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div class="group">
                        <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Teléfono</label>
                        <div
                            class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                            <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                                data-icon="call">call</span>
                            <input
                                class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm placeholder:text-outline"
                                placeholder="+54 11 1234 5678" type="tel" />
                        </div>
                    </div>
                    <div class="group">
                        <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Dirección</label>
                        <div
                            class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                            <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                                data-icon="location_on">location_on</span>
                            <input
                                class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm placeholder:text-outline"
                                placeholder="Calle, Número, Localidad" type="text" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 2: Documentación -->
    <section class="bg-surface rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 space-y-6">
            <div class="flex items-center gap-3 border-b border-outline-variant pb-4">
                <span class="material-symbols-outlined text-primary" data-icon="article">article</span>
                <h2 class="text-sm font-bold uppercase tracking-wider text-on-surface-variant">Documentación</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="group">
                    <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Número de Licencia</label>
                    <div
                        class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                        <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                            data-icon="id_card">id_card</span>
                        <input
                            class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm placeholder:text-outline"
                            placeholder="ABC-123456" type="text" />
                    </div>
                </div>
                <div class="group">
                    <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Vencimiento Licencia</label>
                    <div
                        class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                        <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                            data-icon="event">event</span>
                        <input
                            class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm text-on-surface"
                            type="date" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Section 3: Configuración Operativa -->
    <section class="bg-surface rounded-xl shadow-sm overflow-hidden">
        <div class="p-6 space-y-6">
            <div class="flex items-center gap-3 border-b border-outline-variant pb-4">
                <span class="material-symbols-outlined text-primary"
                    data-icon="settings_applications">settings_applications</span>
                <h2 class="text-sm font-bold uppercase tracking-wider text-on-surface-variant">Configuración Operativa</h2>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div class="group">
                    <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Tipo de pago</label>
                    <div
                        class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                        <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                            data-icon="payments">payments</span>
                        <select
                            class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm text-on-surface appearance-none">
                            <option value="diario">Cobro Diario</option>
                            <option value="semanal">Cobro Semanal</option>
                        </select>
                    </div>
                </div>
                <div class="group">
                    <label class="block text-[12px] font-semibold text-secondary mb-1.5 ml-1">Saldo inicial
                        (Opcional)</label>
                    <div
                        class="relative flex items-center form-input-focus transition-all border border-outline rounded-lg bg-surface-container-lowest overflow-hidden">
                        <span class="material-symbols-outlined absolute left-3 text-secondary text-[20px]"
                            data-icon="account_balance_wallet">account_balance_wallet</span>
                        <input
                            class="w-full pl-10 pr-4 py-3 bg-transparent border-none focus:ring-0 text-sm placeholder:text-outline text-on-surface"
                            placeholder="0.00" type="number" />
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Secondary Action Card (Asymmetric Layout element) -->
    <div class="bg-primary-container/30 border border-primary/10 rounded-xl p-4 flex items-start gap-4">
        <span class="material-symbols-outlined text-primary mt-1" data-icon="info">info</span>
        <p class="text-[12px] leading-relaxed text-on-primary-container">
            Al guardar el chofer, se generará un código de acceso único que podrá ser enviado por SMS para que el chofer
            comience su jornada.
        </p>
    </div>
    <!-- Floating Submit Button Container -->
    <div class=" bottom-0 left-0 w-full bg-white/80 backdrop-blur-lg border-t border-outline-variant p-4 z-40">
        <div class="max-w-2xl mx-auto">
            <button
                class="w-full bg-primary text-white font-bold py-4 rounded-xl shadow-lg shadow-primary/30 flex items-center justify-center gap-2 transition-all duration-200 active:scale-[0.98]">
                <span class="material-symbols-outlined" data-icon="save" data-weight="fill"
                    style="font-variation-settings: 'FILL' 1;">save</span>
                Guardar Chofer
            </button>
        </div>
    </div>
@endsection