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

{% block title %}Gestion des Projets - Clinique Les Genêts{% endblock %}

{% block page_title %}Gestion des Projets{% 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">Gestion des projets</h2>
            <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                {{ allProjects|length }} projet{{ allProjects|length > 1 ? 's' : '' }} au total
            </span>
        </div>
        <div class="flex items-center space-x-3">
            <button onclick="openProjectModal()" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg flex items-center">
                <i class="fas fa-plus mr-2"></i>
                Nouveau projet
            </button>
        </div>
    </div>

    <!-- Onglets de navigation -->
    <div class="bg-white rounded-lg border border-gray-200 p-1">
        <div class="flex space-x-1">
            <button onclick="switchTab('active')" id="activeTab" class="tab-button flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 bg-blue-600 text-white">
                <i class="fas fa-play-circle mr-2"></i>
                Projets en cours
                <span class="ml-2 bg-blue-500 text-white px-2 py-1 rounded-full text-xs">{{ activeProjects|length }}</span>
            </button>
            <button onclick="switchTab('completed')" id="completedTab" class="tab-button flex-1 px-4 py-2 text-sm font-medium rounded-md transition-colors duration-200 text-gray-600 hover:text-gray-800 hover:bg-gray-100">
                <i class="fas fa-check-circle mr-2"></i>
                Projets terminés
                <span class="ml-2 bg-gray-500 text-white px-2 py-1 rounded-full text-xs">{{ completedProjects|length }}</span>
            </button>
        </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">Chef de projet :</label>
                <select id="managerFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm" onchange="filterProjects()">
                    <option value="">Tous</option>
                    {% set managers = [] %}
                    {% for project in allProjects %}
                        {% if project.projectManager and project.projectManager not in managers %}
                            {% set managers = managers|merge([project.projectManager]) %}
                            <option value="{{ project.projectManager.id }}">{{ project.projectManager.firstName }} {{ project.projectManager.lastName }}</option>
                        {% endif %}
                    {% endfor %}
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <label class="text-sm font-medium text-gray-700">Priorité :</label>
                <select id="priorityFilter" class="border border-gray-300 rounded-md px-3 py-1 text-sm" onchange="filterProjects()">
                    <option value="">Toutes</option>
                    <option value="low">Basse</option>
                    <option value="medium">Moyenne</option>
                    <option value="high">Haute</option>
                    <option value="critical">Critique</option>
                </select>
            </div>
            <div class="flex items-center space-x-2">
                <input type="text" id="searchFilter" placeholder="Rechercher un projet..." class="border border-gray-300 rounded-md px-3 py-1 text-sm" onkeyup="filterProjects()">
            </div>
        </div>
    </div>

    <!-- Contenu des onglets -->
    
    <!-- Onglet Projets Actifs -->
    <div id="activeProjectsTab" class="tab-content">
        {% if activeProjects is empty %}
            <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                <i class="fas fa-play-circle text-blue-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucun projet actif</h3>
                <p class="text-gray-500 mb-6">Commencez par créer votre premier projet</p>
                <button onclick="openProjectModal()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg inline-flex items-center">
                    <i class="fas fa-plus mr-2"></i>
                    Créer un projet
                </button>
            </div>
        {% else %}
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                {% for project in activeProjects %}
                <div class="bg-white rounded-lg border border-gray-200 p-6 card-hover">
                    <!-- Header du projet -->
                    <div class="flex items-start justify-between mb-4">
                        <div class="flex-1">
                            <h3 class="text-lg font-semibold text-gray-800 mb-2">{{ project.name }}</h3>
                            <p class="text-sm text-gray-600 line-clamp-2">{{ project.description }}</p>
                        </div>
                        <div class="ml-4">
                            <div class="dropdown relative">
                                <button class="text-gray-400 hover:text-gray-600 p-2">
                                    <i class="fas fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- Statut et progression -->
                    <div class="mb-4">
                        <div class="flex items-center justify-between mb-2">
                            <span class="text-sm font-medium text-gray-700">Progression</span>
                            <span class="text-sm text-gray-600">{{ project.progress }}%</span>
                        </div>
                        <div class="w-full bg-gray-200 rounded-full h-2">
                            <div class="bg-green-500 h-2 rounded-full transition-all duration-300" 
                                 style="width: {{ project.progress }}%"></div>
                        </div>
                    </div>

                    <!-- Informations du projet -->
                    <div class="space-y-3 mb-4">
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Statut :</span>
                            <span class="px-2 py-1 rounded-full text-xs font-medium
                                {% if project.status == 'completed' %}bg-green-100 text-green-700
                                {% elseif project.status == 'in_progress' %}bg-blue-100 text-blue-700
                                {% elseif project.status == 'on_hold' %}bg-yellow-100 text-yellow-700
                                {% elseif project.status == 'cancelled' %}bg-red-100 text-red-700
                                {% else %}bg-gray-100 text-gray-700{% endif %}">
                                {% if project.status == 'in_progress' %}En cours
                                {% elseif project.status == 'completed' %}Terminé
                                {% elseif project.status == 'on_hold' %}En pause
                                {% elseif project.status == 'cancelled' %}Annulé
                                {% elseif project.status == 'planning' %}Planification
                                {% else %}{{ project.status|title }}{% endif %}
                            </span>
                        </div>

                        {% if project.budget %}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Budget :</span>
                                <span class="text-sm font-medium text-gray-700">{{ project.budget|number_format(0, ',', ' ') }} FCFA</span>
                            </div>
                        {% endif %}

                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Début :</span>
                            <span class="text-sm text-gray-700">{{ project.startDate|date('d/m/Y') }}</span>
                        </div>

                        {% if project.endDate %}
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Fin prévue :</span>
                                <span class="text-sm text-gray-700">{{ project.endDate|date('d/m/Y') }}</span>
                            </div>
                        {% endif %}
                    </div>

                    <!-- Chef de projet -->
                    {% if project.projectManager %}
                        <div class="mb-4">
                            <div class="flex items-center">
                                <div class="w-8 h-8 bg-blue-500 rounded-full flex items-center justify-center mr-2">
                                    <span class="text-xs font-medium text-white">
                                        {{ project.projectManager.firstName|slice(0,1) }}{{ project.projectManager.lastName|slice(0,1) }}
                                    </span>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-gray-800">{{ project.projectManager.firstName }} {{ project.projectManager.lastName }}</p>
                                    <p class="text-xs text-gray-500">Chef de projet</p>
                                </div>
                            </div>
                        </div>
                    {% endif %}

                    <!-- Équipe -->
                    {% if project.teamMembers|length > 0 %}
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">Équipe</span>
                                <span class="text-xs text-gray-500">{{ project.teamMembers|length }} membre{{ project.teamMembers|length > 1 ? 's' : '' }}</span>
                            </div>
                            <div class="flex -space-x-2">
                                {% for member in project.teamMembers|slice(0, 5) %}
                                    <div class="w-6 h-6 bg-gray-400 rounded-full flex items-center justify-center border-2 border-white" 
                                         title="{{ member.firstName }} {{ member.lastName }}">
                                        <span class="text-xs font-medium text-white">
                                            {{ member.firstName|slice(0,1) }}{{ member.lastName|slice(0,1) }}
                                        </span>
                                    </div>
                                {% endfor %}
                                {% if project.teamMembers|length > 5 %}
                                    <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
                                        <span class="text-xs text-gray-600">+{{ project.teamMembers|length - 5 }}</span>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                    {% endif %}

                    <!-- Actions -->
                    <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                        <div class="flex items-center space-x-2">
                            <a href="{{ path('app_project_show', {id: project.id}) }}" class="text-blue-600 hover:text-blue-800 p-2" title="Voir les détails">
                                <i class="fas fa-eye"></i>
                            </a>
                            {% if canEditProjects and (isAdmin or (project.projectManager and project.projectManager.id == currentUser.id)) %}
                                <button onclick="openEditProjectModal({{ project.id }}, '{{ project.name|e('js') }}', '{{ project.description|e('js') }}', '{{ project.status }}', '{{ project.priority }}', '{{ project.startDate ? project.startDate|date('Y-m-d') : '' }}', '{{ project.endDate ? project.endDate|date('Y-m-d') : '' }}', '{{ project.budget ?: '' }}', '{{ project.projectManager ? project.projectManager.id : '' }}', {{ project.progress ?: 0 }}, [{% for member in project.teamMembers %}{{ member.id }}{% if not loop.last %},{% endif %}{% endfor %}])" class="text-gray-600 hover:text-gray-800 p-2" title="Modifier">
                                    <i class="fas fa-edit"></i>
                                </button>
                            {% else %}
                                <button onclick="showEditPermissionDeniedMessage()" class="text-gray-400 p-2 cursor-not-allowed" title="Vous n'avez pas les permissions pour modifier ce projet" disabled>
                                    <i class="fas fa-edit"></i>
                                </button>
                            {% endif %}
                            {% if canDeleteProjects %}
                                <form method="post" action="{{ path('app_project_delete', {id: project.id}) }}" style="display: inline;" onsubmit="return confirm('Êtes-vous sûr de vouloir supprimer ce projet ?')">
                                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ project.id) }}">
                                    <button type="submit" class="text-red-600 hover:text-red-800 p-2" title="Supprimer">
                                        <i class="fas fa-trash"></i>
                                    </button>
                                </form>
                            {% else %}
                                <button onclick="showDeletePermissionDeniedMessage()" class="text-gray-400 p-2 cursor-not-allowed" title="Vous n'avez pas les permissions pour supprimer ce projet" disabled>
                                    <i class="fas fa-trash"></i>
                                </button>
                            {% endif %}
                        </div>
                        <div class="text-xs text-gray-500">
                            Mis à jour {{ project.updatedAt|date('d/m/Y') }}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
    
    <!-- Onglet Projets Terminés -->
    <div id="completedProjectsTab" class="tab-content hidden">
        {% if completedProjects is empty %}
            <div class="bg-white rounded-lg border border-gray-200 p-12 text-center">
                <i class="fas fa-check-circle text-green-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucun projet terminé</h3>
                <p class="text-gray-500 mb-6">Les projets terminés apparaîtront ici</p>
            </div>
        {% else %}
            <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-6">
                {% for project in completedProjects %}
                    <div class="bg-white rounded-lg border border-gray-200 p-6 card-hover opacity-75">
                        <!-- Header du projet -->
                        <div class="flex items-start justify-between mb-4">
                            <div class="flex-1">
                                <div class="flex items-center mb-2">
                                    <h3 class="text-lg font-semibold text-gray-800">{{ project.name }}</h3>
                                    <i class="fas fa-check-circle text-green-500 ml-2" title="Projet terminé"></i>
                                </div>
                                <p class="text-sm text-gray-600 line-clamp-2">{{ project.description }}</p>
                            </div>
                            <div class="ml-4">
                                <div class="dropdown relative">
                                    <button class="text-gray-400 hover:text-gray-600 p-2">
                                        <i class="fas fa-ellipsis-v"></i>
                                    </button>
                                </div>
                            </div>
                        </div>

                        <!-- Statut et progression (100% pour les terminés) -->
                        <div class="mb-4">
                            <div class="flex items-center justify-between mb-2">
                                <span class="text-sm font-medium text-gray-700">Progression</span>
                                <span class="text-sm text-green-600 font-semibold">100%</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-green-500 h-2 rounded-full w-full"></div>
                            </div>
                        </div>

                        <!-- Informations du projet -->
                        <div class="space-y-3 mb-4">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Statut :</span>
                                <span class="px-2 py-1 rounded-full text-xs font-medium bg-green-100 text-green-700">
                                    Terminé
                                </span>
                            </div>

                            {% if project.budget %}
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-500">Budget :</span>
                                    <span class="text-sm font-medium text-gray-700">{{ project.budget|number_format(0, ',', ' ') }} FCFA</span>
                                </div>
                            {% endif %}

                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-500">Début :</span>
                                <span class="text-sm text-gray-700">{{ project.startDate|date('d/m/Y') }}</span>
                            </div>

                            {% if project.endDate %}
                                <div class="flex items-center justify-between">
                                    <span class="text-sm text-gray-500">Fin :</span>
                                    <span class="text-sm text-gray-700">{{ project.endDate|date('d/m/Y') }}</span>
                                </div>
                            {% endif %}
                        </div>

                        <!-- Chef de projet -->
                        {% if project.projectManager %}
                            <div class="mb-4">
                                <div class="flex items-center">
                                    <div class="w-8 h-8 bg-green-500 rounded-full flex items-center justify-center mr-2">
                                        <span class="text-xs font-medium text-white">
                                            {{ project.projectManager.firstName|slice(0,1) }}{{ project.projectManager.lastName|slice(0,1) }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-800">{{ project.projectManager.firstName }} {{ project.projectManager.lastName }}</p>
                                        <p class="text-xs text-gray-500">Chef de projet</p>
                                    </div>
                                </div>
                            </div>
                        {% endif %}

                        <!-- Équipe -->
                        {% if project.teamMembers|length > 0 %}
                            <div class="mb-4">
                                <div class="flex items-center justify-between mb-2">
                                    <span class="text-sm font-medium text-gray-700">Équipe</span>
                                    <span class="text-xs text-gray-500">{{ project.teamMembers|length }} membre{{ project.teamMembers|length > 1 ? 's' : '' }}</span>
                                </div>
                                <div class="flex -space-x-2">
                                    {% for member in project.teamMembers|slice(0, 5) %}
                                        <div class="w-6 h-6 bg-gray-400 rounded-full flex items-center justify-center border-2 border-white" 
                                             title="{{ member.firstName }} {{ member.lastName }}">
                                            <span class="text-xs font-medium text-white">
                                                {{ member.firstName|slice(0,1) }}{{ member.lastName|slice(0,1) }}
                                            </span>
                                        </div>
                                    {% endfor %}
                                    {% if project.teamMembers|length > 5 %}
                                        <div class="w-6 h-6 bg-gray-300 rounded-full flex items-center justify-center border-2 border-white">
                                            <span class="text-xs text-gray-600">+{{ project.teamMembers|length - 5 }}</span>
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}

                        <!-- Actions (limitées pour les projets terminés) -->
                        <div class="flex items-center justify-between pt-4 border-t border-gray-200">
                            <div class="flex items-center space-x-2">
                                <a href="{{ path('app_project_show', {id: project.id}) }}" class="text-blue-600 hover:text-blue-800 p-2" title="Voir les détails">
                                    <i class="fas fa-eye"></i>
                                </a>
                                {% if canEditProjects and (isAdmin or (project.projectManager and project.projectManager.id == currentUser.id)) %}
                                    <button onclick="openEditProjectModal({{ project.id }}, '{{ project.name|e('js') }}', '{{ project.description|e('js') }}', '{{ project.status }}', '{{ project.priority }}', '{{ project.startDate ? project.startDate|date('Y-m-d') : '' }}', '{{ project.endDate ? project.endDate|date('Y-m-d') : '' }}', '{{ project.budget ?: '' }}', '{{ project.projectManager ? project.projectManager.id : '' }}', {{ project.progress ?: 0 }}, [{% for member in project.teamMembers %}{{ member.id }}{% if not loop.last %},{% endif %}{% endfor %}])" class="text-gray-600 hover:text-gray-800 p-2" title="Réactiver">
                                        <i class="fas fa-redo"></i>
                                    </button>
                                {% else %}
                                    <button onclick="showEditPermissionDeniedMessage()" class="text-gray-400 p-2 cursor-not-allowed" title="Vous n'avez pas les permissions pour modifier ce projet" disabled>
                                        <i class="fas fa-redo"></i>
                                    </button>
                                {% endif %}
                            </div>
                            <div class="text-xs text-gray-500">
                                Terminé le {{ project.updatedAt|date('d/m/Y') }}
                            </div>
                        </div>
                    </div>
                {% endfor %}
            </div>
        {% endif %}
    </div>
</div>

<!-- Modal de création de projet -->
<div id="projectModal" 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-2xl 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 flex items-center">
                    <i class="fas fa-plus-circle text-green-600 mr-2"></i>
                    <span id="projectModalTitle">Nouveau projet</span>
                </h3>
                <button onclick="closeProjectModal()" class="text-gray-400 hover:text-gray-600">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <!-- Formulaire -->
            <div class="p-6">
                <form id="projectForm" method="POST" class="space-y-6">
                    <input type="hidden" id="_token" name="_token" value="{{ csrf_token('project') }}">
                    <input type="hidden" id="projectId" name="projectId">
                    
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                        <!-- Nom du projet -->
                        <div class="md:col-span-2">
                            <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Nom du projet *</label>
                            <input type="text" id="name" name="name" required
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <!-- Description -->
                        <div class="md:col-span-2">
                            <label for="description" class="block text-sm font-medium text-gray-700 mb-2">Description</label>
                            <textarea id="description" name="description" rows="3"
                                      class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
                        </div>

                        <!-- Statut et Priorité -->
                        <div>
                            <label for="status" class="block text-sm font-medium text-gray-700 mb-2">Statut</label>
                            <select id="status" name="status" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="planned">Planifié</option>
                                <option value="in_progress">En cours</option>
                                <option value="on_hold">En pause</option>
                                <option value="completed">Terminé</option>
                                <option value="cancelled">Annulé</option>
                            </select>
                        </div>

                        <div>
                            <label for="priority" class="block text-sm font-medium text-gray-700 mb-2">Priorité</label>
                            <select id="priority" name="priority" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="low">Basse</option>
                                <option value="medium">Moyenne</option>
                                <option value="high">Haute</option>
                                <option value="critical">Critique</option>
                            </select>
                        </div>

                        <!-- Dates -->
                        <div>
                            <label for="startDate" class="block text-sm font-medium text-gray-700 mb-2">Date de début</label>
                            <input type="date" id="startDate" name="startDate"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <div>
                            <label for="endDate" class="block text-sm font-medium text-gray-700 mb-2">Date de fin prévue</label>
                            <input type="date" id="endDate" name="endDate"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <!-- Budget et Chef de projet -->
                        <div>
                            <label for="budget" class="block text-sm font-medium text-gray-700 mb-2">Budget (FCFA)</label>
                            <input type="number" id="budget" name="budget" step="1" placeholder="Ex: 5000000"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                        </div>

                        <div>
                            <label for="projectManager" class="block text-sm font-medium text-gray-700 mb-2">Chef de projet</label>
                            <select id="projectManager" name="projectManager" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                                <option value="">Sélectionner un chef de projet</option>
                                {% for user in projectManagers %}
                                    <option value="{{ user.id }}">{{ user.firstName }} {{ user.lastName }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Progression -->
                        <div>
                            <label for="progress" class="block text-sm font-medium text-gray-700 mb-2">Progression (%)</label>
                            <input type="number" id="progress" name="progress" min="0" max="100" step="1" placeholder="0"
                                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
                            <div class="mt-2">
                                <div class="w-full bg-gray-200 rounded-full h-2">
                                    <div id="progressBar" class="bg-green-500 h-2 rounded-full transition-all duration-300" style="width: 0%"></div>
                                </div>
                            </div>
                        </div>

                        <!-- Membres d'équipe -->
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium text-gray-700 mb-3">Membres d'équipe</label>
                            
                            <!-- Zone de recherche -->
                            <div class="mb-3">
                                <input type="text" id="memberSearch" placeholder="Rechercher un membre..." 
                                       class="w-full px-3 py-2 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                            </div>
                            
                            <!-- Actions rapides -->
                            <div class="flex items-center space-x-3 mb-3">
                                <button type="button" onclick="selectAllMembers()" 
                                        class="text-sm text-blue-600 hover:text-blue-800 font-medium">
                                    Tout sélectionner
                                </button>
                                <button type="button" onclick="clearAllMembers()" 
                                        class="text-sm text-gray-600 hover:text-gray-800 font-medium">
                                    Tout décocher
                                </button>
                                <span id="selectedCount" class="text-xs text-gray-500">0 sélectionné(s)</span>
                            </div>
                            
                            <!-- Liste des membres avec checkboxes -->
                            <div id="membersContainer" class="max-h-48 overflow-y-auto border border-gray-200 rounded-lg bg-gray-50">
                                {% for user in users %}
                                    <label class="flex items-center p-3 hover:bg-blue-50 cursor-pointer member-item border-b border-gray-100 last:border-b-0" 
                                           data-name="{{ (user.firstName ~ ' ' ~ user.lastName)|lower }}">
                                        <input type="checkbox" name="teamMembers[]" value="{{ user.id }}" 
                                               class="h-4 w-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500 member-checkbox">
                                        
                                        <!-- Avatar -->
                                        <div class="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center ml-3">
                                            {% if user.avatar %}
                                                <img src="{{ asset('uploads/avatars/' ~ user.avatar) }}" alt="Avatar" class="w-8 h-8 rounded-full object-cover">
                                            {% else %}
                                                <span class="text-white font-semibold text-sm">{{ user.firstName|first }}{{ user.lastName|first }}</span>
                                            {% endif %}
                                        </div>
                                        
                                        <!-- Informations utilisateur -->
                                        <div class="ml-3 flex-1">
                                            <div class="font-medium text-gray-900 text-sm">{{ user.firstName }} {{ user.lastName }}</div>
                                            <div class="text-xs text-gray-500">{{ user.specialty ?: 'Personnel' }}</div>
                                        </div>
                                        
                                        <!-- Badge équipe si disponible -->
                                        {% if user.teams|length > 0 %}
                                            <div class="ml-2">
                                                <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">
                                                    {{ user.teams|first.name }}
                                                </span>
                                            </div>
                                        {% endif %}
                                    </label>
                                {% endfor %}
                            </div>
                        </div>
                    </div>

                    <!-- Actions -->
                    <div class="flex items-center justify-end space-x-4 pt-6 border-t border-gray-200">
                        <button type="button" onclick="closeProjectModal()" 
                                class="bg-gray-500 hover:bg-gray-600 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-times mr-2"></i>
                            Annuler
                        </button>
                        <button type="submit" id="submitProjectBtn"
                                class="bg-green-600 hover:bg-green-700 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-save mr-2"></i>
                            <span id="submitProjectText">Créer le projet</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Fonctions pour le modal de projet
function openProjectModal() {
    document.getElementById('projectModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Reset du formulaire
    document.getElementById('projectForm').reset();
    document.getElementById('projectId').value = '';
    document.getElementById('projectForm').action = '{{ path('app_project_new') }}';
    
    // Réinitialiser la barre de progression
    updateProgressBar();
    
    // Réinitialiser les checkboxes des membres
    const memberCheckboxes = document.querySelectorAll('.member-checkbox');
    memberCheckboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    updateSelectedCount();
    
    // Textes pour création
    document.getElementById('projectModalTitle').textContent = 'Nouveau projet';
    document.getElementById('submitProjectText').textContent = 'Créer le projet';
    
    // Focus sur le champ nom
    setTimeout(() => {
        document.getElementById('name').focus();
    }, 100);
}

function openEditProjectModal(id, name, description, status, priority, startDate, endDate, budget, projectManagerId, progress, teamMemberIds) {
    document.getElementById('projectModal').classList.remove('hidden');
    document.body.style.overflow = 'hidden';
    
    // Remplir les champs avec les données existantes
    document.getElementById('projectId').value = id;
    document.getElementById('name').value = name;
    document.getElementById('description').value = description;
    document.getElementById('status').value = status;
    document.getElementById('priority').value = priority;
    document.getElementById('startDate').value = startDate;
    document.getElementById('endDate').value = endDate;
    document.getElementById('budget').value = budget;
    document.getElementById('projectManager').value = projectManagerId;
    document.getElementById('progress').value = progress || 0;
    
    // Mettre à jour la barre de progression
    updateProgressBar();
    
    // Sélectionner les membres d'équipe (checkboxes)
    const memberCheckboxes = document.querySelectorAll('.member-checkbox');
    memberCheckboxes.forEach(checkbox => {
        checkbox.checked = teamMemberIds.includes(parseInt(checkbox.value));
    });
    
    // Mettre à jour le compteur
    updateSelectedCount();
    
    // Mettre à jour l'action du formulaire et les textes
    document.getElementById('projectForm').action = '{{ path('app_project_edit', {id: '__ID__'}) }}'.replace('__ID__', id);
    document.getElementById('projectModalTitle').textContent = 'Modifier le projet';
    document.getElementById('submitProjectText').textContent = 'Mettre à jour';
    
    // Focus sur le champ nom
    setTimeout(() => {
        document.getElementById('name').focus();
    }, 100);
}

function closeProjectModal() {
    document.getElementById('projectModal').classList.add('hidden');
    document.body.style.overflow = 'auto';
    // Reset du formulaire
    document.getElementById('projectForm').reset();
}

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

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

// Fonction pour mettre à jour la barre de progression
function updateProgressBar() {
    const progressInput = document.getElementById('progress');
    const progressBar = document.getElementById('progressBar');
    const value = progressInput.value || 0;
    progressBar.style.width = value + '%';
}

// Écouteur pour le champ progression
document.addEventListener('DOMContentLoaded', function() {
    const progressInput = document.getElementById('progress');
    if (progressInput) {
        progressInput.addEventListener('input', updateProgressBar);
        progressInput.addEventListener('change', updateProgressBar);
        // Initialiser la barre au chargement
        updateProgressBar();
    }
});

// Gestion de la soumission du formulaire
document.getElementById('projectForm').addEventListener('submit', function(e) {
    e.preventDefault();
    
    // Validation côté client
    const name = document.getElementById('name').value.trim();
    
    if (!name) {
        showNotification('Le nom du projet est obligatoire', 'error');
        document.getElementById('name').focus();
        return;
    }
    
    // Récupérer les données du formulaire
    const formData = new FormData(this);
    
    // Désactiver le bouton pour éviter les doubles soumissions
    const submitBtn = this.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    submitBtn.disabled = true;
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Sauvegarde...';

    // Envoyer via AJAX
    fetch(this.action, {
        method: 'POST',
        body: formData,
        redirect: 'manual' // Important pour capturer les redirections
    })
    .then(response => {
        if (response.type === 'opaqueredirect' || (response.status >= 300 && response.status < 400)) {
            // Redirection détectée - succès
            window.location.reload();
        } else if (response.ok) {
            // Réponse OK
            return response.text();
        } else if (response.status === 403) {
            throw new Error('Vous n\'avez pas les permissions pour modifier ce projet');
        } else if (response.status === 404) {
            throw new Error('Projet non trouvé');
        } else {
            throw new Error(`Erreur HTTP: ${response.status}`);
        }
    })
    .then(data => {
        if (data) {
            try {
                // Essayer de parser la réponse JSON
                const jsonResponse = JSON.parse(data);
                if (jsonResponse.error === 'csrf_invalid') {
                    // Erreur CSRF - proposer de rafraîchir
                    showNotification(jsonResponse.message + ' Rafraîchissement...', 'warning');
                    setTimeout(() => {
                        window.location.reload();
                    }, 2000);
                    return;
                }
            } catch (e) {
                // Ce n'est pas du JSON, traiter comme avant
            }
            
            // Si on a des données, c'est probablement une erreur
            console.log('Réponse:', data);
            // Vérifier s'il y a des messages d'erreur dans la réponse
            if (data.includes('error') || data.includes('danger')) {
                showNotification('Une erreur est survenue lors de la sauvegarde', 'error');
            } else {
                // Succès - recharger la page
                window.location.reload();
            }
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showNotification(error.message, 'error');
    })
    .finally(() => {
        // Réactiver le bouton
        submitBtn.disabled = false;
        submitBtn.innerHTML = originalText;
    });
});

// Gestion des onglets
function switchTab(tabName) {
    // Masquer tous les onglets
    document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.add('hidden');
    });
    
    // Réinitialiser les styles des boutons d'onglets
    document.querySelectorAll('.tab-button').forEach(button => {
        button.classList.remove('bg-blue-600', 'text-white');
        button.classList.add('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100');
    });
    
    // Afficher l'onglet sélectionné
    if (tabName === 'active') {
        document.getElementById('activeProjectsTab').classList.remove('hidden');
        document.getElementById('activeTab').classList.remove('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100');
        document.getElementById('activeTab').classList.add('bg-blue-600', 'text-white');
    } else if (tabName === 'completed') {
        document.getElementById('completedProjectsTab').classList.remove('hidden');
        document.getElementById('completedTab').classList.remove('text-gray-600', 'hover:text-gray-800', 'hover:bg-gray-100');
        document.getElementById('completedTab').classList.add('bg-blue-600', 'text-white');
    }
}

// Fonction de filtrage
function filterProjects() {
    const managerFilter = document.getElementById('managerFilter').value;
    const priorityFilter = document.getElementById('priorityFilter').value;
    const searchFilter = document.getElementById('searchFilter').value.toLowerCase();
    
    // Filtrer dans l'onglet actif
    const activeTab = document.getElementById('activeProjectsTab');
    const completedTab = document.getElementById('completedProjectsTab');
    const currentTab = !activeTab.classList.contains('hidden') ? activeTab : completedTab;
    
    const projectCards = currentTab.querySelectorAll('.card-hover');
    
    projectCards.forEach(card => {
        let visible = true;
        
        // Filtre par chef de projet
        if (managerFilter) {
            const managerElement = card.querySelector('[title*="Chef de projet"]');
            if (!managerElement || !managerElement.closest('.flex').textContent.includes(managerFilter)) {
                visible = false;
            }
        }
        
        // Filtre par recherche (nom du projet)
        if (searchFilter) {
            const projectName = card.querySelector('h3').textContent.toLowerCase();
            const projectDescription = card.querySelector('.line-clamp-2').textContent.toLowerCase();
            if (!projectName.includes(searchFilter) && !projectDescription.includes(searchFilter)) {
                visible = false;
            }
        }
        
        // Afficher/masquer la carte
        if (visible) {
            card.style.display = 'block';
        } else {
            card.style.display = 'none';
        }
    });
    
    // Vérifier s'il y a des résultats visibles
    const visibleCards = Array.from(projectCards).filter(card => card.style.display !== 'none');
    const container = currentTab.querySelector('.grid');
    const noResultsDiv = currentTab.querySelector('.no-results');
    
    if (visibleCards.length === 0 && container) {
        if (!noResultsDiv) {
            const noResults = document.createElement('div');
            noResults.className = 'no-results bg-white rounded-lg border border-gray-200 p-12 text-center col-span-full';
            noResults.innerHTML = `
                <i class="fas fa-search text-gray-300 text-6xl mb-4"></i>
                <h3 class="text-xl font-medium text-gray-600 mb-2">Aucun projet trouvé</h3>
                <p class="text-gray-500">Essayez de modifier vos critères de recherche</p>
            `;
            container.appendChild(noResults);
        }
    } else if (noResultsDiv) {
        noResultsDiv.remove();
    }
}

// ==================== GESTION DES MEMBRES D'ÉQUIPE ====================

// Fonction pour mettre à jour le compteur de sélection
function updateSelectedCount() {
    const checkedBoxes = document.querySelectorAll('.member-checkbox:checked');
    const countElement = document.getElementById('selectedCount');
    if (countElement) {
        const count = checkedBoxes.length;
        countElement.textContent = `${count} sélectionné${count !== 1 ? 's' : ''}`;
    }
}

// Fonction pour sélectionner tous les membres
function selectAllMembers() {
    const checkboxes = document.querySelectorAll('.member-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = true;
    });
    updateSelectedCount();
}

// Fonction pour décocher tous les membres
function clearAllMembers() {
    const checkboxes = document.querySelectorAll('.member-checkbox');
    checkboxes.forEach(checkbox => {
        checkbox.checked = false;
    });
    updateSelectedCount();
}

// Initialisation
document.addEventListener('DOMContentLoaded', function() {
    // Onglet actif par défaut
    switchTab('active');
    
    // Recherche dans la liste des membres
    const memberSearch = document.getElementById('memberSearch');
    if (memberSearch) {
        memberSearch.addEventListener('input', function(e) {
            const searchTerm = e.target.value.toLowerCase();
            const memberItems = document.querySelectorAll('.member-item');
            
            memberItems.forEach(item => {
                const memberName = item.dataset.name;
                if (memberName.includes(searchTerm)) {
                    item.style.display = 'flex';
                } else {
                    item.style.display = 'none';
                }
            });
        });
    }

    // Écouteur pour les changements de checkbox
    document.addEventListener('change', function(e) {
        if (e.target.classList.contains('member-checkbox')) {
            updateSelectedCount();
        }
    });

    // Initialiser le compteur au chargement
    updateSelectedCount();
});

// ==================== NOTIFICATIONS DE PERMISSIONS ====================

// Fonction pour afficher un message de permission refusée pour l'édition
function showEditPermissionDeniedMessage() {
    showNotification('Vous n\'avez pas les permissions pour modifier des projets', 'error');
}

// Fonction pour afficher un message de permission refusée pour la suppression
function showDeletePermissionDeniedMessage() {
    showNotification('Vous n\'avez pas les permissions pour supprimer des projets', 'error');
}

// ==================== SYSTÈME DE NOTIFICATIONS ====================

function showNotification(message, type = 'info') {
    // Supprimer les notifications existantes
    const existingNotifications = document.querySelectorAll('.custom-notification');
    existingNotifications.forEach(notification => notification.remove());
    
    // Créer la notification
    const notification = document.createElement('div');
    notification.className = 'custom-notification fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm';
    
    // Styles selon le type
    switch(type) {
        case 'error':
            notification.className += ' bg-red-100 border border-red-400 text-red-700';
            break;
        case 'success':
            notification.className += ' bg-green-100 border border-green-400 text-green-700';
            break;
        case 'warning':
            notification.className += ' bg-yellow-100 border border-yellow-400 text-yellow-700';
            break;
        default:
            notification.className += ' bg-blue-100 border border-blue-400 text-blue-700';
    }
    
    // Icône selon le type
    let icon = '';
    switch(type) {
        case 'error': icon = 'fas fa-exclamation-circle'; break;
        case 'success': icon = 'fas fa-check-circle'; break;
        case 'warning': icon = 'fas fa-exclamation-triangle'; break;
        default: icon = 'fas fa-info-circle';
    }
    
    notification.innerHTML = `
        <div class="flex items-start">
            <i class="${icon} mr-3 mt-0.5"></i>
            <div class="flex-1">
                <p class="text-sm font-medium">${message}</p>
            </div>
            <button onclick="this.parentElement.parentElement.remove()" class="ml-2 text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;
    
    // Ajouter au document
    document.body.appendChild(notification);
    
    // Animation d'entrée
    setTimeout(() => {
        notification.style.transform = 'translateX(0)';
        notification.style.opacity = '1';
    }, 10);
    
    // Suppression automatique après 5 secondes
    setTimeout(() => {
        if (notification.parentElement) {
            notification.style.transform = 'translateX(100%)';
            notification.style.opacity = '0';
            setTimeout(() => notification.remove(), 300);
        }
    }, 5000);
}

// Styles pour les animations
const notificationStyles = document.createElement('style');
notificationStyles.textContent = `
    .custom-notification {
        transform: translateX(100%);
        opacity: 0;
        transition: all 0.3s ease;
    }
`;
document.head.appendChild(notificationStyles);
</script>

{% endblock %}