@extends('layouts.dashboard.inface', ['section' => 'home'])

@section('content')
    <div class="flex-1 overflow-y-auto p-6 no-scrollbar">
        <div class="max-w-[1600px] mx-auto space-y-6">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold tracking-tight">Panel de Control de Alta Eficiencia</h2>
                    <p class="text-xs text-slate-500 mt-0.5">Métricas críticas y acciones rápidas en tiempo
                        real.</p>
                </div>
                <div class="flex gap-2">
                    <button
                        class="flex items-center gap-1.5 px-3 py-1.5 border border-gray-200 dark:border-gray-700 rounded-md text-xs font-medium bg-white dark:bg-gray-800 hover:bg-gray-50 transition-colors">
                        <span class="material-symbols-outlined text-sm">filter_list</span> Personalizar Widgets
                    </button>
                    <button
                        class="flex items-center gap-1.5 px-3 py-1.5 bg-primary text-white rounded-md text-xs font-medium hover:bg-blue-700 transition-all shadow-sm">
                        <span class="material-symbols-outlined text-sm">add</span> Acción Rápida
                    </button>
                </div>
            </div>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-start mb-2">
                        <span class="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Ventas
                            Mes</span>
                        <span class="text-xs text-green-600 font-bold">+14.2%</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-2xl font-bold">$12.4M</span>
                        <span class="text-xs text-gray-400">MXN</span>
                    </div>
                    <div class="mt-3 w-full bg-gray-100 dark:bg-gray-800 h-1 rounded-full overflow-hidden">
                        <div class="bg-primary h-full w-[72%]"></div>
                    </div>
                </div>
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-start mb-2">
                        <span class="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Conversión
                            Leads</span>
                        <span class="text-xs text-red-600 font-bold">-2.1%</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-2xl font-bold">24.5%</span>
                        <span class="text-xs text-gray-400">Ratio</span>
                    </div>
                    <div class="mt-3 w-full bg-gray-100 dark:bg-gray-800 h-1 rounded-full overflow-hidden">
                        <div class="bg-orange-500 h-full w-[45%]"></div>
                    </div>
                </div>
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-start mb-2">
                        <span class="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Prospectos
                            Hot</span>
                        <span class="text-xs text-blue-600 font-bold">Nuevo</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-2xl font-bold">42</span>
                        <span class="text-xs text-gray-400">Clientes</span>
                    </div>
                    <div class="mt-3 w-full bg-gray-100 dark:bg-gray-800 h-1 rounded-full overflow-hidden">
                        <div class="bg-blue-500 h-full w-[85%]"></div>
                    </div>
                </div>
                <div class="dashboard-card p-4">
                    <div class="flex justify-between items-start mb-2">
                        <span class="text-[11px] font-bold text-gray-500 uppercase tracking-wider">Citas
                            Hoy</span>
                        <span class="text-xs text-gray-500 font-bold">Finalizando</span>
                    </div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-2xl font-bold">08</span>
                        <span class="text-xs text-gray-400">Programadas</span>
                    </div>
                    <div class="mt-3 w-full bg-gray-100 dark:bg-gray-800 h-1 rounded-full overflow-hidden">
                        <div class="bg-green-500 h-full w-[60%]"></div>
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6">
                <div class="xl:col-span-2 space-y-6">
                    <div class="dashboard-card flex flex-col h-full">
                        <div class="p-4 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between">
                            <h3 class="text-sm font-bold flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-base">group</span>
                                Gestión Inmediata de Prospectos
                            </h3>
                            <div class="flex gap-2">
                                <button class="text-[10px] bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">Prioridad
                                    Alta</button>
                                <button class="text-[10px] text-primary">Ver todos</button>
                            </div>
                        </div>
                        <div class="overflow-x-auto">
                            <table class="w-full text-left text-xs">
                                <thead>
                                    <tr
                                        class="bg-gray-50 dark:bg-gray-800/50 text-gray-500 border-b border-gray-100 dark:border-gray-800">
                                        <th class="px-4 py-2 font-semibold">Prospecto</th>
                                        <th class="px-4 py-2 font-semibold">Interés</th>
                                        <th class="px-4 py-2 font-semibold">Estado</th>
                                        <th class="px-4 py-2 font-semibold text-right">Acción Rápida</th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                                    <tr>
                                        <td class="px-4 py-3">
                                            <div class="flex items-center gap-2">
                                                <div class="size-7 rounded-full bg-gray-200"
                                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDY4v_6o06yi5LIdfZ1eSmtVCip8fAmwjzReFZEZls5EOtWH75QzO_WwjF1JHO1vkXYOFgqVx7aD_1O4u-kC8smFd6YTg573yi7mYFxb-sZtAphmUfvtTZJW_YsFWNoYIc0TPIeeJ8gJ_bIFE-xS_YksXn_teGw79_cRYbHbSNPw86rLG25jIBwGOSdHmu-H4Gfc49ZOxRullR6ssVGnGb7urnA2kF-8g7hFovfxpEx6JfRLUNJzXYwt3dEWV59O8ikgnrY09c4_iA"); background-size: cover;'>
                                                </div>
                                                <div>
                                                    <div class="font-semibold">María González</div>
                                                    <div class="text-[10px] text-gray-500">hace 5 min</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">Preventa Reforma</td>
                                        <td class="px-4 py-3">
                                            <select
                                                class="bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-400 border-none rounded py-0.5 text-[10px] font-bold focus:ring-0">
                                                <option>Hot</option>
                                                <option>Warm</option>
                                                <option>Cold</option>
                                            </select>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <div class="flex justify-end gap-1">
                                                <button
                                                    class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500"><span
                                                        class="material-symbols-outlined text-sm">phone</span></button>
                                                <button
                                                    class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500"><span
                                                        class="material-symbols-outlined text-sm">mail</span></button>
                                                <button class="p-1 hover:bg-primary/10 hover:text-primary rounded"><span
                                                        class="material-symbols-outlined text-sm">calendar_add_on</span></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3">
                                            <div class="flex items-center gap-2">
                                                <div class="size-7 rounded-full bg-gray-200"
                                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBC8OnVuZMEqYU2YXFG7uHzPj-CX3X6IH8Aa9njYeTSdE3BfSSDh22eb2Y0_PGXcUNRUfzZ9nLQlosBb472EtuKQvumMzXyubT10kskG4Nyc6BLD8ty9DRSkd-JzEB6NggRH32nhrh9C7Vwn9wQTcSswJt708ww8MmCK2aI8XlasolJpb7wFk7GIggEcQ9IPl6TytuP_9I8E_hTN8dRCQjT8KwFqfU3pudyhsI--KBi6Ka6bhuCDtpmjo22K6hxKt_fMGoo4GdSkbI"); background-size: cover;'>
                                                </div>
                                                <div>
                                                    <div class="font-semibold">Roberto Díaz</div>
                                                    <div class="text-[10px] text-gray-500">hace 2h</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">Renta Polanco</td>
                                        <td class="px-4 py-3">
                                            <select
                                                class="bg-orange-50 text-orange-700 dark:bg-orange-900/20 dark:text-orange-400 border-none rounded py-0.5 text-[10px] font-bold focus:ring-0">
                                                <option>Warm</option>
                                                <option>Hot</option>
                                                <option>Cold</option>
                                            </select>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <div class="flex justify-end gap-1">
                                                <button
                                                    class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500"><span
                                                        class="material-symbols-outlined text-sm">phone</span></button>
                                                <button class="p-1 hover:bg-primary/10 hover:text-primary rounded"><span
                                                        class="material-symbols-outlined text-sm">calendar_add_on</span></button>
                                            </div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="px-4 py-3">
                                            <div class="flex items-center gap-2">
                                                <div class="size-7 rounded-full bg-gray-200"
                                                    style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBKtzDhY6bw4jU5isbdnRg-jLkIlgGVL8T3fg0Db99IFtcDTBp-XmE7yojI6CDMD-FcIHbBF-rNn3CEIO1tDdCImaiV4B0dbOqldA0ncLNlc1LYENgTcczP3HkCoFjl-ZFohYghoilfQ_v6K96jNJk2T2Y1XtqAIW6cV4xCeSu6wD04qElOpC-r2fgUiKwAqNVAOgPwIgbVFkGgA2WD5alqYNtJQ7e7AvwpfyKqxLHdgSp3S-cQlFHMyjibNIQxYMwSSloL2jLSbsw"); background-size: cover;'>
                                                </div>
                                                <div>
                                                    <div class="font-semibold">Ana Silva</div>
                                                    <div class="text-[10px] text-gray-500">Ayer</div>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-4 py-3">Venta Terreno</td>
                                        <td class="px-4 py-3">
                                            <select
                                                class="bg-blue-50 text-blue-700 dark:bg-blue-900/20 dark:text-blue-400 border-none rounded py-0.5 text-[10px] font-bold focus:ring-0">
                                                <option>Nuevo</option>
                                                <option>Hot</option>
                                                <option>Archive</option>
                                            </select>
                                        </td>
                                        <td class="px-4 py-3 text-right">
                                            <div class="flex justify-end gap-1">
                                                <button
                                                    class="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded text-gray-500"><span
                                                        class="material-symbols-outlined text-sm">mail</span></button>
                                                <button class="p-1 hover:bg-primary/10 hover:text-primary rounded"><span
                                                        class="material-symbols-outlined text-sm">calendar_add_on</span></button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="dashboard-card p-4">
                            <h4 class="text-xs font-bold mb-4 flex items-center justify-between">
                                Ventas por Desarrollo
                                <span class="text-[10px] font-normal text-gray-400 italic">Mes actual</span>
                            </h4>
                            <div class="space-y-3">
                                <div class="flex flex-col gap-1">
                                    <div class="flex justify-between text-[10px] font-medium">
                                        <span>Reforma</span><span>$2.4M</span>
                                    </div>
                                    <div class="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full">
                                        <div class="bg-primary h-full w-[65%] rounded-full"></div>
                                    </div>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <div class="flex justify-between text-[10px] font-medium">
                                        <span>Polanco</span><span>$3.1M</span>
                                    </div>
                                    <div class="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full">
                                        <div class="bg-blue-400 h-full w-[85%] rounded-full"></div>
                                    </div>
                                </div>
                                <div class="flex flex-col gap-1">
                                    <div class="flex justify-between text-[10px] font-medium">
                                        <span>Roma</span><span>$1.2M</span>
                                    </div>
                                    <div class="h-1.5 bg-gray-100 dark:bg-gray-800 rounded-full">
                                        <div class="bg-blue-300 h-full w-[40%] rounded-full"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="dashboard-card p-4">
                            <h4 class="text-xs font-bold mb-4 flex items-center justify-between">
                                Distribución de Gastos
                                <span class="material-symbols-outlined text-sm text-gray-400">pie_chart</span>
                            </h4>
                            <div class="flex items-center gap-4 h-full">
                                <div
                                    class="size-20 rounded-full border-[6px] border-primary border-r-gray-100 dark:border-r-gray-800 rotate-45 flex items-center justify-center">
                                    <span class="text-[10px] font-bold text-gray-400 -rotate-45">75%</span>
                                </div>
                                <div class="space-y-1">
                                    <div class="flex items-center gap-2 text-[10px]"><span
                                            class="size-2 rounded-full bg-primary"></span> Operación</div>
                                    <div class="flex items-center gap-2 text-[10px]"><span
                                            class="size-2 rounded-full bg-blue-400"></span> Marketing</div>
                                    <div class="flex items-center gap-2 text-[10px]"><span
                                            class="size-2 rounded-full bg-gray-200"></span> Otros</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="space-y-6">
                    <div class="dashboard-card overflow-hidden">
                        <div
                            class="p-4 border-b border-gray-100 dark:border-gray-800 bg-gray-50/50 dark:bg-gray-800/30 flex items-center justify-between">
                            <h3 class="text-sm font-bold flex items-center gap-2">
                                <span class="material-symbols-outlined text-primary text-base">today</span>
                                Agenda de Hoy
                            </h3>
                            <button
                                class="size-6 flex items-center justify-center bg-primary text-white rounded hover:bg-blue-700"><span
                                    class="material-symbols-outlined text-sm">add</span></button>
                        </div>
                        <div class="divide-y divide-gray-100 dark:divide-gray-800">
                            <div
                                class="p-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                                <div class="flex items-start gap-3">
                                    <div class="text-center bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-1 min-w-[40px]">
                                        <div class="text-[10px] font-bold text-primary">10:00</div>
                                        <div class="text-[8px] text-gray-500 uppercase">AM</div>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-semibold truncate">Visita Depto Reforma</p>
                                        <p class="text-[10px] text-gray-500">Juan Pérez • Confirmado</p>
                                    </div>
                                    <span
                                        class="material-symbols-outlined text-xs text-gray-300 group-hover:text-primary">arrow_forward_ios</span>
                                </div>
                            </div>
                            <div
                                class="p-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                                <div class="flex items-start gap-3">
                                    <div class="text-center bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-1 min-w-[40px]">
                                        <div class="text-[10px] font-bold">01:30</div>
                                        <div class="text-[8px] text-gray-500 uppercase">PM</div>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-semibold truncate">Firma de Contrato</p>
                                        <p class="text-[10px] text-gray-500">Fam. López • Sala A</p>
                                    </div>
                                    <span
                                        class="material-symbols-outlined text-xs text-gray-300 group-hover:text-primary">arrow_forward_ios</span>
                                </div>
                            </div>
                            <div
                                class="p-3 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group cursor-pointer">
                                <div class="flex items-start gap-3">
                                    <div class="text-center bg-gray-100 dark:bg-gray-800 rounded px-1.5 py-1 min-w-[40px]">
                                        <div class="text-[10px] font-bold">04:00</div>
                                        <div class="text-[8px] text-gray-500 uppercase">PM</div>
                                    </div>
                                    <div class="flex-1">
                                        <p class="text-xs font-semibold truncate">Entrega de Llaves</p>
                                        <p class="text-[10px] text-gray-500">Mitikah 402 • Pendiente</p>
                                    </div>
                                    <span
                                        class="material-symbols-outlined text-xs text-gray-300 group-hover:text-primary">arrow_forward_ios</span>
                                </div>
                            </div>
                        </div>
                        <div class="p-3 bg-gray-50/50 dark:bg-gray-800/30 text-center">
                            <button class="text-[10px] font-bold text-gray-500 hover:text-primary">VER TODA LA
                                AGENDA</button>
                        </div>
                    </div>
                    <div
                        class="p-4 bg-orange-50 dark:bg-orange-900/10 border border-orange-100 dark:border-orange-900/30 rounded-xl">
                        <div class="flex items-center gap-2 mb-2">
                            <span class="material-symbols-outlined text-orange-600 text-lg">warning</span>
                            <span
                                class="text-xs font-bold text-orange-800 dark:text-orange-400 uppercase tracking-wide">Alerta
                                de Inventario</span>
                        </div>
                        <p class="text-[11px] text-orange-700 dark:text-orange-300 leading-snug">Quedan menos
                            de 3 lotes disponibles en <span class="font-bold underline">Fraccionamiento Los
                                Olivos</span>. Se recomienda actualización inmediata.</p>
                        <button
                            class="mt-3 w-full py-1.5 bg-orange-600 text-white rounded text-[10px] font-bold hover:bg-orange-700 transition-colors uppercase">Gestionar
                            Lotes</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection