@extends('layouts.panel-tamplate')

@section('main-content')
    <!-- Perfil del Negocio Card -->
    <div class="p-4">
        <div class="bg-primary/5 dark:bg-primary/10 rounded-xl p-4 flex items-center gap-4 border border-primary/10">
            <div class="size-14 rounded-full bg-primary flex items-center justify-center text-white">
                <span class="material-symbols-outlined text-3xl">local_taxi</span>
            </div>
            <div>
                <h4 class="font-bold text-lg">Taxi Express S.A.</h4>
                <p class="text-sm text-slate-500 dark:text-slate-400">ID de Flota: #TX-90210</p>
            </div>
            <button class="ml-auto text-primary font-semibold text-sm">Editar</button>
        </div>
    </div>
    <!-- Sección: Gestión Operativa -->
    <div class="px-4 py-2">
        <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">Gestión Operativa</h3>
        <div class="space-y-1">
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="{{ route('settings.payment_types') }}">
                <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">payments</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Catálogo de tipos de pago</p>
                    <p class="text-xs text-slate-500">Efectivo, Tarjetas, Apps</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="{{ route('settings.unit_estates') }}">
                <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">fact_check</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Estados de unidad</p>
                    <p class="text-xs text-slate-500">Disponible, Ocupado, Taller</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="{{ route('settings.maintenance_types') }}">
                <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">
                    <span class="material-symbols-outlined">build_circle</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Tipos de mantenimiento</p>
                    <p class="text-xs text-slate-500">Preventivo y correctivo</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
        </div>
    </div>
    <!-- Sección: Sistema -->
    <div class="px-4 py-6">
        <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">Sistema y Seguridad</h3>
        <div class="space-y-1">
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="#">
                <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">group</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Usuarios del sistema</p>
                    <p class="text-xs text-slate-500">Gestión de roles y permisos</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="{{ route('settings.notifications') }}">
                <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">notifications</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Notificaciones</p>
                    <p class="text-xs text-slate-500">Alertas de cobro y vencimientos</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
        </div>
    </div>
    <!-- Sección: Ayuda y Cuenta -->
    <div class="px-4 py-2 pb-8">
        <h3 class="text-xs font-bold uppercase tracking-widest text-slate-400 mb-3">Soporte</h3>
        <div class="space-y-1">
            <a class="flex items-center gap-4 bg-white dark:bg-slate-900 p-4 rounded-xl hover:bg-slate-50 dark:hover:bg-slate-800 transition-colors"
                href="#">
                <div
                    class="flex items-center justify-center rounded-lg bg-slate-100 dark:bg-slate-800 text-slate-600 dark:text-slate-400 size-10">
                    <span class="material-symbols-outlined">support_agent</span>
                </div>
                <div class="flex-1">
                    <p class="text-base font-medium">Soporte técnico</p>
                    <p class="text-xs text-slate-500">Chat de ayuda 24/7</p>
                </div>
                <span class="material-symbols-outlined text-slate-400">chevron_right</span>
            </a>
            <button class="w-full flex items-center gap-4 bg-red-50 dark:bg-red-900/10 p-4 rounded-xl mt-6">
                <div class="flex items-center justify-center rounded-lg bg-red-100 dark:bg-red-900/30 text-red-600 size-10">
                    <span class="material-symbols-outlined">logout</span>
                </div>
                <p class="text-base font-bold text-red-600">Cerrar sesión</p>
            </button>
        </div>
    </div>
    <div class="text-center pb-10">
        <p class="text-xs text-slate-400">v2.4.1 Build 20231024</p>
    </div>
@endsection