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

@section('navbar-buttons')
    <a href="{{ route('realEstate.purchase.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">Nuevo Gastos</span>
    </a>
@endsection

@section('content')
    <div class="flex-1 overflow-y-auto bg-background-light dark:bg-background-dark p-6 lg:p-10">
        <div class="max-w-7xl mx-auto space-y-8">
            <!-- Breadcrumbs & Heading -->
            <div class="flex flex-col gap-6 md:flex-row md:items-start md:justify-between">
                <div class="space-y-1">
                    <nav class="flex items-center gap-2 text-sm text-slate-500 mb-2">
                        <a class="hover:text-primary transition-colors" href="#">Inicio</a>
                        <span class="text-slate-300">/</span>
                        <a class="hover:text-primary transition-colors" href="#">Finanzas</a>
                        <span class="text-slate-300">/</span>
                        <span class="text-primary font-medium">Gastos</span>
                    </nav>
                    <h1 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">Gestión de
                        Gastos</h1>
                    <p class="text-slate-500 dark:text-slate-400 max-w-2xl">Administra y supervisa el flujo de
                        caja operativo, facturas de proveedores y reembolsos de la inmobiliaria.</p>
                </div>
            </div>
            <!-- Stats Cards -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Card 1 -->
                <div
                    class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-4">
                        <div class="bg-blue-50 dark:bg-blue-900/20 p-2.5 rounded-lg">
                            <span class="material-symbols-outlined text-primary text-2xl">payments</span>
                        </div>
                        <span
                            class="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400 text-xs font-semibold px-2 py-1 rounded-full flex items-center gap-1">
                            <span class="material-symbols-outlined text-[14px]">trending_up</span>
                            +12.5%
                        </span>
                    </div>
                    <div>
                        <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Total Gastos del
                            Mes (Oct)</p>
                        <h3 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">$145,200
                            <span class="text-lg text-slate-400 font-normal">MXN</span>
                        </h3>
                    </div>
                </div>
                <!-- Card 2 -->
                <div
                    class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col justify-between">
                    <div class="flex justify-between items-start mb-4">
                        <div class="bg-orange-50 dark:bg-orange-900/20 p-2.5 rounded-lg">
                            <span
                                class="material-symbols-outlined text-orange-600 dark:text-orange-400 text-2xl">pending_actions</span>
                        </div>
                        <span
                            class="bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400 text-xs font-semibold px-2 py-1 rounded-full">
                            3 facturas
                        </span>
                    </div>
                    <div>
                        <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Pagos Pendientes
                        </p>
                        <h3 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">$12,500
                            <span class="text-lg text-slate-400 font-normal">MXN</span>
                        </h3>
                    </div>
                </div>
                <!-- Card 3: Mini Chart for context -->
                <div
                    class="bg-white dark:bg-slate-900 p-6 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm flex flex-col relative overflow-hidden">
                    <div class="flex justify-between items-start mb-2 z-10">
                        <div class="bg-purple-50 dark:bg-purple-900/20 p-2.5 rounded-lg">
                            <span
                                class="material-symbols-outlined text-purple-600 dark:text-purple-400 text-2xl">account_balance_wallet</span>
                        </div>
                    </div>
                    <div class="z-10">
                        <p class="text-slate-500 dark:text-slate-400 text-sm font-medium mb-1">Presupuesto
                            Restante</p>
                        <h3 class="text-3xl font-bold text-slate-900 dark:text-white tracking-tight">$54,800
                            <span class="text-lg text-slate-400 font-normal">MXN</span>
                        </h3>
                    </div>
                    <!-- Decorational background shape -->
                    <div class="absolute -bottom-6 -right-6 w-32 h-32 bg-purple-500/5 rounded-full blur-2xl">
                    </div>
                </div>
            </div>
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <!-- Chart Section -->
                <div
                    class="lg:col-span-2 bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-6">
                    <div class="flex justify-between items-center mb-8">
                        <h3 class="text-lg font-bold text-slate-900 dark:text-white">Gastos por Categoría</h3>
                        <select
                            class="bg-slate-50 dark:bg-slate-800 border-none text-sm text-slate-600 dark:text-slate-300 rounded-lg py-1.5 px-3 focus:ring-2 focus:ring-primary/50 cursor-pointer">
                            <option>Este Mes</option>
                            <option>Últimos 3 Meses</option>
                            <option>Este Año</option>
                        </select>
                    </div>
                    <!-- Pure CSS Chart -->
                    <div class="flex items-end justify-between h-64 w-full gap-2 sm:gap-4 px-2">
                        <!-- Bar 1: Nómina -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-primary w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[65%]">
                                </div>
                                <!-- Tooltip (visible on hover) -->
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $45k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Nómina</p>
                        </div>
                        <!-- Bar 2: Marketing -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-blue-400 w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[45%]">
                                </div>
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $22k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Marketing</p>
                        </div>
                        <!-- Bar 3: Mantenimiento -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-indigo-400 w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[30%]">
                                </div>
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $15k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Mantenimiento</p>
                        </div>
                        <!-- Bar 4: Servicios -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-sky-400 w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[25%]">
                                </div>
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $12k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Servicios</p>
                        </div>
                        <!-- Bar 5: Tecnología -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-violet-400 w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[35%]">
                                </div>
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $18k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Tecnología</p>
                        </div>
                        <!-- Bar 6: Otros -->
                        <div class="flex flex-col items-center flex-1 group cursor-pointer">
                            <div
                                class="relative w-full bg-primary/10 dark:bg-primary/20 rounded-t-lg transition-all duration-300 group-hover:bg-primary/20 h-[85%] flex flex-col justify-end">
                                <div
                                    class="bg-slate-400 w-full rounded-t-lg absolute bottom-0 transition-all duration-500 group-hover:opacity-90 h-[15%]">
                                </div>
                                <div
                                    class="opacity-0 group-hover:opacity-100 absolute -top-10 left-1/2 -translate-x-1/2 bg-slate-800 text-white text-xs py-1 px-2 rounded shadow transition-opacity whitespace-nowrap z-10">
                                    $8k
                                </div>
                            </div>
                            <p class="mt-3 text-xs text-slate-500 font-medium truncate w-full text-center">
                                Otros</p>
                        </div>
                    </div>
                </div>
                <!-- Quick Actions / Mini summary (Right Column) -->
                <div
                    class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm p-6 flex flex-col">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white mb-6">Desglose Rápido</h3>
                    <div class="space-y-6 flex-1">
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div
                                    class="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                                    <span class="material-symbols-outlined">group</span>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-slate-900 dark:text-white">Comisiones
                                        Agentes</p>
                                    <p class="text-xs text-slate-500">Nómina - 15 Oct</p>
                                </div>
                            </div>
                            <p class="font-bold text-slate-900 dark:text-white">$32,000</p>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div
                                    class="h-10 w-10 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600">
                                    <span class="material-symbols-outlined">campaign</span>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-slate-900 dark:text-white">Campaña
                                        Facebook</p>
                                    <p class="text-xs text-slate-500">Marketing - 12 Oct</p>
                                </div>
                            </div>
                            <p class="font-bold text-slate-900 dark:text-white">$5,000</p>
                        </div>
                        <div class="flex items-center justify-between">
                            <div class="flex items-center gap-3">
                                <div
                                    class="h-10 w-10 rounded-full bg-orange-100 dark:bg-orange-900/30 flex items-center justify-center text-orange-600">
                                    <span class="material-symbols-outlined">construction</span>
                                </div>
                                <div>
                                    <p class="text-sm font-semibold text-slate-900 dark:text-white">Reparación
                                        Aire A.</p>
                                    <p class="text-xs text-slate-500">Mantenimiento - 10 Oct</p>
                                </div>
                            </div>
                            <p class="font-bold text-slate-900 dark:text-white">$3,200</p>
                        </div>
                    </div>
                    <button
                        class="w-full mt-6 py-2 text-sm font-medium text-primary hover:bg-primary/5 rounded-lg transition-colors border border-dashed border-primary/30">
                        Ver reporte completo
                    </button>
                </div>
            </div>
            <!-- Detailed Table Section -->
            <div
                class="bg-white dark:bg-slate-900 rounded-xl border border-slate-200 dark:border-slate-800 shadow-sm overflow-hidden flex flex-col">
                <div
                    class="p-6 border-b border-slate-200 dark:border-slate-800 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
                    <h3 class="text-lg font-bold text-slate-900 dark:text-white">Detalle de Movimientos</h3>
                    <div class="flex items-center gap-2">
                        <button
                            class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-[18px]">filter_list</span>
                            Filtrar
                        </button>
                        <button
                            class="flex items-center gap-2 px-3 py-2 bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-700 rounded-lg text-sm text-slate-600 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-slate-700 transition-colors">
                            <span class="material-symbols-outlined text-[18px]">download</span>
                            Exportar
                        </button>
                    </div>
                </div>
                <div class="overflow-x-auto">
                    <table class="w-full text-left border-collapse">
                        <thead>
                            <tr class="bg-slate-50 dark:bg-slate-800/50 border-b border-slate-200 dark:border-slate-800">
                                <th class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                                    Categoría</th>
                                <th class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                                    Sucursal</th>
                                <th class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                                    Fecha</th>
                                <th class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                                    Proveedor</th>
                                <th
                                    class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider text-right">
                                    Monto</th>
                                <th
                                    class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider text-center">
                                    Estatus</th>
                                <th class="px-6 py-4 text-xs font-semibold text-slate-500 uppercase tracking-wider">
                                </th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-200 dark:divide-slate-800">
                            <!-- Row 1 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-8 w-8 rounded bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600">
                                            <span class="material-symbols-outlined text-[18px]">campaign</span>
                                        </div>
                                        <span class="text-sm font-medium text-slate-900 dark:text-white">Marketing</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    CDMX Centro</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    12/10/2023</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-medium">
                                    Meta Ads</td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-bold text-right">
                                    $5,000.00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <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-400 border border-green-200 dark:border-green-800">
                                        Pagado
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button
                                        class="text-slate-400 hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 2 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-8 w-8 rounded bg-indigo-100 dark:bg-indigo-900/30 flex items-center justify-center text-indigo-600">
                                            <span class="material-symbols-outlined text-[18px]">construction</span>
                                        </div>
                                        <span
                                            class="text-sm font-medium text-slate-900 dark:text-white">Mantenimiento</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    Polanco</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    14/10/2023</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-medium">
                                    Plomería Express</td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-bold text-right">
                                    $1,200.00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800">
                                        Pendiente
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button
                                        class="text-slate-400 hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 3 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-8 w-8 rounded bg-primary/10 flex items-center justify-center text-primary">
                                            <span class="material-symbols-outlined text-[18px]">group</span>
                                        </div>
                                        <span class="text-sm font-medium text-slate-900 dark:text-white">Nómina</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    General</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    15/10/2023</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-medium">
                                    Comisiones Venta</td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-bold text-right">
                                    $45,000.00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <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-400 border border-green-200 dark:border-green-800">
                                        Pagado
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button
                                        class="text-slate-400 hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 4 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-8 w-8 rounded bg-sky-100 dark:bg-sky-900/30 flex items-center justify-center text-sky-600">
                                            <span class="material-symbols-outlined text-[18px]">water_drop</span>
                                        </div>
                                        <span class="text-sm font-medium text-slate-900 dark:text-white">Servicios</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    Guadalajara</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    18/10/2023</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-medium">
                                    CFE</td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-bold text-right">
                                    $3,450.00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <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-400 border border-green-200 dark:border-green-800">
                                        Pagado
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button
                                        class="text-slate-400 hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                            <!-- Row 5 -->
                            <tr class="hover:bg-slate-50 dark:hover:bg-slate-800/50 transition-colors group">
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <div class="flex items-center gap-3">
                                        <div
                                            class="h-8 w-8 rounded bg-slate-100 dark:bg-slate-700 flex items-center justify-center text-slate-600 dark:text-slate-300">
                                            <span class="material-symbols-outlined text-[18px]">inventory_2</span>
                                        </div>
                                        <span class="text-sm font-medium text-slate-900 dark:text-white">Otros</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    Monterrey</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-600 dark:text-slate-400">
                                    20/10/2023</td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-medium">
                                    Papelería Office</td>
                                <td
                                    class="px-6 py-4 whitespace-nowrap text-sm text-slate-900 dark:text-white font-bold text-right">
                                    $850.00</td>
                                <td class="px-6 py-4 whitespace-nowrap text-center">
                                    <span
                                        class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 border border-yellow-200 dark:border-yellow-800">
                                        Pendiente
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button
                                        class="text-slate-400 hover:text-primary transition-colors opacity-0 group-hover:opacity-100">
                                        <span class="material-symbols-outlined text-[20px]">more_vert</span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- Pagination -->
                <div
                    class="bg-white dark:bg-slate-900 px-6 py-4 border-t border-slate-200 dark:border-slate-800 flex items-center justify-between">
                    <div class="text-sm text-slate-500 dark:text-slate-400">
                        Mostrando <span class="font-medium">1</span> a <span class="font-medium">5</span> de
                        <span class="font-medium">48</span> resultados
                    </div>
                    <div class="flex items-center gap-2">
                        <button
                            class="px-3 py-1 text-sm border border-slate-300 dark:border-slate-700 rounded-md text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800 disabled:opacity-50">Anterior</button>
                        <button
                            class="px-3 py-1 text-sm border border-slate-300 dark:border-slate-700 rounded-md text-slate-500 hover:bg-slate-50 dark:hover:bg-slate-800">Siguiente</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection