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

{% block title %}Créer une Enquête - {{ template.title }}{% endblock %}

{% block page_title %}Créer une Enquête{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec informations du template -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <div class="flex items-center space-x-4">
                <div class="w-16 h-16 
                    {% if template.color == 'blue' %}bg-blue-100
                    {% elseif template.color == 'green' %}bg-green-100
                    {% elseif template.color == 'purple' %}bg-purple-100
                    {% elseif template.color == 'orange' %}bg-orange-100
                    {% else %}bg-gray-100{% endif %}
                    rounded-full flex items-center justify-center">
                    <span class="text-2xl">{{ template.icon }}</span>
                </div>
                <div>
                    <h2 class="text-xl font-semibold text-gray-800">{{ template.title }}</h2>
                    <p class="text-gray-600">{{ template.description }}</p>
                </div>
            </div>
            <a href="{{ path('app_survey_templates') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux modèles
            </a>
        </div>
    </div>

    <!-- Formulaire de création -->
    <form id="surveyForm" method="POST" class="space-y-6">
        <!-- Configuration de l'enquête -->
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">
                <i class="fas fa-cog text-gray-500 mr-2"></i>
                Configuration de l'enquête
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="survey_title" class="block text-sm font-medium text-gray-700 mb-2">
                        Titre de l'enquête <span class="text-red-500">*</span>
                    </label>
                    <input type="text" 
                           id="survey_title" 
                           name="survey_title" 
                           value="{{ template.title }}"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                           required>
                </div>
                
                <div>
                    <label for="survey_target" class="block text-sm font-medium text-gray-700 mb-2">
                        Nombre de réponses cible
                    </label>
                    <input type="number" 
                           id="survey_target" 
                           name="survey_target" 
                           value="100"
                           min="1"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label for="survey_expiry" class="block text-sm font-medium text-gray-700 mb-2">
                        Date d'expiration
                    </label>
                    <input type="date" 
                           id="survey_expiry" 
                           name="survey_expiry"
                           class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                
                <div>
                    <label for="survey_status" class="block text-sm font-medium text-gray-700 mb-2">
                        Statut initial
                    </label>
                    <select id="survey_status" 
                            name="survey_status"
                            class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="draft">Brouillon</option>
                        <option value="active">Active</option>
                    </select>
                </div>
            </div>
            
            <div class="mt-4">
                <label for="survey_description" class="block text-sm font-medium text-gray-700 mb-2">
                    Description de l'enquête
                </label>
                <textarea id="survey_description" 
                          name="survey_description" 
                          rows="3"
                          class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                          placeholder="Description optionnelle de l'enquête...">{{ template.description }}</textarea>
            </div>
        </div>

        <!-- Aperçu du modèle sélectionné -->
        <input type="hidden" name="template_key" value="{{ template.templateKey }}">
        
        <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-eye text-gray-500 mr-2"></i>
                Aperçu du modèle sélectionné
            </h3>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4">
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-2xl font-bold text-gray-800">{{ template.sections|length }}</div>
                    <div class="text-sm text-gray-600">Section{{ template.sections|length > 1 ? 's' : '' }}</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-2xl font-bold text-gray-800">{{ template.allFields|length }}</div>
                    <div class="text-sm text-gray-600">Question{{ template.allFields|length > 1 ? 's' : '' }}</div>
                </div>
                <div class="text-center p-4 bg-gray-50 rounded-lg">
                    <div class="text-2xl font-bold text-gray-800">{{ template.requiredFields|length }}</div>
                    <div class="text-sm text-gray-600">Obligatoire{{ template.requiredFields|length > 1 ? 's' : '' }}</div>
                </div>
            </div>
            
            <div class="space-y-3">
                {% for section in template.sections %}
                    <div class="border-l-4 border-blue-400 pl-4 py-2 bg-blue-50">
                        <h4 class="font-medium text-gray-800">{{ section.title }}</h4>
                        {% if section.fields is defined %}
                            <p class="text-sm text-gray-600">{{ section.fields|length }} question{{ section.fields|length > 1 ? 's' : '' }}</p>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>
            
            <div class="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
                <p class="text-sm text-blue-800">
                    <i class="fas fa-info-circle mr-2"></i>
                    Les participants rempliront cette enquête via le lien que vous générerez.
                </p>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-center space-x-4 pt-6">
            <button type="button" 
                    onclick="window.location.href='{{ path('app_survey_templates') }}'"
                    class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg">
                <i class="fas fa-times mr-2"></i>
                Annuler
            </button>
            <button type="submit" 
                    class="
                    {% if template.color == 'blue' %}bg-blue-600 hover:bg-blue-700
                    {% elseif template.color == 'green' %}bg-green-600 hover:bg-green-700
                    {% elseif template.color == 'purple' %}bg-purple-600 hover:bg-purple-700
                    {% elseif template.color == 'orange' %}bg-orange-600 hover:bg-orange-700
                    {% else %}bg-gray-600 hover:bg-gray-700{% endif %}
                    text-white px-6 py-2 rounded-lg">
                <i class="fas fa-save mr-2"></i>
                Créer l'enquête
            </button>
        </div>
    </form>
</div>

<script>
// Soumission du formulaire
document.getElementById('surveyForm').addEventListener('submit', function(e) {
    const submitButton = this.querySelector('button[type="submit"]');
    const originalText = submitButton.innerHTML;
    
    // Désactiver le bouton et afficher un indicateur de chargement
    submitButton.disabled = true;
    submitButton.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Génération du lien...';
    
    // Le formulaire sera soumis normalement via POST
});
</script>

{% endblock %}