@extends('layouts.panel-template')

@section('main-content')
    <div class="p-8 max-w-[1600px] mx-auto">
        <!-- Page Header -->
        <div class="flex justify-between items-end mb-8">
            <div>
                <h2 class="text-3xl font-bold tracking-tight text-primary font-headline">Control de Comisiones</h2>
                <p class="text-secondary mt-1">Gestión administrativa y liberación de pagos por ventas.</p>
            </div>
            <div class="flex gap-3">
                <button
                    class="bg-surface-container-lowest text-primary px-4 py-2.5 rounded-xl text-sm font-semibold border border-outline-variant/15 shadow-sm flex items-center gap-2 hover:bg-surface-container transition-colors">
                    <span class="material-symbols-outlined text-lg">download</span>
                    Exportar Reporte
                </button>
                <button
                    class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-6 py-2.5 rounded-xl text-sm font-semibold shadow-md flex items-center gap-2 hover:opacity-90 transition-all active:scale-95">
                    <span class="material-symbols-outlined text-lg">add</span>
                    Nueva Comisión
                </button>
            </div>
        </div>
        <!-- Bento Grid KPIs -->
        <div class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-6 mb-8">
            <div
                class="bg-primary text-on-primary p-6 rounded-full shadow-lg border border-primary-container relative overflow-hidden group">
                <div class="absolute -right-4 -bottom-4 opacity-10 group-hover:scale-110 transition-transform duration-500">
                    <span class="material-symbols-outlined text-8xl"
                        style="font-variation-settings: 'FILL' 1;">generating_tokens</span>
                </div>
                <p class="text-xs font-bold uppercase tracking-widest opacity-70 mb-2">Generado</p>
                <h3 class="text-3xl font-bold font-headline">$4,280,000</h3>
                <p class="text-[10px] mt-2 flex items-center gap-1">
                    <span class="material-symbols-outlined text-sm text-green-400">trending_up</span>
                    <span class="text-green-400">+12%</span> vs mes anterior
                </p>
            </div>
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm border-0 border-outline-variant/15 relative overflow-hidden group">
                <p class="text-xs font-bold text-secondary uppercase tracking-widest mb-2">Pendiente</p>
                <h3 class="text-3xl font-bold font-headline text-on-surface">$1,150,000</h3>
                <div class="mt-4 w-full bg-outline-variant/20 h-1.5 rounded-full overflow-hidden">
                    <div class="bg-tertiary-fixed-dim h-full w-[45%] rounded-full"></div>
                </div>
                <p class="text-[10px] mt-2 text-outline">Por liberación de condiciones</p>
            </div>
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm border-0 border-outline-variant/15 relative overflow-hidden group">
                <p class="text-xs font-bold text-secondary uppercase tracking-widest mb-2">Liberado</p>
                <h3 class="text-3xl font-bold font-headline text-on-surface">$845,000</h3>
                <div class="mt-4 flex items-center gap-2">
                    <span class="px-2 py-0.5 rounded text-[10px] font-bold bg-green-100 text-green-700">LISTO PARA
                        PAGO</span>
                </div>
            </div>
            <div
                class="bg-surface-container-lowest p-6 rounded-full shadow-sm border-0 border-outline-variant/15 relative overflow-hidden group">
                <p class="text-xs font-bold text-secondary uppercase tracking-widest mb-2">Total Pagado</p>
                <h3 class="text-3xl font-bold font-headline text-on-surface">$2,285,000</h3>
                <p class="text-[10px] mt-2 text-outline">Acumulado anual 2024</p>
            </div>
            <div class="bg-surface-container-low p-6 rounded-full border-0 border-primary/5 relative overflow-hidden group">
                <p class="text-xs font-bold text-on-secondary-container uppercase tracking-widest mb-2">Por Pagar</p>
                <h3 class="text-3xl font-bold font-headline text-primary">$1,995,000</h3>
                <div class="mt-4 flex -space-x-2">
                    <div class="w-6 h-6 rounded-full border-2 border-surface-container-low bg-slate-300 overflow-hidden">
                        <img class="w-full h-full object-cover"
                            data-alt="headshot of a smiling young male professional with short dark hair and a crisp white shirt"
                            src="https://lh3.googleusercontent.com/aida-public/AB6AXuCXp8nKoMtM2KlcH1OXCnrTg2SR7Uu2hrw7beK9hXDFwlRTHkGTQX0BmSNtTFdtjR53Lxr6-5CPEKFk0dMIdJcUKFSz72y0EvTBtOCDBttN4_meBsEuPAW4iNsYqqu3hbeGy5xiWdoJ9bU4H4a_XfaEVd7RQudQGAs0ZN3iqpZL77K3_L_WH8rv5-wM-hEMJHQkQT1PgakjXAN6JIydrBYX5wtCLs__j4s_ghXj2Tct4-igq3P4zCkLS2U0WaiJn1vb68URUNEcGFSz" />
                    </div>
                    <div
                        class="w-6 h-6 rounded-full border-2 border-surface-container-low bg-slate-400 overflow-hidden text-[8px] flex items-center justify-center font-bold text-white">
                        +8</div>
                </div>
            </div>
        </div>
        <!-- Filters Section -->
        <div class="bg-surface-container-low/50 p-6 rounded-xl mb-8 flex flex-wrap gap-4 items-end">
            <div class="flex-1 min-w-[200px]">
                <label class="block text-[10px] font-bold text-secondary uppercase tracking-widest mb-2">Asesor</label>
                <select
                    class="w-full bg-surface-container-lowest border-0 ring-1 ring-outline-variant/30 focus:ring-primary rounded-xl text-sm py-2.5">
                    <option>Todos los asesores</option>
                    <option>Mariana Robles</option>
                    <option>Carlos Jimenez</option>
                    <option>Sonia Alarcón</option>
                </select>
            </div>
            <div class="flex-1 min-w-[200px]">
                <label class="block text-[10px] font-bold text-secondary uppercase tracking-widest mb-2">Proyecto</label>
                <select
                    class="w-full bg-surface-container-lowest border-0 ring-1 ring-outline-variant/30 focus:ring-primary rounded-xl text-sm py-2.5">
                    <option>Torre A-1 Industrial</option>
                    <option>Bodegas El Parque</option>
                    <option>Desarrollo Juriquilla</option>
                </select>
            </div>
            <div class="flex-1 min-w-[150px]">
                <label class="block text-[10px] font-bold text-secondary uppercase tracking-widest mb-2">Periodo</label>
                <select
                    class="w-full bg-surface-container-lowest border-0 ring-1 ring-outline-variant/30 focus:ring-primary rounded-xl text-sm py-2.5">
                    <option>Octubre 2024</option>
                    <option>Septiembre 2024</option>
                    <option>Q3 2024</option>
                </select>
            </div>
            <div class="flex-1 min-w-[150px]">
                <label class="block text-[10px] font-bold text-secondary uppercase tracking-widest mb-2">Estatus</label>
                <select
                    class="w-full bg-surface-container-lowest border-0 ring-1 ring-outline-variant/30 focus:ring-primary rounded-xl text-sm py-2.5">
                    <option>Cualquier estatus</option>
                    <option>Pendiente</option>
                    <option>Liberado</option>
                    <option>Pagado</option>
                </select>
            </div>
            <button
                class="bg-primary-container text-white px-6 py-2.5 rounded-xl text-sm font-semibold hover:opacity-90 transition-all flex items-center gap-2 h-[42px]">
                <span class="material-symbols-outlined text-lg">filter_list</span>
                Aplicar
            </button>
        </div>
        <!-- Table Section -->
        <div class="bg-surface-container-lowest rounded-xl shadow-sm border-0 border-outline-variant/15 overflow-hidden">
            <div class="p-6 border-b border-outline-variant/10 flex justify-between items-center">
                <h3 class="font-bold text-lg text-primary font-headline">Listado de Comisiones</h3>
                <div class="flex gap-4">
                    <div class="flex items-center gap-2 text-xs text-secondary">
                        <span class="w-2 h-2 rounded-full bg-yellow-400"></span> Pendiente
                    </div>
                    <div class="flex items-center gap-2 text-xs text-secondary">
                        <span class="w-2 h-2 rounded-full bg-green-500"></span> Liberado
                    </div>
                    <div class="flex items-center gap-2 text-xs text-secondary">
                        <span class="w-2 h-2 rounded-full bg-blue-600"></span> Pagado
                    </div>
                </div>
            </div>
            <div class="overflow-x-auto">
                <table class="w-full text-left border-collapse">
                    <thead>
                        <tr class="bg-surface-container-low/30">
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Asesor</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Unidad /
                                Cliente</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Monto Venta
                            </th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Comisión
                            </th>
                            <th
                                class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest text-center">
                                Condición Met</th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Estatus
                            </th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Fecha Lib.
                            </th>
                            <th class="px-6 py-4 text-[10px] font-bold text-secondary uppercase tracking-widest">Acciones
                            </th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-outline-variant/10">
                        <!-- Row 1 -->
                        <tr class="hover:bg-surface-container-low transition-colors group">
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-700 font-bold text-xs">
                                        MR</div>
                                    <div class="text-sm font-semibold text-on-surface">Mariana Robles</div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-on-surface">Lote 45-B</span>
                                    <span class="text-[11px] text-secondary">Logística Global S.A.</span>
                                </div>
                            </td>
                            <td class="px-6 py-5 text-sm font-medium">$2,450,000</td>
                            <td class="px-6 py-5 text-sm font-bold text-primary">$73,500</td>
                            <td class="px-6 py-5 text-center">
                                <span class="material-symbols-outlined text-green-500 text-xl"
                                    style="font-variation-settings: 'FILL' 1;">check_circle</span>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="px-3 py-1 rounded-full text-[10px] font-bold bg-green-100 text-green-700 uppercase">Liberado</span>
                            </td>
                            <td class="px-6 py-5 text-sm text-secondary">15 Oct 2024</td>
                            <td class="px-6 py-5">
                                <button class="p-2 hover:bg-white rounded-lg text-secondary transition-colors">
                                    <span class="material-symbols-outlined text-lg">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 2 -->
                        <tr class="hover:bg-surface-container-low transition-colors group">
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-700 font-bold text-xs">
                                        CJ</div>
                                    <div class="text-sm font-semibold text-on-surface">Carlos Jimenez</div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-on-surface">Bodega 12</span>
                                    <span class="text-[11px] text-secondary">Distribuidora Norte</span>
                                </div>
                            </td>
                            <td class="px-6 py-5 text-sm font-medium">$5,200,000</td>
                            <td class="px-6 py-5 text-sm font-bold text-primary">$156,000</td>
                            <td class="px-6 py-5 text-center">
                                <span class="material-symbols-outlined text-outline-variant text-xl">pending</span>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="px-3 py-1 rounded-full text-[10px] font-bold bg-yellow-100 text-yellow-700 uppercase">Pendiente</span>
                            </td>
                            <td class="px-6 py-5 text-sm text-outline">—</td>
                            <td class="px-6 py-5">
                                <button class="p-2 hover:bg-white rounded-lg text-secondary transition-colors">
                                    <span class="material-symbols-outlined text-lg">more_vert</span>
                                </button>
                            </td>
                        </tr>
                        <!-- Row 3 -->
                        <tr class="hover:bg-surface-container-low transition-colors group">
                            <td class="px-6 py-5">
                                <div class="flex items-center gap-3">
                                    <div
                                        class="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center text-teal-700 font-bold text-xs">
                                        SA</div>
                                    <div class="text-sm font-semibold text-on-surface">Sonia Alarcón</div>
                                </div>
                            </td>
                            <td class="px-6 py-5">
                                <div class="flex flex-col">
                                    <span class="text-sm font-medium text-on-surface">Oficina 302</span>
                                    <span class="text-[11px] text-secondary">Inversiones Delta</span>
                                </div>
                            </td>
                            <td class="px-6 py-5 text-sm font-medium">$1,850,000</td>
                            <td class="px-6 py-5 text-sm font-bold text-primary">$55,500</td>
                            <td class="px-6 py-5 text-center">
                                <span class="material-symbols-outlined text-green-500 text-xl"
                                    style="font-variation-settings: 'FILL' 1;">check_circle</span>
                            </td>
                            <td class="px-6 py-5">
                                <span
                                    class="px-3 py-1 rounded-full text-[10px] font-bold bg-blue-100 text-blue-700 uppercase">Pagado</span>
                            </td>
                            <td class="px-6 py-5 text-sm text-secondary">02 Oct 2024</td>
                            <td class="px-6 py-5">
                                <button class="p-2 hover:bg-white rounded-lg text-secondary transition-colors">
                                    <span class="material-symbols-outlined text-lg">more_vert</span>
                                </button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div
                class="p-6 bg-surface-container-low/30 border-t border-outline-variant/10 flex justify-between items-center">
                <span class="text-xs text-secondary font-medium">Mostrando 1-10 de 48 comisiones</span>
                <div class="flex gap-2">
                    <button
                        class="p-1 rounded bg-white border border-outline-variant/30 text-secondary hover:text-primary transition-colors">
                        <span class="material-symbols-outlined">chevron_left</span>
                    </button>
                    <button class="px-3 py-1 rounded bg-primary text-white text-xs font-bold">1</button>
                    <button
                        class="px-3 py-1 rounded bg-white border border-outline-variant/30 text-secondary text-xs font-bold hover:bg-surface-container transition-colors">2</button>
                    <button
                        class="px-3 py-1 rounded bg-white border border-outline-variant/30 text-secondary text-xs font-bold hover:bg-surface-container transition-colors">3</button>
                    <button
                        class="p-1 rounded bg-white border border-outline-variant/30 text-secondary hover:text-primary transition-colors">
                        <span class="material-symbols-outlined">chevron_right</span>
                    </button>
                </div>
            </div>
        </div>
        <!-- Asymmetric Utility Section -->
        <div class="mt-12 grid grid-cols-1 lg:grid-cols-3 gap-8">
            <div
                class="lg:col-span-2 bg-gradient-to-br from-primary-container to-primary p-8 rounded-full text-on-primary flex justify-between items-center relative overflow-hidden">
                <div
                    class="absolute inset-0 bg-[url('https://www.transparenttextures.com/patterns/carbon-fibre.png')] opacity-10">
                </div>
                <div class="relative z-10">
                    <h4 class="text-xl font-bold font-headline mb-2">Próximo Cierre Administrativo</h4>
                    <p class="text-on-primary-container text-sm max-w-md">El corte para la liberación de comisiones de la
                        segunda quincena de Octubre finaliza en 4 días laborales.</p>
                </div>
                <div class="text-right relative z-10">
                    <div class="text-4xl font-black font-headline tracking-tighter">OCT 28</div>
                    <div class="text-[10px] font-bold uppercase tracking-widest opacity-60">Corte Programado</div>
                </div>
            </div>
            <div class="bg-tertiary-fixed p-6 rounded-full flex flex-col justify-center items-center text-center">
                <span class="material-symbols-outlined text-4xl text-on-tertiary-fixed mb-3">verified</span>
                <h4 class="text-sm font-bold text-on-tertiary-fixed font-headline uppercase tracking-wider">Validación
                    Pendiente</h4>
                <p class="text-on-tertiary-fixed-variant text-xs mt-2 px-6">Hay <span class="font-bold underline">12
                        comprobantes</span> de pago de clientes pendientes por validar para liberar comisiones.</p>
                <button
                    class="mt-4 text-[11px] font-bold text-on-tertiary-fixed border-b-2 border-on-tertiary-fixed pb-0.5 hover:opacity-70">REVISAR
                    AHORA</button>
            </div>
        </div>
    </div>
@endsection