{% extends "base.html" %}

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

{% block content %}
<div class="section">
    <div class="container">
        <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>
                    
                    {# Comentado: Campo oculto para token de reCAPTCHA #}
                    {# <input type="hidden" name="recaptcha_token" id="recaptcha-token">
                    {% if form.recaptcha_token.errors %}
                        {% for error in form.recaptcha_token.errors %}
                        <div class="alert alert-danger">{{ error }}</div>
                        {% endfor %}
                    {% endif %} #}
                    
                    {# Comentado: reCAPTCHA v2 Badge #}
                    {# <div class="d-flex justify-content-center mb-4">
                        <div id="recaptcha-container">
                            <div class="g-recaptcha" data-sitekey="{{ recaptcha_site_key }}" data-callback="onRecaptchaSuccess" data-expired-callback="onRecaptchaExpired" data-error-callback="onRecaptchaError"></div>
                            <div id="recaptcha-message" style="font-size: 12px; color: #666; margin-top: 10px; text-align: center; line-height: 1.4;">
                                Protegido por reCAPTCHA - 
                                <a href="https://policies.google.com/privacy" target="_blank" style="color: #0d6efd; text-decoration: none;">Política de Privacidad</a> y
                                <a href="https://policies.google.com/terms" target="_blank" style="color: #0d6efd; text-decoration: none;">Términos de Servicio</a>
                            </div>
                        </div>
                    </div> #}
                    
                    {# Comentado: reCAPTCHA Privacy Notice #}
                    {# <div class="recaptcha-notice mt-2" style="font-size: 12px; color: #666; line-height: 1.4;">
                        <p class="mb-1">Este sitio está protegido por reCAPTCHA y se aplican la
                        <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Política de Privacidad</a> y
                        <a href="https://policies.google.com/terms" target="_blank" rel="noopener">Términos de Servicio</a> de Google.</p>
                        <p class="mb-0">Al enviar este formulario, aceptas que Google procese tus datos según su <a href="https://policies.google.com/privacy" target="_blank" rel="noopener">Política de Privacidad</a>.</p>
                    </div> #}
                    
                    <div class="form-actions mt-4">
                        {{ 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 -->

{# Comentado: Cargar reCAPTCHA v2 #}
{# <script src="https://www.google.com/recaptcha/api.js" async defer></script> #}
<script>
    {# Comentado: Funciones de reCAPTCHA #}
    {# // Función que se ejecuta cuando reCAPTCHA se carga correctamente
    function onRecaptchaSuccess(token) {
        console.log('reCAPTCHA verificado con éxito');
        document.getElementById('recaptcha-token').value = token;
        document.getElementById('submitBtn').disabled = false;
    }

    // Función que se ejecuta cuando el token de reCAPTCHA expira
    function onRecaptchaExpired() {
        console.log('reCAPTCHA expirado');
        document.getElementById('recaptcha-token').value = '';
        document.getElementById('submitBtn').disabled = true;
    }

    // Función que se ejecuta si hay un error en reCAPTCHA
    function onRecaptchaError() {
        console.error('Error en reCAPTCHA');
        document.getElementById('recaptcha-token').value = '';
        document.getElementById('submitBtn').disabled = true;
    } #}

    // Inicialización cuando el DOM está completamente cargado
    document.addEventListener('DOMContentLoaded', function () {
        console.log('Página cargada');
        // Comentado: console.log('Página cargada, inicializando reCAPTCHA');

        // Configurar el envío del formulario
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function (e) {
                // Comentado: Validación de reCAPTCHA
                // const recaptchaToken = document.getElementById('recaptcha-token').value;
                // if (!recaptchaToken) {
                //     e.preventDefault();
                //     alert('Por favor, completa la verificación reCAPTCHA');
                //     return false;
                // }

                // Mostrar spinner de carga
                const submitBtn = document.getElementById('submitBtn');
                const loadingSpinner = document.getElementById('loadingSpinner');
                if (submitBtn && loadingSpinner) {
                    submitBtn.disabled = true;
                    loadingSpinner.style.display = 'inline-block';
                }
            });
        }

        // Comentado: Forzar la visualización del badge después de la carga
        // setTimeout(function () {
        //     const badge = document.querySelector('.grecaptcha-badge');
        //     if (badge) {
        //         badge.style.visibility = 'visible';
        //         badge.style.opacity = '1';
        //         badge.style.zIndex = '9999';
        //         console.log('Badge de reCAPTCHA mostrado');
        //     } else {
        //         console.warn('No se encontró el badge de reCAPTCHA');
        //     }
        // }, 1000);
    });
    // Comentado: Añadir estilos para el badge de reCAPTCHA
    // const style = document.createElement('style');
    // style.innerHTML = `
    //     /* Estilos para el badge de reCAPTCHA */
    //     .grecaptcha-badge { 
    //         visibility: visible !important;
    //         opacity: 1 !important;
    //         z-index: 9999 !important;
    //         width: auto !important;
    //         height: auto !important;
    //         padding: 10px !important;
    //         background-color: #f9f9f9 !important;
    //         border-radius: 4px !important;
    //         box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    //         transition: all 0.3s ease !important;
    //     }
    //     
    //     /* Asegurar que el badge sea visible en móviles */
    //     @media (max-width: 767px) {
    //         .grecaptcha-badge {
    //             position: relative !important;
    //             margin: 10px auto !important;
    //             left: 0 !important;
    //             right: 0 !important;
    //             width: 100% !important;
    //             text-align: center !important;
    //         }
    //     }
    //         border: 1px solid #ccc !important;
    //         box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
    //         position: fixed !important;
    //         bottom: 80px !important;
    //         right: 20px !important;
    //         display: block !important;
    //     }
    //     .grecaptcha-badge iframe {
    //         position: relative !important;
    //     }
    // `;
    // document.head.appendChild(style);

    // Comentado: Verificar periódicamente si el badge está presente
    // const checkBadge = setInterval(function () {
    //     const badge = document.querySelector('.grecaptcha-badge');
    //     if (badge) {
    //         console.log('Badge de reCAPTCHA encontrado');
    //         badge.style.visibility = 'visible';
    //         badge.style.opacity = '1';
    //         badge.style.display = 'block';
    //         clearInterval(checkBadge);
    //     }
    // }, 100);
</script>

{# Comentado: Estilos para mejorar la apariencia de reCAPTCHA #}
{# <style>
    /* Estilo para el contenedor de reCAPTCHA */
    #recaptcha-container {
        margin: 0 auto;
        background-color: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #dee2e6;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;
    }
    
    #recaptcha-container:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
    
    /* Estilo para el mensaje de reCAPTCHA */
    #recaptcha-message {
        font-size: 12px;
        color: #666;
        margin-top: 10px;
        line-height: 1.4;
    }
    
    #recaptcha-message a {
        color: #0d6efd;
        text-decoration: none;
    }
    
    #recaptcha-message a:hover {
        text-decoration: underline;
    }
    
    /* Asegurar que el iframe de reCAPTCHA sea visible */
    .g-recaptcha iframe {
        width: 100% !important;
    }

    #recaptcha-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        min-height: 78px;
        background-color: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        border: 1px solid #dee2e6;
        max-width: 400px;
        width: 100%;
    }
    
    /* Mejorar la visibilidad en móviles */
    @media (max-width: 767px) {
        #recaptcha-container {
            padding: 15px;
            max-width: 100%;
            margin: 0 10px;
        }
        
        .g-recaptcha {
            transform: scale(0.95);
            transform-origin: center;
            margin: 0 auto;
            display: flex;
            justify-content: center;
        }
        
        .g-recaptcha iframe {
            margin: 0 auto;
        }
    }
</style> #}
{% endblock %}