{% extends "base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block content %}
<div class="section">
    <div class="container">
        {% with messages = get_flashed_messages(with_categories=true) %}
          {% if messages %}
            <div class="row">
              <div class="col-md-12">
                {% for category, message in messages %}
                  <div class="alert alert-{{ category if category else 'warning' }} alert-dismissible fade show" role="alert">
                    <span>{{ message }}</span>
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                  </div>
                {% endfor %}
              </div>
            </div>
          {% endif %}
        {% endwith %}
        <div class="page-header">
            <h1 class="title">Solicita tu estudio gratuito de facturas</h1>
            <p class="subtitle">Descubre cuánto puedes ahorrar en tus facturas eléctricas</p>
        </div>
        
        <div class="form-container">
            <form method="POST" action="{{ url_for('commercial_invoice.estudio_gratuito') }}" enctype="multipart/form-data">
                {{ form.hidden_tag() }}
                
                <div class="form-section">
                    <h2>Información de contacto</h2>
                    
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.name.label }}
                            {{ form.name(class="form-control") }}
                            {% for error in form.name.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="form-group">
                            {{ form.surname.label }}
                            {{ form.surname(class="form-control") }}
                            {% for error in form.surname.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="form-row">
                        <div class="form-group">
                            {{ form.email.label }}
                            {{ form.email(class="form-control") }}
                            {% for error in form.email.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="form-group">
                            {{ form.phone.label }}
                            {{ form.phone(class="form-control") }}
                            {% for error in form.phone.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                            <small class="text-muted">Introduce un número español sin +34 (9 dígitos)</small>
                        </div>
                    </div>

                    <div class="form-row">
                        <div class="form-group">
                            {{ form.study_objective.label }}
                            {{ form.study_objective(class="form-select") }}
                            {% for error in form.study_objective.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                    </div>
                </div>
                
                <div class="form-section">
                    <h2>Datos de la factura</h2>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group upload-group">
                                {{ form.invoice_file.label }}
                                {{ form.invoice_file(class="form-control-file") }}
                                {% for error in form.invoice_file.errors %}
                                <span class="error-message">{{ error }}</span>
                                {% endfor %}
                                <small class="text-muted">Adjunta una factura reciente en formato PDF (máx. 10 MB)</small>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <div class="form-group upload-group">
                                {{ form.invoice_photo.label }}
                                {{ form.invoice_photo(class="form-control-file") }}
                                {% for error in form.invoice_photo.errors %}
                                <span class="error-message">{{ error }}</span>
                                {% endfor %}
                                <small class="text-muted">Si prefieres, puedes subir una foto de tu factura (máx. 10 MB)</small>
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        {{ form.message.label }}
                        {{ form.message(class="form-control", rows=3) }}
                        {% for error in form.message.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                </div>
                
                <div class="form-section">
                    <!-- Información del tratamiento de datos -->
                    <div class="gdpr-info-box" style="margin-bottom: 20px; padding: 15px; background-color: #f9f9f9; border-radius: 5px; font-size: 10px;">
                        <h4 style="margin-top: 0; font-size: 16px; font-weight: bold;">Información del tratamiento de datos</h4>
                        <p style="margin-bottom: 10px;">
                            EI responsable del tratamiento de los datos facilitados
                            es Catatumbo Solutions S.L. La finalidad del
                            tratamiento es atender a tu solicitud de información y en
                            caso de que autorices enviarte información sobre
                            nuestros productos y/o servicios. La base legal del
                            tratamiento es el interés legítimo en atender a tu
                            solicitud y en su caso el consentimiento facilitado para
                            el envío de comunicaciones comerciales. Podrás
                            ejercer los derechos de acceso: rectificación, limitación,
                            oposición, portabilidad, o retirar el consentimiento
                            enviando un email a dpd@catatumbosolutions.es.
                            También puedes presentar una reclamación ante la
                            Autoridad de Control (AEPD). Puedes consultar
                            información adicional y detallada sobre protección de
                            datos en nuestra <a href="{{ url_for('public.privacy_policy') }}" target="_blank">política de privacidad</a>.
                        </p>
                    </div>

                    <div class="form-check">
                        {{ form.rgpd_consent(class="form-check-input", required=True) }}
                        <label class="form-check-label" for="{{ form.rgpd_consent.id }}">
                            Acepto la <a href="{{ url_for('public.privacy_policy') }}" target="_blank">política de privacidad</a> y el <a href="{{ url_for('public.privacy_policy') }}#data-treatment" target="_blank">tratamiento de mis datos</a>
                        </label>
                        {% for error in form.rgpd_consent.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                        <div class="invalid-feedback">
                            Debes aceptar la política de privacidad y el tratamiento de datos para continuar
                        </div>
                    </div>
                    
                    <div class="form-actions">
                        {{ form.submit(class="btn btn-primary", id="submitBtn") }}
                        <span id="loadingSpinner" class="spinner-border spinner-border-sm ms-2" role="status" aria-hidden="true" style="display: none;"></span>
                    </div>
                </div>
            </form>
        </div>
        
        <div class="info-panel">
            <h3>¿Por qué solicitar un estudio gratuito?</h3>
            <ul>
                <li>Primera análisis completo de tu factura, realizado por nuestra IA</li>
                <li>Nuestra IA analiza optimizaciones dentro del estudio de ahorro</li>
                <li>Verificacion del análisis de tu factura eléctrica por nuestros expertos</li>
                <li>Atencion personalizada por un gestor energetico con experiencia en nuestro metaverso</li>
                <li>Recomendaciones adaptadas a tu consumo real</li>
                <li>Sin compromisos ni letra pequeña</li>
                <li>Totalmente gratuito</li>
            </ul>
            <p class="highlight">Nuestros clientes ahorran hasta un 60% en su factura mensual y un promedio del 30% en su factura mensual</p>
        </div>
    </div>
</div>

<!-- El footer ha sido centralizado en base.html -->

<!-- Modal de carga con barra de progreso e información -->
<div class="modal fade" id="loadingModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="loadingModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="loadingModalLabel">Procesando factura comercial</h5>
            </div>
            <div class="modal-body">
                <div class="text-center mb-4">
                    <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                        <span class="visually-hidden">Cargando...</span>
                    </div>
                    <h5 class="mt-3" id="processingStepText">Analizando factura comercial...</h5>
                </div>
                
                <div class="progress mb-4" style="height: 20px; position: relative;">
                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
                    <div class="progress-percentage">0%</div>
                </div>
                
                <div class="info-card-container">
                    <div class="card single-info-card">
                        <div class="card-body d-flex align-items-center">
                            <div class="info-icon-container me-3">
                                <i id="infoIcon" class="fas fa-building"></i>
                            </div>
                            <div class="info-content">
                                <p id="infoMessage" class="mb-0">Nuestro sistema analiza en detalle las facturas comerciales para detectar oportunidades de ahorro específicas para empresas, autónomos y comunidades de propietarios.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Incluir el archivo de configuración del modal de carga -->
<script src="{{ url_for('static', filename='js/loading_modal_config.js') }}"></script>

<!-- Incluir Font Awesome para los iconos -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

<!-- Script para activar el modal de carga, la barra de progreso y mostrar mensajes informativos -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const submitBtn = document.getElementById('submitBtn');
        const loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'));
        const progressBar = document.getElementById('progressBar');
        const processingStepText = document.getElementById('processingStepText');
        const infoIcon = document.getElementById('infoIcon');
        const infoMessage = document.getElementById('infoMessage');
        
        // Usar la configuración del archivo loading_modal_config.js para el estudio comercial
        const config = commercialStudyConfig;
        
        // Inicializar variables para la rotación de mensajes
        let currentMessageIndex = 0;
        let messageInterval;
        
        // Función para cambiar el mensaje con efecto de desvanecimiento
        function changeInfoMessage() {
            // Obtener el siguiente mensaje
            currentMessageIndex = (currentMessageIndex + 1) % config.infoMessages.length;
            const nextMessage = config.infoMessages[currentMessageIndex];
            
            // Aplicar efecto de desvanecimiento
            const card = document.querySelector('.single-info-card');
            
            // Desvanecer
            card.style.opacity = '0';
            
            // Esperar a que termine la transición de desvanecimiento
            setTimeout(() => {
                // Actualizar el icono y el mensaje
                infoIcon.className = 'fas ' + nextMessage.icon;
                infoMessage.textContent = nextMessage.content;
                
                // Aparecer
                card.style.opacity = '1';
            }, 500); // 500ms para el desvanecimiento
        }
        
        form.addEventListener('submit', function() {
            // Mostrar el spinner en el botón
            loadingSpinner.style.display = 'inline-block';
            submitBtn.disabled = true;
            submitBtn.value = 'Procesando...';
            
            // Mostrar el modal de carga
            loadingModal.show();
            
            // Establecer el primer mensaje e icono
            const firstMessage = config.infoMessages[0];
            infoIcon.className = 'fas ' + firstMessage.icon;
            infoMessage.textContent = firstMessage.content;
            
            // Iniciar la rotación de mensajes
            messageInterval = setInterval(changeInfoMessage, config.messageChangeInterval);
            
            // Iniciar la animación de la barra de progreso
            let currentStep = 0;
            
            // Función para actualizar la barra de progreso y los mensajes
            function updateProgress() {
                if (currentStep < config.processingSteps.length) {
                    const step = config.processingSteps[currentStep];
                    progressBar.style.width = step.progress + '%';
                    progressBar.setAttribute('aria-valuenow', step.progress);
                    const percentageElement = document.querySelector('.progress-percentage');
                    percentageElement.textContent = step.progress + '%';
                    
                    // Cambiar el color del porcentaje según la posición
                    const progressWidth = parseInt(step.progress);
                    if (progressWidth >= 50) {
                        percentageElement.classList.add('on-bar');
                    } else {
                        percentageElement.classList.remove('on-bar');
                    }
                    
                    processingStepText.textContent = step.text;
                    currentStep++;
                    
                    // Calcular tiempo de espera basado en el progreso
                    const waitTime = 1000 + Math.random() * 1500; // Entre 1 y 2.5 segundos
                    setTimeout(updateProgress, waitTime);
                }
            }
            
            // Iniciar la actualización de progreso
            updateProgress();
        });
    });
</script>

<!-- Estilos adicionales para el modal y las tarjetas informativas -->
<style>
    .single-info-card {
        transition: opacity 0.5s ease;
        border-radius: 10px;
        border: 1px solid rgba(0,0,0,0.1);
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
        margin-bottom: 0;
    }
    
    .info-icon-container {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary-color, #c206dc) 0%, var(--secondary-color, #9013fe) 100%);
        color: white;
        flex-shrink: 0;
    }
    
    .info-icon-container i {
        font-size: 24px;
    }
    
    .info-content {
        flex-grow: 1;
    }
    
    .info-content p {
        color: #555;
        font-size: 0.95rem;
        line-height: 1.5;
        text-align: left;
        margin-bottom: 0;
    }
    
    .modal-content {
        border-radius: 15px;
        overflow: hidden;
    }
    
    .modal-header {
        background: linear-gradient(135deg, var(--primary-color, #c206dc) 0%, var(--secondary-color, #9013fe) 100%);
        color: white;
        border-bottom: none;
    }
    
    #progressBar {
        background: linear-gradient(135deg, var(--primary-color, #c206dc) 0%, var(--secondary-color, #9013fe) 100%);
        height: 100%;
        font-weight: 600;
    }
    
    .progress {
        position: relative;
    }
    
    .progress-percentage {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-color, #c206dc);
        font-weight: 600;
        text-shadow: none;
        z-index: 10;
        transition: color 0.3s ease;
    }
    
    /* Clase para cuando el porcentaje debe ser blanco (sobre la barra coloreada) */
    .progress-percentage.on-bar {
        color: white;
        text-shadow: 0 0 2px rgba(0,0,0,0.5);
    }
    
    /* Asegurar que el card tenga altura suficiente */
    .info-card-container {
        min-height: 120px;
    }
</style>
{% endblock %}