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

@section('extra-styles')
    <style>
        /* Custom scrollbar for better aesthetics */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #cbd5e1;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }
    </style>
@endsection

@section('navbar-buttons')
    <a href="{{ route('realEstate.lead.create') }}"
        class="flex shrink-0 items-center justify-center gap-2 rounded-lg bg-primary hover:bg-primary/90 text-white h-11 px-6 text-sm font-semibold transition-all shadow-md shadow-blue-500/20 active:scale-95">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span>Nuevo Prospecto</span>
    </a>
@endsection

@section('content')
    <div class="flex flex-col max-w-[1400px] mx-auto p-6 md:p-10 gap-6">
        <!-- Page Heading & Primary Action -->
        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
            <div class="flex flex-col gap-1">
                <h2 class="text-[#111318] dark:text-white text-3xl md:text-4xl font-bold tracking-tight">Gestión
                    de Prospectos</h2>
                <p class="text-[#616f89] dark:text-gray-400 text-base">Visualiza y administra tus oportunidades
                    de venta inmobiliaria.</p>
            </div>

        </div>
        <!-- Filters & Search Toolbar -->
        <div
            class="flex flex-col gap-4 bg-white dark:bg-[#1a2332] p-4 rounded-xl shadow-sm border border-gray-100 dark:border-gray-800">
            <div class="flex flex-col lg:flex-row gap-4 justify-between">
                <!-- Search Bar -->
                <div class="relative w-full lg:w-96">
                    <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                        <span class="material-symbols-outlined text-gray-400">search</span>
                    </div>
                    <input
                        class="block w-full pl-10 pr-3 py-2.5 border-none rounded-lg bg-gray-50 dark:bg-[#131b29] text-gray-900 dark:text-white placeholder-gray-500 focus:ring-2 focus:ring-primary/50 text-sm transition-all"
                        placeholder="Buscar por nombre, correo o teléfono..." type="text" />
                </div>
                <!-- Filter Chips Row -->
                <div class="flex flex-wrap items-center gap-3">
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 h-10 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a2332] hover:bg-gray-50 dark:hover:bg-[#232d3f] text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors">
                            <span>Etapa: Todos</span>
                            <span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
                        </button>
                    </div>
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 h-10 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a2332] hover:bg-gray-50 dark:hover:bg-[#232d3f] text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors">
                            <span>Agente: Todos</span>
                            <span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
                        </button>
                    </div>
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 h-10 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a2332] hover:bg-gray-50 dark:hover:bg-[#232d3f] text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors">
                            <span>Desarrollo: Todos</span>
                            <span class="material-symbols-outlined text-[18px]">keyboard_arrow_down</span>
                        </button>
                    </div>
                    <div class="relative group">
                        <button
                            class="flex items-center gap-2 h-10 px-4 rounded-lg border border-gray-200 dark:border-gray-700 bg-white dark:bg-[#1a2332] hover:bg-gray-50 dark:hover:bg-[#232d3f] text-sm font-medium text-gray-700 dark:text-gray-300 transition-colors">
                            <span class="material-symbols-outlined text-[18px] text-gray-400">calendar_today</span>
                            <span>Últimos 30 días</span>
                        </button>
                    </div>
                    <!-- Clear filters (visible only when filters active ideally) -->
                    <button class="text-primary text-sm font-medium hover:underline px-2">Limpiar</button>
                </div>
            </div>
        </div>
        <!-- Data Table -->
        <div
            class="flex flex-col rounded-xl border border-gray-200 dark:border-gray-800 bg-white dark:bg-[#1a2332] shadow-sm overflow-hidden">
            <div class="overflow-x-auto w-full">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-gray-50/50 dark:bg-[#232d3f] border-b border-gray-200 dark:border-gray-800">
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                <div class="flex items-center gap-1 cursor-pointer hover:text-primary transition-colors">
                                    Nombre del Cliente
                                    <span class="material-symbols-outlined text-[16px]">sort</span>
                                </div>
                            </th>
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 w-40">
                                Etapa</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
                                Agente</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hidden lg:table-cell">
                                Fuente</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 hidden md:table-cell">
                                Propiedad de Interés</th>
                            <th
                                class="px-6 py-4 text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 text-right">
                                Última Actividad</th>
                            <th class="px-6 py-4 w-10"></th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
                        <!-- Row 1 -->
                        <tr class="group hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors">
                            <td class="px-6 py-4 relative">
                                <a href="{{ route('realEstate.lead.show', 1) }}" class="absolute inset-0 z-10"
                                    aria-label="Ver agente ">
                                </a>
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">Sofía
                                        Martínez</span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400">sofia.m@gmail.com</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300 border border-green-200 dark:border-green-800">
                                    Contactado
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="h-8 w-8 rounded-full bg-cover bg-center ring-2 ring-white dark:ring-[#1a2332]"
                                        data-alt="Sales agent portrait"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBiVirBTpb9sSAV7-x8AahrhUDujgg_PNFtSZPednqQ1JGU2Fl0Q2j8y1aUtDfwKUeLVL-r_9GkmC2aTCPhiUYUxjRDHFov-NnkcLWqaPS389CIe89EDGFnn_d20P-sK6HB30GG28id43F-YG0OJ1f6QqIpklExjzQDmGSteK2La-4Ji-qO7ic6-mCsC0n5fQns9ESnQVHebE73PtHCCOxcH9qKd1hK2iBj9ra7_b3EDDPJw-6a0v2ui3p0SCvU7r3RIWDt3NyRbU0");'>
                                    </div>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 hidden xl:inline">Juan
                                        Pérez</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400 text-sm">
                                    <span class="material-symbols-outlined text-[16px] text-pink-500">ads_click</span>
                                    Instagram Ads
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <a class="text-primary hover:text-primary/80 hover:underline text-sm font-medium"
                                    href="#">Dept 402 - Torre Reforma</a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">12 Oct,
                                    2023</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                    <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 2 -->
                        <tr class="group hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">Jorge
                                        Luis Hernández</span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400">jorge.lh@hotmail.com</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
                                    Interesado
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div
                                        class="flex items-center justify-center h-8 w-8 rounded-full bg-orange-100 text-orange-600 dark:bg-orange-900/30 dark:text-orange-400 text-xs font-bold ring-2 ring-white dark:ring-[#1a2332]">
                                        AL
                                    </div>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 hidden xl:inline">Ana
                                        López</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400 text-sm">
                                    <span class="material-symbols-outlined text-[16px] text-green-500">share</span>
                                    Referido
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <a class="text-primary hover:text-primary/80 hover:underline text-sm font-medium"
                                    href="#">Casa Lomas V</a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">11 Oct,
                                    2023</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                    <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 3 -->
                        <tr class="group hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">Mariana
                                        López</span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400">m.lopez@yahoo.com</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-300 border border-purple-200 dark:border-purple-800">
                                    Negociación
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="h-8 w-8 rounded-full bg-cover bg-center ring-2 ring-white dark:ring-[#1a2332]"
                                        data-alt="Sales agent portrait"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuDfj2Vj2AVBgEXrqz4AIAGnuyeP6UGrAAGD_LONcBJUH-SwuGzutLw2M4iUXyqYucjryJBGIiiodtHqlQpcKxKMB-fPzYaKSl_L0iomJfjWF87av3oxUV0LVc8ME4oepN8jtlyKN-GGK0rVB2l-VxHQDPrpdT2ujiQczTXZCi5mEJjcjgZaxJ3mXmvpthtymKKQqMazzFPRsCLNwrVBRgxx2wyNczXiwKIQZDYYNsl2-ZmztqpEV1whkTW7_urmloH7lF7w1k5JL0Y");'>
                                    </div>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 hidden xl:inline">María
                                        González</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400 text-sm">
                                    <span class="material-symbols-outlined text-[16px] text-blue-500">language</span>
                                    Portal Web
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <a class="text-primary hover:text-primary/80 hover:underline text-sm font-medium"
                                    href="#">Penthouse Polanco</a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">10 Oct,
                                    2023</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                    <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 4 -->
                        <tr class="group hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">Roberto
                                        Gómez</span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400">rgomez_88@gmail.com</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300 border border-gray-200 dark:border-gray-600">
                                    Nuevo
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="h-8 w-8 rounded-full bg-cover bg-center ring-2 ring-white dark:ring-[#1a2332]"
                                        data-alt="Sales agent portrait"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCv4SegZtzWewRUApn9HlRPWvGX0cV6xCzNoggOB2GgNBopS4M2_ZhdirUTRHsVfTlC120FXWXwyjw1pXMwfF7BuT8D5P3jUqliZ5sZtukl999bpAXu38NQ-CqZmHGfmruF0kLlzvE42It_HBke202e1hkirtiOWaFUp8TaVOrquNrFVlORqz8LQgopLnenaTV64Q3lQ98P1ZlNueVxMWtDEYxDAVeUPvITy-UE140TN3m3V2dYk-Xt8hf3oLiqRUGrjB9lrvn39zY");'>
                                    </div>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 hidden xl:inline">Juan
                                        Pérez</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400 text-sm">
                                    <span
                                        class="material-symbols-outlined text-[16px] text-blue-600">social_leaderboard</span>
                                    Facebook
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <a class="text-primary hover:text-primary/80 hover:underline text-sm font-medium"
                                    href="#">Lote 12 - Valle Real</a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">09 Oct,
                                    2023</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                    <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 5 -->
                        <tr class="group hover:bg-blue-50/50 dark:hover:bg-blue-900/10 transition-colors">
                            <td class="px-6 py-4">
                                <div class="flex flex-col">
                                    <span class="text-sm font-semibold text-gray-900 dark:text-white">Lucía
                                        Fernández</span>
                                    <span class="text-xs text-gray-500 dark:text-gray-400">lucia.fer@outlook.com</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                <span
                                    class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 border border-amber-200 dark:border-amber-800">
                                    Visita Agendada
                                </span>
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex items-center gap-2">
                                    <div class="h-8 w-8 rounded-full bg-cover bg-center ring-2 ring-white dark:ring-[#1a2332]"
                                        data-alt="Sales agent portrait"
                                        style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBTaHfazmZyEelrbgmQYlxT8f9DhU87jowNbQHVYf8g_qrdvqhIWIcuQYRyz-tSFs8s4EoD1l3MT2Xj6S0v5Q8YXLapHTJE-BRt54icWKoj2Bqx9XSBTDFYS-yelljjlxfolm1Sh29L6D1xdpEVZn5TDCAk0x9FR5vBe1BlH2qWKEook7lk2Q2eKD4vuO5614W_aA-ai5I4tuCympCT9-JJ07LIwm_KrD1jvy9gwSjZiXLR5dxuZ_AVCdHD47auetEE0BcRJwfjb1g");'>
                                    </div>
                                    <span class="text-sm text-gray-700 dark:text-gray-300 hidden xl:inline">David
                                        Ruiz</span>
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden lg:table-cell">
                                <div class="flex items-center gap-1.5 text-gray-600 dark:text-gray-400 text-sm">
                                    <span class="material-symbols-outlined text-[16px] text-gray-500">mail</span>
                                    Campaña Email
                                </div>
                            </td>
                            <td class="px-6 py-4 hidden md:table-cell">
                                <a class="text-primary hover:text-primary/80 hover:underline text-sm font-medium"
                                    href="#">Dept 101 - Roma Norte</a>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <span class="text-sm text-gray-600 dark:text-gray-400 font-mono">08 Oct,
                                    2023</span>
                            </td>
                            <td class="px-6 py-4 text-right">
                                <button
                                    class="p-1 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
                                    <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- Pagination -->
            <div
                class="px-6 py-4 border-t border-gray-200 dark:border-gray-800 flex flex-col sm:flex-row items-center justify-between gap-4">
                <div class="text-sm text-gray-500 dark:text-gray-400">
                    Mostrando <span class="font-medium text-gray-900 dark:text-white">1</span> a <span
                        class="font-medium text-gray-900 dark:text-white">5</span> de <span
                        class="font-medium text-gray-900 dark:text-white">128</span> resultados
                </div>
                <div class="flex items-center gap-2">
                    <span class="text-sm text-gray-500 dark:text-gray-400 mr-2 hidden sm:inline">Filas por
                        pág:</span>
                    <select
                        class="form-select text-sm border-gray-300 dark:border-gray-700 rounded-md py-1 pr-8 bg-white dark:bg-[#1a2332] focus:ring-primary focus:border-primary">
                        <option>10</option>
                        <option>20</option>
                        <option>50</option>
                    </select>
                    <div
                        class="flex items-center ml-2 border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
                        <button
                            class="p-2 bg-white dark:bg-[#1a2332] text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-50 dark:hover:bg-[#232d3f] border-r border-gray-200 dark:border-gray-700 transition-colors disabled:opacity-50">
                            <span class="material-symbols-outlined text-[20px]">chevron_left</span>
                        </button>
                        <div class="px-4 py-2 bg-white dark:bg-[#1a2332] text-sm font-medium">1</div>
                        <button
                            class="p-2 bg-white dark:bg-[#1a2332] text-gray-600 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white hover:bg-gray-50 dark:hover:bg-[#232d3f] transition-colors">
                            <span class="material-symbols-outlined text-[20px]">chevron_right</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection