<?php
session_start();
require_once '../db.php';

// Sécurité : Vérification du rôle admin
if (!isset($_SESSION['user_id']) || $_SESSION['role'] !== 'admin') {
    header('Location: ../index.php');
    exit;
}

// Traitement Ajax / Post pour la mise à jour du rôle ou la suppression
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['action'])) {
        if ($_POST['action'] === 'update_role') {
            $user_id = intval($_POST['user_id']);
            $new_role = trim($_POST['role']);
            
            if (in_array($new_role, ['membre', 'admin'])) {
                try {
                    // Sécurité : Un administrateur ne peut pas modifier son propre rôle ici
                    $stmt = $pdo->prepare("UPDATE utilisateurs SET role = ? WHERE id = ? AND id != ?");
                    $stmt->execute([$new_role, $user_id, $_SESSION['user_id']]);
                    echo json_encode(['status' => 'success', 'message' => 'Rôle mis à jour avec succès.']);
                } catch (PDOException $e) {
                    echo json_encode(['status' => 'error', 'message' => 'Erreur de base de données.']);
                }
                exit;
            }
        }
        
        if ($_POST['action'] === 'delete_user') {
            $user_id = intval($_POST['user_id']);
            
            if ($user_id === $_SESSION['user_id']) {
                echo json_encode(['status' => 'error', 'message' => 'Vous ne pouvez pas supprimer votre propre compte.']);
                exit;
            }
            
            try {
                $stmt = $pdo->prepare("DELETE FROM utilisateurs WHERE id = ?");
                $stmt->execute([$user_id]);
                echo json_encode(['status' => 'success', 'message' => 'Utilisateur supprimé définitivement.']);
            } catch (PDOException $e) {
                echo json_encode(['status' => 'error', 'message' => 'Impossible de supprimer cet utilisateur.']);
            }
            exit;
        }
    }
}

// Gestion de la recherche
$search = isset($_GET['search']) ? trim($_GET['search']) : '';

// Système de Pagination
$limit = 10;
$page = isset($_GET['page']) ? max(1, intval($_GET['page'])) : 1;
$offset = ($page - 1) * $limit;

try {
    // Construction de la requête SQL dynamique selon s'il y a une recherche ou non
    if (!empty($search)) {
        // Compte des lignes correspondantes à la recherche
        $total_stmt = $pdo->prepare("SELECT COUNT(*) FROM utilisateurs WHERE email LIKE :search");
        $total_stmt->execute([':search' => '%' . $search . '%']);
        $total_users = $total_stmt->fetchColumn();
        $total_pages = ceil($total_users / $limit);

        // Extraction filtrée des données
        $stmt = $pdo->prepare("SELECT id, email, role FROM utilisateurs WHERE email LIKE :search ORDER BY id DESC LIMIT :limit OFFSET :offset");
        $stmt->bindValue(':search', '%' . $search . '%', PDO::PARAM_STR);
    } else {
        // Compte standard
        $total_stmt = $pdo->query("SELECT COUNT(*) FROM utilisateurs");
        $total_users = $total_stmt->fetchColumn();
        $total_pages = ceil($total_users / $limit);

        // Extraction standard
        $stmt = $pdo->prepare("SELECT id, email, role FROM utilisateurs ORDER BY id DESC LIMIT :limit OFFSET :offset");
    }

    $stmt->bindValue(':limit', $limit, PDO::PARAM_INT);
    $stmt->bindValue(':offset', $offset, PDO::PARAM_INT);
    $stmt->execute();
    $users = $stmt->fetchAll(PDO::FETCH_ASSOC);

} catch (PDOException $e) {
    die("Erreur lors de la récupération des membres : " . $e->getMessage());
}

// Fonction utilitaire pour attribuer une couleur d'avatar élégante et unique par ID
function getAvatarBgColor($id) {
    $palette = ['#4a51ff', '#00b894', '#00cec9', '#6c5ce7', '#e84393', '#f1c40f', '#e67e22', '#16a085'];
    return $palette[$id % count($palette)];
}
?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Gestion des Membres Premium | ParcoTrip Admin</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2 family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/style.css">
    
    <style>
        :root {
            --bg-premium: #f8fafc;
            --panel-bg: #ffffff;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --accent: #4a51ff;
            --accent-light: rgba(74, 81, 255, 0.08);
            --danger: #ef4444;
            --danger-light: #fef2f2;
            --border: #e2e8f0;
            --radius: 12px;
        }

        body {
            background-color: var(--bg-premium) !important;
            font-family: 'Plus Jakarta Sans', sans-serif !important;
            color: var(--text-main);
        }

        .eu-admin-container {
            max-width: 1200px;
            margin: 40px auto;
            padding: 0 24px;
        }

        /* En-tête de page */
        .eu-page-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 32px;
            flex-wrap: wrap;
            gap: 20px;
        }

        .eu-header-txt h1 {
            font-size: 1.85rem;
            font-weight: 800;
            letter-spacing: -0.5px;
            color: var(--text-main);
            margin-bottom: 6px;
        }

        .eu-header-txt p {
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .eu-stats-badge {
            background: var(--panel-bg);
            padding: 12px 20px;
            border-radius: var(--radius);
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--text-main);
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .eu-stats-badge i {
            color: var(--accent);
            font-size: 1.1rem;
        }

        /* BARRE DE RECHERCHE DESIGN */
        .eu-search-wrapper {
            margin-bottom: 24px;
            width: 100%;
        }

        .eu-search-form {
            display: flex;
            gap: 12px;
            max-width: 500px;
            width: 100%;
        }

        .eu-search-input-box {
            position: relative;
            flex: 1;
        }

        .eu-search-input-box i {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        .eu-search-field {
            width: 100%;
            padding: 12px 16px 12px 44px;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background-color: var(--panel-bg);
            font-family: inherit;
            font-size: 0.92rem;
            font-weight: 500;
            color: var(--text-main);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01);
            transition: all 0.2s ease;
            outline: none;
        }

        .eu-search-field:focus {
            border-color: var(--accent);
            box-shadow: 0 0 0 4px rgba(74, 81, 255, 0.1);
        }

        .eu-btn-search-submit {
            background-color: var(--text-main);
            color: #ffffff;
            border: none;
            border-radius: var(--radius);
            padding: 0 20px;
            font-family: inherit;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.2s;
        }

        .eu-btn-search-submit:hover {
            background-color: var(--accent);
        }

        .eu-btn-search-clear {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #f1f5f9;
            color: var(--text-muted);
            border: 1px solid var(--border);
            border-radius: var(--radius);
            padding: 0 16px;
            text-decoration: none;
            font-size: 0.88rem;
            font-weight: 600;
            transition: all 0.2s;
        }

        .eu-btn-search-clear:hover {
            background-color: #e2e8f0;
            color: var(--text-main);
        }

        /* Tableau sous forme de carte */
        .eu-card-table {
            background: var(--panel-bg);
            border-radius: var(--radius);
            box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
            border: 1px solid var(--border);
            overflow: hidden;
        }

        .eu-table-responsive {
            width: 100%;
            overflow-x: auto;
        }

        .eu-table {
            width: 100%;
            border-collapse: collapse;
            text-align: left;
            font-size: 0.95rem;
        }

        .eu-table th {
            background: #fdfdfd;
            padding: 16px 24px;
            font-weight: 700;
            color: var(--text-muted);
            font-size: 0.82rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            border-bottom: 1px solid var(--border);
        }

        .eu-table tbody tr {
            border-bottom: 1px solid var(--border);
            transition: background 0.2s ease;
        }

        .eu-table tbody tr:last-child {
            border-bottom: none;
        }

        .eu-table tbody tr:hover {
            background: #f8fafc;
        }

        .eu-user-cell-prenom {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 24px;
        }

        .eu-avatar-mini {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 700;
            font-size: 1.05rem;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
            flex-shrink: 0;
        }

        .eu-identity-block {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .eu-pseudo-name {
            font-weight: 700;
            color: var(--text-main);
            font-size: 1rem;
        }

        .eu-email-text {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        .eu-role-container {
            padding: 18px 24px;
        }

        .eu-select-wrapper {
            position: relative;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }

        .eu-role-select {
            appearance: none;
            -webkit-appearance: none;
            background-color: #f1f5f9;
            color: var(--text-main);
            padding: 8px 32px 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 700;
            border: 1px solid transparent;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .eu-role-select:focus {
            outline: none;
            border-color: var(--accent);
            background-color: #ffffff;
            box-shadow: 0 0 0 3px rgba(74, 81, 255, 0.15);
        }

        .eu-role-select[data-current-role="admin"] {
            background-color: rgba(74, 81, 255, 0.1);
            color: var(--accent);
        }
        .eu-role-select[data-current-role="membre"] {
            background-color: #e2e8f0;
            color: #334155;
        }

        .eu-self-badge {
            background: #f0fdf4;
            color: #16a34a;
            padding: 4px 10px;
            border-radius: 12px;
            font-size: 0.75rem;
            font-weight: 700;
            border: 1px solid #dcfce7;
        }

        .eu-btn-delete {
            background: transparent;
            color: var(--text-muted);
            border: 1px solid var(--border);
            padding: 8px 14px;
            border-radius: 8px;
            font-size: 0.85rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }

        .eu-btn-delete:hover:not(:disabled) {
            background: var(--danger-light);
            color: var(--danger);
            border-color: #fca5a5;
        }

        .eu-btn-delete:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        /* Système de Pagination */
        .eu-pagination {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 24px;
            background: #fafafa;
            border-top: 1px solid var(--border);
        }

        .eu-page-btn {
            text-decoration: none;
            color: var(--text-main);
            font-size: 0.88rem;
            font-weight: 700;
            padding: 8px 16px;
            border: 1px solid var(--border);
            background: #ffffff;
            border-radius: 8px;
            transition: all 0.2s ease;
        }

        .eu-page-btn:hover:not(.disabled) {
            background: #f1f5f9;
        }

        .eu-page-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
            pointer-events: none;
        }

        .eu-page-numbers {
            display: flex;
            gap: 6px;
        }

        .eu-page-link {
            text-decoration: none;
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--text-muted);
            transition: all 0.2s ease;
        }

        .eu-page-link:hover {
            background: #f1f5f9;
            color: var(--text-main);
        }

        .eu-page-link.active {
            background: var(--accent);
            color: #ffffff;
            font-weight: 700;
        }

        /* Interface Modale de Confirmation */
        .eu-modal-overlay {
            position: fixed;
            top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(4px);
            z-index: 999999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            visibility: hidden;
            transition: all 0.25s ease;
        }

        .eu-modal-overlay.is-active {
            opacity: 1;
            visibility: visible;
        }

        .eu-modal-box {
            background: #ffffff;
            width: 100%;
            max-width: 440px;
            border-radius: 16px;
            padding: 32px;
            text-align: center;
            box-shadow: 0 20px 50px rgba(0,0,0,0.15);
            transform: translateY(20px);
            transition: transform 0.25s ease;
        }

        .eu-modal-overlay.is-active .eu-modal-box {
            transform: translateY(0);
        }

        .eu-modal-icon {
            width: 56px;
            height: 56px;
            background: var(--danger-light);
            color: var(--danger);
            font-size: 1.5rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px auto;
        }

        .eu-modal-box h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--text-main);
            margin-bottom: 10px;
        }

        .eu-modal-box p {
            color: var(--text-muted);
            font-size: 0.95rem;
            line-height: 1.5;
            margin-bottom: 26px;
        }

        .eu-modal-actions {
            display: flex;
            gap: 12px;
        }

        .eu-modal-btn {
            flex: 1;
            padding: 12px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 700;
            cursor: pointer;
            border: 1px solid transparent;
            transition: all 0.2s ease;
        }

        .btn-cancel {
            background: #ffffff;
            border-color: var(--border);
            color: var(--text-muted);
        }
        .btn-cancel:hover { background: #f8fafc; }

        .btn-confirm {
            background: var(--danger);
            color: #ffffff;
        }
        .btn-confirm:hover { background: #dc2626; }

        .eu-toast {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #0f172a;
            color: #ffffff;
            padding: 14px 24px;
            border-radius: 10px;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(0,0,0,0.2);
            z-index: 1000000;
            display: flex;
            align-items: center;
            gap: 10px;
            transform: translateY(40px);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .eu-toast.show {
            transform: translateY(0);
            opacity: 1;
        }
    </style>
</head>
<body>

    <?php include_once 'sidebaradmin.php'; ?>

    <main class="eu-admin-container">
        
        <div class="eu-page-header">
            <div class="eu-header-txt">
                <h1>Membres de la communauté 👥</h1>
                <p>Visualisez, gérez les privilèges d'accès ou révoquez les utilisateurs de ParcoTrip.</p>
            </div>
            <div class="eu-stats-badge">
                <i class="fa-solid fa-users"></i> Total : <b><?= $total_users ?></b> membre(s)
            </div>
        </div>

        <div class="eu-search-wrapper">
            <form action="edituser.php" method="GET" class="eu-search-form">
                <div class="eu-search-input-box">
                    <i class="fa-solid fa-magnifying-glass"></i>
                    <input type="text" 
                           name="search" 
                           class="eu-search-field" 
                           placeholder="Rechercher par prénom (pseudo) ou email..." 
                           value="<?= htmlspecialchars($search) ?>">
                </div>
                <button type="submit" class="eu-btn-search-submit">Filtrer</button>
                <?php if (!empty($search)): ?>
                    <a href="edituser.php" class="eu-btn-search-clear">Effacer</a>
                <?php endif; ?>
            </form>
        </div>

        <div class="eu-card-table">
            <div class="eu-table-responsive">
                <table class="eu-table">
                    <thead>
                        <tr>
                            <th>Profil & Prénom (Pseudo)</th>
                            <th>Niveau de Privilège / Rôle</th>
                            <th style="text-align: right; padding-right: 24px;">Actions de Compte</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (empty($users)): ?>
                            <tr>
                                <td colspan="3" style="text-align: center; padding: 60px; color: var(--text-muted); font-weight: 600;">
                                    Aucun utilisateur ne correspond à votre recherche "<b><?= htmlspecialchars($search) ?></b>".
                                </td>
                            </tr>
                        <?php else: ?>
                            <?php foreach ($users as $user): 
                                $is_self = ($user['id'] == $_SESSION['user_id']);
                                $userEmail = !empty($user['email']) ? $user['email'] : 'visiteur@parcotrip.fr';
                                
                                // Pseudo extrait de la partie gauche de l'email (faisant office de prénom/identifiant)
                                $pseudo = explode('@', $userEmail)[0];
                                $initiale = strtoupper(substr($pseudo, 0, 1));
                                $avatarBg = getAvatarBgColor($user['id']);
                                $currentRole = (!empty($user['role']) && $user['role'] === 'admin') ? 'admin' : 'membre';
                            ?>
                                <tr id="user-row-<?= $user['id'] ?>">
                                    <td>
                                        <div class="eu-user-cell-prenom">
                                            <div class="eu-avatar-mini" style="background-color: <?= $avatarBg ?>;">
                                                <?= htmlspecialchars($initiale) ?>
                                            </div>
                                            <div class="eu-identity-block">
                                                <span class="eu-pseudo-name"><?= htmlspecialchars($pseudo) ?></span>
                                                <span class="eu-email-text"><?= htmlspecialchars($userEmail) ?></span>
                                            </div>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="eu-role-container">
                                            <div class="eu-select-wrapper">
                                                <select class="eu-role-select" 
                                                        data-user-id="<?= $user['id'] ?>" 
                                                        data-current-role="<?= $currentRole ?>"
                                                        <?= $is_self ? 'disabled' : '' ?>>
                                                    <option value="membre" <?= ($currentRole === 'membre') ? 'selected' : '' ?>>Membre</option>
                                                    <option value="admin" <?= ($currentRole === 'admin') ? 'selected' : '' ?>>Administrateur</option>
                                                </select>
                                                <?php if($is_self): ?>
                                                    <span class="eu-self-badge"><i class="fa-solid fa-user-shield"></i> Vous</span>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </td>
                                    <td style="text-align: right; padding-right: 24px;">
                                        <button type="button" 
                                                class="eu-btn-delete" 
                                                data-user-id="<?= $user['id'] ?>" 
                                                data-username="<?= htmlspecialchars($pseudo) ?>"
                                                <?= $is_self ? 'disabled' : '' ?>>
                                            <i class="fa-solid fa-trash-can"></i> Supprimer
                                        </button>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>

            <?php if ($total_pages > 1): ?>
                <?php $searchParam = !empty($search) ? '&search=' . urlencode($search) : ''; ?>
                <div class="eu-pagination">
                    <a href="edituser.php?page=<?= max(1, $page - 1) . $searchParam ?>" class="eu-page-btn <?= ($page <= 1) ? 'disabled' : '' ?>">
                        <i class="fa-solid fa-chevron-left"></i> Précédent
                    </a>
                    
                    <div class="eu-page-numbers">
                        <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                            <a href="edituser.php?page=<?= $i . $searchParam ?>" class="eu-page-link <?= ($page === $i) ? 'active' : '' ?>">
                                <?= $i ?>
                            </a>
                        <?php endfor; ?>
                    </div>

                    <a href="edituser.php?page=<?= min($total_pages, $page + 1) . $searchParam ?>" class="eu-page-btn <?= ($page >= $total_pages) ? 'disabled' : '' ?>">
                        Suivant <i class="fa-solid fa-chevron-right"></i>
                    </a>
                </div>
            <?php endif; ?>
        </div>
    </main>

    <div class="eu-modal-overlay" id="euDeleteModal">
        <div class="eu-modal-box">
            <div class="eu-modal-icon">
                <i class="fa-solid fa-triangle-exclamation"></i>
            </div>
            <h3>Supprimer le compte ?</h3>
            <p>Êtes-vous sûr de vouloir révoquer définitivement l'accès de <b id="euModalUsername"></b> ? Cette action détruira son profil.</p>
            <div class="eu-modal-actions">
                <button type="button" class="eu-modal-btn btn-cancel" id="euCancelDelete">Annuler</button>
                <button type="button" class="eu-modal-btn btn-confirm" id="euConfirmDelete">Supprimer le compte</button>
            </div>
        </div>
    </div>

    <div id="euToast" class="eu-toast"></div>

    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const toast = document.getElementById("euToast");
        
        function showNotification(message) {
            toast.textContent = message;
            toast.classList.add("show");
            setTimeout(() => { toast.classList.remove("show"); }, 3500);
        }

        // GESTION DU CHANGEMENT DE RÔLE ASYNC AJAX
        document.querySelectorAll(".eu-role-select").forEach(select => {
            select.addEventListener("change", function() {
                const userId = this.getAttribute("data-user-id");
                const newRole = this.value;
                const self = this;

                const formData = new FormData();
                formData.append("action", "update_role");
                formData.append("user_id", userId);
                formData.append("role", newRole);

                fetch("edituser.php", {
                    method: "POST",
                    body: formData
                })
                .then(res => res.json())
                .then(data => {
                    if(data.status === "success") {
                        self.setAttribute("data-current-role", newRole);
                        showNotification("✨ " + data.message);
                    } else {
                        showNotification("❌ " + data.message);
                    }
                })
                .catch(() => showNotification("❌ Erreur réseau de communication."));
            });
        });

        // LOGIQUE DE LA MODALE DE SUPPRESSION
        const modal = document.getElementById("euDeleteModal");
        const cancelBtn = document.getElementById("euCancelDelete");
        const confirmBtn = document.getElementById("euConfirmDelete");
        const modalUsername = document.getElementById("euModalUsername");
        let activeUserIdToDelete = null;

        document.querySelectorAll(".eu-btn-delete").forEach(btn => {
            btn.addEventListener("click", function() {
                activeUserIdToDelete = this.getAttribute("data-user-id");
                modalUsername.textContent = this.getAttribute("data-username");
                modal.classList.add("is-active");
            });
        });

        cancelBtn.addEventListener("click", () => {
            modal.classList.remove("is-active");
            activeUserIdToDelete = null;
        });

        confirmBtn.addEventListener("click", () => {
            if(!activeUserIdToDelete) return;

            const formData = new FormData();
            formData.append("action", "delete_user");
            formData.append("user_id", activeUserIdToDelete);

            fetch("edituser.php", {
                method: "POST",
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                modal.classList.remove("is-active");
                if(data.status === "success") {
                    const row = document.getElementById("user-row-" + activeUserIdToDelete);
                    if(row) row.remove();
                    showNotification("🗑️ " + data.message);
                } else {
                    showNotification("❌ " + data.message);
                }
                activeUserIdToDelete = null;
            })
            .catch(() => {
                modal.classList.remove("is-active");
                showNotification("❌ Erreur de suppression.");
            });
        });
    });
    </script>
</body>
</html>