@extends('layouts.panel-template')

@section('main-content')
    <div class="px-8 pt-8 pb-4">
        <div class="flex items-end justify-between mb-8">
            <div>
                <nav class="flex gap-2 text-[10px] font-bold text-on-primary-container uppercase tracking-widest mb-1">
                    <span>Residencial AURA</span>
                    <span>/</span>
                    <span class="text-primary">Pipeline de Ventas</span>
                </nav>
                <h2 class="text-3xl font-bold font-headline text-on-surface">Ventas Inmobiliarias</h2>
            </div>
            <div class="flex gap-3">
                <select
                    class="bg-surface-container-lowest border-none ghost-border rounded-xl text-xs font-semibold px-4 py-2.5 focus:ring-primary cursor-pointer">
                    <option>Todos los Proyectos</option>
                    <option>Torre Titanium</option>
                    <option>Paseo del Valle</option>
                </select>
                <select
                    class="bg-surface-container-lowest border-none ghost-border rounded-xl text-xs font-semibold px-4 py-2.5 focus:ring-primary cursor-pointer">
                    <option>Todos los Asesores</option>
                    <option>Juan Pérez</option>
                    <option>María García</option>
                </select>
                <button
                    class="flex items-center gap-2 bg-surface-container-lowest ghost-border px-4 py-2.5 rounded-xl text-xs font-bold text-primary hover:bg-surface-container-low transition-colors">
                    <span class="material-symbols-outlined text-sm" data-icon="filter_list">filter_list</span>
                    Filtros Avanzados
                </button>
            </div>
        </div>
        <!-- KPI Row (Bento Style) -->
        <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-10">
            <div class="bg-primary text-white p-6 rounded-full relative overflow-hidden shadow-xl">
                <div class="relative z-10">
                    <p class="text-[10px] uppercase tracking-widest opacity-70 font-bold mb-1">Ventas Totales (Mes)</p>
                    <p class="text-3xl font-bold font-headline">$42.8M</p>
                </div>
                <div class="absolute -right-4 -bottom-4 opacity-10">
                    <span class="material-symbols-outlined text-8xl" data-icon="trending_up">trending_up</span>
                </div>
            </div>
            <div class="bg-surface-container-lowest ghost-border p-6 rounded-full flex flex-col justify-center">
                <p class="text-[10px] uppercase tracking-widest text-on-primary-container font-bold mb-1">Unidades Vendidas
                </p>
                <div class="flex items-center gap-3">
                    <p class="text-3xl font-bold font-headline text-on-surface">18</p>
                    <span
                        class="text-emerald-600 text-xs font-bold flex items-center bg-emerald-50 px-2 py-0.5 rounded-full">
                        +12% <span class="material-symbols-outlined text-xs" data-icon="arrow_upward">arrow_upward</span>
                    </span>
                </div>
            </div>
            <div class="bg-surface-container-lowest ghost-border p-6 rounded-full flex flex-col justify-center">
                <p class="text-[10px] uppercase tracking-widest text-on-primary-container font-bold mb-1">Tasa de Conversión
                </p>
                <div class="flex items-center gap-3">
                    <p class="text-3xl font-bold font-headline text-on-surface">24%</p>
                    <div class="flex-1 h-1.5 bg-outline-variant/20 rounded-full overflow-hidden">
                        <div class="h-full bg-primary w-[24%]"></div>
                    </div>
                </div>
            </div>
            <div class="bg-surface-container-lowest ghost-border p-6 rounded-full flex flex-col justify-center">
                <p class="text-[10px] uppercase tracking-widest text-on-primary-container font-bold mb-1">Días Promedio
                    Cierre</p>
                <div class="flex items-center gap-3">
                    <p class="text-3xl font-bold font-headline text-on-surface">34</p>
                    <span class="text-secondary text-xs font-bold italic">Promedio Regional</span>
                </div>
            </div>
        </div>
    </div>
    <!-- Kanban Board Area -->
    <div class="px-8 pb-12 overflow-x-auto">
        <div class="flex gap-6 min-w-max pb-4">
            <!-- Column: Available -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span>
                        <h3 class="font-bold text-sm text-on-surface">Available</h3>
                        <span
                            class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-bold text-primary">12</span>
                    </div>
                    <button class="text-slate-400 hover:text-primary transition-colors"><span
                            class="material-symbols-outlined text-lg" data-icon="more_horiz">more_horiz</span></button>
                </div>
                <div class="space-y-4">
                    <!-- Card Example -->
                    <div
                        class="bg-surface-container-lowest rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow group cursor-grab">
                        <div class="h-1.5 w-12 bg-slate-400 rounded-full mb-4"></div>
                        <div class="flex justify-between items-start mb-2">
                            <span
                                class="text-xs font-bold text-primary px-2 py-1 bg-surface-container rounded-lg">A-104</span>
                            <span
                                class="material-symbols-outlined text-slate-300 group-hover:text-slate-500 transition-colors"
                                data-icon="drag_indicator">drag_indicator</span>
                        </div>
                        <h4 class="font-bold text-sm text-on-surface mb-1">Inventario General</h4>
                        <p class="text-xs text-slate-500 mb-4">Apartamento 2 recámaras, Vista Norte</p>
                        <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                            <span class="text-sm font-bold font-headline text-primary">$3,450,000</span>
                            <div class="flex -space-x-2">
                                <div
                                    class="w-6 h-6 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center">
                                    <span class="material-symbols-outlined text-[10px]" data-icon="person">person</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column: Reserved -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-amber-400"></span>
                        <h3 class="font-bold text-sm text-on-surface">Reserved (Apartada)</h3>
                        <span
                            class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-bold text-primary">5</span>
                    </div>
                </div>
                <div class="space-y-4">
                    <div
                        class="bg-surface-container-lowest rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow group">
                        <div class="h-1.5 w-12 bg-amber-400 rounded-full mb-4"></div>
                        <div class="flex justify-between items-start mb-2">
                            <span
                                class="text-xs font-bold text-primary px-2 py-1 bg-surface-container rounded-lg">B-302</span>
                            <span class="text-[10px] font-bold text-amber-600 bg-amber-50 px-2 py-0.5 rounded-full">Expira
                                en 2d</span>
                        </div>
                        <h4 class="font-bold text-sm text-on-surface mb-1">Ricardo Mendoza</h4>
                        <p class="text-xs text-slate-500 mb-2">Asesor: Roberto Slim</p>
                        <p
                            class="text-[10px] text-on-primary-container italic bg-surface-container-low p-2 rounded-lg mb-4">
                            "Interesado en crédito bancario BBVA"</p>
                        <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                            <span class="text-sm font-bold font-headline text-primary">$4,120,000</span>
                            <img class="w-7 h-7 rounded-full object-cover"
                                data-alt="headshot of a middle aged man with professional attire"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz1o52osimRAVpV7O-7ULLu1Nd6IHFLshmN_qL2LaYFg72_yoeRbj4Brq8-z4J1ZO0x6ytntvuUcwCa1Dd5pxI1de63yBo2WUy1cP0cPxm2qWps6Vd2gFplayfdLdFEDqau1esi_6Ayj_5RJTKcNEVGfdnkU5yAu4GYt2yy2zhyDznTCVNj3FxSFx_GXcBd68_fKk6IlPjHtzpAnYvSDsZQ-E55idQtqmTRphSlQ_1yY6sWl97M7muXtAG_WdpQt7pt6JpGC1-vIYh" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column: In Process -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span>
                        <h3 class="font-bold text-sm text-on-surface">In Process (En trámite)</h3>
                        <span
                            class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-bold text-primary">8</span>
                    </div>
                </div>
                <div class="space-y-4">
                    <div
                        class="bg-surface-container-lowest rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow group">
                        <div class="h-1.5 w-12 bg-blue-500 rounded-full mb-4"></div>
                        <div class="flex justify-between items-start mb-2">
                            <span
                                class="text-xs font-bold text-primary px-2 py-1 bg-surface-container rounded-lg">C-501</span>
                            <span class="material-symbols-outlined text-blue-500 text-sm"
                                data-icon="description">description</span>
                        </div>
                        <h4 class="font-bold text-sm text-on-surface mb-1">Lucía Fernández</h4>
                        <p class="text-xs text-slate-500 mb-4">Asesor: Elena Ortiz</p>
                        <div class="space-y-2 mb-4">
                            <div class="flex justify-between text-[10px] font-bold text-slate-400">
                                <span>Documentación</span>
                                <span>75%</span>
                            </div>
                            <div class="w-full h-1 bg-slate-100 rounded-full">
                                <div class="h-full bg-blue-500 w-3/4 rounded-full"></div>
                            </div>
                        </div>
                        <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                            <span class="text-sm font-bold font-headline text-primary">$2,890,000</span>
                            <img class="w-7 h-7 rounded-full object-cover"
                                data-alt="professional portrait of a young woman with smiling expression"
                                src="https://lh3.googleusercontent.com/aida-public/AB6AXuDn3XaCyR9m5n8wsowd6cLY5wbqHzYgo0IPWXdR_96kZm2zyVWtOGEwceChmnXjMbgItuwfDIp0DgYW-QIkZa0-fCD645UX04_Pa0-2TYf27HYboDiEanMq7D1iQn0qTK_VWlybpmhHXO7EYC9dQHD1xssjl3ZRkMJ27U8rqMgcLd1HqAU6Y1ZWVY--6zLBzUfCHMP5RAPqv9WrQOk4GPo4FeW1hBiUQxtdtGxBhX_q3MuB9U-u7MISkvh1aDEYor70OUtGSj2Y_mIx" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column: Pending Signature -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-purple-500"></span>
                        <h3 class="font-bold text-sm text-on-surface">Pending Signature</h3>
                        <span
                            class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-bold text-primary">3</span>
                    </div>
                </div>
                <div class="space-y-4 opacity-60">
                    <div
                        class="bg-surface-container-lowest rounded-xl p-5 shadow-sm hover:shadow-md transition-shadow group">
                        <div class="h-1.5 w-12 bg-purple-500 rounded-full mb-4"></div>
                        <div class="flex justify-between items-start mb-2">
                            <span
                                class="text-xs font-bold text-primary px-2 py-1 bg-surface-container rounded-lg">A-202</span>
                        </div>
                        <h4 class="font-bold text-sm text-on-surface mb-1">Carlos Slim Domit</h4>
                        <p class="text-xs text-slate-500 mb-4">Asesor: Juan Pérez</p>
                        <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                            <span class="text-sm font-bold font-headline text-primary">$12,450,000</span>
                            <div class="w-7 h-7 rounded-full bg-slate-200"></div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Column: Signed -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-indigo-600"></span>
                        <h3 class="font-bold text-sm text-on-surface">Signed</h3>
                        <span
                            class="text-[10px] bg-surface-container-high px-2 py-0.5 rounded-full font-bold text-primary">21</span>
                    </div>
                </div>
                <div class="space-y-4">
                    <div class="bg-surface-container-lowest rounded-xl p-5 shadow-sm border-l-4 border-indigo-600">
                        <div class="flex justify-between items-start mb-2">
                            <span
                                class="text-xs font-bold text-primary px-2 py-1 bg-surface-container rounded-lg">D-100</span>
                            <span class="material-symbols-outlined text-indigo-600 text-sm" data-icon="verified"
                                style="font-variation-settings: 'FILL' 1;">verified</span>
                        </div>
                        <h4 class="font-bold text-sm text-on-surface mb-1">Inmobiliaria Regia SA</h4>
                        <p class="text-xs text-slate-500 mb-4">Asesor: Maria García</p>
                        <div class="flex justify-between items-center pt-4 border-t border-slate-50">
                            <span class="text-sm font-bold font-headline text-primary">$7,800,000</span>
                            <div
                                class="w-7 h-7 rounded-full bg-indigo-100 flex items-center justify-center text-[10px] font-bold text-indigo-600">
                                IR</div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Additional Columns (Simplified representation for layout) -->
            <div class="w-80 flex-shrink-0 border-l border-dashed border-slate-200 px-4">
                <div class="flex items-center gap-2 mb-4">
                    <span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span>
                    <h3 class="font-bold text-sm text-on-surface">Paid / Invoiced</h3>
                </div>
                <div class="bg-surface-container-low/50 rounded-2xl h-96 flex items-center justify-center">
                    <p class="text-xs text-slate-400 font-medium">Scroll right for more states</p>
                </div>
            </div>
            <!-- Column: Cancelled -->
            <div class="w-80 flex-shrink-0">
                <div class="flex items-center justify-between mb-4 px-1">
                    <div class="flex items-center gap-2">
                        <span class="w-2.5 h-2.5 rounded-full bg-error"></span>
                        <h3 class="font-bold text-sm text-on-surface">Cancelled</h3>
                        <span
                            class="text-[10px] bg-error-container px-2 py-0.5 rounded-full font-bold text-on-error-container">2</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection