{% extends "base.html" %}

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

{% block content %}
<div class="section contact-section">
    <div class="container">
        <div class="page-header">
            <h1 class="title">Contacta con nosotros</h1>
            <p class="subtitle">Estamos aquí para resolver todas tus dudas sobre ahorro energético</p>
            
            {% with messages = get_flashed_messages(with_categories=true) %}
                {% if messages %}
                    {% for category, message in messages %}
                        <div class="alert alert-{{ 'success' if category == 'success' else 'danger' }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Cerrar"></button>
                        </div>
                    {% endfor %}
                {% endif %}
            {% endwith %}
        </div>
        
        <div class="contact-container">
            <div class="contact-form">
                <h3><i class="fas fa-envelope"></i> Envíanos un mensaje</h3>
                <p class="mb-4">Rellena el formulario y te responderemos en menos de 24 horas</p>
                
                <form method="POST" action="{{ url_for('contact.contact') }}" id="contact-form">
                    {{ form.hidden_tag() }}
                    
                    <div class="form-row">
                        <div class="form-group">
                            <label for="{{ form.name.id }}">Nombre <span class="text-danger">*</span></label>
                            {{ form.name(class="form-control", placeholder="Tu nombre", required=true) }}
                            {% for error in form.name.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                        
                        <div class="form-group">
                            <label for="{{ form.email.id }}">Email <span class="text-danger">*</span></label>
                            {{ form.email(class="form-control", placeholder="correo@ejemplo.com", required=true) }}
                            {% for error in form.email.errors %}
                            <span class="error-message">{{ error }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.phone.id }}">Teléfono <span class="text-danger">*</span></label>
                        {{ form.phone(class="form-control", placeholder="Ej: 612 345 678", required=true) }}
                        {% for error in form.phone.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.subject.id }}">Asunto <span class="text-danger">*</span></label>
                        {{ form.subject(class="form-control", placeholder="Asunto de tu mensaje", required=true) }}
                        {% for error in form.subject.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-group">
                        <label for="{{ form.message.id }}">Mensaje <span class="text-danger">*</span></label>
                        {{ form.message(class="form-control", placeholder="Describe en qué podemos ayudarte...", required=true) }}
                        {% for error in form.message.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </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>
                    
                    <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.terms_conditions') }}" target="_blank">tratamiento de mis datos</a> <span class="text-danger">*</span>
                        </label>
                        {% for error in form.rgpd_consent.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <div class="form-check">
                        {{ form.newsletter(class="form-check-input") }}
                        {{ form.newsletter.label(class="form-check-label") }}
                        {% for error in form.newsletter.errors %}
                        <span class="error-message">{{ error }}</span>
                        {% endfor %}
                    </div>
                    
                    <!-- reCAPTCHA v3 Token Field -->
                    {{ form.recaptcha_token(id='recaptcha-token') }}
                    
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary g-recaptcha" 
                                data-sitekey="{{ recaptcha_site_key }}" 
                                data-callback='onSubmit' 
                                data-action='submit'
                                {% if not recaptcha_enabled %}disabled{% endif %}>
                            Enviar Mensaje
                        </button>
                    </div>
                    
                    <!-- Aviso de protección reCAPTCHA -->
                    <div class="mt-3" style="font-size: 0.8rem; color: #6c757d;">
                        <i class="fas fa-shield-alt me-1"></i> Este sitio está protegido por reCAPTCHA y se aplican la 
                        <a href="https://policies.google.com/privacy" target="_blank" class="text-decoration-none">Política de privacidad</a> y los 
                        <a href="https://policies.google.com/terms" target="_blank" class="text-decoration-none">Términos de servicio</a> de Google.
                    </div>
                </form>
            </div>
            
            <div class="contact-info">
                <div class="info-card">
                    <h3><i class="fas fa-map-marker-alt"></i> Nuestra oficina</h3>
                    <p>Estamos ubicados en el centro de Madrid, a pocos minutos de transporte público.</p>
                    <ul>
                        <li><i class="fas fa-map-marker-alt"></i> C/ de la Princesa 31, piso 2, puerta 2, 28008, Madrid</li>
                        <li><i class="fas fa-phone"></i> +34 919 99 30 76</li>
                        <li><i class="fab fa-whatsapp"></i> +34 641 13 81 84</li>
                        <li><i class="fas fa-envelope"></i> ahorro@oleconsulting.es</li>
                    </ul>
                    <div class="mt-4">
                        <a href="https://maps.app.goo.gl/SdQ26YTqXpVpLFFf8" target="_blank" class="btn btn-sm btn-outline-primary">Ver en Google Maps</a>
                    </div>
                </div>
                
                <div class="info-card">
                    <h3><i class="far fa-clock"></i> Horario de atención</h3>
                    <p>Nuestro equipo está disponible durante los siguientes horarios:</p>
                    <ul>
                        <li><i class="fas fa-calendar-day"></i> Lunes a Jueves: 10:00 - 18:45</li>
                        <li><i class="fas fa-calendar-times"></i> Viernes: 10:00 - 14:00</li>
                        <li><i class="fas fa-calendar-times"></i> Fines de semana: Cerrado</li>
                    </ul>
                </div>
                
                <div class="social-media">
                    <h3><i class="fas fa-share-alt"></i> Síguenos</h3>
                    <p>Manténte al día de nuestras novedades sobre ahorro energético</p>
                    <div class="social-icons">
                        <a href="#" class="social-icon" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
                        <a href="#" class="social-icon" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
                        <a href="#" class="social-icon" aria-label="Facebook"><i class="fab fa-facebook"></i></a>
                        <a href="#" class="social-icon" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% block scripts %}
{{ super() }}
<script>
    // Función para manejar el envío del formulario con reCAPTCHA
    function onSubmit(token) {
        // Obtener el formulario
        const form = document.getElementById('contact-form');
        
        // Actualizar el campo oculto con el token
        document.getElementById('recaptcha-token').value = token;
        
        // Enviar el formulario
        form.submit();
    }
    
    // Manejar el envío del formulario
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.getElementById('contact-form');
        
        form.addEventListener('submit', function(event) {
            // Solo ejecutar reCAPTCHA si está habilitado
            {% if recaptcha_enabled %}
                event.preventDefault();
                
                // Verificar si ya tenemos un token válido
                const token = document.getElementById('recaptcha-token').value;
                
                if (!token) {
                    // Si no hay token, ejecutar reCAPTCHA
                    grecaptcha.ready(function() {
                        grecaptcha.execute('{{ recaptcha_site_key }}', {action: 'submit'}).then(function(token) {
                            document.getElementById('recaptcha-token').value = token;
                            form.submit();
                        });
                    });
                }
            {% endif %}
        });
        
        // Manejar el cierre de alertas
        const alerts = document.querySelectorAll('.alert-dismissible .btn-close');
        alerts.forEach(alert => {
            alert.addEventListener('click', function() {
                this.closest('.alert').style.display = 'none';
            });
        });
    });
</script>
{% endblock %}