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

{% block title %}Gérer l'Enquête - {{ survey.title }}{% endblock %}

{% block page_title %}Gestion de l'Enquête{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec titre et statut -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-xl font-semibold text-gray-800">{{ survey.title }}</h2>
                <p class="text-gray-600 mt-1">{{ survey.description }}</p>
            </div>
            <div class="text-right">
                <span class="inline-flex px-3 py-1 text-sm font-medium rounded-full
                    {% if survey.status == 'draft' %}bg-gray-100 text-gray-700
                    {% elseif survey.status == 'active' %}bg-green-100 text-green-700
                    {% elseif survey.status == 'completed' %}bg-blue-100 text-blue-700
                    {% elseif survey.status == 'cancelled' %}bg-red-100 text-red-700
                    {% endif %}">
                    {{ survey.statusLabel }}
                </span>
            </div>
        </div>
    </div>

    <!-- Statistiques de l'enquête -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Réponses reçues</p>
                    <p class="text-2xl font-bold text-blue-600">{{ survey.currentResponses }}</p>
                </div>
                <i class="fas fa-comments text-blue-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Objectif</p>
                    <p class="text-2xl font-bold text-green-600">{{ survey.targetResponses }}</p>
                </div>
                <i class="fas fa-bullseye text-green-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Taux de réponse</p>
                    <p class="text-2xl font-bold text-purple-600">{{ survey.responseRate }}%</p>
                </div>
                <i class="fas fa-chart-line text-purple-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg border border-gray-200 p-4">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Questions</p>
                    <p class="text-2xl font-bold text-orange-600">{{ survey.questions|length }}</p>
                </div>
                <i class="fas fa-question-circle text-orange-400 text-2xl"></i>
            </div>
        </div>
    </div>

    <!-- Lien de partage -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-share-alt text-blue-500 mr-2"></i>
            Lien de partage
        </h3>
        
        {% set publicUrl = url('app_survey_public', {surveyLink: survey.surveyLink}) %}
        <div class="flex items-center space-x-2">
            <input type="text" 
                   id="shareUrl"
                   value="{{ publicUrl }}" 
                   readonly
                   class="flex-1 border border-gray-300 rounded-md px-3 py-2 bg-gray-50 text-sm">
            <button onclick="copyToClipboard('shareUrl')" 
                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-copy mr-1"></i> Copier
            </button>
            <a href="{{ publicUrl }}" target="_blank"
               class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-md">
                <i class="fas fa-external-link-alt mr-1"></i> Voir
            </a>
        </div>
    </div>

    <!-- Actions disponibles -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-cogs text-gray-500 mr-2"></i>
            Actions disponibles
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
            {% if survey.status == 'draft' %}
                <!-- Activer l'enquête -->
                <form method="POST" action="{{ path('app_survey_action', {id: survey.id, action: 'activate'}) }}" class="inline">
                    <button type="submit" onclick="return confirm('Êtes-vous sûr de vouloir activer cette enquête ?')"
                            class="w-full bg-green-600 hover:bg-green-700 text-white px-4 py-3 rounded-lg text-center">
                        <i class="fas fa-play mb-1 block text-lg"></i>
                        <span class="text-sm">Activer</span>
                    </button>
                </form>
            {% endif %}

            {% if survey.status == 'active' %}
                <!-- Terminer l'enquête -->
                <form method="POST" action="{{ path('app_survey_action', {id: survey.id, action: 'complete'}) }}" class="inline">
                    <button type="submit" onclick="return confirm('Êtes-vous sûr de vouloir terminer cette enquête ?')"
                            class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-3 rounded-lg text-center">
                        <i class="fas fa-check mb-1 block text-lg"></i>
                        <span class="text-sm">Terminer</span>
                    </button>
                </form>
            {% endif %}

            {% if survey.status in ['draft', 'active'] %}
                <!-- Annuler l'enquête -->
                <form method="POST" action="{{ path('app_survey_action', {id: survey.id, action: 'cancel'}) }}" class="inline">
                    <button type="submit" onclick="return confirm('Êtes-vous sûr de vouloir annuler cette enquête ?')"
                            class="w-full bg-yellow-600 hover:bg-yellow-700 text-white px-4 py-3 rounded-lg text-center">
                        <i class="fas fa-pause mb-1 block text-lg"></i>
                        <span class="text-sm">Annuler</span>
                    </button>
                </form>
            {% endif %}

            <!-- Voir les résultats -->
            <a href="{{ path('app_survey_results', {id: survey.id}) }}" class="w-full bg-purple-600 hover:bg-purple-700 text-white px-4 py-3 rounded-lg text-center">
                <i class="fas fa-chart-bar mb-1 block text-lg"></i>
                <span class="text-sm">Résultats</span>
            </a>

            <!-- Modifier l'enquête -->
            {% if survey.status == 'draft' %}
                <a href="#" class="w-full bg-gray-600 hover:bg-gray-700 text-white px-4 py-3 rounded-lg text-center">
                    <i class="fas fa-edit mb-1 block text-lg"></i>
                    <span class="text-sm">Modifier</span>
                </a>
            {% endif %}

            <!-- Supprimer l'enquête -->
            <form method="POST" action="{{ path('app_survey_action', {id: survey.id, action: 'delete'}) }}" class="inline">
                <button type="submit" onclick="return confirm('Êtes-vous sûr de vouloir supprimer définitivement cette enquête ? Cette action est irréversible.')"
                        class="w-full bg-red-600 hover:bg-red-700 text-white px-4 py-3 rounded-lg text-center">
                    <i class="fas fa-trash mb-1 block text-lg"></i>
                    <span class="text-sm">Supprimer</span>
                </button>
            </form>
        </div>
    </div>

    <!-- Informations détaillées -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center">
            <i class="fas fa-info-circle text-gray-500 mr-2"></i>
            Informations détaillées
        </h3>
        
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div>
                <h4 class="font-medium text-gray-800 mb-2">Configuration</h4>
                <dl class="space-y-1 text-sm">
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Créée le :</dt>
                        <dd class="text-gray-800">{{ survey.createdAt|date('d/m/Y à H:i') }}</dd>
                    </div>
                    {% if survey.expiryDate %}
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Expire le :</dt>
                        <dd class="text-gray-800 {{ survey.isExpired ? 'text-red-600' : '' }}">
                            {{ survey.expiryDate|date('d/m/Y') }}
                            {% if survey.isExpired %}
                                <i class="fas fa-exclamation-triangle ml-1"></i>
                            {% endif %}
                        </dd>
                    </div>
                    {% endif %}
                    {% if survey.templateKey %}
                    <div class="flex justify-between">
                        <dt class="text-gray-600">Modèle :</dt>
                        <dd class="text-gray-800">{{ survey.templateKey|upper }}</dd>
                    </div>
                    {% endif %}
                </dl>
            </div>
            
            <div>
                <h4 class="font-medium text-gray-800 mb-2">Progression</h4>
                <div class="space-y-2">
                    <div class="flex justify-between text-sm">
                        <span class="text-gray-600">Progression</span>
                        <span class="text-gray-800">{{ survey.currentResponses }}/{{ survey.targetResponses }}</span>
                    </div>
                    <div class="w-full bg-gray-200 rounded-full h-2">
                        {% set progressPercentage = survey.responseRate %}
                        <div class="h-2 rounded-full transition-all duration-300
                            {% if progressPercentage >= 100 %}bg-green-500
                            {% elseif progressPercentage >= 75 %}bg-blue-500
                            {% elseif progressPercentage >= 50 %}bg-yellow-500
                            {% else %}bg-red-500{% endif %}" 
                             style="width: {{ progressPercentage > 100 ? 100 : progressPercentage }}%"></div>
                    </div>
                    {% if progressPercentage >= 100 %}
                        <p class="text-xs text-green-600">
                            <i class="fas fa-check-circle mr-1"></i>
                            Objectif atteint !
                        </p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation -->
    <div class="flex justify-center space-x-4">
        <a href="{{ path('app_survey_index') }}" 
           class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg">
            <i class="fas fa-arrow-left mr-2"></i>
            Retour aux enquêtes
        </a>
    </div>
</div>

<script>
function copyToClipboard(elementId) {
    const element = document.getElementById(elementId);
    element.select();
    element.setSelectionRange(0, 99999);
    
    try {
        document.execCommand('copy');
        // Feedback visuel
        const button = event.target.closest('button');
        const originalText = button.innerHTML;
        button.innerHTML = '<i class="fas fa-check mr-1"></i> Copié !';
        button.classList.add('bg-green-600');
        button.classList.remove('bg-blue-600');
        
        setTimeout(() => {
            button.innerHTML = originalText;
            button.classList.remove('bg-green-600');
            button.classList.add('bg-blue-600');
        }, 2000);
    } catch (err) {
        alert('Erreur lors de la copie');
    }
}
</script>

{% endblock %}