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

{% block title %}Modèles d'Enquêtes - Clinique Les Genêts{% endblock %}

{% block page_title %}Modèles d'Enquêtes{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header avec actions -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h2 class="text-xl font-semibold text-gray-800">Modèles d'enquêtes disponibles</h2>
            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                {{ templates|length }} modèle{{ templates|length > 1 ? 's' : '' }}
            </span>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ path('app_survey_index') }}" 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 enquêtes
            </a>
        </div>
    </div>

    <!-- Grille des templates -->
    {% if templates is empty %}
        <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
            <i class="fas fa-clipboard-list text-gray-300 text-6xl mb-4"></i>
            <h3 class="text-xl font-medium text-gray-600 mb-2">Aucun modèle disponible</h3>
            <p class="text-gray-500 mb-6">Les modèles d'enquêtes n'ont pas encore été initialisés</p>
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg inline-flex items-center">
                <i class="fas fa-plus mr-2"></i>
                Initialiser les modèles
            </button>
        </div>
    {% else %}
        <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
            {% for template in templates %}
                <div class="bg-white rounded-lg border border-gray-200 p-6 card-hover cursor-pointer" 
                     onclick="previewTemplate('{{ template.templateKey }}')">
                    <!-- Header du template -->
                    <div class="text-center mb-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 mx-auto mb-3">
                            <span class="text-2xl">{{ template.icon }}</span>
                        </div>
                        <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ template.title }}</h3>
                        <p class="text-sm text-gray-600">{{ template.description }}</p>
                    </div>

                    <!-- Statistiques -->
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Sections :</span>
                            <span class="font-medium text-gray-700">{{ template.sections|length }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Champs :</span>
                            <span class="font-medium text-gray-700">{{ template.allFields|length }}</span>
                        </div>
                        <div class="flex items-center justify-between text-sm">
                            <span class="text-gray-500">Obligatoires :</span>
                            <span class="font-medium text-gray-700">{{ template.requiredFields|length }}</span>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex space-x-2">
                        <button onclick="event.stopPropagation(); previewTemplate('{{ template.templateKey }}')" 
                                class="flex-1 bg-gray-100 hover:bg-gray-200 text-gray-700 px-3 py-2 rounded-md text-sm">
                            <i class="fas fa-eye mr-1"></i>
                            Aperçu
                        </button>
                        <button onclick="event.stopPropagation(); createFromTemplate('{{ template.templateKey }}')" 
                                class="flex-1 
                                {% 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-3 py-2 rounded-md text-sm">
                            <i class="fas fa-plus mr-1"></i>
                            Utiliser
                        </button>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}
</div>

<!-- Modal d'aperçu -->
<div id="previewModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg border border-gray-200 w-full max-w-4xl max-h-[90vh] overflow-y-auto">
            <!-- Header du modal -->
            <div class="flex items-center justify-between p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800">
                    <i class="fas fa-eye text-blue-600 mr-2"></i>
                    Aperçu du modèle
                </h3>
                <button onclick="closePreviewModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Contenu du modal -->
            <div id="previewContent" class="p-6">
                <!-- Le contenu sera chargé dynamiquement -->
            </div>
        </div>
    </div>
</div>

<script>
function previewTemplate(templateKey) {
    // Ouvrir modal et charger l'aperçu
    document.getElementById('previewModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Charger l'aperçu via AJAX
    fetch(`{{ path('app_survey_preview_template', {templateKey: '__TEMPLATE_KEY__'}) }}`.replace('__TEMPLATE_KEY__', templateKey))
        .then(response => response.text())
        .then(html => {
            document.getElementById('previewContent').innerHTML = html;
        })
        .catch(error => {
            console.error('Erreur:', error);
            document.getElementById('previewContent').innerHTML = '<p class="text-red-600">Erreur lors du chargement de l\'aperçu</p>';
        });
}

function createFromTemplate(templateKey) {
    window.location.href = `{{ path('app_survey_create_from_template', {templateKey: '__TEMPLATE_KEY__'}) }}`.replace('__TEMPLATE_KEY__', templateKey);
}

function closePreviewModal() {
    document.getElementById('previewModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
}

// Fermer le modal en cliquant à l'extérieur
document.getElementById('previewModal').addEventListener('click', function(e) {
    if (e.target === this) {
        closePreviewModal();
    }
});

// Fermer le modal avec la touche Escape
document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && !document.getElementById('previewModal').classList.contains('hidden')) {
        closePreviewModal();
    }
});
</script>

{% endblock %}