@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="px-4 py-4">
        <p class="text-sm text-slate-500 dark:text-slate-400 mb-4 px-1">
            Gestiona las categorías de mantenimiento disponibles para el registro de servicios de las unidades.
        </p>
        <div class="space-y-3">
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-start gap-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-12 shrink-0">
                    <span class="material-symbols-outlined">oil_barrel</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start">
                        <h4 class="font-bold text-base truncate text-slate-900 dark:text-slate-100">Cambio de Aceite</h4>
                        <button class="text-primary p-1">
                            <span class="material-symbols-outlined text-[20px]">edit</span>
                        </button>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
                        Revisión de niveles y cambio de filtro cada 5,000 km o 3 meses.
                    </p>
                    <div class="mt-3 flex gap-2">
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-500">Recurrente</span>
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-orange-50 dark:bg-orange-900/20 text-orange-600">Prioridad
                            Media</span>
                    </div>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-start gap-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-rose-50 dark:bg-rose-900/30 text-rose-600 dark:text-rose-400 size-12 shrink-0">
                    <span class="material-symbols-outlined">settings_b_roll</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start">
                        <h4 class="font-bold text-base truncate text-slate-900 dark:text-slate-100">Revisión de Frenos</h4>
                        <button class="text-primary p-1">
                            <span class="material-symbols-outlined text-[20px]">edit</span>
                        </button>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
                        Inspección de balatas, discos y líquido de frenos cada 10,000 km.
                    </p>
                    <div class="mt-3 flex gap-2">
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-500">Seguridad</span>
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-red-50 dark:bg-red-900/20 text-red-600">Prioridad
                            Alta</span>
                    </div>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-start gap-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-12 shrink-0">
                    <span class="material-symbols-outlined">verified</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start">
                        <h4 class="font-bold text-base truncate text-slate-900 dark:text-slate-100">Mantenimiento Preventivo
                        </h4>
                        <button class="text-primary p-1">
                            <span class="material-symbols-outlined text-[20px]">edit</span>
                        </button>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
                        Revisión general de luces, batería, llantas y fluidos del vehículo.
                    </p>
                    <div class="mt-3 flex gap-2">
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-slate-100 dark:bg-slate-800 text-slate-500">General</span>
                        <span
                            class="text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-emerald-50 dark:bg-emerald-900/20 text-emerald-600">Recomendado</span>
                    </div>
                </div>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-2xl border border-slate-100 dark:border-slate-800 shadow-sm flex items-start gap-4">
                <div
                    class="flex items-center justify-center rounded-xl bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 size-12 shrink-0">
                    <span class="material-symbols-outlined">tire_repair</span>
                </div>
                <div class="flex-1 min-w-0">
                    <div class="flex justify-between items-start">
                        <h4 class="font-bold text-base truncate text-slate-900 dark:text-slate-100">Rotación de Llantas</h4>
                        <button class="text-primary p-1">
                            <span class="material-symbols-outlined text-[20px]">edit</span>
                        </button>
                    </div>
                    <p class="text-sm text-slate-500 dark:text-slate-400 mt-1 line-clamp-2">
                        Balanceo y rotación para desgaste uniforme. Cada 6 meses.
                    </p>
                </div>
            </div>
        </div>
    </div>
    <a href="{{ route('settings.maintenance_types.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