{% extends "base.html" %}

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

{% block content %}
<div id="admin-content" class="container-fluid">
    <div class="row">
        <div class="col-12 mb-4 admin-header">
            <h1>Gestión de Leads</h1>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-12">
            <p class="mb-0">Administre los leads de facturas creados por los clientes y supervise su estado.</p>
        </div>
    </div>
    <form id="deleteLeadsForm" method="post" action="{{ url_for('admin.delete_leads') }}" onsubmit="return confirm('¿Seguro que quieres eliminar los leads seleccionados o todos?');">
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-3 gap-2">
        <div class="btn-group btn-group-sm d-flex">
            <a class="btn btn-secondary{% if not status %} active{% endif %}" href="{{ url_for('admin.list_leads', sort=sort_order, per_page=per_page) }}">Todos</a>
            <a class="btn btn-secondary{% if status=='pending' %} active{% endif %}" href="{{ url_for('admin.list_leads', status='pending', sort=sort_order, per_page=per_page) }}">Pendientes</a>
            <a class="btn btn-secondary{% if status=='completed' %} active{% endif %}" href="{{ url_for('admin.list_leads', status='completed', sort=sort_order, per_page=per_page) }}">Completados</a>
        </div>
        {% if not is_comercial %}
            <button class="btn btn-sm btn-danger" type="submit"><i class="fas fa-trash me-1"></i> Eliminar Seleccionados</button>
        {% endif %}
    </div>
    
    <!-- Filtros adicionales -->
    <div class="row mb-3">
        <div class="col-12 col-md-8">
            <div class="d-flex flex-column flex-sm-row gap-2 mb-2 mb-sm-0">
                <div class="d-flex align-items-center">
                    <span class="me-2 text-nowrap">Ordenar:</span>
                    <div class="btn-group btn-group-sm flex-grow-1">
                        <a href="{{ url_for('admin.list_leads', status=status, sort='desc', per_page=per_page) }}" class="btn btn-outline-secondary {% if sort_order == 'desc' %}active{% endif %}">
                            <i class="fas fa-sort-amount-down me-1"></i><span class="d-none d-sm-inline">Más</span> reciente
                        </a>
                        <a href="{{ url_for('admin.list_leads', status=status, sort='asc', per_page=per_page) }}" class="btn btn-outline-secondary {% if sort_order == 'asc' %}active{% endif %}">
                            <i class="fas fa-sort-amount-up me-1"></i><span class="d-none d-sm-inline">Más</span> antiguo
                        </a>
                    </div>
                </div>
                
                <div class="d-flex align-items-center">
                    <span class="me-2">Mostrar:</span>
                    <div class="btn-group btn-group-sm">
                        <a href="{{ url_for('admin.list_leads', status=status, sort=sort_order, per_page=50) }}" class="btn btn-outline-secondary {% if per_page == 50 %}active{% endif %}">
                            50
                        </a>
                        <a href="{{ url_for('admin.list_leads', status=status, sort=sort_order, per_page=100) }}" class="btn btn-outline-secondary {% if per_page == 100 %}active{% endif %}">
                            100
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-12 col-md-4 text-md-end">
            <span class="text-muted small">Mostrando {{ leads|length }} de {{ pagination.total }} leads</span>
        </div>
    </div>
    <div class="table-responsive mt-4">
        <table class="table table-striped table-sm align-middle w-100">
            <thead>
                <tr>
                    {% if not is_comercial %}
                    <th class="align-middle"><input type="checkbox" id="selectAll" title="Seleccionar todos los leads"></th>
                    {% else %}
                    <th class="align-middle">ID</th>
                    {% endif %}
                    <th class="align-middle">ID</th>
                    <th class="align-middle">Fecha</th>
                    <th class="align-middle">Nombre</th>
                    <th class="d-none d-md-table-cell">Email</th>
                    <th class="d-none d-md-table-cell">Teléfono</th>
                    <th class="d-none d-lg-table-cell">CUPS</th>
                    <th class="align-middle">Estado</th>
                    <th class="align-middle">Comentario</th>
                    <th class="d-none d-lg-table-cell">Tarifa</th>
                    <th class="d-none d-md-table-cell">Archivo</th>
                    <th class="align-middle">Ahorro</th>
                    <th class="d-none d-sm-table-cell">Plan</th>
                    <th class="d-none d-sm-table-cell">Comercializadora</th>
                </tr>
            </thead>
            <tbody>
                {% for lead in leads %}
                <tr>
                    {% if not is_comercial %}
                    <td><input type="checkbox" name="lead_ids" value="{{ lead.id }}" title="Seleccionar lead {{ lead.id }}"></td>
                    {% else %}
                    <td>{{ lead.id }}</td>
                    {% endif %}
                    <td>{{ lead.id }}</td>
                    <td>{{ lead.submitted_at.strftime('%d/%m/%Y') if lead.submitted_at else '' }}
                        <div class="d-block d-sm-none small text-muted">{{ lead.submitted_at.strftime('%H:%M') if lead.submitted_at else '' }}</div>
                    </td>
                    <td>{{ lead.name or '' }}</td>
                    <td class="d-none d-md-table-cell">{{ lead.email or '' }}</td>
                    <td class="d-none d-md-table-cell">{{ lead.phone or '' }}</td>
                    <td class="d-none d-lg-table-cell">{{ lead.cups or '' }}</td>
                    <td>
                        {% if lead.status == 'pending' %}
                        <span class="badge bg-warning text-dark">Pendiente</span>
                        {% elif lead.status == 'completed' %}
                        <span class="badge bg-success">Completado</span>
                        {% else %}
                        <span class="badge bg-secondary">{{ lead.status }}</span>
                        {% endif %}
                    </td>
                    <td class="message-cell d-none d-lg-table-cell">
                        {% if lead.message %}
                            <div class="message-container" title="Click para ver mensaje completo">
                                <i class="fas fa-eye message-view-icon" aria-hidden="true"></i>
                                <span
                                    class="text-truncate d-inline-block cursor-pointer" 
                                    data-message="{{ lead.message }}"
                                >
                                    {{ lead.message }}
                                </span>
                            </div>
                        {% endif %}
                    </td>
                    <td class="d-none d-lg-table-cell">{{ lead.tariff_type or '' }}</td>
                    <td id="file-field" class="d-none d-md-table-cell">
                        {% if lead.file_path %}
                            <a href="{{ url_for('admin.get_lead_file', lead_id=lead.id) }}" target="_blank" class="btn btn-outline-primary btn-sm" title="Descargar archivo del lead {{ lead.id }}"><i class="fas fa-file-download"></i></a>
                        {% endif %}
                    </td>
                    <td id="leads-quantity">
                        {% if lead.details and lead.details.get('estimated_savings') %}
                            {{ lead.details.get('estimated_savings')|round(2) }} <span>€</span>
                            <div class="d-sm-none small text-muted">{{ lead.details.get('best_rate_name', '') }}</div>
                        {% endif %}
                    </td>
                    <td class="d-none d-sm-table-cell">{{ lead.details.get('best_rate_name') if lead.details else '' }}</td>
                    <td class="d-none d-sm-table-cell">{{ lead.details.get('best_rate_supplier') if lead.details else '' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if not leads %}
        <p class="text-muted">No se encontraron leads.</p>
        {% endif %}
    </div>
    
    <!-- Controles de paginación -->
    <nav aria-label="Page navigation">
        <ul class="pagination justify-content-center"><li class="page-item {% if not pagination.has_prev %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for('admin.list_leads', page=pagination.prev_num, per_page=per_page, status=status, sort=sort_order) }}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </li>
            {% for p in pagination.iter_pages() %}
                {% if p %}
                    <li class="page-item {% if p == pagination.page %}active{% endif %}">
                        <a class="page-link" href="{{ url_for('admin.list_leads', page=p, per_page=per_page, status=status, sort=sort_order) }}">{{ p }}</a>
                    </li>
                {% else %}
                    <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                {% endif %}
            {% endfor %}
            <li class="page-item {% if not pagination.has_next %}disabled{% endif %}">
                <a class="page-link" href="{{ url_for('admin.list_leads', page=pagination.next_num, per_page=per_page, status=status, sort=sort_order) }}" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </li>
        </ul>
    </nav>

    <!-- Modal 100% personalizado para mostrar el mensaje completo -->
    <div id="customMessageModal" class="custom-modal">
        <!-- Overlay de fondo oscuro -->
        <div class="custom-modal-overlay"></div>
        
        <!-- Contenedor del modal centrado -->
        <div class="custom-modal-container">
            <!-- Contenido del modal -->
            <div class="custom-modal-content">
                <!-- Encabezado del modal con título y botón de cierre -->
                <div class="custom-modal-header">
                    <h5 class="custom-modal-title">Mensaje Completo</h5>
                    <button type="button" class="custom-modal-close" id="modalCloseButton">&times;</button>
                </div>
                
                <!-- Cuerpo del modal con el contenido del mensaje -->
                <div class="custom-modal-body">
                    <div id="modalMessageText"></div>
                </div>
                
                <!-- Pie del modal con botón de cerrar -->
                <div class="custom-modal-footer">
                    <button type="button" class="custom-modal-btn" id="modalCloseBtn">Cerrar</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Estilos personalizados para el modal y los mensajes -->
    <style>
        /* Estilos para el contenedor de mensajes con ícono */
        .message-container {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: 4px;
            transition: background-color 0.2s;
        }
        
        .message-container:hover {
            background-color: rgba(198, 8, 213, 0.1); /* #c608d5 con opacidad para tono tenue */
        }
        
        .message-view-icon {
            color: #6c757d;
            font-size: 0.875rem;
            min-width: 16px;
            transition: color 0.2s;
        }
        
        .message-container:hover .message-view-icon {
            color: #c608d5; /* Cambio color del icono al mismo púrpura */
        }
        
        .message-container span {
            max-width: 130px;
        }
        
        /* Estilo base del modal para cubrir toda la pantalla */
        .custom-modal {
            display: none; /* Oculto por defecto */
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            z-index: 9999;
        }
        
        /* Overlay de fondo oscuro que cubre toda la pantalla */
        .custom-modal-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.6);
            -webkit-backdrop-filter: blur(3px); /* Compatibilidad con Safari */
            backdrop-filter: blur(3px);
        }
        
        /* Contenedor que centra el modal vertical y horizontalmente */
        .custom-modal-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
        }
        
        /* El contenido real del modal con fondo blanco */
        .custom-modal-content {
            background-color: #ffffff;
            width: 100%;
            max-width: 500px;
            border-radius: 8px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
            margin: auto;
            animation: modalFadeIn 0.3s ease-out;
            position: relative;
            max-height: 80vh;
            display: flex;
            flex-direction: column;
        }
        
        /* Encabezado del modal con título */
        .custom-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #e9ecef;
        }
        
        .custom-modal-title {
            margin: 0;
            font-size: 1.25rem;
            font-weight: 600;
            color: #333;
        }
        
        /* Botón de cierre (X) */
        .custom-modal-close {
            background: transparent;
            border: none;
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            color: #888;
            cursor: pointer;
            padding: 0;
            margin: 0;
        }
        
        .custom-modal-close:hover {
            color: #333;
        }
        
        /* Cuerpo del modal donde va el mensaje */
        .custom-modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
        }
        
        #modalMessageText {
            white-space: pre-wrap;
            word-break: break-word;
            line-height: 1.5;
        }
        
        /* Pie del modal con botones */
        .custom-modal-footer {
            padding: 15px 20px;
            border-top: 1px solid #e9ecef;
            text-align: right;
        }
        
        /* Botón personalizado */
        .custom-modal-btn {
            background-color: #6c757d;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-weight: 500;
        }
        
        .custom-modal-btn:hover {
            background-color: #5a6268;
        }
        
        /* Animación de entrada del modal */
        @keyframes modalFadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        /* Asegurar que el modal se vea bien en pantallas pequeñas */
        @media (max-width: 576px) {
            .custom-modal-content {
                max-width: 95%;
                margin: 10px;
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Funcionalidad para el checkbox de seleccionar todos
            const selectAll = document.getElementById('selectAll');
            if (selectAll) {
                selectAll.addEventListener('change', function() {
                    const checkboxes = document.querySelectorAll('input[name="lead_ids"]');
                    checkboxes.forEach(cb => cb.checked = this.checked);
                });
            }

            // Funcionalidad para el modal personalizado
            const modal = document.getElementById('customMessageModal');
            const modalMessageText = document.getElementById('modalMessageText');
            const closeButton = document.getElementById('modalCloseButton');
            const closeFooterButton = document.getElementById('modalCloseBtn');
            const modalOverlay = document.querySelector('.custom-modal-overlay');

            // Función para abrir el modal con un mensaje
            function openModal(message) {
                modalMessageText.textContent = message;
                modal.style.display = 'block';
                document.body.style.overflow = 'hidden'; // Evita el scroll del body
            }

            // Función para cerrar el modal
            function closeModal() {
                modal.style.display = 'none';
                document.body.style.overflow = ''; // Restaura el scroll del body
            }

            // Asignar evento click a todos los contenedores de mensajes
            document.querySelectorAll('.message-container').forEach(container => {
                container.addEventListener('click', function() {
                    const message = this.querySelector('span').getAttribute('data-message');
                    openModal(message);
                });
            });

            // Eventos para cerrar el modal
            if (closeButton) closeButton.addEventListener('click', closeModal);
            if (closeFooterButton) closeFooterButton.addEventListener('click', closeModal);
            if (modalOverlay) modalOverlay.addEventListener('click', closeModal);

            // Cerrar modal con la tecla ESC
            document.addEventListener('keydown', function(event) {
                if (event.key === 'Escape' && modal.style.display === 'block') {
                    closeModal();
                }
            });
        });
    </script>
    </form>
</div> <!-- Fin del contenedor admin-content -->
{% endblock %}