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

{% block title %}Rapports et Analyses - Clinique Les Genêts{% endblock %}

{% block page_title %}Rapports et Analyses{% 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">Tableaux de bord et rapports</h2>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="previewReport('general')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-eye mr-2"></i>
                Prévisualiser
            </button>
            <button class="bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-download mr-2"></i>
                Exporter
            </button>
        </div>
    </div>

    <!-- Sélection de période -->
    <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">Période :</label>
                <select class="border border-gray-300 rounded-md px-3 py-1 text-sm">
                    <option value="today">Aujourd'hui</option>
                    <option value="week" selected>Cette semaine</option>
                    <option value="month">Ce mois</option>
                    <option value="quarter">Ce trimestre</option>
                    <option value="year">Cette année</option>
                    <option value="custom">Personnalisée</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Du :</label>
                <input type="date" class="border border-gray-300 rounded-md px-3 py-1 text-sm" value="{{ 'now'|date('Y-01-01') }}">
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Au :</label>
                <input type="date" class="border border-gray-300 rounded-md px-3 py-1 text-sm" value="{{ 'now'|date('Y-m-d') }}">
            </div>
            <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-1 rounded-md text-sm">
                Actualiser
            </button>
        </div>
    </div>

    <!-- Indicateurs clés -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Tâches complétées</p>
                    <p class="text-2xl font-bold text-green-600">{{ stats.tasks_completed }}</p>
                    <p class="text-xs {% if stats.completion_improvement >= 0 %}text-green-600{% else %}text-red-600{% endif %}">
                        {% if stats.completion_improvement >= 0 %}+{% endif %}{{ stats.completion_improvement }}% vs mois précédent
                    </p>
                </div>
                <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-check-circle text-green-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Projets en cours</p>
                    <p class="text-2xl font-bold text-blue-600">{{ stats.projects_in_progress }}</p>
                    <p class="text-xs text-blue-600">{{ stats.projects_new_this_month }} nouveaux ce mois</p>
                </div>
                <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-project-diagram text-blue-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Satisfaction moyenne</p>
                    <p class="text-2xl font-bold text-yellow-600">{{ stats.satisfaction_average }}/5</p>
                    <p class="text-xs text-yellow-600">{{ stats.satisfaction_responses }} réponses</p>
                </div>
                <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-star text-yellow-600 text-xl"></i>
                </div>
            </div>
        </div>

        <div class="bg-white rounded-lg p-6 border border-gray-200 card-hover">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-600">Taux de completion</p>
                    <p class="text-2xl font-bold text-purple-600">{{ stats.completion_rate }}%</p>
                    <p class="text-xs {% if stats.completion_improvement >= 0 %}text-purple-600{% else %}text-red-600{% endif %}">
                        {% if stats.completion_improvement >= 0 %}+{% endif %}{{ stats.completion_improvement }}% ce mois
                    </p>
                </div>
                <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
                    <i class="fas fa-chart-line text-purple-600 text-xl"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- Types de rapports -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Rapports opérationnels -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-chart-bar text-blue-600 mr-2"></i>
                    Rapports Opérationnels
                </h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-tasks text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Suivi des Tâches</h4>
                            <p class="text-sm text-gray-500">Performance par équipe et service</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('task_tracking')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('task_tracking', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-project-diagram text-blue-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Avancement Projets</h4>
                            <p class="text-sm text-gray-500">Statut et progression détaillée</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('project_progress')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('project_progress', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-clock text-orange-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Temps de Réalisation</h4>
                            <p class="text-sm text-gray-500">Analyse des délais et efficacité</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('completion_time')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('completion_time', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-exclamation-triangle text-red-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Tâches en Retard</h4>
                            <p class="text-sm text-gray-500">Identification des blocages</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('overdue_tasks')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('overdue_tasks', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>

        <!-- Rapports qualité -->
        <div class="bg-white rounded-lg border border-gray-200">
            <div class="p-6 border-b border-gray-200">
                <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                    <i class="fas fa-star text-yellow-600 mr-2"></i>
                    Rapports Qualité
                </h3>
            </div>
            <div class="p-6 space-y-4">
                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-poll text-purple-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Satisfaction Patients</h4>
                            <p class="text-sm text-gray-500">Analyse des enquêtes par service</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('patient_satisfaction')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('patient_satisfaction', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-award text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Indicateurs Qualité</h4>
                            <p class="text-sm text-gray-500">KPI et standards HAS</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('quality_indicators')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('quality_indicators', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-comments text-blue-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Retours Patients</h4>
                            <p class="text-sm text-gray-500">Commentaires et suggestions</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('patient_feedback')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('patient_feedback', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>

                <div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center">
                        <i class="fas fa-trending-up text-green-600 mr-3"></i>
                        <div>
                            <h4 class="font-medium text-gray-800">Évolution Qualité</h4>
                            <p class="text-sm text-gray-500">Tendances et améliorations</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <button onclick="previewReport('quality_evolution')" class="text-blue-600 hover:text-blue-800 p-1" title="Prévisualiser">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button onclick="downloadReport('quality_evolution', 'pdf')" class="text-green-600 hover:text-green-800 p-1" title="Télécharger PDF">
                            <i class="fas fa-download"></i>
                        </button>
                        <i class="fas fa-chevron-right text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Rapports pré-générés -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="p-6 border-b border-gray-200">
            <h3 class="text-lg font-semibold text-gray-800 flex items-center">
                <i class="fas fa-file-alt text-gray-600 mr-2"></i>
                Rapports Pré-générés
            </h3>
        </div>
        <div class="p-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Hebdomadaire</h4>
                        <span class="text-xs bg-green-100 text-green-700 px-2 py-1 rounded">Nouveau</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Synthèse des activités de la semaine</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date('d/m/Y H:i') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('weekly')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('weekly', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Mensuel</h4>
                        <span class="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded">Récent</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Bilan mensuel des performances</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date_modify('-1 week')|date('d/m/Y') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('monthly')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('monthly', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="border border-gray-200 rounded-lg p-4 hover:bg-gray-50 cursor-pointer">
                    <div class="flex items-center justify-between mb-3">
                        <h4 class="font-medium text-gray-800">Rapport Annuel</h4>
                        <span class="text-xs bg-gray-100 text-gray-700 px-2 py-1 rounded">Archivé</span>
                    </div>
                    <p class="text-sm text-gray-600 mb-3">Synthèse annuelle complète</p>
                    <div class="flex items-center justify-between text-xs text-gray-500">
                        <span>{{ 'now'|date_modify('-1 month')|date('d/m/Y') }}</span>
                        <div class="flex items-center space-x-2">
                            <button onclick="previewReport('annual')" class="text-blue-600 hover:text-blue-800" title="Prévisualiser">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button onclick="downloadReport('annual', 'pdf')" class="text-green-600 hover:text-green-800" title="Télécharger PDF">
                                <i class="fas fa-download"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Graphiques de synthèse -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Évolution des Tâches -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-blue-500 to-indigo-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-line text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800">Évolution des Tâches</h3>
                            <p class="text-sm text-gray-500">7 derniers jours</p>
                        </div>
                    </div>
                    <div class="flex items-center space-x-2">
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            <i class="fas fa-arrow-up mr-1"></i>
                            +12%
                        </span>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-64 relative">
                    <canvas id="tasksEvolutionChart" class="w-full h-full"></canvas>
                </div>
                <div class="mt-4 flex items-center justify-between text-sm text-gray-600">
                    <span>Tendance: Croissante</span>
                    <span class="flex items-center">
                        <div class="w-3 h-3 bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full mr-2"></div>
                        Tâches complétées
                    </span>
                </div>
            </div>
        </div>

        <!-- Répartition par Statut -->
        <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-lg transition-shadow duration-300">
            <div class="p-6 border-b border-gray-100">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-600 rounded-lg flex items-center justify-center">
                            <i class="fas fa-chart-pie text-white text-lg"></i>
                        </div>
                        <div>
                            <h3 class="text-lg font-semibold text-gray-800">Répartition par Statut</h3>
                            <p class="text-sm text-gray-500">État actuel des tâches</p>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-2xl font-bold text-gray-800" id="totalTasksCount">0</div>
                        <div class="text-xs text-gray-500">Total tâches</div>
                    </div>
                </div>
            </div>
            <div class="p-6">
                <div class="h-64 relative flex items-center justify-center">
                    <canvas id="statusDistributionChart" class="w-full h-full"></canvas>
                </div>
                <div class="mt-6 grid grid-cols-2 gap-4">
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">Complétées</span>
                        <span class="text-sm font-medium text-gray-800" id="completedCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-blue-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">En cours</span>
                        <span class="text-sm font-medium text-gray-800" id="inProgressCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-gray-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">À faire</span>
                        <span class="text-sm font-medium text-gray-800" id="todoCount">0</span>
                    </div>
                    <div class="flex items-center space-x-2">
                        <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
                        <span class="text-sm text-gray-600">En révision</span>
                        <span class="text-sm font-medium text-gray-800" id="reviewCount">0</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal de prévisualisation des rapports -->
<div id="reportModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
        <div class="mt-3">
            <!-- Header du modal -->
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-900">Prévisualisation du Rapport</h3>
                <div class="flex items-center space-x-2">
                    <button id="downloadFromModal" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm">
                        <i class="fas fa-download mr-2"></i>Télécharger PDF
                    </button>
                    <button onclick="closeReportModal()" class="text-gray-400 hover:text-gray-600">
                        <i class="fas fa-times text-xl"></i>
                    </button>
                </div>
            </div>
            
            <!-- Contenu du rapport -->
            <div id="reportContent" class="border border-gray-200 rounded-lg p-4 max-h-96 overflow-y-auto bg-gray-50">
                <div class="text-center py-8">
                    <i class="fas fa-spinner fa-spin text-3xl text-gray-400 mb-2"></i>
                    <p class="text-gray-500">Chargement du rapport...</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Chart.js et Scripts des Rapports -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js" integrity="sha512-6HrPqAvK+lZElIZ4mZ64fyxIBTsaX5zAFZg2V/2WT+iKPrFzTzvx6QAsLW2OaLwobhMYBog/+bvmIEEGXi0p1w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="{{ asset('js/reports.js') }}"></script>

<script>
// Initialiser les graphiques avec les données du contrôleur  
document.addEventListener('DOMContentLoaded', function() {
    const chartData = {
        tasks_evolution: {{ charts.tasks_evolution|default('{}')|json_encode|raw }},
        status_distribution: {{ charts.status_distribution|default('{}')|json_encode|raw }}
    };
    
    // Appeler la fonction d'initialisation des graphiques
    if (typeof initializeCharts === 'function') {
        initializeCharts(chartData);
    }
});
</script>
{% endblock %}