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

@section('navbar-buttons')
    <a href="{{ route('realEstate.sale.create') }}"
        class="flex h-10 items-center justify-center gap-2 rounded-lg bg-primary px-4 text-sm font-semibold text-white shadow-sm hover:bg-blue-600 transition-colors">
        <span class="material-symbols-outlined text-[20px]">add</span>
        <span class="hidden sm:inline">Nueva Venta</span>
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-auto bg-background-light dark:bg-background-dark p-6">
        <div class="mx-auto max-w-[1400px] flex flex-col gap-6">
            <!-- Heading & Controls -->
            <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
                <div>
                    <h3 class="text-2xl font-bold text-gray-900 dark:text-white">Ventas Recientes</h3>
                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Gestione y monitoree todas las
                        transacciones inmobiliarias de manera eficiente.</p>
                </div>
                <!-- View Toggle -->
                <div class="bg-gray-100 dark:bg-gray-800 p-1 rounded-lg flex items-center shadow-inner">
                    <button
                        class="flex items-center gap-2 px-4 py-1.5 rounded-md bg-white dark:bg-gray-700 shadow-sm text-sm font-medium text-primary dark:text-white transition-all">
                        <span class="material-symbols-outlined text-[18px]">table_chart</span>
                        Tabla
                    </button>
                    <button
                        class="flex items-center gap-2 px-4 py-1.5 rounded-md text-sm font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 transition-all">
                        <span class="material-symbols-outlined text-[18px]">view_kanban</span>
                        Kanban
                    </button>
                </div>
            </div>
            <!-- Filters Toolbar -->
            <div
                class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 items-end bg-white dark:bg-[#1e232e] p-4 rounded-xl border border-[#e5e7eb] dark:border-[#2a3140] shadow-sm">
                {{-- <div class="flex flex-col gap-1.5">
                    <label
                        class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Sucursal</label>
                    <div class="relative">
                        <select
                            class="w-full appearance-none rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-700 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
                            <option>Todas las sucursales</option>
                            <option>CDMX - Polanco</option>
                            <option>Guadalajara - Centro</option>
                            <option>Monterrey - San Pedro</option>
                        </select>
                        <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                            <span class="material-symbols-outlined text-[20px]">expand_more</span>
                        </span>
                    </div>
                </div> --}}
                <div class="flex flex-col gap-1.5">
                    <label
                        class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Desarrollo</label>
                    <div class="relative">
                        <select
                            class="w-full appearance-none rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-700 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200">
                            <option>Todos los desarrollos</option>
                            <option>Agua Dulce</option>
                            <option>Rincon Campestre</option>
                            <option>Alta Vista</option>
                        </select>
                        <span class="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-gray-400">
                            <span class="material-symbols-outlined text-[20px]">expand_more</span>
                        </span>
                    </div>
                </div>
                <div class="flex flex-col gap-1.5">
                    <label class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Rango
                        de Fechas</label>
                    <div class="relative">
                        <input
                            class="w-full rounded-lg border border-gray-200 bg-white px-3 py-2.5 text-sm text-gray-700 focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 placeholder-gray-400"
                            type="date" />
                    </div>
                </div>
                <div class="flex items-center gap-2 justify-end sm:justify-start">
                    {{-- <button
                        class="flex-1 sm:flex-none flex items-center justify-center gap-2 h-[42px] px-4 rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 text-sm font-medium transition-colors">
                        <span class="material-symbols-outlined text-[20px]">filter_list</span>
                        Más Filtros
                    </button> --}}
                    <button
                        class="h-[42px] px-4 rounded-lg text-primary hover:bg-primary/5 text-sm font-medium transition-colors">
                        Limpiar
                    </button>
                </div>
            </div>
            <!-- Data Table Card -->
            <div
                class="overflow-hidden rounded-xl border border-[#e5e7eb] bg-white shadow-sm dark:border-[#2a3140] dark:bg-[#1e232e]">
                <div class="overflow-x-auto">
                    <table class="w-full text-left text-sm text-gray-600 dark:text-gray-300">
                        <thead
                            class="bg-gray-50 text-xs uppercase text-gray-500 dark:bg-gray-800/50 dark:text-gray-400 border-b border-[#e5e7eb] dark:border-[#2a3140]">
                            <tr>
                                <th class="px-6 py-4 font-semibold w-24" scope="col">ID Venta</th>
                                <th class="px-6 py-4 font-semibold" scope="col">Comprador</th>
                                <th class="px-6 py-4 font-semibold" scope="col">Propiedad</th>
                                <th class="px-6 py-4 font-semibold" scope="col">Fecha</th>
                                <th class="px-6 py-4 font-semibold text-right" scope="col">Precio Total
                                    (MXN)</th>
                                <th class="px-6 py-4 font-semibold text-center" scope="col">Estatus</th>
                                <th class="px-6 py-4 font-semibold" scope="col">Agente</th>
                                <th class="px-6 py-4 font-semibold text-center w-10" scope="col"></th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-[#e5e7eb] dark:divide-[#2a3140]">
                            <!-- Row 1 -->
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group ">
                                <td class="px-6 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap relative">
                                    <a href="{{ route('realEstate.sale.details', 1) }}" class="absolute inset-0 z-10"
                                        aria-label="Ver agente ">
                                    </a>
                                    #VN-2042
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="font-medium text-gray-900 dark:text-white">Maria González</div>
                                    <div class="text-xs text-gray-500">maria.g@email.com</div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="material-symbols-outlined text-gray-400 text-[18px]">apartment</span>
                                        <span class="text-primary hover:underline cursor-pointer">Depto 402 -
                                            Torre Altus</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap text-gray-500">12 Oct 2023</td>
                                <td
                                    class="px-6 py-3 text-right font-medium text-gray-900 dark:text-white whitespace-nowrap tabular-nums">
                                    $4,500,000.00</td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full bg-yellow-100 px-2.5 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300 border border-yellow-200 dark:border-yellow-800">
                                        En Proceso
                                    </span>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="h-6 w-6 rounded-full bg-cover bg-center" data-alt="Agent portrait"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCiREGN1ST3V8oezReDT8rPWmFsO-VpQnFvFP69p-s9lKrDSjy0-7GjhQuc90GllkfzOCdVlYp15lXPvI0fh0Xt6mPIYb1GMytV5ZHLwQgxWEoDoKgKArPB98eimcyVUPLcHtjq0_JvAiAWfMHUl-vIh8jhfLsNGJer08A_-Jtbn2Q5j48gYrlj_8ZhebdBqlqfGG5kG-ONB0kbBaybm86fmYeo4Q72sr-OrdL-hLXcbhX65-CJu2b0MY3yRJXESFKTypwM9VFAvzI");'>
                                        </div>
                                        <span class="text-sm">Carlos Ruiz</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <button
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group">
                                <td class="px-6 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                    #VN-2041</td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="font-medium text-gray-900 dark:text-white">Roberto Sanchez
                                    </div>
                                    <div class="text-xs text-gray-500">roberto.s@email.com</div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="material-symbols-outlined text-gray-400 text-[18px]">home</span>
                                        <span class="text-primary hover:underline cursor-pointer">Casa 15 -
                                            Residencial Bosques</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap text-gray-500">10 Oct 2023</td>
                                <td
                                    class="px-6 py-3 text-right font-medium text-gray-900 dark:text-white whitespace-nowrap tabular-nums">
                                    $8,250,000.00</td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-300 border border-green-200 dark:border-green-800">
                                        Escriturado
                                    </span>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="h-6 w-6 rounded-full bg-cover bg-center" data-alt="Agent portrait"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCCLO5C61asryUMyzI6kYqReq0dmFqU-Q_SsBRxjdo-vkigqE6egKqEcKcSoi7iRA55UNxEVJk15VX_Q7xcretw56ux7pRCqZIfvY52s5OKTfJ-l_AWwuoKt1l5dkBb4RBJZeXsnj9EjVJP8vpWfG92gBmh06e_cg4xDrBpLhmViroI-Vki_ln9VVJWw255PB1HmtZfU5xshCU40O0nqJJ8bRZeJ8jcBnJA5so34acOgCHWbhIm___Qmy8OJyKihjC8382kO2nL3cY");'>
                                        </div>
                                        <span class="text-sm">Ana López</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <button
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 3 -->
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group">
                                <td class="px-6 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                    #VN-2040</td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="font-medium text-gray-900 dark:text-white">Patricia Vega</div>
                                    <div class="text-xs text-gray-500">patty.vega@email.com</div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="material-symbols-outlined text-gray-400 text-[18px]">apartment</span>
                                        <span class="text-primary hover:underline cursor-pointer">Penthouse B -
                                            Torre Altus</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap text-gray-500">08 Oct 2023</td>
                                <td
                                    class="px-6 py-3 text-right font-medium text-gray-900 dark:text-white whitespace-nowrap tabular-nums">
                                    $12,500,000.00</td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full bg-blue-100 px-2.5 py-0.5 text-xs font-medium text-blue-800 dark:bg-blue-900/30 dark:text-blue-300 border border-blue-200 dark:border-blue-800">
                                        Apartado
                                    </span>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="h-6 w-6 rounded-full bg-cover bg-center" data-alt="Agent portrait"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCD3GgrJ9VQ41AnfXYwhfVkAISrZ5bCUc-2ucnIZ8rG8AltOu78nsY5IjorxcQJDcX71enjfnKTHyWLMDMvW5MRj4LVImSTapcme5xtKtEtNmCm_UDlJZfFLJnKjmOLsOn7qh7LeCpvxDRxB8NCS98-hdlAaxDI2W7-pvFiVoQBle93U_kRAEbzP1C-cilfaVfGcHvDQU0gkD-T8x-q1FB5kvlAt8t_-7-uCHy2xbrDBsqoBHlCPgvPL6KuVPOfbQ96_F8UIJooOPo");'>
                                        </div>
                                        <span class="text-sm">Luis Ramirez</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <button
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group">
                                <td class="px-6 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                    #VN-2039</td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="font-medium text-gray-900 dark:text-white">Jorge Mendez</div>
                                    <div class="text-xs text-gray-500">jorge.mendez@email.com</div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="material-symbols-outlined text-gray-400 text-[18px]">home_work</span>
                                        <span class="text-primary hover:underline cursor-pointer">Local 04 -
                                            Plaza Centro</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap text-gray-500">05 Oct 2023</td>
                                <td
                                    class="px-6 py-3 text-right font-medium text-gray-900 dark:text-white whitespace-nowrap tabular-nums">
                                    $3,200,000.00</td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full bg-red-100 px-2.5 py-0.5 text-xs font-medium text-red-800 dark:bg-red-900/30 dark:text-red-300 border border-red-200 dark:border-red-800">
                                        Cancelado
                                    </span>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="h-6 w-6 rounded-full bg-cover bg-center" data-alt="Agent portrait"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuCx4UVi8E8IbXDuakURRuAwhpEmcsXqJkC6AW_0z8HxlUN90Sa1CZbSp2Aueki6i518BbeieZqgoRkFGZlkj6xerj4_luGh0dKKvGBYqGENy_MCrOr3wDhDWIusv-Ri-tW5QPfYnobDOVEmlz35_VO0fyc-R145xPS2bTXufeiXewpFTCKEff7TI51XjrzzyBLOneQJMnFHvK1NHYb2Tqg1nVyEAvGiaMoN09LM53U2myGSHzcZZ4lpLxfiYBqiezBufmvpxOXBlcQ");'>
                                        </div>
                                        <span class="text-sm">Carlos Ruiz</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <button
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 5 -->
                            <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group">
                                <td class="px-6 py-3 font-medium text-gray-900 dark:text-white whitespace-nowrap">
                                    #VN-2038</td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="font-medium text-gray-900 dark:text-white">Sofía Torres</div>
                                    <div class="text-xs text-gray-500">sofia.t@email.com</div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <span class="material-symbols-outlined text-gray-400 text-[18px]">apartment</span>
                                        <span class="text-primary hover:underline cursor-pointer">Depto 101 -
                                            Villas del Sol</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap text-gray-500">01 Oct 2023</td>
                                <td
                                    class="px-6 py-3 text-right font-medium text-gray-900 dark:text-white whitespace-nowrap tabular-nums">
                                    $2,900,000.00</td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <span
                                        class="inline-flex items-center rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-800 dark:bg-green-900/30 dark:text-green-300 border border-green-200 dark:border-green-800">
                                        Escriturado
                                    </span>
                                </td>
                                <td class="px-6 py-3 whitespace-nowrap">
                                    <div class="flex items-center gap-2">
                                        <div class="h-6 w-6 rounded-full bg-cover bg-center" data-alt="Agent portrait"
                                            style='background-image: url("https://lh3.googleusercontent.com/aida-public/AB6AXuBOAJ-QfSgoQNAnXbILjr_Oq2PopSM-MZ88sAdwVpJMUS7T1x-B4tkdXCXVKFnw9aqjmg_MTirOUQh7abLIDDuafCCQ6FKwuiqO2602odjxujFS_Q0QNZy1zjhktqla65t6AJB4QiyWXNB0YtXUXq6xaSpJ3K86kT00JhIA8Socq5Y31x4RXhxf59oORpo5QWUoyykGFeYLAotOny_co4N9EpUeKjnFcm1FW5YFK4QleMz6GNuItn1-MTaPh22iJssKct59ZMQo8G8");'>
                                        </div>
                                        <span class="text-sm">Ana López</span>
                                    </div>
                                </td>
                                <td class="px-6 py-3 text-center whitespace-nowrap">
                                    <button
                                        class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 opacity-0 group-hover:opacity-100 transition-opacity">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div
                    class="flex items-center justify-between border-t border-[#e5e7eb] px-6 py-3 dark:border-[#2a3140] bg-gray-50 dark:bg-[#1e232e]/50">
                    <div class="flex items-center gap-2">
                        <p class="text-sm text-gray-500 dark:text-gray-400">Mostrando 1-5 de 24</p>
                        <select
                            class="ml-2 rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 focus:border-primary focus:outline-none dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200">
                            <option>10</option>
                            <option>20</option>
                            <option>50</option>
                        </select>
                        <span class="text-xs text-gray-500">filas</span>
                    </div>
                    <div class="flex items-center gap-2">
                        <button
                            class="flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
                            Anterior
                        </button>
                        <button
                            class="flex items-center justify-center rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700">
                            Siguiente
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection