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

{% block title %}Paramètres - {{ settings.clinic.clinic_name.settingValue ?? 'Clinique' }}{% endblock %}

{% block page_title %}Paramètres{% endblock %}

{% block stylesheets %}
    <style>
        @keyframes saveSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }
        
        .save-success {
            animation: saveSuccess 0.3s ease-in-out;
        }
        
        .field-highlight {
            transition: all 0.3s ease;
            box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
        }
        
        .unsaved-indicator {
            position: relative;
        }
        
        .unsaved-indicator::before {
            content: '';
            position: absolute;
            top: -2px;
            right: -2px;
            width: 8px;
            height: 8px;
            background: #f59e0b;
            border-radius: 50%;
            animation: pulse 2s infinite;
        }
        
        @keyframes slideInRight {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
        
        .slide-in-right {
            animation: slideInRight 0.3s ease-out;
        }
    </style>
{% endblock %}

{% block body %}
<div class="space-y-6">
    <!-- Header -->
    <div class="flex items-center justify-between">
        <div class="flex items-center space-x-4">
            <h2 class="text-xl font-semibold text-gray-800">Configuration du système</h2>
        </div>
        <div class="flex items-center space-x-3">
            <div class="flex items-center space-x-4">
                <button id="saveSettings" class="bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-700 hover:to-blue-800 text-white px-6 py-3 rounded-lg flex items-center shadow-lg transition-all duration-200 hover:shadow-xl transform hover:scale-105">
                    <i class="fas fa-save mr-2"></i>
                    <span id="saveButtonText">Sauvegarder les paramètres</span>
                </button>
                <div id="saveStatus" class="hidden flex items-center space-x-2 text-sm">
                    <div class="flex items-center text-green-600">
                        <i class="fas fa-check-circle mr-1"></i>
                        <span>Dernière sauvegarde : <span id="lastSaveTime">-</span></span>
                    </div>
                </div>
                <div id="unsavedChanges" class="hidden flex items-center space-x-2 text-sm text-amber-600">
                    <i class="fas fa-exclamation-triangle mr-1"></i>
                    <span>Modifications non sauvegardées</span>
                </div>
            </div>
        </div>
    </div>

    <!-- Navigation des paramètres -->
    <div class="bg-white rounded-lg border border-gray-200">
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-8 px-6" aria-label="Tabs">
                <a href="#general" class="border-blue-500 text-blue-600 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Général
                </a>
                <a href="#notifications" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Notifications
                </a>
                <a href="#security" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Sécurité
                </a>
                <a href="#categories" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Catégories
                </a>
                <a href="#users" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Utilisateurs
                </a>
                <a href="#integrations" class="border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-4 px-1 border-b-2 font-medium text-sm">
                    Intégrations
                </a>
            </nav>
        </div>
    </div>

    <!-- Paramètres généraux -->
    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Configuration principale -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Section Général -->
            <div id="general">
                <!-- Informations de la clinique -->
                <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-building text-blue-600 mr-2"></i>
                        Informations de la clinique
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.clinic.clinic_name.label ?? 'Nom de la clinique' }}</label>
                            <input type="text" name="clinic_name" value="{{ settings.clinic.clinic_name.settingValue ?? '' }}" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.clinic.clinic_phone.label ?? 'Téléphone' }}</label>
                            <input type="tel" name="clinic_phone" value="{{ settings.clinic.clinic_phone.settingValue ?? '' }}" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.clinic.clinic_address.label ?? 'Adresse' }}</label>
                        <textarea rows="3" name="clinic_address" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">{{ settings.clinic.clinic_address.settingValue ?? '' }}</textarea>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.clinic.clinic_email.label ?? 'Email de contact' }}</label>
                            <input type="email" name="clinic_email" value="{{ settings.clinic.clinic_email.settingValue ?? '' }}" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.clinic.clinic_website.label ?? 'Site web' }}</label>
                            <input type="url" name="clinic_website" value="{{ settings.clinic.clinic_website.settingValue ?? '' }}" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                </div>
            </div>

            <!-- Logo de la clinique -->
            <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-image text-green-600 mr-2"></i>
                        Logo de la clinique
                    </h3>
                </div>
                <div class="p-6">
                    <div class="flex items-start space-x-6">
                        <!-- Aperçu du logo actuel -->
                        <div class="flex-shrink-0">
                            <div class="w-32 h-32 bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex items-center justify-center" id="logoPreview">
                                {% if clinic_info.logo %}
                                    <img src="{{ asset('uploads/logos/' ~ clinic_info.logo) }}" alt="Logo actuel" class="max-w-full max-h-full object-contain rounded-lg">
                                {% else %}
                                    <div class="text-center">
                                        <i class="fas fa-image text-gray-400 text-3xl mb-2"></i>
                                        <p class="text-gray-500 text-sm">Aucun logo</p>
                                    </div>
                                {% endif %}
                            </div>
                        </div>
                        
                        <!-- Formulaire d'upload -->
                        <div class="flex-1">
                            <form id="logoUploadForm" enctype="multipart/form-data">
                                <div class="space-y-4">
                                    <div>
                                        <label class="block text-sm font-medium text-gray-700 mb-2">
                                            Sélectionner un nouveau logo
                                        </label>
                                        <input type="file" name="logo" id="logoInput" accept="image/*" 
                                               class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
                                    </div>
                                    
                                    <div class="text-sm text-gray-600">
                                        <p class="mb-2">Recommandations :</p>
                                        <ul class="list-disc list-inside space-y-1 text-xs">
                                            <li>Format : JPG, PNG ou GIF</li>
                                            <li>Taille maximale : 2MB</li>
                                            <li>Dimensions recommandées : 200x200px (carré)</li>
                                            <li>Fond transparent recommandé pour PNG</li>
                                        </ul>
                                    </div>
                                    
                                    <button type="submit" 
                                            class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm font-medium flex items-center disabled:opacity-50 disabled:cursor-not-allowed"
                                            id="uploadBtn">
                                        <i class="fas fa-upload mr-2"></i>
                                        Télécharger le logo
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Paramètres système -->
            <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-cogs text-gray-600 mr-2"></i>
                        Paramètres système
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.system.system_timezone.label ?? 'Fuseau horaire' }}</label>
                            <select name="system_timezone" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                {% set currentTimezone = settings.system.system_timezone.settingValue ?? 'Europe/Paris' %}
                                {% for value, label in settings.system.system_timezone.options ?? {'Europe/Paris': 'Europe/Paris (UTC+1)', 'Europe/London': 'Europe/London (UTC+0)', 'Europe/Brussels': 'Europe/Brussels (UTC+1)'} %}
                                    <option value="{{ value }}" {{ value == currentTimezone ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.system.system_language.label ?? 'Langue par défaut' }}</label>
                            <select name="system_language" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                {% set currentLanguage = settings.system.system_language.settingValue ?? 'fr' %}
                                {% for value, label in settings.system.system_language.options ?? {'fr': 'Français', 'en': 'English', 'es': 'Español'} %}
                                    <option value="{{ value }}" {{ value == currentLanguage ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.system.system_date_format.label ?? 'Format de date' }}</label>
                            <select name="system_date_format" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                {% set currentDateFormat = settings.system.system_date_format.settingValue ?? 'd/m/Y' %}
                                {% for value, label in settings.system.system_date_format.options ?? {'d/m/Y': 'dd/mm/yyyy', 'm/d/Y': 'mm/dd/yyyy', 'Y-m-d': 'yyyy-mm-dd'} %}
                                    <option value="{{ value }}" {{ value == currentDateFormat ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.system.system_time_format.label ?? 'Format d\'heure' }}</label>
                            <select name="system_time_format" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                {% set currentTimeFormat = settings.system.system_time_format.settingValue ?? '24' %}
                                {% for value, label in settings.system.system_time_format.options ?? {'24': '24 heures', '12': '12 heures (AM/PM)'} %}
                                    <option value="{{ value }}" {{ value == currentTimeFormat ? 'selected' : '' }}>{{ label }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Notifications -->
            <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-bell text-yellow-600 mr-2"></i>
                        Notifications
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-800">{{ settings.notifications.notifications_email.label ?? 'Notifications email' }}</h4>
                            <p class="text-sm text-gray-600">{{ settings.notifications.notifications_email.description ?? 'Recevoir des emails pour les événements importants' }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="notifications_email" {{ (settings.notifications.notifications_email.settingValue ?? '0') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-800">{{ settings.notifications.notifications_task_reminders.label ?? 'Rappels de tâches' }}</h4>
                            <p class="text-sm text-gray-600">{{ settings.notifications.notifications_task_reminders.description ?? 'Notifications pour les tâches en retard' }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="notifications_task_reminders" {{ (settings.notifications.notifications_task_reminders.settingValue ?? '0') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-800">{{ settings.notifications.notifications_auto_reports.label ?? 'Rapports automatiques' }}</h4>
                            <p class="text-sm text-gray-600">{{ settings.notifications.notifications_auto_reports.description ?? 'Génération et envoi automatique des rapports' }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="notifications_auto_reports" {{ (settings.notifications.notifications_auto_reports.settingValue ?? '0') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                </div>
            </div>
            </div>

            <!-- Section Notifications -->
            <div id="notifications" style="display: none;">
                <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-bell text-yellow-600 mr-2"></i>
                            Paramètres de notifications
                        </h3>
                    </div>
                    <div class="p-6 space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="text-sm font-medium text-gray-800">Notifications email</h4>
                                <p class="text-sm text-gray-600">Recevoir des notifications par email</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="email_notifications" checked class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                        </div>
                        <div class="flex items-center justify-between">
                            <div>
                                <h4 class="text-sm font-medium text-gray-800">Notifications push</h4>
                                <p class="text-sm text-gray-600">Recevoir des notifications dans le navigateur</p>
                            </div>
                            <label class="relative inline-flex items-center cursor-pointer">
                                <input type="checkbox" name="push_notifications" class="sr-only peer">
                                <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                            </label>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Fréquence des notifications</label>
                            <select name="notification_frequency" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                <option value="immediate">Immédiate</option>
                                <option value="hourly">Toutes les heures</option>
                                <option value="daily" selected>Quotidienne</option>
                                <option value="weekly">Hebdomadaire</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Section Sécurité -->
            <div id="security" style="display: none;">
                <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-shield-alt text-green-600 mr-2"></i>
                        Sécurité
                    </h3>
                </div>
                <div class="p-6 space-y-4">
                    <div class="flex items-center justify-between">
                        <div>
                            <h4 class="text-sm font-medium text-gray-800">{{ settings.security.security_2fa.label ?? 'Authentification à deux facteurs' }}</h4>
                            <p class="text-sm text-gray-600">{{ settings.security.security_2fa.description ?? 'Sécurité renforcée pour les connexions' }}</p>
                        </div>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" name="security_2fa" {{ (settings.security.security_2fa.settingValue ?? '0') == '1' ? 'checked' : '' }} class="sr-only peer">
                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
                        </label>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.security.security_session_timeout.label ?? 'Durée de session (minutes)' }}</label>
                        <input type="number" name="security_session_timeout" value="{{ settings.security.security_session_timeout.settingValue ?? '60' }}" min="15" max="480" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-2">{{ settings.security.security_password_policy.label ?? 'Politique de mot de passe' }}</label>
                        <select name="security_password_policy" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                            {% set currentPolicy = settings.security.security_password_policy.settingValue ?? 'medium' %}
                            {% for value, label in settings.security.security_password_policy.options ?? {'basic': 'Basique (8 caractères minimum)', 'medium': 'Moyen (12 caractères, majuscules, chiffres)', 'strong': 'Fort (16 caractères, caractères spéciaux)'} %}
                                <option value="{{ value }}" {{ value == currentPolicy ? 'selected' : '' }}>{{ label }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            </div>

            <!-- Section Catégories -->
            <div id="categories" style="display: none;">
                <!-- Catégories de tâches -->
                <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-tags text-purple-600 mr-2"></i>
                        Catégories de tâches
                    </h3>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <p class="text-sm text-gray-600">Gérez les catégories et sous-catégories de vos tâches</p>
                        <div class="flex space-x-2">
                            <button id="addCategoryBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
                                <i class="fas fa-plus mr-2"></i>
                                Nouvelle catégorie
                            </button>
                            <button id="addSubCategoryBtn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
                                <i class="fas fa-plus mr-2"></i>
                                Nouvelle sous-catégorie
                            </button>
                        </div>
                    </div>
                    
                    <div class="space-y-3">
                        {% for category in taskCategories %}
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <i class="{{ category.icon }} text-lg" style="color: {{ category.color }}"></i>
                                        <div>
                                            <h4 class="font-medium text-gray-800">{{ category.name }}</h4>
                                            {% if category.description %}
                                                <p class="text-sm text-gray-600">{{ category.description }}</p>
                                            {% endif %}
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-2">
                                        <button class="edit-category-btn text-blue-600 hover:text-blue-800 text-sm" data-category-name="{{ category.name }}">
                                            <i class="fas fa-edit"></i>
                                            Modifier
                                        </button>
                                        <button class="delete-category-btn text-red-600 hover:text-red-800 text-sm" data-category-name="{{ category.name }}">
                                            <i class="fas fa-trash"></i>
                                            Supprimer
                                        </button>
                                    </div>
                                </div>
                                {% if category.subCategories|length > 0 %}
                                    <div class="mt-3 pl-8">
                                        <p class="text-xs text-gray-500 mb-2">Sous-catégories:</p>
                                        <div class="space-y-1">
                                            {% for subCategory in category.subCategories %}
                                                <div class="flex items-center justify-between text-sm">
                                                    <span class="flex items-center space-x-2">
                                                        <i class="{{ subCategory.icon }} text-sm" style="color: {{ subCategory.color }}"></i>
                                                        <span>{{ subCategory.name }}</span>
                                                    </span>
                                                    <div class="flex items-center space-x-1">
                                                        <button class="edit-subcategory-btn text-blue-600 hover:text-blue-800 text-xs" data-subcategory-name="{{ subCategory.name }}" data-category-name="{{ category.name }}">
                                                            <i class="fas fa-edit"></i>
                                                        </button>
                                                        <button class="delete-subcategory-btn text-red-600 hover:text-red-800 text-xs" data-subcategory-name="{{ subCategory.name }}">
                                                            <i class="fas fa-trash"></i>
                                                        </button>
                                                    </div>
                                                </div>
                                            {% endfor %}
                                        </div>
                                        <button class="add-subcategory-btn text-purple-600 hover:text-purple-800 text-xs mt-2" data-category-name="{{ category.name }}">
                                            <i class="fas fa-plus mr-1"></i>
                                            Ajouter une sous-catégorie
                                        </button>
                                    </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            </div>

            <!-- Section Utilisateurs -->
            <div id="users" style="display: none;">
                <!-- Gestion des utilisateurs -->
                <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-users text-blue-600 mr-2"></i>
                        Gestion des utilisateurs
                    </h3>
                </div>
                <div class="p-6">
                    <div class="flex justify-between items-center mb-4">
                        <p class="text-sm text-gray-600">Gérez les utilisateurs, leurs rôles et leurs équipes</p>
                        <button id="addUserBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
                            <i class="fas fa-plus mr-2"></i>
                            Nouvel utilisateur
                        </button>
                    </div>
                    
                    <!-- Onglets -->
                    <div class="border-b border-gray-200 mb-4">
                        <nav class="-mb-px flex space-x-8">
                            <button class="user-tab-btn active border-blue-500 text-blue-600 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" data-tab="users">
                                Utilisateurs
                            </button>
                            <button class="user-tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" data-tab="roles">
                                Rôles
                            </button>
                            <button class="user-tab-btn border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap py-2 px-1 border-b-2 font-medium text-sm" data-tab="teams">
                                Équipes
                            </button>
                        </nav>
                    </div>

                    <!-- Contenu des onglets -->
                    <div class="user-tab-content">
                        <!-- Onglet Utilisateurs -->
                        <div id="users-tab" class="tab-pane active">
                            <div class="space-y-3">
                                {% for user in users %}
                                    <div class="border border-gray-200 rounded-lg p-4">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center space-x-3">
                                                <div class="w-10 h-10 bg-gray-200 rounded-full flex items-center justify-center text-lg">
                                                    {{ user.avatar ?? '👤' }}
                                                </div>
                                                <div>
                                                    <h4 class="font-medium text-gray-800">{{ user.fullName }}</h4>
                                                    <p class="text-sm text-gray-600">{{ user.email }}</p>
                                                    <div class="flex items-center space-x-2 text-xs text-gray-500">
                                                        {% if user.role %}
                                                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">{{ user.role.name }}</span>
                                                        {% endif %}
                                                        {% if user.team %}
                                                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded">{{ user.team.name }}</span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <span class="flex items-center text-sm {{ user.isActive ? 'text-green-600' : 'text-red-600' }}">
                                                    <i class="fas fa-circle text-xs mr-1"></i>
                                                    {{ user.isActive ? 'Actif' : 'Inactif' }}
                                                </span>
                                                <button class="text-blue-600 hover:text-blue-800 text-sm edit-user-btn" data-user-id="{{ user.id }}">
                                                    <i class="fas fa-edit"></i>
                                                    Modifier
                                                </button>
                                                <button class="text-red-600 hover:text-red-800 text-sm delete-user-btn" data-user-id="{{ user.id }}">
                                                    <i class="fas fa-trash"></i>
                                                    Supprimer
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- Onglet Rôles -->
                        <div id="roles-tab" class="tab-pane hidden">
                            <div class="space-y-3">
                                <div class="flex justify-end mb-4">
                                    <button id="addRoleBtn" class="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
                                        <i class="fas fa-plus mr-2"></i>
                                        Nouveau rôle
                                    </button>
                                </div>
                                {% for role in roles %}
                                    <div class="border border-gray-200 rounded-lg p-4">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center space-x-3">
                                                <i class="{{ role.icon }} text-lg" style="color: {{ role.color }}"></i>
                                                <div>
                                                    <h4 class="font-medium text-gray-800">{{ role.name }}</h4>
                                                    <p class="text-sm text-gray-600">{{ role.description }}</p>
                                                    <div class="flex flex-wrap gap-1 mt-2">
                                                        {% if role.permissions %}
                                                            {% for permission in role.permissions %}
                                                                <span class="bg-gray-100 text-gray-700 px-2 py-1 rounded text-xs">{{ permission }}</span>
                                                            {% endfor %}
                                                        {% else %}
                                                            <span class="text-xs text-gray-400">Aucune permission</span>
                                                        {% endif %}
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button class="text-blue-600 hover:text-blue-800 text-sm edit-role-btn" data-role-id="{{ role.id }}">
                                                    <i class="fas fa-edit"></i>
                                                    Modifier
                                                </button>
                                                <button class="text-red-600 hover:text-red-800 text-sm delete-role-btn" data-role-id="{{ role.id }}">
                                                    <i class="fas fa-trash"></i>
                                                    Supprimer
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>

                        <!-- Onglet Équipes -->
                        <div id="teams-tab" class="tab-pane hidden">
                            <div class="space-y-3">
                                <div class="flex justify-end mb-4">
                                    <button id="addTeamBtn" class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 rounded-lg text-sm flex items-center">
                                        <i class="fas fa-plus mr-2"></i>
                                        Nouvelle équipe
                                    </button>
                                </div>
                                {% for team in teams %}
                                    <div class="border border-gray-200 rounded-lg p-4">
                                        <div class="flex items-center justify-between">
                                            <div class="flex items-center space-x-3">
                                                <i class="{{ team.icon }} text-lg" style="color: {{ team.color }}"></i>
                                                <div>
                                                    <h4 class="font-medium text-gray-800">{{ team.name }}</h4>
                                                    <p class="text-sm text-gray-600">{{ team.description }}</p>
                                                    {% if team.leader %}
                                                        <p class="text-xs text-gray-500">Chef d'équipe: {{ team.leader.fullName }}</p>
                                                    {% endif %}
                                                    <p class="text-xs text-gray-500">{{ team.members|length }} membre(s)</p>
                                                </div>
                                            </div>
                                            <div class="flex items-center space-x-2">
                                                <button class="text-blue-600 hover:text-blue-800 text-sm edit-team-btn" data-team-id="{{ team.id }}">
                                                    <i class="fas fa-edit"></i>
                                                    Modifier
                                                </button>
                                                <button class="text-red-600 hover:text-red-800 text-sm delete-team-btn" data-team-id="{{ team.id }}">
                                                    <i class="fas fa-trash"></i>
                                                    Supprimer
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Panneau latéral -->
        <div class="space-y-6">

            <!-- Section Intégrations -->
            <div id="integrations" style="display: none;">
                <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-plug text-green-600 mr-2"></i>
                            Intégrations
                        </h3>
                    </div>
                    <div class="p-6">
                        <p class="text-sm text-gray-600 mb-6">Connectez votre clinique avec des services externes</p>
                        
                        <div class="space-y-4">
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-blue-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-envelope text-blue-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">Service Email</h4>
                                            <p class="text-sm text-gray-600">Configuration SMTP pour les notifications</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">Non configuré</span>
                                        <button class="bg-blue-600 hover:bg-blue-700 text-white px-3 py-1 rounded text-sm">
                                            Configurer
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-cloud text-green-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">Sauvegarde Cloud</h4>
                                            <p class="text-sm text-gray-600">Synchronisation automatique des données</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-green-600">Actif</span>
                                        <button class="bg-gray-200 hover:bg-gray-300 text-gray-700 px-3 py-1 rounded text-sm">
                                            Gérer
                                        </button>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="border border-gray-200 rounded-lg p-4">
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center space-x-3">
                                        <div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
                                            <i class="fas fa-chart-bar text-purple-600"></i>
                                        </div>
                                        <div>
                                            <h4 class="font-medium text-gray-800">Analytics</h4>
                                            <p class="text-sm text-gray-600">Suivi et analyse des performances</p>
                                        </div>
                                    </div>
                                    <div class="flex items-center space-x-3">
                                        <span class="text-sm text-gray-500">Désactivé</span>
                                        <button class="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded text-sm">
                                            Activer
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Actions système -->
            <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-tools text-gray-600 mr-2"></i>
                        Actions système
                    </h3>
                </div>
                <div class="p-6 space-y-3">
                    <button class="w-full bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg text-sm flex items-center justify-center">
                        <i class="fas fa-download mr-2"></i>
                        Sauvegarder maintenant
                    </button>
                    <button class="w-full bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-lg text-sm flex items-center justify-center">
                        <i class="fas fa-sync mr-2"></i>
                        Vider le cache
                    </button>
                    <button class="w-full bg-orange-600 hover:bg-orange-700 text-white px-4 py-2 rounded-lg text-sm flex items-center justify-center">
                        <i class="fas fa-file-export mr-2"></i>
                        Exporter données
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const saveButton = document.getElementById('saveSettings');
    const saveButtonText = document.getElementById('saveButtonText');
    const saveStatus = document.getElementById('saveStatus');
    const lastSaveTime = document.getElementById('lastSaveTime');
    const unsavedChanges = document.getElementById('unsavedChanges');
    let originalFormData = {};
    let hasUnsavedChanges = false;
    
    // Capturer l'état initial du formulaire
    function captureInitialFormState() {
        originalFormData = {};
        document.querySelectorAll('input, select, textarea').forEach(function(element) {
            if (element.name) {
                if (element.type === 'checkbox') {
                    originalFormData[element.name] = element.checked;
                } else {
                    originalFormData[element.name] = element.value;
                }
            }
        });
    }
    
    // Vérifier si le formulaire a été modifié
    function checkForChanges() {
        let hasChanges = false;
        document.querySelectorAll('input, select, textarea').forEach(function(element) {
            if (element.name) {
                let currentValue;
                if (element.type === 'checkbox') {
                    currentValue = element.checked;
                } else {
                    currentValue = element.value;
                }
                
                if (originalFormData[element.name] !== currentValue) {
                    hasChanges = true;
                }
            }
        });
        
        hasUnsavedChanges = hasChanges;
        
        if (hasChanges) {
            unsavedChanges.classList.remove('hidden');
            saveButton.classList.add('animate-pulse');
        } else {
            unsavedChanges.classList.add('hidden');
            saveButton.classList.remove('animate-pulse');
        }
        
        return hasChanges;
    }
    
    // Ajouter des écouteurs de changements sur tous les champs
    function addChangeListeners() {
        document.querySelectorAll('input, select, textarea').forEach(function(element) {
            if (element.name) {
                element.addEventListener('change', checkForChanges);
                element.addEventListener('input', checkForChanges);
            }
        });
    }
    
    // Fonction de sauvegarde améliorée
    if (saveButton) {
        saveButton.addEventListener('click', function() {
        const formData = {};
        let hasData = false;
        
        // Récupérer toutes les valeurs des champs
        document.querySelectorAll('input, select, textarea').forEach(function(element) {
            if (element.name) {
                hasData = true;
                if (element.type === 'checkbox') {
                    formData[element.name] = element.checked ? '1' : '0';
                } else {
                    formData[element.name] = element.value;
                }
            }
        });
        
        // Vérifier qu'il y a des données à sauvegarder
        if (!hasData) {
            showNotification('Aucune donnée à sauvegarder', 'warning');
            return;
        }
        
        // Animation et feedback immédiat
        saveButton.disabled = true;
        saveButton.classList.remove('animate-pulse');
        saveButtonText.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Sauvegarde en cours...';
        saveButton.classList.add('scale-95', 'opacity-75');
        
        // Envoyer les données au serveur
        fetch('{{ path('app_settings_save') }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                settings: formData
            })
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Animation de succès
                saveButton.classList.remove('scale-95', 'opacity-75');
                saveButton.classList.add('bg-green-600', 'hover:bg-green-700');
                saveButtonText.innerHTML = '<i class="fas fa-check mr-2"></i>Sauvegardé !';
                
                // Marquer les champs comme sauvegardés avec animation
                document.querySelectorAll('input, select, textarea').forEach(function(element) {
                    if (element.name) {
                        element.classList.add('border-green-400', 'bg-green-50', 'transition-all', 'duration-500');
                        setTimeout(() => {
                            element.classList.remove('border-green-400', 'bg-green-50');
                        }, 2000);
                    }
                });
                
                // Afficher le statut de sauvegarde
                const now = new Date();
                lastSaveTime.textContent = now.toLocaleTimeString('fr-FR');
                saveStatus.classList.remove('hidden');
                unsavedChanges.classList.add('hidden');
                
                // Mettre à jour l'état initial du formulaire
                captureInitialFormState();
                hasUnsavedChanges = false;
                
                // Notification toast persistante
                showAdvancedNotification('Paramètres sauvegardés avec succès', 'success', {
                    autoClose: false,
                    actions: [{
                        text: 'Voir les changements',
                        action: () => window.location.reload()
                    }]
                });
                
                // Restaurer le bouton après 3 secondes
                setTimeout(() => {
                    saveButton.classList.remove('bg-green-600', 'hover:bg-green-700');
                    saveButton.classList.add('bg-gradient-to-r', 'from-blue-600', 'to-blue-700');
                    saveButtonText.innerHTML = 'Sauvegarder les paramètres';
                }, 3000);
                
            } else {
                // Animation d'erreur
                saveButton.classList.remove('scale-95', 'opacity-75');
                saveButton.classList.add('bg-red-600', 'hover:bg-red-700', 'animate-pulse');
                saveButtonText.innerHTML = '<i class="fas fa-exclamation-triangle mr-2"></i>Erreur !';
                
                showAdvancedNotification('Erreur lors de la sauvegarde: ' + data.message, 'error', {
                    autoClose: false
                });
                
                // Restaurer le bouton après 3 secondes
                setTimeout(() => {
                    saveButton.classList.remove('bg-red-600', 'hover:bg-red-700', 'animate-pulse');
                    saveButton.classList.add('bg-gradient-to-r', 'from-blue-600', 'to-blue-700');
                    saveButtonText.innerHTML = 'Sauvegarder les paramètres';
                }, 3000);
            }
        })
        .catch(error => {
            console.error('Erreur de sauvegarde:', error);
            
            // Animation d'erreur de connexion
            saveButton.classList.remove('scale-95', 'opacity-75');
            saveButton.classList.add('bg-red-600', 'hover:bg-red-700', 'animate-pulse');
            saveButtonText.innerHTML = '<i class="fas fa-wifi mr-2"></i>Connexion échouée';
            
            showAdvancedNotification('Erreur de connexion au serveur', 'error', {
                autoClose: false,
                actions: [{
                    text: 'Réessayer',
                    action: () => saveButton.click()
                }]
            });
            
            // Restaurer le bouton après 3 secondes
            setTimeout(() => {
                saveButton.classList.remove('bg-red-600', 'hover:bg-red-700', 'animate-pulse');
                saveButton.classList.add('bg-gradient-to-r', 'from-blue-600', 'to-blue-700');
                saveButtonText.innerHTML = 'Sauvegarder les paramètres';
            }, 3000);
        })
        .finally(() => {
            // Réactiver le bouton
            saveButton.disabled = false;
        });
        });
    } else {
        console.error('Save button not found in DOM!');
    }
    
    // Fonction de notification avancée
    function showAdvancedNotification(message, type = 'info', options = {}) {
        // Supprimer les notifications existantes
        const existingNotifications = document.querySelectorAll('.advanced-notification');
        existingNotifications.forEach(notification => notification.remove());
        
        // Créer la notification
        const notification = document.createElement('div');
        notification.className = 'advanced-notification fixed top-4 right-4 z-50 max-w-md p-4 rounded-xl shadow-2xl backdrop-blur-sm transition-all duration-500 transform translate-x-full';
        
        // Styles selon le type
        switch(type) {
            case 'error':
                notification.className += ' bg-red-50 border-2 border-red-200 text-red-800';
                break;
            case 'success':
                notification.className += ' bg-green-50 border-2 border-green-200 text-green-800';
                break;
            case 'warning':
                notification.className += ' bg-yellow-50 border-2 border-yellow-200 text-yellow-800';
                break;
            default:
                notification.className += ' bg-blue-50 border-2 border-blue-200 text-blue-800';
        }
        
        // Icône selon le type
        let icon = '';
        switch(type) {
            case 'error': icon = 'fas fa-exclamation-circle text-red-500'; break;
            case 'success': icon = 'fas fa-check-circle text-green-500'; break;
            case 'warning': icon = 'fas fa-exclamation-triangle text-yellow-500'; break;
            default: icon = 'fas fa-info-circle text-blue-500';
        }
        
        // Contenu de la notification
        let actionsHtml = '';
        if (options.actions && options.actions.length > 0) {
            actionsHtml = '<div class="mt-3 flex space-x-2">';
            options.actions.forEach(action => {
                actionsHtml += `<button onclick="(${action.action.toString()})(); this.closest('.advanced-notification').remove();" class="px-3 py-1 text-xs font-medium rounded-md bg-white/50 hover:bg-white/75 transition-colors">${action.text}</button>`;
            });
            actionsHtml += '</div>';
        }
        
        notification.innerHTML = `
            <div class="flex items-start">
                <i class="${icon} mr-3 mt-1 text-lg"></i>
                <div class="flex-1">
                    <p class="text-sm font-semibold">${message}</p>
                    ${actionsHtml}
                </div>
                <button onclick="this.parentElement.parentElement.remove()" class="ml-2 text-gray-400 hover:text-gray-600 text-lg">
                    <i class="fas fa-times"></i>
                </button>
            </div>
        `;
        
        // Ajouter au document
        document.body.appendChild(notification);
        
        // Animation d'entrée
        setTimeout(() => {
            notification.classList.remove('translate-x-full');
        }, 100);
        
        // Auto-masquage si demandé
        if (options.autoClose !== false) {
            setTimeout(() => {
                notification.classList.add('translate-x-full');
                setTimeout(() => notification.remove(), 300);
            }, options.duration || 5000);
        }
    }
    
    // Initialiser les écouteurs et l'état initial
    captureInitialFormState();
    addChangeListeners();
    
    // Avertir avant de quitter si des modifications ne sont pas sauvegardées
    window.addEventListener('beforeunload', function(e) {
        if (hasUnsavedChanges) {
            e.preventDefault();
            e.returnValue = '';
            return 'Vous avez des modifications non sauvegardées. Êtes-vous sûr de vouloir quitter ?';
        }
    });
    
    function showNotification(message, type = 'info') {
        // Supprimer les notifications existantes
        const existingNotifications = document.querySelectorAll('.notification');
        existingNotifications.forEach(notification => notification.remove());
        
        // Créer la notification
        const notification = document.createElement('div');
        notification.className = 'notification fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg max-w-sm transition-all duration-300';
        
        // 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);
        
        // Auto-masquage après 5 secondes (sauf pour les erreurs qui restent)
        if (type !== 'error') {
            setTimeout(() => {
                if (notification.parentElement) {
                    notification.style.opacity = '0';
                    setTimeout(() => {
                        if (notification.parentElement) {
                            notification.remove();
                        }
                    }, 300);
                }
            }, 5000);
        }
        
        // 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);
    }

    // Ajouter les styles pour les notifications
    const notificationStyles = document.createElement('style');
    notificationStyles.textContent = `
        .notification {
            transform: translateX(100%);
            opacity: 0;
            transition: all 0.3s ease;
        }
    `;
    document.head.appendChild(notificationStyles);

    // Gestion des onglets utilisateurs
    const userTabButtons = document.querySelectorAll('.user-tab-btn');
    const userTabPanes = document.querySelectorAll('.tab-pane');

    userTabButtons.forEach(button => {
        button.addEventListener('click', function() {
            const tabName = this.getAttribute('data-tab');
            
            // Activer l'onglet
            userTabButtons.forEach(btn => {
                btn.classList.remove('active', 'border-blue-500', 'text-blue-600');
                btn.classList.add('border-transparent', 'text-gray-500');
            });
            this.classList.add('active', 'border-blue-500', 'text-blue-600');
            this.classList.remove('border-transparent', 'text-gray-500');
            
            // Afficher le contenu de l'onglet
            userTabPanes.forEach(pane => {
                pane.classList.remove('active');
                pane.classList.add('hidden');
            });
            document.getElementById(tabName + '-tab').classList.add('active');
            document.getElementById(tabName + '-tab').classList.remove('hidden');
        });
    });

    // Gestion des utilisateurs
    document.getElementById('addUserBtn').addEventListener('click', function() {
        showUserModal();
    });

    document.querySelectorAll('.edit-user-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const userId = this.getAttribute('data-user-id');
            showUserModal(userId);
        });
    });

    document.querySelectorAll('.delete-user-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('Êtes-vous sûr de vouloir supprimer cet utilisateur ?')) {
                const userId = this.getAttribute('data-user-id');
                deleteUser(userId);
            }
        });
    });

    function showUserModal(userId = null) {
        // Créer et afficher le modal d'ajout/édition d'utilisateur
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-white rounded-lg p-6 w-full max-w-md">
                <h3 class="text-lg font-semibold mb-4">${userId ? 'Modifier' : 'Ajouter'} un utilisateur</h3>
                <form id="userForm">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom d'utilisateur</label>
                            <input type="text" name="username" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Email</label>
                            <input type="email" name="email" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Prénom</label>
                                <input type="text" name="firstName" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Nom</label>
                                <input type="text" name="lastName" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Rôle</label>
                            <select name="roleId" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                <option value="">Sélectionner un rôle</option>
                                {% for role in roles %}
                                <option value="{{ role.id }}">{{ role.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Équipe</label>
                            <select name="teamId" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                <option value="">Sélectionner une équipe</option>
                                {% for team in teams %}
                                <option value="{{ team.id }}">{{ team.name }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Mot de passe</label>
                            <input type="password" name="password" ${userId ? '' : 'required'} class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50" onclick="this.closest('.fixed').remove()">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                            ${userId ? 'Modifier' : 'Ajouter'}
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        // Gérer la soumission du formulaire
        document.getElementById('userForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const userData = {};
            
            for (let [key, value] of formData.entries()) {
                userData[key] = value;
            }
            
            if (userId) {
                updateUser(userId, userData);
            } else {
                createUser(userData);
            }
            
            modal.remove();
        });
    }

    function createUser(userData) {
        fetch('{{ path('app_settings_users_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(userData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Utilisateur créé avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de création', 'error');
        });
    }

    function updateUser(userId, userData) {
        fetch(`/settings/users/${userId}/edit`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(userData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Utilisateur modifié avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de modification', 'error');
        });
    }

    function deleteUser(userId) {
        fetch(`/settings/users/${userId}/delete`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Utilisateur supprimé avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de suppression', 'error');
        });
    }

    // Gestion des rôles
    document.getElementById('addRoleBtn').addEventListener('click', function() {
        showRoleModal();
    });

    document.querySelectorAll('.edit-role-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const roleId = this.getAttribute('data-role-id');
            showRoleModal(roleId);
        });
    });

    document.querySelectorAll('.delete-role-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('Êtes-vous sûr de vouloir supprimer ce rôle ?')) {
                const roleId = this.getAttribute('data-role-id');
                deleteRole(roleId);
            }
        });
    });

    function showRoleModal(roleId = null) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-white rounded-lg p-6 w-full max-w-lg">
                <h3 class="text-lg font-semibold mb-4">${roleId ? 'Modifier' : 'Ajouter'} un rôle</h3>
                <form id="roleForm">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom du rôle</label>
                            <input type="text" name="name" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Code</label>
                            <input type="text" name="code" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="ROLE_CODE">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Couleur</label>
                                <input type="color" name="color" value="#3B82F6" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-10">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icône</label>
                                <input type="text" name="icon" value="fas fa-user" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="fas fa-user">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">Permissions</label>
                            <div class="grid grid-cols-2 gap-2 max-h-40 overflow-y-auto">
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="medical" class="mr-2"> Médical</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="accounting" class="mr-2"> Comptabilité</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="usa" class="mr-2"> USA</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="stock" class="mr-2"> Stock</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="hr" class="mr-2"> RH</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="it" class="mr-2"> IT</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="communication" class="mr-2"> Communication</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="security" class="mr-2"> Sécurité</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="infrastructure" class="mr-2"> Infrastructure</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="explorations" class="mr-2"> Explorations</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="laboratory" class="mr-2"> Laboratoire</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="imaging" class="mr-2"> Imagerie</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="reports" class="mr-2"> Rapports</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="soins" class="mr-2"> Soins</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="surveillance" class="mr-2"> Surveillance</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="medicaments" class="mr-2"> Médicaments</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="hygiene" class="mr-2"> Hygiène</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="documentation" class="mr-2"> Documentation</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="knowledge_base" class="mr-2"> Base de connaissances</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="all" class="mr-2"> <strong>Tous les droits</strong></label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="user_management" class="mr-2"> Gestion utilisateurs</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="role_management" class="mr-2"> Gestion rôles</label>
                                <label class="flex items-center"><input type="checkbox" name="permissions" value="system_config" class="mr-2"> Config système</label>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50" onclick="this.closest('.fixed').remove()">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                            ${roleId ? 'Modifier' : 'Ajouter'}
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        document.getElementById('roleForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const roleData = {};
            
            // Récupérer les données du formulaire
            roleData.name = formData.get('name');
            roleData.code = formData.get('code');
            roleData.description = formData.get('description');
            roleData.color = formData.get('color');
            roleData.icon = formData.get('icon');
            
            // Récupérer les permissions sélectionnées
            const permissions = [];
            formData.getAll('permissions').forEach(permission => {
                permissions.push(permission);
            });
            roleData.permissions = permissions;
            
            if (roleId) {
                updateRole(roleId, roleData);
            } else {
                createRole(roleData);
            }
            
            modal.remove();
        });
    }

    function createRole(roleData) {
        fetch('{{ path('app_settings_roles_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(roleData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Rôle créé avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de création', 'error');
        });
    }

    function updateRole(roleId, roleData) {
        fetch(`/settings/roles/${roleId}/edit`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(roleData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Rôle modifié avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de modification', 'error');
        });
    }

    function deleteRole(roleId) {
        fetch(`/settings/roles/${roleId}/delete`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Rôle supprimé avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de suppression', 'error');
        });
    }

    // Gestion des catégories de tâches
    document.getElementById('addCategoryBtn').addEventListener('click', function() {
        showCategoryModal();
    });

    document.getElementById('addSubCategoryBtn').addEventListener('click', function() {
        showSubCategoryModal();
    });

    document.querySelectorAll('.edit-category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const categoryName = this.getAttribute('data-category-name');
            showCategoryModal(categoryName);
        });
    });

    document.querySelectorAll('.delete-category-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const categoryName = this.getAttribute('data-category-name');
            if (confirm(`Êtes-vous sûr de vouloir supprimer la catégorie "${categoryName}" ?`)) {
                deleteCategory(categoryName);
            }
        });
    });

    document.querySelectorAll('.add-subcategory-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const categoryName = this.getAttribute('data-category-name');
            showSubCategoryModal(categoryName);
        });
    });

    document.querySelectorAll('.edit-subcategory-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const subcategoryName = this.getAttribute('data-subcategory-name');
            const categoryName = this.getAttribute('data-category-name');
            showSubCategoryModal(categoryName, subcategoryName);
        });
    });

    document.querySelectorAll('.delete-subcategory-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const subcategoryName = this.getAttribute('data-subcategory-name');
            if (confirm(`Êtes-vous sûr de vouloir supprimer la sous-catégorie "${subcategoryName}" ?`)) {
                deleteSubCategory(subcategoryName);
            }
        });
    });

    function showCategoryModal(categoryName = null) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-white rounded-lg p-6 w-full max-w-lg">
                <h3 class="text-lg font-semibold mb-4">${categoryName ? 'Modifier' : 'Ajouter'} une catégorie</h3>
                <form id="categoryForm">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la catégorie</label>
                            <input type="text" name="name" value="${categoryName || ''}" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Couleur</label>
                                <input type="color" name="color" value="#8B5CF6" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-10">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icône</label>
                                <input type="text" name="icon" value="fas fa-tag" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="fas fa-tag">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Ordre d'affichage</label>
                            <input type="number" name="sortOrder" value="0" min="0" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50" onclick="this.closest('.fixed').remove()">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
                            ${categoryName ? 'Modifier' : 'Ajouter'}
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        document.getElementById('categoryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const categoryData = {};
            
            for (let [key, value] of formData.entries()) {
                categoryData[key] = value;
            }
            
            if (categoryName) {
                updateCategory(categoryName, categoryData);
            } else {
                createCategory(categoryData);
            }
            
            modal.remove();
        });
    }

    function showSubCategoryModal(categoryName = null, subcategoryName = null) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        const isEdit = subcategoryName !== null;
        const showCategorySelector = categoryName === null;
        
        // Récupérer la liste des catégories pour le sélecteur
        const categoryOptions = [];
        {% for category in taskCategories %}
            categoryOptions.push({name: '{{ category.name }}', selected: '{{ category.name }}' === categoryName});
        {% endfor %}
        
        let categorySelectHTML = '';
        if (showCategorySelector) {
            categorySelectHTML = `
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">Catégorie parent</label>
                    <select name="categoryName" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        <option value="">Sélectionner une catégorie</option>
                        ${categoryOptions.map(cat => `<option value="${cat.name}" ${cat.selected ? 'selected' : ''}>${cat.name}</option>`).join('')}
                    </select>
                </div>
            `;
        }
        
        modal.innerHTML = `
            <div class="bg-white rounded-lg p-6 w-full max-w-lg">
                <h3 class="text-lg font-semibold mb-4">${isEdit ? 'Modifier' : 'Ajouter'} une sous-catégorie ${!showCategorySelector && !isEdit ? 'à "' + categoryName + '"' : ''}</h3>
                <form id="subCategoryForm">
                    <div class="space-y-4">
                        ${categorySelectHTML}
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de la sous-catégorie</label>
                            <input type="text" name="name" value="${subcategoryName || ''}" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Couleur</label>
                                <input type="color" name="color" value="#8B5CF6" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-10">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icône</label>
                                <input type="text" name="icon" value="fas fa-tag" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="fas fa-tag">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Ordre d'affichage</label>
                            <input type="number" name="sortOrder" value="0" min="0" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50" onclick="this.closest('.fixed').remove()">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700">
                            ${isEdit ? 'Modifier' : 'Ajouter'}
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        document.getElementById('subCategoryForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const subCategoryData = {};
            
            for (let [key, value] of formData.entries()) {
                subCategoryData[key] = value;
            }
            
            // Si categoryName n'est pas fourni dans les paramètres, le prendre du formulaire
            if (!categoryName) {
                categoryName = subCategoryData.categoryName;
            } else {
                subCategoryData.categoryName = categoryName;
            }
            
            if (isEdit) {
                subCategoryData.originalName = subcategoryName;
                updateSubCategory(subCategoryData);
            } else {
                createSubCategory(subCategoryData);
            }
            modal.remove();
        });
    }

    function createCategory(categoryData) {
        fetch('{{ path('app_settings_categories_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(categoryData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Catégorie créée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de création', 'error');
        });
    }

    function updateCategory(categoryName, categoryData) {
        fetch('{{ path('app_settings_categories_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({...categoryData, originalName: categoryName})
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Catégorie modifiée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de modification', 'error');
        });
    }

    function deleteCategory(categoryName) {
        fetch('{{ path('app_settings_categories_delete', {id: 'placeholder'}) }}'.replace('placeholder', encodeURIComponent(categoryName)), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Catégorie supprimée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de suppression', 'error');
        });
    }

    function createSubCategory(subCategoryData) {
        fetch('{{ path('app_settings_subcategories_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(subCategoryData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Sous-catégorie créée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de création', 'error');
        });
    }

    function updateSubCategory(subCategoryData) {
        fetch('{{ path('app_settings_subcategories_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(subCategoryData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Sous-catégorie modifiée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de modification', 'error');
        });
    }

    function deleteSubCategory(subcategoryName) {
        fetch('{{ path('app_settings_subcategories_delete', {id: 'placeholder'}) }}'.replace('placeholder', encodeURIComponent(subcategoryName)), {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Sous-catégorie supprimée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de suppression', 'error');
        });
    }

    // Gestion des équipes
    document.getElementById('addTeamBtn').addEventListener('click', function() {
        showTeamModal();
    });

    document.querySelectorAll('.edit-team-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            const teamId = this.getAttribute('data-team-id');
            showTeamModal(teamId);
        });
    });

    document.querySelectorAll('.delete-team-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (confirm('Êtes-vous sûr de vouloir supprimer cette équipe ?')) {
                const teamId = this.getAttribute('data-team-id');
                deleteTeam(teamId);
            }
        });
    });

    function showTeamModal(teamId = null) {
        const modal = document.createElement('div');
        modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50';
        modal.innerHTML = `
            <div class="bg-white rounded-lg p-6 w-full max-w-md">
                <h3 class="text-lg font-semibold mb-4">${teamId ? 'Modifier' : 'Ajouter'} une équipe</h3>
                <form id="teamForm">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Nom de l'équipe</label>
                            <input type="text" name="name" required class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
                            <textarea name="description" rows="2" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm"></textarea>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Couleur</label>
                                <input type="color" name="color" value="#3B82F6" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm h-10">
                            </div>
                            <div>
                                <label class="block text-sm font-medium text-gray-700 mb-1">Icône</label>
                                <input type="text" name="icon" value="fas fa-users" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm" placeholder="fas fa-users">
                            </div>
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-1">Chef d'équipe</label>
                            <select name="leaderId" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm">
                                <option value="">Sélectionner un chef d'équipe</option>
                                {% for user in users %}
                                <option value="{{ user.id }}">{{ user.fullName }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-3 mt-6">
                        <button type="button" class="px-4 py-2 text-gray-600 border border-gray-300 rounded-md hover:bg-gray-50" onclick="this.closest('.fixed').remove()">
                            Annuler
                        </button>
                        <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700">
                            ${teamId ? 'Modifier' : 'Ajouter'}
                        </button>
                    </div>
                </form>
            </div>
        `;
        
        document.body.appendChild(modal);
        
        document.getElementById('teamForm').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);
            const teamData = {};
            
            for (let [key, value] of formData.entries()) {
                teamData[key] = value;
            }
            
            if (teamId) {
                updateTeam(teamId, teamData);
            } else {
                createTeam(teamData);
            }
            
            modal.remove();
        });
    }

    function createTeam(teamData) {
        fetch('{{ path('app_settings_teams_save') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(teamData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Équipe créée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de création', 'error');
        });
    }

    function updateTeam(teamId, teamData) {
        fetch(`/settings/teams/${teamId}/edit`, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(teamData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Équipe modifiée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de modification', 'error');
        });
    }

    function deleteTeam(teamId) {
        fetch(`/settings/teams/${teamId}/delete`, {
            method: 'DELETE'
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                showNotification('Équipe supprimée avec succès', 'success');
                location.reload();
            } else {
                showNotification('Erreur: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showNotification('Erreur de suppression', 'error');
        });
    }

    // Gestion de la navigation par onglets
    const tabLinks = document.querySelectorAll('nav a[href^="#"]');
    const tabSections = document.querySelectorAll('[id]');

    function showSection(targetId) {
        // Masquer toutes les sections
        document.querySelectorAll('#general, #notifications, #security, #categories, #users, #integrations').forEach(section => {
            section.style.display = 'none';
        });
        
        // Afficher la section cible
        const targetSection = document.getElementById(targetId);
        if (targetSection) {
            targetSection.style.display = 'block';
        }
        
        // Mettre à jour l'état des onglets
        tabLinks.forEach(link => {
            link.classList.remove('border-blue-500', 'text-blue-600');
            link.classList.add('border-transparent', 'text-gray-500');
        });
        
        // Activer l'onglet courant
        const activeLink = document.querySelector(`nav a[href="#${targetId}"]`);
        if (activeLink) {
            activeLink.classList.remove('border-transparent', 'text-gray-500');
            activeLink.classList.add('border-blue-500', 'text-blue-600');
        }
    }

    // Ajouter les event listeners
    tabLinks.forEach(link => {
        link.addEventListener('click', function(e) {
            e.preventDefault();
            const targetId = this.getAttribute('href').substring(1);
            showSection(targetId);
        });
    });

    // Afficher la section général par défaut
    showSection('general');

    // Gestion de l'upload de logo
    const logoUploadForm = document.getElementById('logoUploadForm');
    const logoInput = document.getElementById('logoInput');
    const logoPreview = document.getElementById('logoPreview');
    const uploadBtn = document.getElementById('uploadBtn');

    // Prévisualisation du logo sélectionné
    if (logoInput) {
        logoInput.addEventListener('change', function(e) {
            console.log('Logo input changed');
            const file = e.target.files[0];
            if (file) {
                console.log('File selected for preview:', file.name, file.type, file.size);
                // Validation basique côté client
                if (!file.type.match('image.*')) {
                    showAdvancedNotification('Veuillez sélectionner un fichier image', 'error');
                    return;
                }
                
                if (file.size > 2 * 1024 * 1024) { // 2MB
                    showAdvancedNotification('Le fichier est trop volumineux (max 2MB)', 'error');
                    return;
                }

                const reader = new FileReader();
                reader.onload = function(e) {
                    console.log('File loaded for preview');
                    if (logoPreview) {
                        logoPreview.innerHTML = `<img src="${e.target.result}" alt="Aperçu" class="max-w-full max-h-full object-contain rounded-lg">`;
                    }
                };
                reader.readAsDataURL(file);
            }
        });
    } else {
        console.error('logoInput not found!');
    }

    // Soumission du formulaire d'upload
    if (logoUploadForm) {
        logoUploadForm.addEventListener('submit', function(e) {
            e.preventDefault();
            console.log('Logo upload form submitted');
            
            const formData = new FormData();
            const file = logoInput.files[0];
            
            if (!file) {
                console.log('No file selected');
                showAdvancedNotification('Veuillez sélectionner un fichier', 'error');
                return;
            }

            console.log('File selected:', file.name, file.size, file.type);
            formData.append('logo', file);
            
            // Désactiver le bouton pendant l'upload
            uploadBtn.disabled = true;
            uploadBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Téléchargement...';

            fetch('{{ path("app_settings_clinic_logo_upload") }}', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                console.log('Upload response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Upload response data:', data);
                if (data.success) {
                    showAdvancedNotification('Logo mis à jour avec succès !', 'success', {
                        autoClose: false,
                        actions: [{
                            text: 'Actualiser la page',
                            action: () => window.location.reload()
                        }]
                    });
                    
                    // Mettre à jour l'aperçu avec la nouvelle URL
                    if (data.logoUrl) {
                        logoPreview.innerHTML = `<img src="${data.logoUrl}?t=${Date.now()}" alt="Logo mis à jour" class="max-w-full max-h-full object-contain rounded-lg">`;
                    }
                    
                } else {
                    console.error('Upload failed:', data.message);
                    showAdvancedNotification('Erreur: ' + data.message, 'error', {
                        autoClose: false
                    });
                }
            })
            .catch(error => {
                console.error('Upload error:', error);
                showAdvancedNotification('Erreur lors du téléchargement du logo', 'error', {
                    autoClose: false
                });
            })
            .finally(() => {
                // Réactiver le bouton
                uploadBtn.disabled = false;
                uploadBtn.innerHTML = '<i class="fas fa-upload mr-2"></i>Télécharger le logo';
            });
        });
    } else {
        console.error('logoUploadForm not found!');
    }
});
</script>
{% endblock %}