@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="p-4">
        <p class="text-sm text-slate-500 dark:text-slate-400">
            Administra los estados operativos de los vehículos de la flota. Estos estados determinan la disponibilidad en el
            mapa y reportes.
        </p>
    </div>
    <div class="px-4 space-y-3">
        <div
            class="group flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:border-primary/30 transition-all">
            <div
                class="flex items-center justify-center rounded-xl bg-emerald-100 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-12">
                <span class="material-symbols-outlined text-3xl">check_circle</span>
            </div>
            <div class="flex-1">
                <h4 class="font-bold text-slate-800 dark:text-slate-100">Disponible</h4>
                <p class="text-xs text-slate-500">Listo para recibir servicios</p>
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit</span>
            </button>
        </div>
        <div
            class="group flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:border-primary/30 transition-all">
            <div
                class="flex items-center justify-center rounded-xl bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-12">
                <span class="material-symbols-outlined text-3xl">local_taxi</span>
            </div>
            <div class="flex-1">
                <h4 class="font-bold text-slate-800 dark:text-slate-100">Ocupado</h4>
                <p class="text-xs text-slate-500">En medio de un viaje activo</p>
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit</span>
            </button>
        </div>
        <div
            class="group flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:border-primary/30 transition-all">
            <div
                class="flex items-center justify-center rounded-xl bg-orange-100 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 size-12">
                <span class="material-symbols-outlined text-3xl">build</span>
            </div>
            <div class="flex-1">
                <h4 class="font-bold text-slate-800 dark:text-slate-100">Taller</h4>
                <p class="text-xs text-slate-500">Mantenimiento o reparación</p>
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit</span>
            </button>
        </div>
        <div
            class="group flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:border-primary/30 transition-all">
            <div
                class="flex items-center justify-center rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 size-12">
                <span class="material-symbols-outlined text-3xl">do_not_disturb_on</span>
            </div>
            <div class="flex-1">
                <h4 class="font-bold text-slate-800 dark:text-slate-100">Inactivo</h4>
                <p class="text-xs text-slate-500">Unidad fuera de servicio temporal</p>
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit</span>
            </button>
        </div>
        <div
            class="group flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm hover:border-primary/30 transition-all">
            <div
                class="flex items-center justify-center rounded-xl bg-red-100 dark:bg-red-900/30 text-red-600 dark:text-red-400 size-12">
                <span class="material-symbols-outlined text-3xl">warning</span>
            </div>
            <div class="flex-1">
                <h4 class="font-bold text-slate-800 dark:text-slate-100">Emergencia</h4>
                <p class="text-xs text-slate-500">Alerta de seguridad activada</p>
            </div>
            <button class="p-2 text-slate-400 hover:text-primary transition-colors">
                <span class="material-symbols-outlined">edit</span>
            </button>
        </div>
    </div>

    <a href="{{ route('settings.unit_estates.create') }}"
        class="fixed bottom-24 right-6 w-14 h-14 bg-primary text-white rounded-full shadow-lg shadow-primary/40 flex items-center justify-center z-40">
        <span class="material-symbols-outlined text-3xl">add</span>
    </a>
@endsection