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

{% block title %}Tableau de Bord - Clinique Les Genêts{% endblock %}

{% block page_title %}Tableau de Bord{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Welcome Section -->
    <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-lg p-6 text-white">
        <div class="flex items-center justify-between">
            <div>
                <h2 class="text-2xl font-bold mb-2">Bienvenue dans votre Tableau de Bord</h2>
                <p class="text-blue-100">Clinique Les Genêts - {{ "now"|date("d/m/Y à H:i") }}</p>
            </div>
            <div class="text-right">
                <div class="text-3xl font-bold">{{ stats.task_completion_rate }}%</div>
                <div class="text-blue-100">Tâches complétées</div>
            </div>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
        <!-- Total Tasks -->
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">Tâches</h3>
                    <p class="text-3xl font-bold text-blue-600">{{ stats.total_tasks }}</p>
                    <p class="text-sm text-gray-500">{{ stats.completed_tasks }} terminées</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-tasks text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Projects -->
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">Projets</h3>
                    <p class="text-3xl font-bold text-green-600">{{ stats.total_projects }}</p>
                    <p class="text-sm text-gray-500">En cours</p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-project-diagram text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Surveys -->
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">Enquêtes</h3>
                    <p class="text-3xl font-bold text-purple-600">{{ stats.active_surveys }}</p>
                    <p class="text-sm text-gray-500">Actives</p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-poll text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>

        <!-- Overdue Tasks -->
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <h3 class="text-lg font-semibold text-gray-800">En retard</h3>
                    <p class="text-3xl font-bold text-red-600">{{ overdue_tasks|length }}</p>
                    <p class="text-sm text-gray-500">Tâches urgentes</p>
                </div>
                <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-exclamation-triangle text-red-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Today's Tasks -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800">Tâches du jour</h3>
                    <a href="{{ path('app_task_index') }}" class="text-blue-600 hover:text-blue-800 text-sm">
                        Voir toutes <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
            <div class="p-6">
                {% if today_tasks is empty %}
                    <div class="text-center py-8">
                        <i class="fas fa-check-circle text-green-500 text-4xl mb-4"></i>
                        <p class="text-gray-500">Aucune tâche prévue pour aujourd'hui</p>
                    </div>
                {% else %}
                    <div class="space-y-3">
                        {% for task in today_tasks|slice(0, 5) %}
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex items-center">
                                    <div class="w-3 h-3 rounded-full mr-3 priority-{{ task.priority }}"></div>
                                    <div>
                                        <p class="font-medium text-gray-800">{{ task.title }}</p>
                                        <p class="text-sm text-gray-500">
                                            {% if task.dueDate %}
                                                <i class="fas fa-clock mr-1"></i>
                                                {{ task.dueDate|date('H:i') }}
                                            {% endif %}
                                            {% if task.category %}
                                                <span class="ml-2 text-xs bg-gray-200 px-2 py-1 rounded">{{ task.category.name }}</span>
                                            {% endif %}
                                        </p>
                                    </div>
                                </div>
                                <span class="status-{{ task.status }} px-2 py-1 rounded-full text-xs font-medium">
                                    {{ task.statusLabel }}
                                </span>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Active Projects -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800">Projets en cours</h3>
                    <a href="{{ path('app_project_index') }}" class="text-blue-600 hover:text-blue-800 text-sm">
                        Voir tous <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
            <div class="p-6">
                {% if active_projects is empty %}
                    <div class="text-center py-8">
                        <i class="fas fa-folder-open text-gray-400 text-4xl mb-4"></i>
                        <p class="text-gray-500">Aucun projet actif</p>
                    </div>
                {% else %}
                    <div class="space-y-4">
                        {% for project in active_projects %}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between mb-2">
                                    <h4 class="font-medium text-gray-800">{{ project.name }}</h4>
                                    <span class="text-sm text-gray-500">{{ project.progress }}%</span>
                                </div>
                                <div class="w-full bg-gray-200 rounded-full h-2 mb-2">
                                    <div class="bg-blue-600 h-2 rounded-full" style="width: {{ project.progress }}%"></div>
                                </div>
                                <div class="flex items-center justify-between text-sm text-gray-500">
                                    <span>{{ project.status|title }}</span>
                                    {% if project.endDate %}
                                        <span><i class="fas fa-calendar mr-1"></i>{{ project.endDate|date('d/m/Y') }}</span>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <!-- Recent Surveys -->
    {% if recent_surveys is not empty %}
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800">Enquêtes actives</h3>
                    <a href="{{ path('app_survey_index') }}" class="text-blue-600 hover:text-blue-800 text-sm">
                        Voir toutes <i class="fas fa-arrow-right ml-1"></i>
                    </a>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                    {% for survey in recent_surveys %}
                        <div class="border border-gray-200 rounded-lg p-4">
                            <h4 class="font-medium text-gray-800 mb-2">{{ survey.title }}</h4>
                            <div class="text-sm text-gray-600 mb-3">{{ survey.status|title }}</div>
                            <div class="flex items-center justify-between">
                                <div class="text-xs text-gray-500">
                                    {{ survey.currentResponses }}/{{ survey.targetResponses }} réponses
                                </div>
                                {% if survey.averageRating %}
                                    <div class="flex items-center">
                                        <i class="fas fa-star text-yellow-400 mr-1"></i>
                                        <span class="text-sm font-medium">{{ survey.averageRating|round(1) }}</span>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Quick Actions -->
    <div class="bg-white rounded-lg border border-gray-200 p-6">
        <h3 class="text-lg font-semibold text-gray-800 mb-4">Actions rapides</h3>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <a href="{{ path('app_task_index') }}" class="flex flex-col items-center p-4 bg-blue-50 rounded-lg hover:bg-blue-100 transition-colors">
                <i class="fas fa-plus text-blue-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-blue-800">Nouvelle tâche</span>
            </a>
            <a href="{{ path('app_project_index') }}" class="flex flex-col items-center p-4 bg-green-50 rounded-lg hover:bg-green-100 transition-colors">
                <i class="fas fa-folder-plus text-green-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-green-800">Nouveau projet</span>
            </a>
            <a href="{{ path('app_survey_index') }}" class="flex flex-col items-center p-4 bg-purple-50 rounded-lg hover:bg-purple-100 transition-colors">
                <i class="fas fa-poll text-purple-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-purple-800">Nouvelle enquête</span>
            </a>
            <a href="{{ path('app_report_index') }}" class="flex flex-col items-center p-4 bg-orange-50 rounded-lg hover:bg-orange-100 transition-colors">
                <i class="fas fa-chart-line text-orange-600 text-2xl mb-2"></i>
                <span class="text-sm font-medium text-orange-800">Voir rapports</span>
            </a>
        </div>
    </div>
</div>
{% endblock %}