{% extends "public/base.html" %}

{% block title %}{{ t('public.survey_complete_title', 'Survey Complete') }} - {{ project.name }} - {{ app_settings.title if app_settings else 'Survey Manager' }}{% endblock %}

{% block content %}
<div class="survey-card">
    <div class="survey-header">
        <h1 class="mb-3">{{ t('public.complete_title', '¡Encuesta Completada!') }}</h1>
        <p class="mb-0 opacity-90">{{ project.name }}</p>
    </div>

    <div class="survey-body text-center">
        <div class="mb-4">
            <i class="fas fa-check-circle fa-4x text-success mb-3"></i>
            <h3>{{ t('public.complete_thank_you', '¡Gracias!') }}</h3>
            <p class="text-muted">
                {{ t('public.complete_message', 'Tus respuestas han sido enviadas exitosamente. Agradecemos el tiempo que dedicaste para completar esta encuesta.') }}
            </p>
            {% if email_sent and message %}
            <div class="alert alert-success mt-3">
                {{ message }}
            </div>
            {% endif %}
        </div>

        <div class="row justify-content-center mb-4">
            <div class="col-md-8">
                <div class="card bg-light border-0">
                    <div class="card-body">
                        <h5 class="text-success mb-3">
                            <i class="fas fa-info-circle me-2"></i>{{ t('public.what_happens_next', '¿Qué sigue?') }}
                        </h5>
                        <p class="mb-2">{{ t('public.responses_analyzed', 'Tus respuestas serán analizadas junto con otros participantes.') }}</p>
                        <p class="mb-2">{{ t('public.results_improve_services', 'Los resultados pueden ser usados para mejorar servicios y entender preferencias.') }}</p>
                        <p class="mb-0">{{ t('public.thank_contribution', '¡Gracias por tu valiosa contribución!') }}</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="mb-4">
            <div class="alert alert-info">
                <i class="fas fa-lock me-2"></i>
                <strong>{{ t('common.note', 'Nota') }}:</strong> {{ t('public.complete_note', 'Esta encuesta solo puede completarse una vez. Tus respuestas han sido guardadas de forma segura.') }}
            </div>
        </div>

        <div class="text-center">
            <i class="fas fa-heart text-danger me-2"></i>
            <span class="text-muted">{{ t('public.thank_participation', '¡Gracias por tu participación!') }}</span>
        </div>
    </div>
</div>

<script>
// Ensure the survey is marked as completed in localStorage
document.addEventListener('DOMContentLoaded', function() {
    const completedSurveys = JSON.parse(localStorage.getItem('completedSurveys') || '[]');
    const projectSlug = '{{ project.slug }}';
    
    if (!completedSurveys.includes(projectSlug)) {
        completedSurveys.push(projectSlug);
        localStorage.setItem('completedSurveys', JSON.stringify(completedSurveys));
    }
    
    // Remove any temporary survey data
    localStorage.removeItem('currentSurveyPerson');
});
</script>
{% endblock %}