@extends('layouts.panel-tamplate')

@section('main-content')
    <div class="px-4 py-4">
        <div class="flex items-center justify-between mb-3">
            <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400">Recientes</h3>
            <button class="text-xs font-semibold text-primary">Marcar todo como leído</button>
        </div>
        <div class="space-y-3">
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm relative group">
                <div class="flex gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-orange-50 dark:bg-orange-900/30 text-orange-600 dark:text-orange-400 size-10 shrink-0">
                        <span class="material-symbols-outlined">priority_high</span>
                    </div>
                    <div class="flex-1 pr-6">
                        <div class="flex justify-between items-start">
                            <p class="text-sm font-bold text-slate-900 dark:text-white">Alerta de cobro pendiente</p>
                            <span class="text-[10px] text-slate-400 whitespace-nowrap">Hace 15m</span>
                        </div>
                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1 line-clamp-2">La unidad TX-204 tiene una
                            liquidación pendiente por $1,250.00 MXN.</p>
                        <div class="mt-3 flex gap-2">
                            <button class="px-3 py-1.5 bg-primary text-white text-[11px] font-bold rounded-lg">Ver
                                Detalle</button>
                            <button
                                class="px-3 py-1.5 bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-300 text-[11px] font-bold rounded-lg">Ignorar</button>
                        </div>
                    </div>
                </div>
                <button class="absolute top-4 right-4 text-slate-300 hover:text-slate-500">
                    <span class="material-symbols-outlined text-sm">close</span>
                </button>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm relative">
                <div class="flex gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-10 shrink-0">
                        <span class="material-symbols-outlined">build</span>
                    </div>
                    <div class="flex-1 pr-6">
                        <div class="flex justify-between items-start">
                            <p class="text-sm font-bold text-slate-900 dark:text-white">Nuevo mantenimiento</p>
                            <span class="text-[10px] text-slate-400 whitespace-nowrap">Hoy, 09:30 AM</span>
                        </div>
                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1 line-clamp-2">Se ha programado cambio de
                            aceite para la unidad TX-502 el día de mañana.</p>
                    </div>
                </div>
                <button class="absolute top-4 right-4 text-slate-300 hover:text-slate-500">
                    <span class="material-symbols-outlined text-sm">close</span>
                </button>
            </div>
            <div
                class="bg-white dark:bg-slate-900 p-4 rounded-xl border border-slate-100 dark:border-slate-800 shadow-sm relative opacity-70">
                <div class="flex gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-10 shrink-0">
                        <span class="material-symbols-outlined">assignment_turned_in</span>
                    </div>
                    <div class="flex-1 pr-6">
                        <div class="flex justify-between items-start">
                            <p class="text-sm font-bold text-slate-900 dark:text-white">Viaje asignado</p>
                            <span class="text-[10px] text-slate-400 whitespace-nowrap">Ayer</span>
                        </div>
                        <p class="text-xs text-slate-600 dark:text-slate-400 mt-1 line-clamp-2">Nuevo viaje corporativo
                            asignado al chofer Roberto Méndez.</p>
                    </div>
                </div>
                <button class="absolute top-4 right-4 text-slate-300 hover:text-slate-500">
                    <span class="material-symbols-outlined text-sm">close</span>
                </button>
            </div>
        </div>
    </div>
    <hr class="mx-4 border-slate-100 dark:border-slate-800 my-2" />
    <div class="px-4 py-6">
        <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-4">Gestión de Notificaciones</h3>
        <div class="space-y-1">
            <div class="flex items-center justify-between bg-white dark:bg-slate-900 p-4 rounded-xl">
                <div class="flex items-center gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-pink-50 dark:bg-pink-900/30 text-pink-600 dark:text-pink-400 size-10">
                        <span class="material-symbols-outlined">payments</span>
                    </div>
                    <div>
                        <p class="text-sm font-semibold">Alertas de Cobranza</p>
                        <p class="text-[11px] text-slate-500">Pagos atrasados y recordatorios</p>
                    </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input checked="" class="sr-only peer" type="checkbox" />
                    <div
                        class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                    </div>
                </label>
            </div>
            <div class="flex items-center justify-between bg-white dark:bg-slate-900 p-4 rounded-xl">
                <div class="flex items-center gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 size-10">
                        <span class="material-symbols-outlined">engineering</span>
                    </div>
                    <div>
                        <p class="text-sm font-semibold">Mantenimiento</p>
                        <p class="text-[11px] text-slate-500">Revisiones preventivas próximas</p>
                    </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input checked="" class="sr-only peer" type="checkbox" />
                    <div
                        class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                    </div>
                </label>
            </div>
            <div class="flex items-center justify-between bg-white dark:bg-slate-900 p-4 rounded-xl">
                <div class="flex items-center gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-emerald-50 dark:bg-emerald-900/30 text-emerald-600 dark:text-emerald-400 size-10">
                        <span class="material-symbols-outlined">route</span>
                    </div>
                    <div>
                        <p class="text-sm font-semibold">Nuevos Viajes</p>
                        <p class="text-[11px] text-slate-500">Asignaciones de viajes nuevos</p>
                    </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input class="sr-only peer" type="checkbox" />
                    <div
                        class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                    </div>
                </label>
            </div>
            <div class="flex items-center justify-between bg-white dark:bg-slate-900 p-4 rounded-xl">
                <div class="flex items-center gap-4">
                    <div
                        class="flex items-center justify-center rounded-lg bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 size-10">
                        <span class="material-symbols-outlined">security</span>
                    </div>
                    <div>
                        <p class="text-sm font-semibold">Seguridad</p>
                        <p class="text-[11px] text-slate-500">Inicios de sesión y accesos</p>
                    </div>
                </div>
                <label class="relative inline-flex items-center cursor-pointer">
                    <input checked="" class="sr-only peer" type="checkbox" />
                    <div
                        class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer dark:bg-slate-700 peer-checked:after:translate-x-full rtl:peer-checked:after:-translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-primary">
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="text-center pb-10">
        <p class="text-xs text-slate-400 italic">Configurado para notificaciones Push y Email</p>
    </div>
@endsection