<?php
session_start();

// تضمين ملف التحقق من الصلاحيات
require_once 'check_permissions.php';

// التحقق من تسجيل الدخول
if (!isset($_SESSION['user_id'])) {
    header("Location: index.php");
    exit();
}

require_once 'db_connect.php';

// التحقق من صلاحية الوصول إلى الصفحة الحالية
$screen = basename($_SERVER['PHP_SELF'], '.php'); // إزالة .php من اسم الصفحة
checkPermission($conn, $screen);

// جلب بيانات المستخدم الحالي
$user_id = $_SESSION['user_id'];
$user_name = $_SESSION['user_name'] ?? '';

// الشاشات المتاحة لتحديد الصلاحيات (مع أسماء الملفات بدون .php)
$screens = [
    'الرئيسية' => [
        'dashboard' => ['name' => 'الصفحة الرئيسية', 'icon' => 'fas fa-home'],
    ],
    'المبيعات' => [
        'sales_invoice' => ['name' => 'فاتورة مبيعات', 'icon' => 'fas fa-file-invoice'],
        'sales_invoices' => ['name' => 'فواتير البيع', 'icon' => 'fas fa-file-invoice'],
        'pending_invoices' => ['name' => 'فواتير معلقة', 'icon' => 'fas fa-pause-circle'],
        'sales_return' => ['name' => 'مرتجع بيع', 'icon' => 'fas fa-undo'],
        'sales_return_invoices' => ['name' => 'فواتير مرتجع البيع', 'icon' => 'fas fa-undo'],
    ],
    'الشراء' => [
        'purchase_invoice' => ['name' => 'فاتورة شراء', 'icon' => 'fas fa-shopping-cart'],
        'purchase_invoices' => ['name' => 'فواتير الشراء', 'icon' => 'fas fa-shopping-cart'],
        'purchase_return' => ['name' => 'مرتجع شراء', 'icon' => 'fas fa-undo'],
        'purchase_return_invoices' => ['name' => 'فواتير مرتجع الشراء', 'icon' => 'fas fa-undo'],
    ],
    'الموردين والعملاء' => [
        'suppliers' => ['name' => 'الموردين', 'icon' => 'fas fa-truck'],
        'clients' => ['name' => 'العملاء', 'icon' => 'fas fa-users'],
    ],
    'الأصناف' => [
        'add_item' => ['name' => 'الأصناف', 'icon' => 'fas fa-box'],
        'categories' => ['name' => 'التصنيفات', 'icon' => 'fas fa-tags'],
        'units' => ['name' => 'الوحدات', 'icon' => 'fas fa-ruler'],
        'barcode_print' => ['name' => 'طباعة الباركود', 'icon' => 'fas fa-barcode'],
        'item_movement' => ['name' => 'حركة صنف', 'icon' => 'fas fa-exchange-alt'],
    ],
    'الخزنة' => [
        'treasury' => ['name' => 'الخزنة', 'icon' => 'fas fa-vault'],
        'treasury_manage' => ['name' => 'إضافة وتعديل خزنة', 'icon' => 'fas fa-plus-circle'],
        'treasury_transfer' => ['name' => 'تحويل مبلغ من خزنة', 'icon' => 'fas fa-money-bill-transfer'],
    ],
    'المخازن' => [
        'store_add' => ['name' => 'إضافة مخزن', 'icon' => 'fas fa-warehouse'],
        'store_transfer' => ['name' => 'التحويل بين المخازن', 'icon' => 'fas fa-exchange-alt'],
        'store_inventory' => ['name' => 'جرد المخازن', 'icon' => 'fas fa-clipboard-check'],
    ],
    'الموظفين' => [
        'employee_management' => ['name' => 'إدارة موظف', 'icon' => 'fas fa-user-tie'],
        'salary_payments' => ['name' => 'دفع رواتب', 'icon' => 'fas fa-money-check'],
        'employee_report' => ['name' => 'تقرير الموظفين', 'icon' => 'fas fa-file-alt'],
    ],
    'التقارير والإحصائيات' => [
        'daily_revenue' => ['name' => 'الإيراد اليومي', 'icon' => 'fas fa-chart-line'],
    ],
    'المصروفات' => [
        'expenses' => ['name' => 'المصروفات', 'icon' => 'fas fa-money-bill-wave'],
        'expense_types' => ['name' => 'أنواع المصروفات', 'icon' => 'fas fa-list'],
    ],
    'الإعدادات والأدوات' => [
        'settings' => ['name' => 'إعدادات البرنامج', 'icon' => 'fas fa-cogs'],
        'users' => ['name' => 'المستخدمين', 'icon' => 'fas fa-users-cog'],
        'backup' => ['name' => 'نسخة احتياطية', 'icon' => 'fas fa-database'],
    ]
];

// معالجة إضافة/تعديل/حذف
$message = '';
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['add_user']) || isset($_POST['edit_user'])) {
        $username = trim($_POST['username']);
        $password = trim($_POST['password']);
        $role = $_POST['role'] ?? 'user'; // دور المستخدم (admin أو user)
        $permissions = $_POST['permissions'] ?? [];

        try {
            $conn->beginTransaction();

            if (isset($_POST['add_user'])) {
                // إضافة مستخدم جديد
                $hashed_password = password_hash($password, PASSWORD_DEFAULT);
                $stmt = $conn->prepare("INSERT INTO users (username, password, role) VALUES (:username, :password, :role)");
                $stmt->execute([':username' => $username, ':password' => $hashed_password, ':role' => $role]);
                $new_user_id = $conn->lastInsertId();
                $message = "تم إضافة المستخدم بنجاح!";
            } elseif (isset($_POST['edit_user'])) {
                // تعديل مستخدم موجود
                $edit_user_id = $_POST['edit_user_id'];
                $stmt = $conn->prepare("UPDATE users SET username = :username, role = :role" . (!empty($password) ? ", password = :password" : "") . " WHERE id = :id");
                $params = [':username' => $username, ':role' => $role, ':id' => $edit_user_id];
                if (!empty($password)) {
                    $hashed_password = password_hash($password, PASSWORD_DEFAULT);
                    $params[':password'] = $hashed_password;
                }
                $stmt->execute($params);
                $new_user_id = $edit_user_id;
                $message = "تم تعديل المستخدم بنجاح!";

                // حذف الصلاحيات القديمة
                $stmt = $conn->prepare("DELETE FROM permissions WHERE user_id = :user_id");
                $stmt->execute([':user_id' => $new_user_id]);
            }

            // إضافة الصلاحيات (فقط للشاشات المحددة، وفقط إذا لم يكن المستخدم مديرًا)
            if ($role !== 'admin') {
                foreach ($screens as $category => $category_screens) {
                    foreach ($category_screens as $screen_key => $screen_data) {
                        $has_access = isset($permissions[$screen_key]) ? 1 : 0;
                        if ($has_access == 1) {
                            // التأكد من أن اسم الشاشة بدون .php
                            $screen_key = str_replace('.php', '', $screen_key);
                            $stmt = $conn->prepare("INSERT INTO permissions (user_id, screen, access) VALUES (:user_id, :screen, :access)");
                            $stmt->execute([':user_id' => $new_user_id, ':screen' => $screen_key, ':access' => $has_access]);
                        }
                    }
                }
            }

            $conn->commit();
        } catch (PDOException $e) {
            $conn->rollBack();
            error_log("Error adding/editing user: " . $e->getMessage());
            $message = "حدث خطأ أثناء معالجة البيانات: " . $e->getMessage();
        }
    } elseif (isset($_POST['delete_user'])) {
        $delete_user_id = $_POST['delete_user_id'];
        if ($delete_user_id == $user_id) {
            $message = "لا يمكن حذف المستخدم الحالي!";
        } else {
            try {
                $conn->beginTransaction();
                $stmt = $conn->prepare("DELETE FROM permissions WHERE user_id = :user_id");
                $stmt->execute([':user_id' => $delete_user_id]);
                $stmt = $conn->prepare("DELETE FROM users WHERE id = :user_id");
                $stmt->execute([':user_id' => $delete_user_id]);
                $conn->commit();
                $message = "تم حذف المستخدم بنجاح!";
            } catch (PDOException $e) {
                $conn->rollBack();
                error_log("Error deleting user: " . $e->getMessage());
                $message = "حدث خطأ أثناء الحذف: " . $e->getMessage();
            }
        }
    }
}

// جلب قائمة المستخدمين مع أدوارهم
$users = [];
try {
    $users = $conn->query("SELECT id, username, role FROM users")->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    error_log("Error fetching users: " . $e->getMessage());
}

// جلب صلاحيات المستخدمين
$permissions_data = [];
try {
    $stmt = $conn->query("SELECT user_id, screen, access FROM permissions");
    while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
        $permissions_data[$row['user_id']][$row['screen']] = $row['access'];
    }
} catch (PDOException $e) {
    error_log("Error fetching permissions: " . $e->getMessage());
}
?>

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Astra - إدارة المستخدمين</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            min-height: 100vh;
            direction: rtl;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #2ECC71, #3498DB, #E74C3C);
            overflow-x: hidden;
            animation: gradientShift 10s ease infinite;
            background-size: 400% 400%;
        }

        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        .container-fluid {
            padding: 20px;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .card {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            padding: 20px;
            margin-bottom: 20px;
            animation: fadeIn 1s ease-in-out;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        h2 {
            color: #2ECC71;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px;
            text-shadow: 0 0 5px rgba(46, 204, 113, 0.5);
        }

        .form-label {
            color: #3498DB;
            font-weight: bold;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
            font-size: 0.9rem;
        }

        .form-label i {
            margin-left: 8px;
            color: #2ECC71;
        }

        .form-control, .form-select {
            border-radius: 10px;
            border: 2px solid #2ECC71;
            padding: 6px 10px;
            background: rgba(255, 255, 255, 0.8);
            transition: all 0.3s ease;
            box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1);
            font-size: 0.9rem;
        }

        .form-control:focus, .form-select:focus {
            border-color: #3498DB;
            box-shadow: 0 0 10px rgba(52, 152, 219, 0.5), inset 0 2px 5px rgba(0, 0, 0, 0.1);
            background: #fff;
        }

        .btn {
            border-radius: 10px;
            padding: 6px 15px;
            font-weight: bold;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            font-size: 0.9rem;
        }

        .btn-add {
            background: linear-gradient(45deg, #2ECC71, #27AE60);
            border: none;
            color: #fff;
        }

        .btn-add:hover {
            background: linear-gradient(45deg, #27AE60, #219653);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(46, 204, 113, 0.5);
        }

        .btn-edit {
            background: linear-gradient(45deg, #F1C40F, #D4AC0D);
            border: none;
            color: #fff;
        }

        .btn-edit:hover {
            background: linear-gradient(45deg, #D4AC0D, #B7950B);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(241, 196, 15, 0.5);
        }

        .btn-delete {
            background: linear-gradient(45deg, #E74C3C, #C0392B);
            border: none;
            color: #fff;
        }

        .btn-delete:hover {
            background: linear-gradient(45deg, #C0392B, #A93226);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(231, 76, 60, 0.5);
        }

        .btn-select-all {
            background: linear-gradient(45deg, #3498DB, #2980B9);
            border: none;
            color: #fff;
        }

        .btn-select-all:hover {
            background: linear-gradient(45deg, #2980B9, #2471A3);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(52, 152, 219, 0.5);
        }

        .btn i {
            margin-left: 8px;
        }

        .success-message, .error-message {
            text-align: center;
            margin-bottom: 20px;
            font-weight: bold;
            animation: fadeIn 0.5s ease-in-out;
        }

        .success-message {
            color: #2ECC71;
        }

        .error-message {
            color: #E74C3C;
        }

        .table {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            width: 100%;
        }

        .table thead {
            background: #2ECC71;
            color: #fff;
        }

        .table tbody tr:hover {
            background: rgba(46, 204, 113, 0.1);
        }

        .permission-badge {
            display: inline-block;
            background-color: #3498DB;
            color: #fff;
            padding: 5px 10px;
            border-radius: 15px;
            margin: 2px;
            font-size: 0.85rem;
            transition: all 0.3s ease;
        }

        .permission-badge i {
            margin-left: 5px;
        }

        .permission-badge:hover {
            background-color: #2980B9;
            transform: scale(1.05);
        }

        .category-header {
            background-color: #2ECC71;
            color: #fff;
            padding: 8px 15px;
            border-radius: 8px;
            margin: 10px 0 5px 0;
            font-size: 1rem;
            font-weight: bold;
        }

        .form-check {
            margin-bottom: 5px;
            transition: all 0.3s ease;
        }

        .form-check-label {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        .form-check-label i {
            margin-left: 5px;
            color: #2ECC71;
            transition: color 0.3s ease;
        }

        .form-check-input:checked + .form-check-label i {
            color: #3498DB;
        }

        .form-check-input:checked + .form-check-label {
            font-weight: bold;
            color: #3498DB;
        }

        .role-badge {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 0.85rem;
            color: #fff;
        }

        .role-admin {
            background-color: #E74C3C;
        }

        .role-user {
            background-color: #3498DB;
        }
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="card">
            <h2><i class="fas fa-users me-2"></i> إدارة المستخدمين</h2>
            <?php if (!empty($message)): ?>
                <div class="<?php echo strpos($message, 'نجاح') !== false ? 'success-message' : 'error-message'; ?>">
                    <?php echo htmlspecialchars($message); ?>
                </div>
            <?php endif; ?>

            <!-- زر إضافة مستخدم جديد -->
            <div class="mb-4 text-center">
                <button type="button" class="btn btn-add" data-bs-toggle="modal" data-bs-target="#userModal" onclick="resetModal()">
                    <i class="fas fa-user-plus"></i> إضافة مستخدم جديد
                </button>
            </div>

            <!-- جدول المستخدمين -->
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>اسم المستخدم</th>
                            <th>الدور</th>
                            <th>الصلاحيات</th>
                            <th>الإجراءات</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php if (!empty($users)): ?>
                            <?php foreach ($users as $user): ?>
                                <?php
                                $user_permissions = $permissions_data[$user['id']] ?? [];
                                // تحويل الصلاحيات إلى JSON مع التأكد من التعامل مع الأحرف الخاصة
                                $user_permissions_json = json_encode($user_permissions, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP | JSON_UNESCAPED_UNICODE);
                                ?>
                                <tr>
                                    <td><?php echo htmlspecialchars($user['username']); ?></td>
                                    <td>
                                        <span class="role-badge role-<?php echo $user['role']; ?>">
                                            <?php echo $user['role'] === 'admin' ? 'مدير' : 'مستخدم'; ?>
                                        </span>
                                    </td>
                                    <td>
                                        <?php if ($user['role'] === 'admin'): ?>
                                            <span style="color: #2ECC71;">كل الصلاحيات (مدير)</span>
                                        <?php else: ?>
                                            <?php
                                            $has_permissions = false;
                                            foreach ($screens as $category => $category_screens) {
                                                foreach ($category_screens as $screen_key => $screen_data) {
                                                    if (isset($user_permissions[$screen_key]) && $user_permissions[$screen_key] == 1) {
                                                        $has_permissions = true;
                                                        echo '<span class="permission-badge">';
                                                        echo '<i class="' . htmlspecialchars($screen_data['icon']) . '"></i>';
                                                        echo htmlspecialchars($screen_data['name']);
                                                        echo '</span>';
                                                    }
                                                }
                                            }
                                            if (!$has_permissions) {
                                                echo '<span style="color: #E74C3C;">لا توجد صلاحيات</span>';
                                            }
                                            ?>
                                        <?php endif; ?>
                                    </td>
                                    <td>
                                        <button class="btn btn-edit edit-user-btn"
                                            data-user-id="<?php echo $user['id']; ?>"
                                            data-username="<?php echo htmlspecialchars($user['username'], ENT_QUOTES, 'UTF-8'); ?>"
                                            data-role="<?php echo htmlspecialchars($user['role']); ?>"
                                            data-permissions='<?php echo $user_permissions_json; ?>'
                                            data-bs-toggle="modal" data-bs-target="#userModal">
                                            <i class="fas fa-edit"></i> تعديل
                                        </button>
                                        <form method="POST" style="display: inline;" onsubmit="return confirm('هل أنت متأكد من حذف هذا المستخدم؟');">
                                            <input type="hidden" name="delete_user_id" value="<?php echo $user['id']; ?>">
                                            <button type="submit" name="delete_user" class="btn btn-delete">
                                                <i class="fas fa-trash"></i> حذف
                                            </button>
                                        </form>
                                        <!-- زر إدارة الورديات -->
                                        <a href="shift.php?user_id=<?php echo $user['id']; ?>" class="btn btn-primary">
                                            <i class="fas fa-clock"></i> إدارة الورديات
                                        </a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        <?php else: ?>
                            <tr><td colspan="4" style="text-align: center; color: #E74C3C;">لا توجد مستخدمين.</td></tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Modal لإضافة/تعديل مستخدم -->
    <div class="modal fade" id="userModal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalLabel">إضافة مستخدم جديد</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" id="userForm">
                    <div class="modal-body">
                        <input type="hidden" name="edit_user_id" id="editUserId">
                        <div class="mb-3">
                            <label class="form-label"><i class="fas fa-user"></i> اسم المستخدم</label>
                            <input type="text" class="form-control" name="username" id="username" required>
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><i class="fas fa-lock"></i> كلمة المرور (اتركها فارغة إذا لم ترغب في التغيير)</label>
                            <input type="password" class="form-control" name="password" id="password">
                        </div>
                        <div class="mb-3">
                            <label class="form-label"><i class="fas fa-user-shield"></i> الدور</label>
                            <select class="form-select" name="role" id="role" onchange="togglePermissions()">
                                <option value="user">مستخدم</option>
                                <option value="admin">مدير</option>
                            </select>
                        </div>
                        <div class="mb-3" id="permissionsSection">
                            <label class="form-label"><i class="fas fa-shield-alt"></i> الصلاحيات</label>
                            <div class="mb-2">
                                <button type="button" class="btn btn-select-all" onclick="selectAllPermissions(true)">
                                    <i class="fas fa-check-square"></i> تحديد الكل
                                </button>
                                <button type="button" class="btn btn-select-all" onclick="selectAllPermissions(false)">
                                    <i class="fas fa-square"></i> إلغاء تحديد الكل
                                </button>
                            </div>
                            <?php foreach ($screens as $category => $category_screens): ?>
                                <div class="category-header"><?php echo htmlspecialchars($category); ?></div>
                                <div class="row">
                                    <?php foreach ($category_screens as $screen_key => $screen_data): ?>
                                        <div class="col-md-4">
                                            <div class="form-check">
                                                <input type="checkbox" class="form-check-input" name="permissions[<?php echo htmlspecialchars($screen_key); ?>]" id="perm_<?php echo htmlspecialchars($screen_key); ?>">
                                                <label class=" 🙂form-check-label" for="perm_<?php echo htmlspecialchars($screen_key); ?>">
                                                    <i class="<?php echo htmlspecialchars($screen_data['icon']); ?>"></i>
                                                    <?php echo htmlspecialchars($screen_data['name']); ?>
                                                </label>
                                            </div>
                                        </div>
                                    <?php endforeach; ?>
                                </div>
                            <?php endforeach; ?>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">إغلاق</button>
                        <button type="submit" name="add_user" id="submitBtn" class="btn btn-add">إضافة المستخدم</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function resetModal() {
            document.getElementById('userModalLabel').innerText = 'إضافة مستخدم جديد';
            document.getElementById('submitBtn').innerText = 'إضافة المستخدم';
            document.getElementById('submitBtn').setAttribute('name', 'add_user');
            document.getElementById('editUserId').value = '';
            document.getElementById('username').value = '';
            document.getElementById('password').value = '';
            document.getElementById('role').value = 'user';
            document.getElementById('permissionsSection').style.display = 'block';
            document.querySelectorAll('input[name^="permissions"]').forEach(checkbox => {
                checkbox.checked = false;
            });
        }

        function editUser(userId, username, role, permissions) {
            console.log("Editing user:", userId, username, role, permissions); // للتصحيح
            document.getElementById('userModalLabel').innerText = 'تعديل المستخدم';
            document.getElementById('submitBtn').innerText = 'حفظ التغييرات';
            document.getElementById('submitBtn').setAttribute('name', 'edit_user');
            document.getElementById('editUserId').value = userId;
            document.getElementById('username').value = username;
            document.getElementById('password').value = '';
            document.getElementById('role').value = role;
            togglePermissions(); // تحديث حالة قسم الصلاحيات بناءً على الدور
            document.querySelectorAll('input[name^="permissions"]').forEach(checkbox => {
                const screen = checkbox.name.match(/permissions\[(.+)\]/)[1];
                checkbox.checked = permissions && permissions[screen] == 1;
            });
        }

        function selectAllPermissions(select) {
            document.querySelectorAll('input[name^="permissions"]').forEach(checkbox => {
                checkbox.checked = select;
            });
        }

        function togglePermissions() {
            const role = document.getElementById('role').value;
            const permissionsSection = document.getElementById('permissionsSection');
            if (role === 'admin') {
                permissionsSection.style.display = 'none';
            } else {
                permissionsSection.style.display = 'block';
            }
        }

        // إضافة مستمع لأزرار التعديل
        document.addEventListener('DOMContentLoaded', function() {
            const editButtons = document.querySelectorAll('.edit-user-btn');
            editButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const userId = this.getAttribute('data-user-id');
                    const username = this.getAttribute('data-username');
                    const role = this.getAttribute('data-role');
                    const permissions = JSON.parse(this.getAttribute('data-permissions'));
                    editUser(userId, username, role, permissions);
                });
            });
        });
    </script>
</body>
</html>