{% extends 'base.html.twig' %}

{% block title %}Résultats - {{ survey.title }}{% endblock %}

{% block page_title %}Résultats de l'Enquête{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec informations de l'enquête -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h2 class="text-xl font-semibold text-gray-800 mb-2">{{ survey.title }}</h2>
        <p class="text-gray-600 mb-4">{{ survey.description }}</p>
        
        <!-- Navigation -->
        <div class="flex space-x-2">
            <a href="{{ path('app_survey_manage', {id: survey.id}) }}" 
               class="text-blue-600 hover:text-blue-800 text-sm">
                <i class="fas fa-arrow-left mr-1"></i> Retour à la gestion
            </a>
        </div>
    </div>

    <!-- Statistiques de base -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="text-center">
                <p class="text-2xl font-bold text-blue-600">{{ responses|length }}</p>
                <p class="text-sm text-gray-600">Réponses reçues</p>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="text-center">
                <p class="text-2xl font-bold text-green-600">{{ survey.responseRate }}%</p>
                <p class="text-sm text-gray-600">Taux de réponse</p>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="text-center">
                <p class="text-2xl font-bold text-yellow-600">
                    {% if survey.averageRating %}
                        {{ survey.averageRating }}/5
                    {% else %}
                        -
                    {% endif %}
                </p>
                <p class="text-sm text-gray-600">Note moyenne</p>
            </div>
        </div>
    </div>

    <!-- Liste des réponses -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">
            Réponses individuelles ({{ responses|length }})
        </h3>
        
        {% if responses|length > 0 %}
            <div class="space-y-4">
                {% for response in responses %}
                    <div class="border border-gray-200 rounded-lg p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div class="text-sm text-gray-600">
                                Réponse #{{ response.id }}
                                {% if response.rating %}
                                    • Note: {{ response.rating }}/5
                                {% endif %}
                            </div>
                            <div class="text-xs text-gray-500">
                                {{ response.submittedAt|date('d/m/Y à H:i') }}
                            </div>
                        </div>
                        
                        <div class="text-sm text-gray-700">
                            {% if response.answers %}
                                <strong>Réponses :</strong>
                                {% for questionId, answer in response.answers %}
                                    <div class="ml-4">
                                        • {{ questionId }}: 
                                        {% if answer is iterable and answer is not string %}
                                            {{ answer|join(', ') }}
                                        {% else %}
                                            {{ answer }}
                                        {% endif %}
                                    </div>
                                {% endfor %}
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="text-center py-8">
                <i class="fas fa-chart-bar text-gray-300 text-4xl mb-4"></i>
                <p class="text-gray-500">Aucune réponse pour le moment</p>
            </div>
        {% endif %}
    </div>
</div>

{% endblock %}