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

{% block title %}Créer une Enquête Personnalisée - Clinique Les Genêts{% endblock %}

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

{% block body %}
<div class="space-y-6">
    <!-- Header -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h2 class="text-xl font-semibold text-gray-800">Enquête Personnalisée</h2>
                <p class="text-gray-600">Créez votre propre enquête avec vos questions personnalisées</p>
            </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="customSurveyForm" 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" 
                           placeholder="Ex: Enquête de satisfaction clientèle"
                           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..."></textarea>
            </div>
        </div>

        <!-- Questions personnalisées -->
        <div class="bg-white rounded-lg border border-gray-200 p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-questions text-gray-500 mr-2"></i>
                    Questions personnalisées
                </h3>
                <button type="button" onclick="addQuestion()" 
                        class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm">
                    <i class="fas fa-plus mr-2"></i>
                    Ajouter une question
                </button>
            </div>
            
            <div id="questionsContainer" class="space-y-4">
                <!-- Les questions seront ajoutées dynamiquement ici -->
            </div>
            
            <!-- Template de question (caché) -->
            <div id="questionTemplate" class="hidden">
                <div class="question-item border border-gray-200 rounded-lg p-4">
                    <div class="flex items-center justify-between mb-4">
                        <h4 class="font-medium text-gray-800">Question #<span class="question-number"></span></h4>
                        <button type="button" onclick="removeQuestion(this)" 
                                class="text-red-600 hover:text-red-800">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">
                                Texte de la question <span class="text-red-500">*</span>
                            </label>
                            <input type="text" 
                                   name="questions[INDEX][label]" 
                                   placeholder="Ex: Êtes-vous satisfait de notre service ?"
                                   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 class="block text-sm font-medium text-gray-700 mb-2">Type de question</label>
                            <select name="questions[INDEX][type]" 
                                    class="question-type w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    onchange="toggleQuestionOptions(this)">
                                <option value="text">Texte libre</option>
                                <option value="textarea">Zone de texte</option>
                                <option value="email">Email</option>
                                <option value="date">Date</option>
                                <option value="radio">Choix unique</option>
                                <option value="checkbox">Choix multiple</option>
                                <option value="rating">Évaluation par étoiles</option>
                            </select>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Section</label>
                            <input type="text" 
                                   name="questions[INDEX][section]" 
                                   placeholder="Ex: Satisfaction générale"
                                   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 class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Texte d'aide (placeholder)</label>
                            <input type="text" 
                                   name="questions[INDEX][placeholder]" 
                                   placeholder="Ex: Entrez votre commentaire ici..."
                                   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 class="options-container hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Options (séparées par des virgules)</label>
                            <input type="text" 
                                   name="questions[INDEX][options]" 
                                   placeholder="Ex: Très satisfait, Satisfait, Neutre, Insatisfait"
                                   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 class="rating-container hidden">
                            <label class="block text-sm font-medium text-gray-700 mb-2">Échelle de notation</label>
                            <select name="questions[INDEX][scale]" 
                                    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="5">1 à 5 étoiles</option>
                                <option value="10">1 à 10 étoiles</option>
                            </select>
                        </div>
                        
                        <div class="flex items-center">
                            <label class="flex items-center">
                                <input type="checkbox" 
                                       name="questions[INDEX][required]" 
                                       class="mr-2 text-blue-600 focus:ring-blue-500 rounded">
                                <span class="text-sm text-gray-700">Question obligatoire</span>
                            </label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Actions -->
        <div class="flex justify-center space-x-4 pt-6">
            <button type="button" 
                    onclick="window.location.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-times mr-2"></i>
                Annuler
            </button>
            <button type="submit" 
                    class="bg-purple-600 hover:bg-purple-700 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>
let questionIndex = 0;

// Ajouter une question au démarrage
document.addEventListener('DOMContentLoaded', function() {
    addQuestion();
});

function addQuestion() {
    const container = document.getElementById('questionsContainer');
    const template = document.getElementById('questionTemplate');
    const newQuestion = template.cloneNode(true);
    
    newQuestion.id = '';
    newQuestion.classList.remove('hidden');
    
    // Remplacer INDEX par l'index actuel
    const html = newQuestion.innerHTML.replace(/INDEX/g, questionIndex);
    newQuestion.innerHTML = html;
    
    // Mettre à jour le numéro de question
    newQuestion.querySelector('.question-number').textContent = questionIndex + 1;
    
    container.appendChild(newQuestion);
    questionIndex++;
    
    updateQuestionNumbers();
}

function removeQuestion(button) {
    const questionItem = button.closest('.question-item');
    questionItem.remove();
    updateQuestionNumbers();
}

function updateQuestionNumbers() {
    const questions = document.querySelectorAll('.question-item:not(.hidden)');
    questions.forEach((question, index) => {
        const numberSpan = question.querySelector('.question-number');
        if (numberSpan) {
            numberSpan.textContent = index + 1;
        }
    });
}

function toggleQuestionOptions(select) {
    const questionItem = select.closest('.question-item');
    const optionsContainer = questionItem.querySelector('.options-container');
    const ratingContainer = questionItem.querySelector('.rating-container');
    
    // Cacher tous les conteneurs d'options
    optionsContainer.classList.add('hidden');
    ratingContainer.classList.add('hidden');
    
    // Afficher le conteneur approprié selon le type
    const questionType = select.value;
    if (questionType === 'radio' || questionType === 'checkbox') {
        optionsContainer.classList.remove('hidden');
    } else if (questionType === 'rating') {
        ratingContainer.classList.remove('hidden');
    }
}

// Soumission du formulaire
document.getElementById('customSurveyForm').addEventListener('submit', function(e) {
    const questions = document.querySelectorAll('.question-item:not(.hidden)');
    
    if (questions.length === 0) {
        e.preventDefault();
        alert('Veuillez ajouter au moins une question à votre enquête.');
        return;
    }
    
    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>Création en cours...';
});
</script>

{% endblock %}