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

@section('navbar-buttons')
    <a href="{{ route('realEstate.agent.create') }}"
        class="bg-primary hover:bg-blue-600 text-white px-5 py-2.5 rounded-lg text-sm font-medium flex items-center gap-2 shadow-sm shadow-blue-500/30 transition-all hover:translate-y-[-1px]">
        <span class="material-symbols-outlined" style="font-size: 18px;">add</span>
        Agregar Vendedor
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto">
        <div class="w-full max-w-7xl mx-auto p-6 md:p-8 flex flex-col gap-6">
            <!-- Header -->
            <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                <div>
                    <h1 class="text-2xl md:text-3xl font-bold text-slate-900 dark:text-white tracking-tight">
                        Equipo de Ventas</h1>
                    <p class="text-slate-500 dark:text-slate-400 mt-1">Gestiona el rendimiento, leads y metas de
                        tus agentes.</p>
                </div>
            </div>
            <!-- Toolbar (Search & Filters) -->
            <div
                class="flex flex-col md:flex-row gap-4 items-start md:items-center justify-between bg-white dark:bg-[#151b2b] p-2 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm">
                <!-- Search -->
                <div class="relative w-full md:w-96 group">
                    <span
                        class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 group-focus-within:text-primary transition-colors">search</span>
                    <input
                        class="w-full pl-10 pr-4 py-2 bg-transparent border-none focus:ring-0 text-slate-900 dark:text-white placeholder:text-slate-400 text-sm h-10"
                        placeholder="Buscar agente por nombre..." type="text" />
                </div>
                <!-- Filters -->
                <div class="flex flex-wrap items-center gap-2 w-full md:w-auto px-2 md:px-0 pb-2 md:pb-0">
                    <!-- Branch Filter -->
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-slate-400" style="font-size: 18px;">store</span>
                            Sucursal: Todas
                            <span class="material-symbols-outlined text-slate-400"
                                style="font-size: 18px;">expand_more</span>
                        </button>
                    </div>
                    <!-- Performance Filter -->
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 px-3 py-1.5 rounded-md border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 text-sm hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-slate-400"
                                style="font-size: 18px;">trending_up</span>
                            Rendimiento: Todos
                            <span class="material-symbols-outlined text-slate-400"
                                style="font-size: 18px;">expand_more</span>
                        </button>
                    </div>
                    <div class="h-6 w-px bg-gray-200 dark:bg-gray-700 mx-1 hidden md:block"></div>
                    <!-- View Toggle -->
                    <div class="flex bg-slate-100 dark:bg-slate-800 p-1 rounded-lg">
                        <button class="p-1 rounded bg-white dark:bg-slate-600 shadow-sm text-slate-900 dark:text-white">
                            <span class="material-symbols-outlined" style="font-size: 20px;">format_list_bulleted</span>
                        </button>
                        <button
                            class="p-1 rounded text-slate-500 dark:text-slate-400 hover:text-slate-900 dark:hover:text-white transition-colors">
                            <span class="material-symbols-outlined" style="font-size: 20px;">grid_view</span>
                        </button>
                    </div>
                </div>
            </div>
            <!-- Table Container -->
            <div
                class="bg-white dark:bg-[#151b2b] rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm overflow-hidden flex flex-col">
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="border-b border-gray-200 dark:border-gray-800 bg-gray-50/50 dark:bg-slate-800/50">
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[280px]">
                                    Agente</th>
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider text-right w-[120px]">
                                    Leads Activos</th>
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[180px]">
                                    Conversión</th>
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider w-[250px]">
                                    Progreso Meta (Mensual)</th>
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider text-right">
                                    Ventas Mes (MXN)</th>
                                <th
                                    class="py-4 px-6 text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wider text-center w-[60px]">
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                            <!-- Row 1 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="py-4 px-6 relative">

                                    <a href="{{ route('realEstate.agents.show', 1) }}" class="absolute inset-0 z-10"
                                        aria-label="Ver agente ">
                                    </a>

                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-slate-200 bg-cover bg-center ring-2 ring-white dark:ring-slate-800"
                                            data-alt="Portrait of Carlos Rodriguez"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCj6PScEsUnWguUJLItv-KGsfovzQM5Xz4UjGQbyQ6lZD4QvBjzLxro4iGXDGbGVqvmPdasmpk_q6-HGnfAETwnkshS6gYZ-zgvZt5lbvpIoIqfWLyefsh57b9K-nflH6FkS7Gcnu6UKyicP9OkRq-U0mbhE1IPRBpnYIzhSTlsfxjH3KM290ukBrpvoMoiMmnwkg1n0yQUPm3WokHkSAhpBHFlC123qrvw5RVP-KqDV1pAawKKkv_efLWmPYM4LCLR9sHfcH9Wh7I');">
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Carlos
                                                Rodriguez</span>
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Senior
                                                Agent • CDMX</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                        42
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">12.5%</span>
                                        <span class="material-symbols-outlined text-emerald-500 text-sm font-bold"
                                            style="font-size: 16px;">trending_up</span>
                                        <span class="text-xs text-emerald-600 dark:text-emerald-400">+2.4%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-600 dark:text-slate-400 font-medium">75%
                                                completado</span>
                                        </div>
                                        <div class="w-full bg-slate-100 dark:bg-slate-700 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <p class="text-sm font-bold text-slate-900 dark:text-white font-mono">
                                        $450,000.00</p>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                                        <span class="material-symbols-outlined">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-slate-200 bg-cover bg-center ring-2 ring-white dark:ring-slate-800"
                                            data-alt="Portrait of Sofía Martínez"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCg7-i_rJnG1JgV6QSUb5R535uX_4NU5tYMzMRRnuHwrPsz2-nWuAAlKU9pPFm7ZxWkjZhLORtNmRLjL-sngddK62YdD1oMh-h9A1hu9NJKntJn481dmlnZbhDLkAh-kAOfbNO-bXldi2FJVvBjwhvbMTyJ9i9NVRFXq5QS18f0i9d5XA8yxq69xx1ZxpJLN6HndFeT9g3pKNwwiZX_41HqeYK39L-kM_qDo95Fgwj-5s312y2zlD4ek3U99hohh-sYZ6dKDmucfRI');">
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Sofía
                                                Martínez</span>
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Agent •
                                                Guadalajara</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300">
                                        38
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">15.0%</span>
                                        <span class="material-symbols-outlined text-emerald-500 text-sm font-bold"
                                            style="font-size: 16px;">trending_up</span>
                                        <span class="text-xs text-emerald-600 dark:text-emerald-400">+5.1%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-600 dark:text-slate-400 font-medium">92%
                                                completado</span>
                                        </div>
                                        <div class="w-full bg-slate-100 dark:bg-slate-700 rounded-full h-2">
                                            <div class="bg-emerald-500 h-2 rounded-full" style="width: 92%">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <p class="text-sm font-bold text-slate-900 dark:text-white font-mono">
                                        $580,000.00</p>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                                        <span class="material-symbols-outlined">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 3 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-slate-200 bg-cover bg-center ring-2 ring-white dark:ring-slate-800"
                                            data-alt="Portrait of Miguel Ángel"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBsBFKstwMHtxDC61MYqeDRb4yM47beQn4s2lbxKbZ8SdJdd0FlxZ7z65qSp9s7s9jjIMg-2YpBhMwQEKQjUtCDj3cjJ5y_BFa_jo-FstmtHSSTHgoV_WOykfTcw5j2N1aPmyElcTkbU-rzBvM3RVFJTTYASnQL8lviHT_eFVFAcxn0ZJRExRM6qeG-bj7j33y8cn5LJrsvoL-vIc_DzsnMtcq0MzhYGfmiyUS0-1XF1N8Nuk2_u6ILzIuPHWxuiwln1ImXXxua_Zg');">
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Miguel
                                                Ángel</span>
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Junior
                                                Agent • Monterrey</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300">
                                        25
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">8.2%</span>
                                        <span class="material-symbols-outlined text-rose-500 text-sm font-bold"
                                            style="font-size: 16px;">trending_down</span>
                                        <span class="text-xs text-rose-600 dark:text-rose-400">-1.5%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-600 dark:text-slate-400 font-medium">45%
                                                completado</span>
                                        </div>
                                        <div class="w-full bg-slate-100 dark:bg-slate-700 rounded-full h-2">
                                            <div class="bg-amber-400 h-2 rounded-full" style="width: 45%">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <p class="text-sm font-bold text-slate-900 dark:text-white font-mono">
                                        $210,000.00</p>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                                        <span class="material-symbols-outlined">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-slate-200 bg-cover bg-center ring-2 ring-white dark:ring-slate-800"
                                            data-alt="Portrait of Ana López"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuBvxOkqkOmi1Ed1kA1gZ7CoHihcgHYuso6w1X7wRvxfN1C18fgokxCIn3_dG_iVY4Yp0JwYTQAs6IYxYy3zZntKVdkYwtCT8zT2A5vmSgI3ThpHTC-hxBKoZOadGl_JssvIOH5H7bXle0KieKhArkHZFm1WxCHb2zzTAU-zxxz1_eJkuS9xq12H-b5Xlk4Cobh0DstvL99ZWsQuqKnfk8ABg0sXYH3OmZhXaDyPKZsVn8p5oZQ6N8ibzQpBzoUoqe7yt4GWcCSMaBM');">
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Ana
                                                López</span>
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Agent •
                                                CDMX</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300">
                                        31
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">11.8%</span>
                                        <span class="material-symbols-outlined text-slate-400 text-sm font-bold"
                                            style="font-size: 16px;">remove</span>
                                        <span class="text-xs text-slate-500 dark:text-slate-400">0.0%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-600 dark:text-slate-400 font-medium">68%
                                                completado</span>
                                        </div>
                                        <div class="w-full bg-slate-100 dark:bg-slate-700 rounded-full h-2">
                                            <div class="bg-primary h-2 rounded-full" style="width: 68%"></div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <p class="text-sm font-bold text-slate-900 dark:text-white font-mono">
                                        $395,000.00</p>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                                        <span class="material-symbols-outlined">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 5 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-3">
                                        <div class="h-10 w-10 rounded-full bg-slate-200 bg-cover bg-center ring-2 ring-white dark:ring-slate-800"
                                            data-alt="Portrait of Diego Fernandez"
                                            style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDSg940_Y7xMKDHlB75hVgmLTIfKp-YVuuKb3I9gO_gBRwMxJyAJBxDvGFzUJl8KQJPzQcAE13uhXBo5Yt1PZuUhgDDXRFDgBCRwinNVjtg3xlW4sht3SoQ02zUqVoNU9S2uYrd6JPeciFNO1VHhmSukuOJVCf6BrKNJtYpPrsEFF91BTRlZTkWOaCK4yzA-kVimFTOkaZ3vxV2L4wNYpmJzu0rbrz8_BgO25bYNH4Gb3uPxBY3QGJDLaTJNZVlEp4Y1Q0XNCK52SE');">
                                        </div>
                                        <div class="flex flex-col">
                                            <span class="text-sm font-semibold text-slate-900 dark:text-white">Diego
                                                Fernández</span>
                                            <span class="text-xs text-slate-500 dark:text-slate-400">Junior
                                                Agent • Querétaro</span>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-700 dark:bg-slate-700 dark:text-slate-300">
                                        19
                                    </span>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex items-center gap-2">
                                        <span class="text-sm font-medium text-slate-700 dark:text-slate-300">6.5%</span>
                                        <span class="material-symbols-outlined text-emerald-500 text-sm font-bold"
                                            style="font-size: 16px;">trending_up</span>
                                        <span class="text-xs text-emerald-600 dark:text-emerald-400">+0.8%</span>
                                    </div>
                                </td>
                                <td class="py-4 px-6">
                                    <div class="flex flex-col gap-1.5">
                                        <div class="flex justify-between text-xs mb-1">
                                            <span class="text-slate-600 dark:text-slate-400 font-medium">30%
                                                completado</span>
                                        </div>
                                        <div class="w-full bg-slate-100 dark:bg-slate-700 rounded-full h-2">
                                            <div class="bg-rose-500 h-2 rounded-full" style="width: 30%">
                                            </div>
                                        </div>
                                    </div>
                                </td>
                                <td class="py-4 px-6 text-right">
                                    <p class="text-sm font-bold text-slate-900 dark:text-white font-mono">
                                        $150,000.00</p>
                                </td>
                                <td class="py-4 px-6 text-center">
                                    <button
                                        class="text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 p-1 rounded-md hover:bg-slate-100 dark:hover:bg-slate-700 transition-colors">
                                        <span class="material-symbols-outlined">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Pagination Footer -->
                <div class="border-t border-gray-200 dark:border-gray-800 p-4 flex items-center justify-between">
                    <span class="text-sm text-slate-500 dark:text-slate-400">
                        Mostrando <span class="font-medium text-slate-900 dark:text-white">1</span> a <span
                            class="font-medium text-slate-900 dark:text-white">5</span> de <span
                            class="font-medium text-slate-900 dark:text-white">24</span> agentes
                    </span>
                    <div class="flex items-center gap-2">
                        <button
                            class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded-md text-slate-500 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-50"
                            disabled="">
                            Anterior
                        </button>
                        <button
                            class="px-3 py-1 text-sm border border-gray-200 dark:border-gray-700 rounded-md text-slate-900 dark:text-white hover:bg-slate-50 dark:hover:bg-slate-800">
                            Siguiente
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection