<x-layout title="Historial de Ventas">
    
    <x-section-header subtitle="Finanzas" title="Historial de " highlight="Ventas" />

    <!-- Barra de Herramientas -->
    <div class="w-full flex justify-between items-center mb-6">
        <!-- Buscador simple (opcional visualmente, funcionalidad futura) -->
        <div class="relative w-1/3">
            <input type="text" placeholder="Buscar por N° Venta o Cliente..." class="bg-neutral-800 border border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
        </div>

        <!-- Botón Nueva Venta -->
        <a href="{{ route('sales.create') }}" class="px-5 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] transition-colors shadow-lg shadow-neon-lime/20 flex items-center gap-2">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path></svg>
            Registrar Venta
        </a>
    </div>

    <!-- Tabla de Ventas -->
    <div class="relative overflow-x-auto shadow-md sm:rounded-lg border border-neutral-800 bg-panel-bg">
        <table class="w-full text-sm text-left text-gray-400">
            <thead class="text-xs text-gray-300 uppercase bg-neutral-800 border-b border-neutral-700">
                <tr>
                    <th scope="col" class="px-6 py-3"># Ref</th>
                    <th scope="col" class="px-6 py-3">Fecha</th>
                    <th scope="col" class="px-6 py-3">Cliente</th>
                    <th scope="col" class="px-6 py-3">Método Pago</th>
                    <th scope="col" class="px-6 py-3 text-right">Total</th>
                    <th scope="col" class="px-6 py-3 text-center">Acciones</th>
                </tr>
            </thead>
            <tbody>

            </tbody>
        </table>
    </div>

    <!-- Paginación -->
    <div class="mt-4 w-full flex justify-center">
    </div>

</x-layout>