{% 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('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>
                
                <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 -->

<!-- Script para activar el spinner durante el envío del formulario -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        const loadingSpinner = document.getElementById('loadingSpinner');
        const submitBtn = document.getElementById('submitBtn');
        
        form.addEventListener('submit', function() {
            // Mostrar el spinner cuando se envía el formulario
            loadingSpinner.style.display = 'inline-block';
            submitBtn.disabled = true;
            
            // Opcional: añadir texto "Procesando..." al botón
            submitBtn.value = 'Procesando...';
        });
    });
</script>
{% endblock %}