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

{% block title %}{{ project.name }} - Clinique Les Genêts{% endblock %}

{% block page_title %}{{ project.name }}{% 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">
            <a href="{{ path('app_project_index') }}" class="text-gray-600 hover:text-gray-800">
                <i class="fas fa-arrow-left mr-2"></i>
                Retour aux projets
            </a>
        </div>
        <div class="flex items-center space-x-3">
            {% 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="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
                    <i class="fas fa-edit mr-2"></i>
                    Modifier
                </button>
            {% else %}
                <button class="bg-gray-300 text-gray-500 px-4 py-2 rounded-lg flex items-center cursor-not-allowed" 
                        title="Vous n'avez pas les permissions pour modifier ce projet"
                        onclick="showEditPermissionDeniedMessage()"
                        disabled>
                    <i class="fas fa-edit mr-2"></i>
                    Modifier
                </button>
            {% endif %}
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Informations principales -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Détails du projet -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Détails du projet</h3>
                
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Description</label>
                        <p class="mt-1 text-gray-800">{{ project.description ?: 'Aucune description' }}</p>
                    </div>

                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="text-sm font-medium text-gray-500">Date de début</label>
                            <p class="mt-1 text-gray-800">{{ project.startDate ? project.startDate|date('d/m/Y') : 'Non définie' }}</p>
                        </div>
                        <div>
                            <label class="text-sm font-medium text-gray-500">Date de fin prévue</label>
                            <p class="mt-1 text-gray-800">{{ project.endDate ? project.endDate|date('d/m/Y') : 'Non définie' }}</p>
                        </div>
                    </div>

                    {% if project.budget %}
                        <div>
                            <label class="text-sm font-medium text-gray-500">Budget</label>
                            <p class="mt-1 text-gray-800 text-lg font-semibold">{{ project.budget|number_format(0, ',', ' ') }} FCFA</p>
                        </div>
                    {% endif %}
                </div>
            </div>

            <!-- Tâches du projet -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold text-gray-800">Tâches du projet</h3>
                    <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">
                        {{ project.tasks|length }} tâche{{ project.tasks|length > 1 ? 's' : '' }}
                    </span>
                </div>

                {% if project.tasks|length > 0 %}
                    <div class="space-y-3">
                        {% for task in project.tasks %}
                            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                <div class="flex-1">
                                    <h4 class="font-medium text-gray-800">{{ task.title }}</h4>
                                    {% if task.description %}
                                        <p class="text-sm text-gray-600 mt-1">{{ task.description|length > 80 ? task.description|slice(0, 80) ~ '...' : task.description }}</p>
                                    {% endif %}
                                </div>
                                <div class="flex items-center space-x-3">
                                    <span class="px-2 py-1 rounded-full text-xs font-medium
                                        {% if task.status == 'completed' %}bg-green-100 text-green-700
                                        {% elseif task.status == 'in_progress' %}bg-blue-100 text-blue-700
                                        {% elseif task.status == 'review' %}bg-yellow-100 text-yellow-700
                                        {% else %}bg-gray-100 text-gray-700{% endif %}">
                                        {{ task.statusLabel }}
                                    </span>
                                    <a href="{{ path('app_task_show', {id: task.id}) }}" class="text-blue-600 hover:text-blue-800">
                                        <i class="fas fa-eye"></i>
                                    </a>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-8">
                        <i class="fas fa-tasks text-gray-300 text-4xl mb-4"></i>
                        <p class="text-gray-500">Aucune tâche assignée à ce projet</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- Sidebar avec informations complémentaires -->
        <div class="space-y-6">
            <!-- Statut et progression -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">État du projet</h3>
                
                <div class="space-y-4">
                    <div>
                        <label class="text-sm font-medium text-gray-500">Statut</label>
                        <div class="mt-1">
                            <span class="px-3 py-1 rounded-full text-sm 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 == 'planned' %}Planifié
                                {% else %}{{ project.status|title }}{% endif %}
                            </span>
                        </div>
                    </div>

                    <div>
                        <label class="text-sm font-medium text-gray-500">Priorité</label>
                        <div class="mt-1">
                            <span class="px-3 py-1 rounded-full text-sm font-medium
                                {% if project.priority == 'critical' %}bg-red-100 text-red-700
                                {% elseif project.priority == 'high' %}bg-orange-100 text-orange-700
                                {% elseif project.priority == 'medium' %}bg-yellow-100 text-yellow-700
                                {% else %}bg-gray-100 text-gray-700{% endif %}">
                                {% if project.priority == 'critical' %}Critique
                                {% elseif project.priority == 'high' %}Haute
                                {% elseif project.priority == 'medium' %}Moyenne
                                {% elseif project.priority == 'low' %}Basse
                                {% else %}{{ project.priority|title }}{% endif %}
                            </span>
                        </div>
                    </div>

                    {% if project.progress is defined %}
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <label class="text-sm font-medium text-gray-500">Progression</label>
                                <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>
                    {% endif %}
                </div>
            </div>

            <!-- Équipe -->
            {% if project.projectManager %}
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-lg font-semibold text-gray-800 mb-4">Chef de projet</h3>
                    
                    <div class="flex items-center">
                        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center mr-3">
                            <span class="text-sm font-medium text-white">
                                {{ project.projectManager.firstName|slice(0,1) }}{{ project.projectManager.lastName|slice(0,1) }}
                            </span>
                        </div>
                        <div>
                            <p class="font-medium text-gray-800">{{ project.projectManager.firstName }} {{ project.projectManager.lastName }}</p>
                            <p class="text-sm text-gray-500">{{ project.projectManager.email }}</p>
                        </div>
                    </div>
                </div>
            {% endif %}

            <!-- Dates importantes -->
            <div class="bg-white rounded-lg border border-gray-200 p-6">
                <h3 class="text-lg font-semibold text-gray-800 mb-4">Dates importantes</h3>
                
                <div class="space-y-3">
                    <div class="flex items-center justify-between">
                        <span class="text-sm text-gray-500">Créé le</span>
                        <span class="text-sm text-gray-800">{{ project.createdAt|date('d/m/Y à H:i') }}</span>
                    </div>
                    {% if project.updatedAt != project.createdAt %}
                        <div class="flex items-center justify-between">
                            <span class="text-sm text-gray-500">Mis à jour le</span>
                            <span class="text-sm text-gray-800">{{ project.updatedAt|date('d/m/Y à H:i') }}</span>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<script>
function showEditPermissionDeniedMessage() {
    // Créer la notification
    const notification = document.createElement('div');
    notification.className = 'fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm bg-red-100 border border-red-400 text-red-700';
    notification.style.transform = 'translateX(100%)';
    notification.style.opacity = '0';
    notification.style.transition = 'all 0.3s ease';
    
    notification.innerHTML = `
        <div class="flex items-start">
            <i class="fas fa-exclamation-circle mr-3 mt-0.5"></i>
            <div class="flex-1">
                <p class="text-sm font-medium">Vous n'avez pas les permissions pour modifier ce projet</p>
                <p class="text-xs mt-1">Seuls les administrateurs et le chef de projet peuvent modifier ce projet.</p>
            </div>
            <button onclick="this.parentElement.parentElement.remove()" class="ml-2 text-red-400 hover:text-red-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);
}
</script>

<!-- Modal d'édition 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-edit text-blue-600 mr-2"></i>
                    <span id="projectModalTitle">Modifier le 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-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg text-sm">
                            <i class="fas fa-save mr-2"></i>
                            <span id="submitProjectText">Mettre à jour</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Fonctions pour le modal de projet
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
    document.getElementById('projectForm').action = '{{ path('app_project_edit', {id: '__ID__'}) }}'.replace('__ID__', id);
    
    // 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 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();
}

// Recherche dans la liste des membres
document.addEventListener('DOMContentLoaded', function() {
    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();
});

// ==================== 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 %}