TenerifeProp/public/admin/leads.html

<!-- Leads Section -->
<div class="section" id="section-leads">
    <div class="page-header">
        <div>
            <h1 class="page-title">Leads</h1>
            <p class="page-subtitle">Gestión de contactos y solicitudes</p>
        </div>
        <div class="d-flex gap-2">
            <button class="btn btn-outline-secondary" onclick="exportLeads()">
                <i class="bi bi-download me-2"></i>Exportar
            </button>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label">Buscar</label>
                    <input type="text" class="form-control" id="searchLead" placeholder="Nombre o email...">
                </div>
                <div class="col-md-2">
                    <label class="form-label">Estado</label>
                    <select class="form-select" id="leadStatus">
                        <option value="">Todos</option>
                        <option value="new">Nuevo</option>
                        <option value="contacted">Contactado</option>
                        <option value="qualified">Calificado</option>
                        <option value="closed">Cerrado</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Propiedad</label>
                    <select class="form-select" id="leadProperty">
                        <option value="">Todas</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label class="form-label">Desde</label>
                    <input type="date" class="form-control" id="leadFromDate">
                </div>
                <div class="col-md-3">
                    <button class="btn btn-primary w-100" onclick="loadLeads()">
                        <i class="bi bi-funnel me-2"></i>Filtrar
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- Stats -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body text-center">
                    <h3 class="text-primary" id="leadsNew">0</h3>
                    <small class="text-muted">Nuevos</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body text-center">
                    <h3 class="text-info" id="leadsContacted">0</h3>
                    <small class="text-muted">Contactados</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body text-center">
                    <h3 class="text-warning" id="leadsQualified">0</h3>
                    <small class="text-muted">Calificados</small>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card stat-card">
                <div class="card-body text-center">
                    <h3 class="text-success" id="leadsClosed">0</h3>
                    <small class="text-muted">Cerrados</small>
                </div>
            </div>
        </div>
    </div>

    <!-- Table -->
    <div class="card">
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-hover" id="leadsTable">
                    <thead>
                        <tr>
                            <th>Nombre</th>
                            <th>Email</th>
                            <th>Teléfono</th>
                            <th>Propiedad</th>
                            <th>Mensaje</th>
                            <th>Estado</th>
                            <th>Fecha</th>
                            <th>Acciones</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<script>
async function loadLeads() {
    try {
        const res = await API.getLeads();
        const leads = res.data || [];
        
        // Update stats
        document.getElementById('leadsNew').textContent = leads.filter(l => l.status === 'new').length;
        document.getElementById('leadsContacted').textContent = leads.filter(l => l.status === 'contacted').length;
        document.getElementById('leadsQualified').textContent = leads.filter(l => l.status === 'qualified').length;
        document.getElementById('leadsClosed').textContent = leads.filter(l => l.status === 'closed').length;
        
        renderLeads(leads);
    } catch (e) {
        console.error('Failed to load leads:', e);
    }
}

function renderLeads(leads) {
    const tbody = document.querySelector('#leadsTable tbody');
    if (leads.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" class="text-center py-4">No hay leads</td></tr>';
        return;
    }
    
    tbody.innerHTML = leads.map(l => `
        <tr>
            <td><strong>${l.name}</strong></td>
            <td><a href="mailto:${l.email}">${l.email}</a></td>
            <td>${l.phone || '-'}</td>
            <td>${l.property_id || 'General'}</td>
            <td>${l.message ? l.message.substring(0, 50) + '...' : '-'}</td>
            <td><span class="badge bg-${l.status === 'new' ? 'danger' : 'secondary'}">${l.status}</span></td>
            <td>${new Date(l.created_at).toLocaleDateString()}</td>
            <td>
                <div class="btn-group">
                    <button class="btn btn-sm btn-outline-primary" onclick="updateLeadStatus('${l.id}', 'contacted')">
                        <i class="bi bi-telephone"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-success" onclick="updateLeadStatus('${l.id}', 'qualified')">
                        <i class="bi bi-check-circle"></i>
                    </button>
                    <button class="btn btn-sm btn-outline-danger" onclick="deleteLead('${l.id}')">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </td>
        </tr>
    `).join('');
}

async function updateLeadStatus(id, status) {
    try {
        await API.updateLead(id, { status });
        await loadLeads();
    } catch (e) {
        alert('Error al actualizar lead');
    }
}

async function deleteLead(id) {
    if (!confirm('¿Eliminar este lead?')) return;
    try {
        await API.deleteLead(id);
        await loadLeads();
    } catch (e) {
        alert('Error al eliminar lead');
    }
}

function exportLeads() {
    console.log('Export leads');
}
</script>