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

@section('content')
    <div class="px-8 pt-6">
        <div class="flex border-b border-[#dbdfe6] dark:border-gray-800 gap-8">
            <button class="border-b-2 border-primary text-primary pb-3 text-sm font-bold">General</button>
            <button
                class="border-b-2 border-transparent text-[#616f89] pb-3 text-sm font-medium hover:text-primary transition-all">Ventas</button>
            <button
                class="border-b-2 border-transparent text-[#616f89] pb-3 text-sm font-medium hover:text-primary transition-all">Gastos</button>
            <button
                class="border-b-2 border-transparent text-[#616f89] pb-3 text-sm font-medium hover:text-primary transition-all">Vendedores</button>
        </div>
    </div>
    <!-- Dashboard Body -->
    <div class="p-8 space-y-6 overflow-auto">
        <!-- Key Metrics Row -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <p class="text-[#616f89] dark:text-gray-400 text-sm font-medium">ROI Anual</p>
                <div class="flex items-end justify-between mt-2">
                    <h3 class="text-3xl font-bold tracking-tight">24.5%</h3>
                    <span class="flex items-center text-emerald-600 text-sm font-bold">
                        <span class="material-symbols-outlined text-sm">trending_up</span>
                        +2.1%
                    </span>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <p class="text-[#616f89] dark:text-gray-400 text-sm font-medium">Ingresos Totales (MXN)</p>
                <div class="flex items-end justify-between mt-2">
                    <h3 class="text-3xl font-bold tracking-tight">$12.45M</h3>
                    <span class="flex items-center text-red-600 text-sm font-bold">
                        <span class="material-symbols-outlined text-sm">trending_down</span>
                        -5.3%
                    </span>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <p class="text-[#616f89] dark:text-gray-400 text-sm font-medium">Ciclo de Venta Promedio</p>
                <div class="flex items-end justify-between mt-2">
                    <h3 class="text-3xl font-bold tracking-tight">45 <span class="text-lg font-normal">días</span></h3>
                    <span class="flex items-center text-emerald-600 text-sm font-bold">
                        <span class="material-symbols-outlined text-sm">expand_less</span>
                        +3 d
                    </span>
                </div>
            </div>
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <p class="text-[#616f89] dark:text-gray-400 text-sm font-medium">Costo Adquisición (CAC)</p>
                <div class="flex items-end justify-between mt-2">
                    <h3 class="text-3xl font-bold tracking-tight">$8,200</h3>
                    <span class="flex items-center text-emerald-600 text-sm font-bold">
                        <span class="material-symbols-outlined text-sm">trending_down</span>
                        -1.2%
                    </span>
                </div>
            </div>
        </div>
        <!-- Middle Row: Charts -->
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <!-- Income vs Expenses Area Chart Placeholder -->
            <div
                class="lg:col-span-2 bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <div class="flex items-center justify-between mb-6">
                    <h4 class="font-bold text-lg">Ingresos vs Egresos</h4>
                    <div class="flex gap-4">
                        <div class="flex items-center gap-2">
                            <div class="size-3 rounded-full bg-primary"></div>
                            <span class="text-xs text-[#616f89] font-medium">Ingresos</span>
                        </div>
                        <div class="flex items-center gap-2">
                            <div class="size-3 rounded-full bg-orange-400"></div>
                            <span class="text-xs text-[#616f89] font-medium">Egresos</span>
                        </div>
                    </div>
                </div>
                <div
                    class="relative h-64 w-full bg-gray-50 dark:bg-gray-800/50 rounded-lg flex flex-col justify-end p-4 border border-dashed border-gray-300 dark:border-gray-700">
                    <!-- Simulated Chart Area -->
                    <div class="absolute inset-0 flex items-end px-8 pb-10 gap-8">
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[60%] rounded-t"></div>
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[75%] rounded-t"></div>
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[45%] rounded-t"></div>
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[90%] rounded-t"></div>
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[80%] rounded-t"></div>
                        <div class="flex-1 bg-primary/20 border-t-2 border-primary h-[65%] rounded-t"></div>
                    </div>
                    <div class="flex justify-between text-[10px] text-gray-400 font-bold uppercase mt-2">
                        <span>Jul</span><span>Ago</span><span>Sep</span><span>Oct</span><span>Nov</span><span>Dic</span>
                    </div>
                </div>
            </div>
            <!-- Pipeline Conversion Funnel -->
            <div
                class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm flex flex-col">
                <h4 class="font-bold text-lg mb-6">Pipeline Conversion</h4>
                <div class="flex-1 flex flex-col gap-2">
                    <div
                        class="relative h-12 bg-primary/10 border border-primary/20 rounded flex items-center justify-between px-4 ">
                        <div class="absolute left-0 top-0 bottom-0 bg-primary/10 w-full"></div>
                        <span class="relative text-xs font-bold text-primary">Leads Generados</span>
                        <span class="relative text-sm font-bold">1,240</span>
                    </div>
                    <div class="self-center py-1">
                        <span class="material-symbols-outlined text-gray-300">arrow_drop_down</span>
                    </div>
                    <div
                        class="relative h-12 bg-primary/20 border border-primary/30 rounded flex items-center justify-between px-4 mx-4">
                        <span class="text-xs font-bold text-primary">Citas Programadas</span>
                        <span class="text-sm font-bold">450 <span class="text-[10px] ml-1">(36%)</span></span>
                    </div>
                    <div class="self-center py-1">
                        <span class="material-symbols-outlined text-gray-300">arrow_drop_down</span>
                    </div>
                    <div
                        class="relative h-12 bg-primary/30 border border-primary/40 rounded flex items-center justify-between px-4 mx-8">
                        <span class="text-xs font-bold text-primary">Propuestas</span>
                        <span class="text-sm font-bold">128 <span class="text-[10px] ml-1">(28%)</span></span>
                    </div>
                    <div class="self-center py-1">
                        <span class="material-symbols-outlined text-gray-300">arrow_drop_down</span>
                    </div>
                    <div class="relative h-12 bg-primary text-white rounded flex items-center justify-between px-4 mx-12">
                        <span class="text-xs font-bold">Venta Cerrada</span>
                        <span class="text-sm font-bold">42 <span class="text-[10px] ml-1 opacity-80">(32%)</span></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- Bottom Row: Tables and Projects -->
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 pb-8">
            <!-- Sales by Development Bar Chart -->
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <h4 class="font-bold text-lg mb-6">Ventas por Fraccionamiento</h4>
                <div class="space-y-5">
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="font-medium">Residencial Los Olivos</span>
                            <span class="font-bold">$4.2M</span>
                        </div>
                        <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="font-medium">Torres Diamante</span>
                            <span class="font-bold">$2.8M</span>
                        </div>
                        <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 60%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="font-medium">Quinta Esmeralda</span>
                            <span class="font-bold">$1.9M</span>
                        </div>
                        <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 45%"></div>
                        </div>
                    </div>
                    <div class="space-y-2">
                        <div class="flex justify-between text-sm">
                            <span class="font-medium">Hacienda Real</span>
                            <span class="font-bold">$1.1M</span>
                        </div>
                        <div class="w-full bg-gray-100 dark:bg-gray-800 rounded-full h-2">
                            <div class="bg-primary h-2 rounded-full" style="width: 25%"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Top Performing Agents Table -->
            <div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-[#dbdfe6] dark:border-gray-800 shadow-sm">
                <h4 class="font-bold text-lg mb-6">Top Performing Agents</h4>
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="border-b border-gray-100 dark:border-gray-800">
                            <tr>
                                <th class="pb-3 text-xs font-bold text-[#616f89] uppercase tracking-wider">
                                    Agente</th>
                                <th class="pb-3 text-xs font-bold text-[#616f89] uppercase tracking-wider">
                                    Ventas</th>
                                <th class="pb-3 text-xs font-bold text-[#616f89] uppercase tracking-wider">Meta
                                </th>
                                <th class="pb-3 text-xs font-bold text-[#616f89] uppercase tracking-wider">
                                    Perf.</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                <td class="py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="size-8 rounded-full bg-cover bg-center"
                                            data-alt="Agent headshot avatar"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAdYIxSXnbtMDo49zUmh-ujVuDBblRkeQCFgj0M4ZExhGf0UpqADiU1RbD9ZKhvD2YBElNTtCtv9T-w6zMAui4S7WTszZZh8_QPlR2Oil_yKz-Dmo76jIGe3-usVj2GpIq_l1S-nslJHqJTkKJ9uYdE2oEfHZhJ_Z0J79p4v3VRMmI5hSnsHhPgXtdSt6ygBVoBRgtami4L2rDTZR_8JKQ5sKWTf_Pcoejh9p2VeMNZSi9qSCk4I6g5QKp02bPdOF1ONthLZoBlLUo");'>
                                        </div>
                                        <span class="text-sm font-semibold">Alejandro Ruiz</span>
                                    </div>
                                </td>
                                <td class="py-4 text-sm font-medium">12</td>
                                <td class="py-4 text-sm font-medium">$2.4M</td>
                                <td class="py-4">
                                    <span
                                        class="px-2 py-1 bg-emerald-100 text-emerald-700 text-[10px] font-bold rounded">98%</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                <td class="py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="size-8 rounded-full bg-cover bg-center"
                                            data-alt="Agent headshot avatar"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBAqD47Jfc_uuSVoj2txdz2gVCWL3fLazzlwgKlpZro9MfECxCpGlYgbRzohAr1Ji9xe9NDcVO2MtijxKrEb5V35gHZ6XRGyM9iug-HiwPPqNF9auqIG32tO8YqReooP3MpJekEeBvnRdBeR0MeemO90AMby8wAmTlsjKJJdrlT55GituDX2zRupaXMFpqwXyGu6rA8MU5h0mk5oLwAaNzwQaF5o-Zx6YpAqU9-i-918fWChbu0ReyruA6b4rEVgpijbbvxC2r07Zs");'>
                                        </div>
                                        <span class="text-sm font-semibold">Mariana Gómez</span>
                                    </div>
                                </td>
                                <td class="py-4 text-sm font-medium">10</td>
                                <td class="py-4 text-sm font-medium">$1.9M</td>
                                <td class="py-4">
                                    <span
                                        class="px-2 py-1 bg-emerald-100 text-emerald-700 text-[10px] font-bold rounded">92%</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                <td class="py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="size-8 rounded-full bg-cover bg-center"
                                            data-alt="Agent headshot avatar"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAmjBunn1Hnb01combgeO577iUz83V6o4lQOElsKLmWleiT1yTp2RqO2r5X2Ph3wMFlgVzyFnkAuZgNPMN9IgUTA3NqTzSnGWfHK77VuONblJt-n5uD2ep3BFqjvImtKyWKZCX2rWXIJT146v5ZJPNjDkQPNrgANytkKnUWyeSaH9gFKMDwYAvfd_RVzTt8vOjRAiMQmhgE4ULYeLBxit0KYIY4dR9xhZTna1uVpeipby4Aq99UB_3eEB2zvkXsi7jnfhfnZnk3JoY");'>
                                        </div>
                                        <span class="text-sm font-semibold">Roberto Silva</span>
                                    </div>
                                </td>
                                <td class="py-4 text-sm font-medium">8</td>
                                <td class="py-4 text-sm font-medium">$1.5M</td>
                                <td class="py-4">
                                    <span
                                        class="px-2 py-1 bg-orange-100 text-orange-700 text-[10px] font-bold rounded">78%</span>
                                </td>
                            </tr>
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
                                <td class="py-4">
                                    <div class="flex items-center gap-3">
                                        <div class="size-8 rounded-full bg-cover bg-center"
                                            data-alt="Agent headshot avatar"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuAGw2VjvQWMXH0uP8P0AiyvBQ5stVVeq0Xp7R86mBMy5OLY9JVg6HC592KHRSxhJQUZwMIglnrGUfxGdBBh1vU4FBI8DtQlq-OQM1OIvm7za1kxyGGiczZakOxvBfo8WxthZIGEoVF0lzHLtFiOizYkBuYC5jvIJpLS_0VRQvtUf8ccpmMpO_a6mLeG8kfwgQmR9syrDZ9XSBCo0t0wJM6m2j_mGo67JKyhY8a-SfzO5QToM-MYWOBhcT8Nv3EbqYYvVJMS9uMBCHQ");'>
                                        </div>
                                        <span class="text-sm font-semibold">Carmen Ortiz</span>
                                    </div>
                                </td>
                                <td class="py-4 text-sm font-medium">7</td>
                                <td class="py-4 text-sm font-medium">$1.2M</td>
                                <td class="py-4">
                                    <span
                                        class="px-2 py-1 bg-orange-100 text-orange-700 text-[10px] font-bold rounded">65%</span>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
@endsection