{% extends 'layouts/base.html' %}

{% block title %}Gestión de Ventas{% endblock %}

{% block content %}
<div class="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
    <div>
        <h1 class="text-2xl font-bold text-gray-900">Gestión Comercial y Ventas</h1>
        <p class="text-gray-500">Administra aprobaciones, reemplazos y renovaciones de {{ vendedor.nombre_negocio }}.</p>
    </div>
    <button onclick="toggleModal('modalNuevaVenta')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg font-medium shadow-sm flex items-center transition-colors">
        <i class="ph ph-plus-circle mr-2 text-lg"></i> Nueva Venta Directa
    </button>
</div>

<!-- Navegación por Pestañas (Tabs) -->
<div class="bg-white rounded-t-xl shadow-sm border border-gray-100 border-b-0 px-2 pt-2">
    <nav class="flex space-x-4 border-b border-gray-200" aria-label="Tabs">
        <button onclick="switchTab('activas', this)" class="tab-btn active-tab px-4 py-3 font-medium text-sm border-b-2 border-blue-600 text-blue-600 focus:outline-none transition-colors">
            Ventas Activas ({{ activas|length }})
        </button>
        <button onclick="switchTab('pendientes', this)" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none transition-colors">
            Pendientes de Aprobación ({{ pendientes|length }})
        </button>
        <button onclick="switchTab('vencidas', this)" class="tab-btn px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 focus:outline-none transition-colors">
            Renovaciones / Vencidas ({{ vencidas|length }})
        </button>
    </nav>
</div>

<!-- Contenedor Principal de las Tablas -->
<div class="bg-white rounded-b-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    
    <!-- PESTAÑA: ACTIVAS -->
    <div id="tab-activas" class="tab-content overflow-x-auto">
        
        <!-- BARRA DE FILTROS ESTILO EXCEL -->
        <div class="px-6 py-3 bg-gray-50 border-b border-gray-100 flex gap-2 overflow-x-auto">
            <button onclick="filtrarCategoria('todas', this)" class="filtro-btn px-4 py-1.5 rounded-full text-xs font-bold bg-blue-600 text-white transition-colors whitespace-nowrap">Todas</button>
            {% for cat in categorias %}
                <button onclick="filtrarCategoria('{{ cat.nombre|lower|replace(' ', '-') }}', this)" class="filtro-btn px-4 py-1.5 rounded-full text-xs font-medium bg-white border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors whitespace-nowrap">{{ cat.nombre }}</button>
            {% endfor %}
            <button onclick="filtrarCategoria('sin-categoria', this)" class="filtro-btn px-4 py-1.5 rounded-full text-xs font-medium bg-white border border-gray-200 text-gray-600 hover:bg-gray-100 transition-colors whitespace-nowrap">Otros</button>
        </div>

        <table class="w-full text-left border-collapse">
            <!-- ... (tu <thead> actual queda igual) ... -->
            <tbody class="divide-y divide-gray-100">
                {% if activas %}
                    {% for venta in activas %}
                    <!-- ESTO REEMPLAZA EL CONTENIDO DESDE <tr class="hover:bg-gray-50 venta-row..."> HASTA EL CIERRE </tr> -->
                    <tr class="hover:bg-gray-50 venta-row transition-opacity duration-200" data-categoria="{{ venta.producto.categoria.nombre|lower|replace(' ', '-') if venta.producto.categoria else 'sin-categoria' }}">
                        
                        <!-- 1. Columna del Cliente (Limpiada) -->
                        <td class="px-6 py-4">
                            <span class="font-bold text-gray-900 block">{{ venta.cliente.nombre }}</span>
                            <span class="text-xs text-gray-500 font-mono">{{ venta.cliente.telefono_whatsapp }}</span>
                        </td>
                        
                        <!-- 2. Columna del Producto (Limpiada, sin mostrar correo ni pass) -->
                        <td class="px-6 py-4">
                            <span class="font-bold text-gray-800 text-sm block">{{ venta.producto.nombre }}</span>
                            <span class="bg-blue-50 text-blue-700 px-2.5 py-0.5 rounded-md text-xs font-semibold mt-1 inline-block">
                                {{ venta.producto.categoria.nombre if venta.producto.categoria else 'General' }}
                            </span>
                        </td>

                        <!-- 3. Columna de Vencimiento -->
                        <td class="px-6 py-4">
                            <span class="text-xs text-gray-400 block mb-0.5">Vence el:</span>
                            <span class="text-gray-900 font-medium">{{ venta.fecha_vencimiento.strftime('%d/%m/%Y') }}</span>
                            <div class="fecha-badge mt-1" data-fecha="{{ venta.fecha_vencimiento.strftime('%Y-%m-%d') }}"></div>
                        </td>

                        <!-- 4. Columna de Acciones -->
                        <td class="px-6 py-4 text-center flex justify-center items-center gap-2">
                            <!-- Botón Ver Detalles (El Ojito) -->
                            <button onclick="verDetalles(
                                '{{ venta.cliente.nombre }}',
                                '{{ venta.cliente.telefono_whatsapp | replace('+', '') | replace(' ', '') }}',
                                '{{ venta.producto.nombre }}',
                                '{{ venta.perfil.cuenta_madre.correo_cuenta if venta.perfil and venta.perfil.cuenta_madre else 'N/D' }}',
                                '{{ venta.perfil.cuenta_madre.password_cuenta if venta.perfil and venta.perfil.cuenta_madre else 'N/D' }}',
                                '{{ venta.perfil.nombre_perfil if venta.perfil else 'Cuenta Completa' }}',
                                '{{ venta.perfil.pin_perfil if venta.perfil else '' }}',
                                '{{ venta.fecha_venta.strftime('%d/%m/%Y') }}',
                                '{{ venta.fecha_vencimiento.strftime('%d/%m/%Y') }}'
                            )" class="text-blue-500 hover:text-blue-700" title="Ver Detalles">
                                <i class="ph ph-eye text-xl"></i>
                            </button>
                            
                            <!-- Botón Reemplazar -->
                            <button class="bg-amber-100 text-amber-700 hover:bg-amber-200 px-3 py-1.5 rounded-md text-xs font-medium transition-colors">
                                <i class="ph ph-arrows-left-right mr-1"></i>
                            </button>

                            <!-- Enlace Directo a WhatsApp -->
                            <a href="https://wa.me/{{ venta.cliente.telefono_whatsapp | replace('+', '') | replace(' ', '') }}" target="_blank" class="text-green-500 hover:text-green-700" title="Contactar por WhatsApp">
                                <i class="ph ph-whatsapp-logo text-2xl"></i>
                            </a>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="4" class="px-6 py-10 text-center text-gray-500"><p>No hay ventas activas en este momento.</p></td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- PESTAÑA: PENDIENTES -->
    <div id="tab-pendientes" class="tab-content hidden overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <tbody class="divide-y divide-gray-100">
                {% if pendientes %}
                    {% for venta in pendientes %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 font-bold">{{ venta.cliente.nombre if venta.cliente else 'Desconocido' }}</td>
                        <td class="px-6 py-4 text-amber-600 font-medium">Pendiente de Aprobación</td>
                        <td class="px-6 py-4 text-center">
                            <button class="bg-green-600 text-white px-3 py-1.5 rounded-md text-xs font-medium mr-2">Aprobar</button>
                            <button class="bg-red-100 text-red-700 px-3 py-1.5 rounded-md text-xs font-medium">Rechazar</button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="3" class="px-6 py-10 text-center text-gray-500"><p>No tienes ventas pendientes de revisión.</p></td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- PESTAÑA: VENCIDAS / RENOVACIONES -->
    <div id="tab-vencidas" class="tab-content hidden overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <tbody class="divide-y divide-gray-100">
                {% if vencidas %}
                    {% for venta in vencidas %}
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 font-bold">{{ venta.cliente.nombre if venta.cliente else 'Desconocido' }}</td>
                        <td class="px-6 py-4 text-red-600 font-medium">Servicio Caducado</td>
                        <td class="px-6 py-4 text-center">
                            <button class="bg-blue-100 text-blue-700 px-3 py-1.5 rounded-md text-xs font-medium">Renovar Ahora</button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr><td colspan="3" class="px-6 py-10 text-center text-gray-500"><p>No hay cuentas vencidas recientemente.</p></td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: Nueva Venta (Directa o Intermediación) -->
<div id="modalNuevaVenta" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-2xl overflow-hidden flex flex-col max-h-[90vh]">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <h3 class="text-lg font-bold text-gray-900">Registrar Nueva Venta</h3>
            <button onclick="toggleModal('modalNuevaVenta')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        
        <div class="p-6 overflow-y-auto">
            <form action="{{ url_for('ventas.index') }}" method="POST" id="formNuevaVenta">
                
                <!-- 1. TIPO DE VENTA (El cerebro del formulario) -->
                <div class="mb-6 bg-blue-50 p-4 rounded-lg border border-blue-100">
                    <label class="block text-sm font-semibold text-blue-900 mb-2">Modalidad de Venta</label>
                    <div class="flex flex-col sm:flex-row gap-4">
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="tipo_venta" value="stock" checked onchange="toggleModalidadVenta()" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-800">Venta desde Stock (Inventario)</span>
                        </label>
                        <label class="flex items-center cursor-pointer">
                            <input type="radio" name="tipo_venta" value="intermediacion" onchange="toggleModalidadVenta()" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500">
                            <span class="ml-2 text-sm text-gray-800">Intermediación / Pedido Directo</span>
                        </label>
                    </div>
                    <p id="textoModalidad" class="text-xs text-blue-700 mt-2">Utiliza stock existente. El sistema descontará un perfil o cuenta completa de tu inventario.</p>
                </div>

                <!-- 2. DATOS DEL CLIENTE Y PRODUCTO (Común en ambas modalidades) -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                    
                    <!-- NUEVO BUSCADOR REACTIVO DE CLIENTES -->
                    <div class="relative" id="contenedorBuscadorCliente">
                        <label class="block text-sm font-medium text-gray-700 mb-1">Buscar Cliente</label>
                        <div class="relative">
                            <i class="ph ph-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                            <input type="text" id="inputBuscarCliente" onkeyup="filtrarClientes()" autocomplete="off" placeholder="Nombre o número..." class="w-full pl-9 pr-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 text-sm">
                            <input type="hidden" name="cliente_id" id="cliente_id_hidden" required>
                        </div>
                        
                        <!-- Lista desplegable dinámica -->
                        <ul id="listaClientesSelect" class="absolute z-10 w-full bg-white border border-gray-200 mt-1 rounded-md shadow-lg max-h-48 overflow-y-auto hidden">
                            {% for cli in clientes %}
                                <li onclick="seleccionarCliente('{{ cli.id }}', '{{ cli.nombre }} ({{ cli.telefono_whatsapp }})')" class="cliente-item px-4 py-2 hover:bg-blue-50 cursor-pointer border-b border-gray-50 flex justify-between items-center">
                                    <div>
                                        <span class="font-bold text-sm text-gray-800 cli-nombre">{{ cli.nombre }}</span><br>
                                        <span class="text-xs text-gray-500 cli-numero">{{ cli.telefono_whatsapp }}</span>
                                    </div>
                                    <span class="bg-green-100 text-green-700 text-xs px-2 py-1 rounded-full font-medium">
                                        {{ cli.compras|selectattr('estado', 'equalto', 'activo')|list|length }} activos
                                    </span>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Producto / Servicio</label>
                        <select name="producto_id" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 text-sm">
                            <option value="" disabled selected>Seleccionar producto...</option>
                            {% for prod in productos %}
                                <option value="{{ prod.id }}">{{ prod.nombre }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <!-- 3A. SECCIÓN: VENTA DESDE STOCK -->
                <div id="seccion_stock" class="mb-4 pt-2 border-t border-gray-100">
                    <label class="block text-sm font-medium text-gray-700 mb-1">Perfil o Cuenta a Asignar</label>
                    <select name="perfil_id" class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-sm">
                        <option value="">-- El sistema auto-asignará el perfil libre óptimo --</option>
                        <!-- En el futuro, esto se puede llenar vía AJAX según el producto seleccionado -->
                    </select>
                    <p class="text-xs text-gray-400 mt-1">Si lo dejas en blanco, el algoritmo inteligente seleccionará el perfil o cuenta disponible.</p>
                </div>

                <!-- 3B. SECCIÓN: INTERMEDIACIÓN (Oculta por defecto) -->
                <div id="seccion_intermediacion" class="mb-4 pt-2 border-t border-gray-100 hidden bg-amber-50 p-4 rounded-lg border border-amber-100">
                    <h4 class="text-sm font-semibold text-amber-800 mb-3"><i class="ph ph-shopping-bag-open mr-1"></i> Detalles de Compra a Proveedor</h4>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-3">
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Proveedor (A quién le compraste)</label>
                            <input type="text" name="proveedor_inter" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" placeholder="Ej. Panel X, Juan...">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-700 mb-1">Costo que pagaste (S/)</label>
                            <input type="number" step="0.01" name="costo_inter" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" placeholder="0.00">
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-700 mb-1">Credenciales o Código entregado al cliente</label>
                        <input type="text" name="credenciales_inter" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm" placeholder="Correo / Pass / Link / Código...">
                    </div>
                </div>

                <!-- 4. PRECIO DE VENTA Y VENCIMIENTO -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Precio Cobrado al Cliente (S/)</label>
                        <input type="number" step="0.01" name="precio_venta" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm font-bold text-green-700" placeholder="0.00">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Fecha de Vencimiento</label>
                        <input type="date" name="fecha_vencimiento" required class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm">
                    </div>
                </div>

            </form>
        </div>
        
        <div class="px-6 py-4 border-t border-gray-100 bg-gray-50 flex justify-end gap-3">
            <button type="button" onclick="toggleModal('modalNuevaVenta')" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 rounded-md text-sm font-medium transition-colors">Cancelar</button>
            <button type="submit" form="formNuevaVenta" class="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium transition-colors shadow-sm">
                <i class="ph ph-check-circle mr-1"></i> Registrar Venta
            </button>
        </div>
    </div>
</div>

<!-- Modal: Detalles de la Venta -->
<div id="modalDetallesVenta" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
    <div class="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden">
        <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
            <h3 class="text-lg font-bold text-gray-900">Detalles de Entrega</h3>
            <button onclick="document.getElementById('modalDetallesVenta').classList.add('hidden')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        <div class="p-6">
            <div class="mb-4">
                <p class="text-xs text-gray-500 uppercase font-bold">Cliente</p>
                <p class="text-lg font-bold text-gray-900" id="det_cliente">...</p>
            </div>
            <div class="mb-4 bg-gray-50 p-3 rounded-lg border border-gray-100">
                <p class="text-xs text-gray-500 uppercase font-bold mb-1">Credenciales Asignadas</p>
                <p class="text-sm text-gray-800" id="det_correo">...</p>
                <p class="text-sm font-mono text-blue-600 font-bold" id="det_pass">...</p>
                <p class="text-sm text-gray-800 mt-2" id="det_perfil">...</p>
            </div>
            <div class="flex justify-end gap-3 mt-6">
                <button onclick="document.getElementById('modalDetallesVenta').classList.add('hidden')" class="px-4 py-2 text-gray-700 bg-white border border-gray-300 rounded-md text-sm">Cerrar</button>
                <a id="btn_whatsapp_modal" href="#" target="_blank" class="px-4 py-2 text-white bg-green-500 hover:bg-green-600 rounded-md text-sm font-medium flex items-center transition-colors">
                    <i class="ph ph-whatsapp-logo mr-1 text-lg"></i> Reenviar Acceso
                </a>
            </div>
        </div>
    </div>
</div>

<script>
    // ==========================================
    // 1. FUNCIONES GENERALES Y MODALES
    // ==========================================
    function toggleModal(modalID) {
        document.getElementById(modalID).classList.toggle('hidden');
    }

    function switchTab(tabId, element) {
        document.querySelectorAll('.tab-content').forEach(tab => tab.classList.add('hidden'));
        document.getElementById('tab-' + tabId).classList.remove('hidden');
        
        document.querySelectorAll('.tab-btn').forEach(btn => {
            btn.classList.remove('border-blue-600', 'text-blue-600', 'active-tab');
            btn.classList.add('border-transparent', 'text-gray-500');
        });
        
        element.classList.remove('border-transparent', 'text-gray-500');
        element.classList.add('border-blue-600', 'text-blue-600', 'active-tab');
    }

    function toggleModalidadVenta() {
        const modalidad = document.querySelector('input[name="tipo_venta"]:checked').value;
        const seccionStock = document.getElementById('seccion_stock');
        const seccionInter = document.getElementById('seccion_intermediacion');
        const textoModalidad = document.getElementById('textoModalidad');

        if (modalidad === 'stock') {
            seccionStock.classList.remove('hidden');
            seccionInter.classList.add('hidden');
            textoModalidad.innerText = "Utiliza stock existente. El sistema descontará un perfil o cuenta completa de tu inventario.";
            textoModalidad.className = "text-xs text-blue-700 mt-2";
        } else {
            seccionStock.classList.add('hidden');
            seccionInter.classList.remove('hidden');
            textoModalidad.innerText = "Venta bajo pedido (Dropshipping). No afecta tu stock principal pero sí registra gastos e ingresos en finanzas.";
            textoModalidad.className = "text-xs text-amber-700 mt-2";
        }
    }

    function verDetalles(cliente, telefono, producto, correo, password, perfil, pin, fechaCompra, fechaVencimiento) {
        // 1. Mostrar datos en el modal visual
        document.getElementById('det_cliente').innerText = cliente;
        document.getElementById('det_correo').innerText = "Correo: " + (correo || 'N/A');
        document.getElementById('det_pass').innerText = "Pass: " + (password || 'N/A');
        
        let perfilTexto = perfil ? `Perfil: ${perfil}` : '';
        if (pin && pin !== 'None' && pin.trim() !== '') perfilTexto += ` (PIN: ${pin})`;
        document.getElementById('det_perfil').innerText = perfilTexto;
        
        // 2. Construir la plantilla de WhatsApp
        let mensaje = `Hola ${cliente.toUpperCase()} 👋🏻\n`;
        mensaje += `🍿 Tu suscripción a ${producto.toUpperCase()} 🍿\n`;
        mensaje += `✉️ Usuario: ${correo}\n`;
        mensaje += `🔐 Contraseña: ${password}\n`;
        mensaje += `👥 Perfil: ${perfil.toUpperCase()}\n`;
        
        // Solo agregar la línea del PIN si existe
        if (pin && pin !== 'None' && pin.trim() !== '') {
            mensaje += `🔐 Pin: ${pin}\n`;
        }
        
        mensaje += `⏳ Contratado: 1 MES\n`;
        mensaje += `🗓️ Compra: ${fechaCompra}\n`;
        mensaje += `🗓️ Vencimiento: ${fechaVencimiento}\n`;
        mensaje += `🎬🍿🎬🍿🎬🍿🎬🍿🎬🍿🎬\n`;
        mensaje += `¡¡Muchas gracias por su compra!!`;

        // 3. Codificar el texto y asignarlo al botón
        let mensajeCodificado = encodeURIComponent(mensaje);
        document.getElementById('btn_whatsapp_modal').href = `https://wa.me/${telefono}?text=${mensajeCodificado}`;
        
        // 4. Mostrar el modal
        document.getElementById('modalDetallesVenta').classList.remove('hidden');
    }

    // ==========================================
    // 2. BUSCADOR DE CLIENTES Y FILTROS
    // ==========================================
    const inputBuscar = document.getElementById('inputBuscarCliente');
    const listaClientes = document.getElementById('listaClientesSelect');
    const inputHidden = document.getElementById('cliente_id_hidden');

    if(inputBuscar) {
        inputBuscar.addEventListener('focus', () => listaClientes.classList.remove('hidden'));
    }

    document.addEventListener('click', (e) => {
        const contenedor = document.getElementById('contenedorBuscadorCliente');
        if (contenedor && !contenedor.contains(e.target) && listaClientes) {
            listaClientes.classList.add('hidden');
        }
    });

    function filtrarClientes() {
        const filtro = inputBuscar.value.toLowerCase();
        const items = listaClientes.getElementsByClassName('cliente-item');
        listaClientes.classList.remove('hidden');

        for (let i = 0; i < items.length; i++) {
            const nombre = items[i].querySelector('.cli-nombre').innerText.toLowerCase();
            const numero = items[i].querySelector('.cli-numero').innerText.toLowerCase();
            items[i].style.display = (nombre.includes(filtro) || numero.includes(filtro)) ? "" : "none";
        }
    }

    function seleccionarCliente(id, textoVisual) {
        inputHidden.value = id;
        inputBuscar.value = textoVisual;
        listaClientes.classList.add('hidden');
    }

    function filtrarCategoria(categoria, botonClick) {
        document.querySelectorAll('.filtro-btn').forEach(btn => {
            btn.classList.remove('bg-blue-600', 'text-white', 'font-bold');
            btn.classList.add('bg-white', 'text-gray-600', 'font-medium');
        });
        
        botonClick.classList.remove('bg-white', 'text-gray-600', 'font-medium');
        botonClick.classList.add('bg-blue-600', 'text-white', 'font-bold');

        document.querySelectorAll('.venta-row').forEach(fila => {
            fila.style.display = (categoria === 'todas' || fila.getAttribute('data-categoria') === categoria) ? '' : 'none';
        });
    }

    // ==========================================
    // 3. INICIALIZADORES AL CARGAR LA PÁGINA
    // ==========================================
    document.addEventListener('DOMContentLoaded', function() {
        
        // A. Auto-calcular fecha de vencimiento (+1 mes) en el modal de Nueva Venta
        const inputFecha = document.querySelector('input[name="fecha_vencimiento"]');
        if(inputFecha) {
            let hoy = new Date();
            hoy.setMonth(hoy.getMonth() + 1);
            let año = hoy.getFullYear();
            let mes = String(hoy.getMonth() + 1).padStart(2, '0');
            let dia = String(hoy.getDate()).padStart(2, '0');
            inputFecha.value = `${año}-${mes}-${dia}`;
        }

        // B. Calcular etiquetas dinámicas de días restantes en la tabla
        const badges = document.querySelectorAll('.fecha-badge');
        const fechaActual = new Date();
        fechaActual.setHours(0,0,0,0);

        badges.forEach(badge => {
            const fechaString = badge.getAttribute('data-fecha');
            if(!fechaString) return;
            
            const fechaVencimiento = new Date(fechaString + 'T00:00:00');
            const diffTime = Math.ceil((fechaVencimiento - fechaActual) / (1000 * 60 * 60 * 24));
            
            if (diffTime < 0) {
                badge.innerHTML = `<span class="bg-red-100 text-red-700 px-2 py-0.5 rounded text-xs font-bold border border-red-200">Vencido hace ${Math.abs(diffTime)} días</span>`;
            } else if (diffTime === 0) {
                badge.innerHTML = `<span class="bg-red-500 text-white px-2 py-0.5 rounded text-xs font-bold shadow-sm">Vence HOY</span>`;
            } else if (diffTime <= 3) {
                badge.innerHTML = `<span class="bg-amber-100 text-amber-700 px-2 py-0.5 rounded text-xs font-bold border border-amber-200">Vence en ${diffTime} día(s)</span>`;
            } else {
                badge.innerHTML = `<span class="bg-green-100 text-green-700 px-2 py-0.5 rounded text-xs font-bold border border-green-200">En ${diffTime} días</span>`;
            }
        });
    });
</script>

{% endblock %}