{% extends "base.html" %}

{% block title %}Editar Lead{% endblock %}

{% block content %}
<div id="admin-content" class="container-fluid">
    <div class="row">
        <div class="col-12 mb-4 admin-header">
            <h1>Editar Lead #{{ lead.id }}</h1>
        </div>
    </div>
    
    <div class="row">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0"><i class="fas fa-edit me-2"></i>Información del Lead</h5>
                </div>
                <div class="card-body">
                    <form id="editLeadForm">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="name" class="form-label">Nombre *</label>
                                    <input type="text" class="form-control" id="name" name="name" value="{{ lead.name or '' }}" required>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="email" class="form-label">Email *</label>
                                    <input type="email" class="form-control" id="email" name="email" value="{{ lead.email or '' }}" required>
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="phone" class="form-label">Teléfono</label>
                                    <input type="text" class="form-control" id="phone" name="phone" value="{{ lead.phone or '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="cups" class="form-label">CUPS</label>
                                    <input type="text" class="form-control" id="cups" name="cups" value="{{ lead.cups or '' }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="status" class="form-label">Estado</label>
                                    <select class="form-select" id="status" name="status">
                                        <option value="pending" {% if lead.status == 'pending' %}selected{% endif %}>Pendiente</option>
                                        <option value="in_progress" {% if lead.status == 'in_progress' %}selected{% endif %}>En progreso</option>
                                        <option value="contacted" {% if lead.status == 'contacted' %}selected{% endif %}>Contactado</option>
                                        <option value="completed" {% if lead.status == 'completed' %}selected{% endif %}>Completado</option>
                                        <option value="closed" {% if lead.status == 'closed' %}selected{% endif %}>Cerrado</option>
                                        <option value="cancelled" {% if lead.status == 'cancelled' %}selected{% endif %}>Cancelado</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        
                        <div class="mb-3">
                            <label for="message" class="form-label">Mensaje del cliente</label>
                            <textarea class="form-control" id="message" name="message" rows="3">{{ lead.message or '' }}</textarea>
                        </div>
                        
                        <hr>
                        
                        <h6><i class="fas fa-user-tie me-2"></i>Información Comercial</h6>
                        
                        <div class="mb-3">
                            <label for="commercial_comments" class="form-label">Comentarios del Comercial</label>
                            <textarea class="form-control" id="commercial_comments" name="commercial_comments" rows="3">{{ lead.commercial_comments or '' }}</textarea>
                        </div>
                        
                        <div class="row">
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="selected_plan" class="form-label">Plan Seleccionado</label>
                                    <input type="text" class="form-control" id="selected_plan" name="selected_plan" value="{{ lead.selected_plan or '' }}">
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="mb-3">
                                    <label for="recommended_supplier" class="form-label">Comercializadora Recomendada</label>
                                    <input type="text" class="form-control" id="recommended_supplier" name="recommended_supplier" value="{{ lead.recommended_supplier or '' }}">
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between">
                            <a href="{{ url_for('admin.list_leads') }}" class="btn btn-secondary">
                                <i class="fas fa-arrow-left me-1"></i> Volver
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save me-1"></i> Guardar Cambios
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h6 class="mb-0"><i class="fas fa-history me-2"></i>Histórico de Estudios</h6>
                </div>
                <div class="card-body">
                    <div id="historyContainer">
                        <p class="text-muted">Cargando histórico...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('editLeadForm');
    const leadId = "{{ lead.id }}";
    
    // Cargar histórico
    loadHistory();
    
    // Manejar envío del formulario
    form.addEventListener('submit', function(e) {
        e.preventDefault();
        
        const formData = new FormData(form);
        const data = Object.fromEntries(formData.entries());
        
        fetch(`{{ url_for('admin.edit_lead', lead_id=lead.id) }}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert('Lead actualizado correctamente');
                window.location.href = "{{ url_for('admin.list_leads') }}";
            } else {
                alert('Error: ' + data.message);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert('Error al actualizar el lead');
        });
    });
    
    function loadHistory() {
        fetch(`{{ url_for('admin.get_lead_history', lead_id=lead.id) }}`)
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    displayHistory(data.history);
                } else {
                    document.getElementById('historyContainer').innerHTML = 
                        '<p class="text-muted">Error al cargar histórico</p>';
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('historyContainer').innerHTML = 
                    '<p class="text-muted">Error al cargar histórico</p>';
            });
    }
    
    function displayHistory(history) {
        const container = document.getElementById('historyContainer');
        
        if (!history || history.length === 0) {
            container.innerHTML = '<p class="text-muted">No hay estudios previos</p>';
            return;
        }
        
        let html = '';
        history.forEach((study, index) => {
            const date = new Date(study.timestamp).toLocaleDateString('es-ES');
            html += `
                <div class="border-bottom pb-2 mb-2">
                    <small class="text-muted">${date} - ${study.created_by}</small>
                    <div class="mt-1">
                        <strong>Plan:</strong> ${study.selected_plan || 'No especificado'}<br>
                        <strong>Comercializadora:</strong> ${study.recommended_supplier || 'No especificada'}<br>
                        ${study.comments ? `<strong>Comentarios:</strong> ${study.comments}` : ''}
                    </div>
                </div>
            `;
        });
        
        container.innerHTML = html;
    }
});
</script>
{% endblock %}