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

{% block title %}Directorio de Clientes{% 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">Directorio de Clientes</h1>
        <p class="text-gray-500">Gestiona la base de contactos de {{ vendedor.nombre_negocio }} para WhatsApp.</p>
    </div>
    <button onclick="toggleModal('modalNuevoCliente')" 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-user-plus mr-2 text-lg"></i> Registrar Cliente
    </button>
</div>

<!-- NUEVO: Navegación por Pestañas Inteligentes (Tabs) -->
<div class="bg-white rounded-t-xl shadow-sm border border-gray-100 border-b-0 px-2 pt-2 mb-0">
    <nav class="flex space-x-4 border-b border-gray-200" aria-label="Tabs">
        <button onclick="filtrarClientesTab('todos', 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">
            Todos
        </button>
        <button onclick="filtrarClientesTab('activos', 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">
            Con Servicio Activo
        </button>
        <button onclick="filtrarClientesTab('seguimiento', 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">
            En Seguimiento / Nuevos
        </button>
        <button onclick="filtrarClientesTab('vencidos', 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">
            Vencidos / No Renovaron
        </button>
    </nav>
</div>

<!-- Tabla de Clientes -->
<div class="bg-white rounded-b-xl shadow-sm border border-gray-100 overflow-hidden mb-8">
    <div class="px-6 py-4 border-b border-gray-100 bg-gray-50 flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800">Cartera de Clientes</h2>
        <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="inputBuscarClienteDir" onkeyup="buscarClienteEnTabla()" placeholder="Buscar cliente..." class="pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
        </div>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse" id="tablaDirectorioClientes">
            <thead>
                <tr class="bg-white border-b border-gray-100 text-xs text-gray-500 uppercase tracking-wider">
                    <th class="px-6 py-4 font-semibold">ID</th>
                    <th class="px-6 py-4 font-semibold">Nombre / Alias</th>
                    <th class="px-6 py-4 font-semibold">WhatsApp</th>
                    <th class="px-6 py-4 font-semibold text-center">Acciones</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% if clientes %}
                    {% for cli in clientes %}
                    
                    <!-- LÓGICA DE ESTADO INTELIGENTE -->
                    {% set total_compras = cli.compras|length %}
                    {% set tiene_activo = cli.compras|selectattr('estado', 'equalto', 'activo')|list|length > 0 %}
                    {% set tiene_pendiente = cli.compras|selectattr('estado', 'equalto', 'pendiente')|list|length > 0 %}
                    {% set clase_estado = 'activos' if tiene_activo else ('seguimiento' if tiene_pendiente or total_compras == 0 else 'vencidos') %}
                    
                    <!-- Inyectamos la clase y el data-estado para el JS -->
                    <tr class="hover:bg-gray-50 transition-colors cliente-row" data-estado="{{ clase_estado }}">
                        <td class="px-6 py-4 font-medium text-gray-500">#{{ cli.id }}</td>
                        <td class="px-6 py-4 font-bold text-gray-900 flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center font-bold text-sm">
                                {{ cli.nombre[0]|upper }}
                            </div>
                            <span class="nombre-cli-texto">{{ cli.nombre }}</span>
                        </td>
                        <td class="px-6 py-4 text-gray-600 font-mono">
                            <a href="https://wa.me/{{ cli.telefono_whatsapp | replace('+', '') | replace(' ', '') }}" target="_blank" class="text-green-600 hover:text-green-700 flex items-center gap-1">
                                <i class="ph ph-whatsapp-logo text-lg"></i> <span class="numero-cli-texto">{{ cli.telefono_whatsapp }}</span>
                            </a>
                        </td>
                        <td class="px-6 py-4 text-center">
                            <button class="text-blue-500 hover:text-blue-700 mr-2" title="Editar"><i class="ph ph-pencil-simple text-lg"></i></button>
                            <button class="text-gray-400 hover:text-blue-600" title="Ver Historial de Compras"><i class="ph ph-shopping-bag text-lg"></i></button>
                        </td>
                    </tr>
                    {% endfor %}
                {% else %}
                    <tr>
                        <td colspan="4" class="px-6 py-10 text-center text-gray-500">
                            <i class="ph ph-users text-4xl mb-2 text-gray-300"></i>
                            <p>No tienes clientes registrados todavía.</p>
                        </td>
                    </tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- Modal: Nuevo Cliente -->
<div id="modalNuevoCliente" 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">Nuevo Cliente</h3>
            <button onclick="toggleModal('modalNuevoCliente')" class="text-gray-400 hover:text-gray-600"><i class="ph ph-x text-xl"></i></button>
        </div>
        <form action="{{ url_for('clientes.index') }}" method="POST" class="p-6">
            <div class="mb-4">
                <label class="block text-sm font-medium text-gray-700 mb-1">Nombre o Alias</label>
                <input type="text" name="nombre" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="Ej. Juan Pérez">
            </div>
            <div class="mb-6">
                <label class="block text-sm font-medium text-gray-700 mb-1">Número de WhatsApp</label>
                <input type="text" name="telefono_whatsapp" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 text-sm" placeholder="Ej. +51999888777">
                <p class="text-xs text-gray-500 mt-1">Incluye el código de país (ej. +51 para Perú) para que el bot pueda enviarle mensajes.</p>
            </div>
            <div class="flex justify-end gap-3 border-t border-gray-100 pt-4">
                <button type="button" onclick="toggleModal('modalNuevoCliente')" 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" class="px-6 py-2 text-white bg-blue-600 hover:bg-blue-700 rounded-md text-sm font-medium shadow-sm transition-colors">Guardar Cliente</button>
            </div>
        </form>
    </div>
</div>

<script>
    function toggleModal(modalID) {
        document.getElementById(modalID).classList.toggle('hidden');
    }

    // 1. Filtrado por Pestañas (Estados)
    function filtrarClientesTab(estado, boton) {
        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');
        });
        boton.classList.remove('border-transparent', 'text-gray-500');
        boton.classList.add('border-blue-600', 'text-blue-600', 'active-tab');

        document.querySelectorAll('.cliente-row').forEach(fila => {
            fila.style.display = (estado === 'todos' || fila.getAttribute('data-estado') === estado) ? '' : 'none';
        });
    }

    // 2. Buscador en tiempo real
    function buscarClienteEnTabla() {
        const input = document.getElementById("inputBuscarClienteDir").value.toLowerCase();
        const filas = document.querySelectorAll('.cliente-row');
        
        filas.forEach(fila => {
            const nombre = fila.querySelector('.nombre-cli-texto').innerText.toLowerCase();
            const numero = fila.querySelector('.numero-cli-texto').innerText.toLowerCase();
            
            // Si el nombre o el número coinciden, se muestra. Ojo: Respeta la pestaña activa.
            if (nombre.includes(input) || numero.includes(input)) {
                // Verificamos si la fila debe estar visible según la pestaña activa
                const pestañaActiva = document.querySelector('.active-tab').innerText.toLowerCase();
                const estadoFila = fila.getAttribute('data-estado');
                
                if (pestañaActiva.includes('todos') || 
                   (pestañaActiva.includes('activo') && estadoFila === 'activos') ||
                   (pestañaActiva.includes('seguimiento') && estadoFila === 'seguimiento') ||
                   (pestañaActiva.includes('vencidos') && estadoFila === 'vencidos')) {
                    fila.style.display = "";
                }
            } else {
                fila.style.display = "none";
            }
        });
    }
</script>
{% endblock %}