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

{% block title %}Enquêtes de Satisfaction - Clinique Les Genêts{% endblock %}

{% block page_title %}Enquêtes de Satisfaction{% 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">Enquêtes de satisfaction</h2>
            <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm font-medium">
                {{ surveys|length }} enquête{{ surveys|length > 1 ? 's' : '' }}
            </span>
        </div>
        <div class="flex items-center space-x-3">
            <a href="{{ path('app_survey_templates') }}" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-template mr-2"></i>
                Modèles d'enquêtes
            </a>
            <button onclick="showCreateOptions()" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i>
                Nouvelle enquête
            </button>
        </div>
    </div>

    <!-- Statistiques globales -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
        {% set totalResponses = 0 %}
        {% set totalTarget = 0 %}
        {% set activeSurveys = 0 %}
        {% set averageRating = 0 %}
        {% set ratingsCount = 0 %}
        
        {% for survey in surveys %}
            {% set totalResponses = totalResponses + survey.currentResponses %}
            {% set totalTarget = totalTarget + survey.targetResponses %}
            {% if survey.status == 'active' %}
                {% set activeSurveys = activeSurveys + 1 %}
            {% endif %}
            {% if survey.averageRating %}
                {% set averageRating = averageRating + survey.averageRating %}
                {% set ratingsCount = ratingsCount + 1 %}
            {% endif %}
        {% endfor %}

        <div class="bg-white rounded-lg p-4 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Réponses totales</p>
                    <p class="text-2xl font-bold text-purple-600">{{ totalResponses }}</p>
                </div>
                <i class="fas fa-comments text-purple-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg p-4 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Enquêtes actives</p>
                    <p class="text-2xl font-bold text-blue-600">{{ activeSurveys }}</p>
                </div>
                <i class="fas fa-poll text-blue-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg p-4 border border-gray-200">
            <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-green-600">
                        {% if totalTarget > 0 %}
                            {{ ((totalResponses / totalTarget) * 100)|round }}%
                        {% else %}
                            0%
                        {% endif %}
                    </p>
                </div>
                <i class="fas fa-chart-line text-green-400 text-2xl"></i>
            </div>
        </div>

        <div class="bg-white rounded-lg p-4 border border-gray-200">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Note moyenne</p>
                    <p class="text-2xl font-bold text-yellow-600">
                        {% if ratingsCount > 0 %}
                            {{ (averageRating / ratingsCount)|round(1) }}/5
                        {% else %}
                            -
                        {% endif %}
                    </p>
                </div>
                <i class="fas fa-star text-yellow-400 text-2xl"></i>
            </div>
        </div>
    </div>

    <!-- Filtres -->
    <div class="bg-white rounded-lg border border-gray-200 p-4">
        <div class="flex flex-wrap items-center gap-4">
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Statut :</label>
                <select class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                    <option value="">Toutes</option>
                    <option value="draft">Brouillon</option>
                    <option value="active">Active</option>
                    <option value="completed">Terminée</option>
                    <option value="cancelled">Annulée</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Créée par :</label>
                <select class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                    <option value="">Tous</option>
                    {% set creators = [] %}
                    {% for survey in surveys %}
                        {% if survey.createdBy and survey.createdBy not in creators %}
                            {% set creators = creators|merge([survey.createdBy]) %}
                            <option value="{{ survey.createdBy.id }}">{{ survey.createdBy.firstName }} {{ survey.createdBy.lastName }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
        </div>
    </div>

    <!-- Liste des enquêtes -->
    {% if surveys is empty %}
        <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
            <i class="fas fa-poll text-gray-300 text-6xl mb-4"></i>
            <h3 class="text-xl font-medium text-gray-600 mb-2">Aucune enquête trouvée</h3>
            <p class="text-gray-500 mb-6">Créez votre première enquête de satisfaction</p>
            <button class="bg-purple-600 hover:bg-purple-700 text-white px-6 py-3 rounded-lg inline-flex items-center">
                <i class="fas fa-plus mr-2"></i>
                Créer une enquête
            </button>
        </div>
    {% else %}
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
            {% for survey in surveys %}
                <div class="bg-white rounded-lg border border-gray-200 p-6 card-hover">
                    <!-- Header -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ survey.title }}</h3>
                            <p class="text-sm text-gray-600">{{ survey.description }}</p>
                        </div>
                        <div class="ml-4">
                            <span class="px-2 py-1 rounded-full text-xs font-medium
                                {% if survey.status == 'active' %}bg-green-100 text-green-700
                                {% elseif survey.status == 'completed' %}bg-blue-100 text-blue-700
                                {% elseif survey.status == 'draft' %}bg-gray-100 text-gray-700
                                {% elseif survey.status == 'cancelled' %}bg-red-100 text-red-700
                                {% else %}bg-gray-100 text-gray-700{% endif %}">
                                {% if survey.status == 'active' %}Active
                                {% elseif survey.status == 'completed' %}Terminée
                                {% elseif survey.status == 'draft' %}Brouillon
                                {% elseif survey.status == 'cancelled' %}Annulée
                                {% else %}{{ survey.status|title }}{% endif %}
                            </span>
                        </div>
                    </div>

                    <!-- Progression des réponses -->
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">Réponses reçues</span>
                            <span class="text-sm text-gray-600">{{ survey.currentResponses }}/{{ survey.targetResponses }}</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            {% set progressPercentage = survey.targetResponses > 0 ? (survey.currentResponses / survey.targetResponses * 100) : 0 %}
                            <div class="bg-purple-500 h-2 rounded-full transition-all duration-300" 
                                 style="width: {{ progressPercentage > 100 ? 100 : progressPercentage }}%"></div>
                        </div>
                        {% if progressPercentage > 100 %}
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-check-circle mr-1"></i>
                                Objectif dépassé !
                            </p>
                        {% endif %}
                    </div>

                    <!-- Note moyenne -->
                    {% if survey.averageRating %}
                        <div class="mb-4">
                            <div class="flex items-center justify-between">
                                <span class="text-sm font-medium text-gray-700">Note moyenne</span>
                                <div class="flex items-center">
                                    <div class="flex items-center mr-2">
                                        {% for i in 1..5 %}
                                            <i class="fas fa-star text-sm {{ i <= survey.averageRating ? 'text-yellow-400' : 'text-gray-300' }}"></i>
                                        {% endfor %}
                                    </div>
                                    <span class="text-sm font-medium text-gray-800">{{ survey.averageRating|round(1) }}/5</span>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Informations -->
                    <div class="space-y-3 mb-4">
                        {% if survey.expiryDate %}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Expire le :</span>
                                <span class="text-sm text-gray-700 {{ survey.expiryDate < date() ? 'text-red-600 font-medium' : '' }}">
                                    {{ survey.expiryDate|date('d/m/Y') }}
                                    {% if survey.expiryDate < date() %}
                                        <i class="fas fa-exclamation-triangle ml-1"></i>
                                    {% endif %}
                                </span>
                            </div>
                        {% endif %}

                        {% if survey.createdBy %}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Créée par :</span>
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center mr-2">
                                        <span class="text-xs font-medium text-white">
                                            {{ survey.createdBy.firstName|slice(0,1) }}{{ survey.createdBy.lastName|slice(0,1) }}
                                        </span>
                                    </div>
                                    <span class="text-sm text-gray-700">{{ survey.createdBy.firstName }} {{ survey.createdBy.lastName }}</span>
                                </div>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                        <div class="flex items-center space-x-3">
                            <a href="{{ path('app_survey_results', {id: survey.id}) }}" class="text-blue-600 hover:text-blue-800 text-sm flex items-center" title="Voir les résultats">
                                <i class="fas fa-chart-bar mr-1"></i>
                                Résultats
                            </a>
                            {% if survey.status == 'draft' %}
                                <a href="#" class="text-gray-600 hover:text-gray-800 text-sm flex items-center" title="Modifier">
                                    <i class="fas fa-edit mr-1"></i>
                                    Modifier
                                </a>
                            {% endif %}
                            {% if survey.status == 'active' %}
                                <button onclick="shareSurvey('{{ url('app_survey_public', {surveyLink: survey.surveyLink}) }}')" 
                                        class="text-green-600 hover:text-green-800 text-sm flex items-center" title="Partager">
                                    <i class="fas fa-share mr-1"></i>
                                    Partager
                                </button>
                            {% endif %}
                        </div>
                        
                        <a href="{{ path('app_survey_manage', {id: survey.id}) }}" 
                           class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                            <i class="fas fa-cog mr-1"></i>
                            Gérer
                        </a>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    <!-- Section modèles d'enquêtes -->
    {% if templates|length > 0 %}
        <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">Modèles d'enquêtes disponibles</h3>
                <a href="{{ path('app_survey_templates') }}" class="text-blue-600 hover:text-blue-800 text-sm font-medium">
                    Voir tous les modèles <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-4">
                {% for template in templates|slice(0, 4) %}
                    <div class="border border-gray-200 rounded-lg p-4 hover:border-gray-300 cursor-pointer transition-colors"
                         onclick="createFromTemplate('{{ template.templateKey }}')">
                        <div class="text-center">
                            <div class="w-12 h-12 
                                {% 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-2">
                                <span class="text-lg">{{ template.icon }}</span>
                            </div>
                            <h4 class="font-medium text-gray-800 mb-1">{{ template.title }}</h4>
                            <p class="text-xs text-gray-600 mb-2">{{ template.sections|length }} sections</p>
                            <button class="text-xs 
                                {% if template.color == 'blue' %}text-blue-600 hover:text-blue-800
                                {% elseif template.color == 'green' %}text-green-600 hover:text-green-800
                                {% elseif template.color == 'purple' %}text-purple-600 hover:text-purple-800
                                {% elseif template.color == 'orange' %}text-orange-600 hover:text-orange-800
                                {% else %}text-gray-600 hover:text-gray-800{% endif %}
                                font-medium">
                                Utiliser ce modèle
                            </button>
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>
    {% endif %}
</div>

<!-- Modal de création d'enquête -->
<div id="createSurveyModal" 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-md">
            <!-- 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-plus-circle text-purple-600 mr-2"></i>
                    Créer une nouvelle enquête
                </h3>
                <button onclick="closeCreateModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Options de création -->
            <div class="p-6 space-y-4">
                <div class="text-center">
                    <p class="text-gray-600 mb-4">Comment souhaitez-vous créer votre enquête ?</p>
                </div>
                
                <div class="space-y-3">
                    <button onclick="redirectToTemplates()" 
                            class="w-full p-4 border border-gray-200 rounded-lg hover:border-blue-300 hover:bg-blue-50 text-left transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-template text-blue-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">À partir d'un modèle</h4>
                                <p class="text-sm text-gray-600">Utilisez un modèle préconçu</p>
                            </div>
                        </div>
                    </button>
                    
                    <button onclick="createCustomSurvey()" 
                            class="w-full p-4 border border-gray-200 rounded-lg hover:border-purple-300 hover:bg-purple-50 text-left transition-colors">
                        <div class="flex items-center">
                            <div class="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center mr-3">
                                <i class="fas fa-pen-alt text-purple-600"></i>
                            </div>
                            <div>
                                <h4 class="font-medium text-gray-800">Enquête personnalisée</h4>
                                <p class="text-sm text-gray-600">Créez votre propre enquête</p>
                            </div>
                        </div>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function showCreateOptions() {
    document.getElementById('createSurveyModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
}

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

function redirectToTemplates() {
    window.location.href = '{{ path("app_survey_templates") }}';
}

function createCustomSurvey() {
    window.location.href = '{{ path("app_survey_create_custom") }}';
}

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

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

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

// Fonction de partage d'enquête
function shareSurvey(url) {
    // Créer un modal de partage temporaire
    const shareText = `Participez à notre enquête de satisfaction : ${url}`;
    
    if (navigator.share) {
        navigator.share({
            title: 'Enquête de satisfaction',
            text: shareText,
            url: url
        });
    } else {
        // Fallback : copier dans le presse-papier
        navigator.clipboard.writeText(shareText).then(() => {
            alert('Lien copié dans le presse-papier !');
        }).catch(() => {
            prompt('Copiez ce lien :', url);
        });
    }
}
</script>

{% endblock %}