<?php
ob_start();
if (session_status() === PHP_SESSION_NONE) {
    session_start();
}
?>
<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>لوحة التحكم | إدارة المستخدمين والصلاحيات</title>
    <!-- Google Fonts: Cairo for beautiful Arabic Typography -->
    <link rel="stylesheet" href="css/cairo.css">
    <!-- Font Awesome for premium icons -->
    <link rel="stylesheet" href="css/fontawesome/css/all.min.css">
    <!-- Styling -->
    <link rel="stylesheet" href="css/style.css">
    <!-- Auth redirect & RBAC check -->
    <script src="js/auth.js"></script>
</head>
<body>
    <div class="app-container">
        <?php include 'includes/sidebar.php'; ?>

        <!-- Main Dashboard Content -->
        <main class="main-content">
            <?php
$pageTitle = "المستخدمين والصلاحيات";
$pageIcon = "fa-users-gear";
include 'includes/header.php';
?>

            <!-- Dashboard Body -->
            <div class="dashboard-body">
                <!-- Welcome Banner -->
                <div class="welcome-banner" style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #3730a3 100%);">
                    <div class="welcome-text">
                        <h1>إدارة المستخدمين وصلاحيات الوصول 👥</h1>
                        <p>خصص حسابات موظفيك، وحدد أدوارهم لضمان أمان البيانات وسلامة القيود المحاسبية والتحصيلات.</p>
                    </div>
                </div>

                <!-- Stats Cards Section -->
                <section class="stats-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">
                    <div class="stat-card">
                        <div class="stat-icon-wrapper blue" style="background-color: rgba(99, 102, 241, 0.1); color: #6366f1;">
                            <i class="fa-solid fa-users"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-total-users">0</h3>
                            <p>إجمالي المستخدمين</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper green" style="background-color: var(--success-light); color: var(--success);">
                            <i class="fa-solid fa-user-check"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-active-users">0</h3>
                            <p>المستخدمين النشطين</p>
                        </div>
                    </div>
                    <div class="stat-card">
                        <div class="stat-icon-wrapper red" style="background-color: var(--danger-light); color: var(--danger);">
                            <i class="fa-solid fa-user-lock"></i>
                        </div>
                        <div class="stat-info">
                            <h3 id="stat-suspended-users">0</h3>
                            <p>الحسابات الموقوفة</p>
                        </div>
                    </div>
                </section>

                <!-- Data Table Section -->
                <section class="table-container-card">
                    <div class="card-header">
                        <div class="header-title-section">
                            <h2>قائمة المستخدمين المسجلين</h2>
                            <p class="subtitle">جدول يعرض أسماء الموظفين، صلاحياتهم وحالة الحساب مع إمكانية التعديل</p>
                        </div>
                        <button class="btn btn-primary" id="open-add-modal-btn">
                            <i class="fa-solid fa-user-plus"></i>
                            إضافة مستخدم جديد
                        </button>
                    </div>

                    <!-- Search & Filter bar -->
                    <div class="filter-bar" style="flex-direction: column; gap: 10px; align-items: stretch; padding: 14px 20px;">
                        <!-- View Mode Tabs Row -->
                        <div style="display:flex; gap:8px; align-items:center; margin-bottom: 4px;">
                            <button id="btn-view-cards" onclick="setViewMode('cards')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); color:#fff; border:none; box-shadow:0 2px 8px rgba(99, 102, 241, 0.2);">
                                <i class="fa-solid fa-grip"></i> عرض كروت الموظفين
                            </button>
                            <button id="btn-view-table" onclick="setViewMode('table')" class="btn" style="padding:8px 16px; border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; transition:var(--transition); background:var(--bg-input); color:var(--text-secondary); border:1.5px solid var(--border-color); box-shadow:none;">
                                <i class="fa-solid fa-table-list"></i> عرض الجدول الكلاسيكي
                            </button>
                        </div>
                        
                        <div style="display:flex; gap:8px; align-items:center;">
                            <div style="position:relative; flex:1;">
                                <i class="fa-solid fa-magnifying-glass" style="position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:14px; pointer-events:none;"></i>
                                <input
                                    type="text"
                                    id="search-input"
                                    placeholder="ابحث باسم الموظف أو اسم المستخدم أو الصلاحية..."
                                    autocomplete="off"
                                    style="width:100%; padding:10px 40px 10px 14px; border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:var(--font-family); font-size:13px; outline:none; transition:var(--transition);"
                                    onfocus="this.style.borderColor='var(--primary)';"
                                    onblur="this.style.borderColor='var(--border-color)';"
                                >
                            </div>
                            <button id="search-btn" onclick="doSearchUsers()" style="padding:10px 18px; border-radius:var(--radius-md); border:none; background:var(--gradient-primary); color:#fff; font-family:var(--font-family); font-size:13px; font-weight:700; cursor:pointer; display:flex; align-items:center; gap:6px; white-space:nowrap; box-shadow:0 2px 8px rgba(59,130,246,0.2); transition:var(--transition);" onmouseover="this.style.transform='translateY(-1px)'" onmouseout="this.style.transform='translateY(0)'">
                                <i class="fa-solid fa-search"></i> بحث
                            </button>
                            <button id="search-clear-btn" onclick="clearSearchUsers()" title="مسح البحث" style="padding:10px 12px; border-radius:var(--radius-md); border:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-secondary); cursor:pointer; display:flex; align-items:center; gap:5px; font-size:13px; transition:var(--transition);" onmouseover="this.style.borderColor='var(--danger)';this.style.color='var(--danger)'" onmouseout="this.style.borderColor='var(--border-color)';this.style.color='var(--text-secondary)'">
                                <i class="fa-solid fa-xmark"></i>
                            </button>
                        </div>
                        <div class="entries-selector" style="justify-content:flex-start;">
                            <span>عرض</span>
                            <select id="entries-count">
                                <option value="5">5</option>
                                <option value="10" selected>10</option>
                                <option value="25">25</option>
                            </select>
                            <span>مستخدمين</span>
                            <span id="search-results-badge" style="display:none; margin-right:12px; font-size:12px; color:var(--primary); font-weight:700; background:var(--primary-light); padding:2px 10px; border-radius:20px;"></span>
                        </div>
                    </div>

                    <!-- Cards Grid Element -->
                    <div id="users-cards-grid" class="users-cards-grid" style="display: none; padding: 20px;">
                        <!-- Dynamic user cards will be rendered here by JS -->
                    </div>

                    <!-- Table Element -->
                    <div class="table-responsive" id="users-table-wrapper">
                        <table class="data-table" id="users-table">
                            <thead>
                                <tr>
                                    <th>التسلسل</th>
                                    <th>الاسم الكامل</th>
                                    <th>اسم المستخدم</th>
                                    <th>الصلاحية</th>
                                    <th>حالة الحساب</th>
                                    <th>الإجراءات</th>
                                </tr>
                            </thead>
                            <tbody id="users-tbody">
                                <!-- Dynamic rows loaded by JS -->
                            </tbody>
                        </table>
                    </div>

                    <!-- Empty State View -->
                    <div class="empty-state" id="empty-state-view">
                        <div class="empty-state-icon" style="background-color: rgba(99, 102, 241, 0.1); color: #6366f1;">
                            <i class="fa-solid fa-users-slash"></i>
                        </div>
                        <h3>لا يوجد مستخدمين مسجلين</h3>
                        <p>تأكد من إضافة حسابات جديدة لموظفي المنظومة لتظهر هنا.</p>
                        <button class="btn btn-secondary-outline" id="empty-state-add-btn">
                            <i class="fa-solid fa-plus"></i> إضافة مستخدم
                        </button>
                    </div>

                    <!-- Table Footer / Pagination -->
                    <div class="table-footer">
                        <div class="pagination-info" id="pagination-info-text">
                            يعرض 0 إلى 0 من أصل 0 مستخدم
                        </div>
                        <div class="pagination-controls" id="pagination-controls">
                            <!-- Pagination buttons dynamically rendered -->
                        </div>
                    </div>
                </section>
            </div>
        </main>
    </div>

    <!-- Modal Form (Add / Edit User) -->
    <div class="modal-overlay" id="user-modal">
        <div class="modal-card" style="max-width: 800px; width: 95%;">
            <div class="modal-header">
                <h3 id="modal-title">إضافة مستخدم جديد</h3>
                <button class="modal-close-btn" id="close-modal-btn">&times;</button>
            </div>
            <form id="user-form" novalidate>
                <input type="hidden" id="user-id">
                <div class="modal-body" style="padding: 20px;">
                    <!-- Basic Info Grid (Two-column layout) -->
                    <div class="basic-info-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin-bottom: 20px;">
                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="user-fullname">الاسم الكامل للموظف <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-id-card input-icon"></i>
                                <input type="text" id="user-fullname" placeholder="أدخل اسم الموظف ثلاثياً..." required minlength="3">
                            </div>
                            <span class="error-msg" id="fullname-error">يرجى إدخال اسم صحيح للموظف (3 أحرف على الأقل)</span>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="user-status">حالة الحساب <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-circle-exclamation input-icon"></i>
                                <select id="user-status" required style="width:100%; padding:12px 48px 12px 16px; border:1px solid var(--border-color); background-color:var(--bg-input); color:var(--text-primary); border-radius:var(--radius-md); font-family:var(--font-family); outline:none; height: 48px; font-size:14px;">
                                    <option value="active" selected>نشط (يسمح بالدخول)</option>
                                    <option value="suspended">موقوف (يمنع من الدخول)</option>
                                </select>
                            </div>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="user-username">اسم المستخدم للدخول <span class="required">*</span></label>
                            <div class="input-wrapper">
                                <i class="fa-solid fa-user-shield input-icon"></i>
                                <input type="text" id="user-username" placeholder="أدخل اسم المستخدم الجديد..." required minlength="3">
                            </div>
                            <span class="error-msg" id="username-error">يرجى إدخال اسم مستخدم صحيح (3 أحرف إنجليزية أو أرقام على الأقل)</span>
                        </div>

                        <div class="form-group" style="margin-bottom: 0;">
                            <label for="user-password">كلمة المرور <span class="required" id="password-req">*</span></label>
                            <div class="input-wrapper" style="position:relative; display:flex; align-items:center;">
                                <i class="fa-solid fa-key input-icon"></i>
                                <input type="password" id="user-password" placeholder="أدخل كلمة المرور..." required minlength="4" style="padding-left:75px;">
                                <div style="position:absolute; left:8px; top:50%; transform:translateY(-50%); display:flex; gap:4px;">
                                    <button type="button" onclick="generateRandomPassword()" title="توليد كلمة مرور عشوائية قوية" style="background:var(--primary-light); color:var(--primary); border:none; padding:4px 8px; border-radius:4px; cursor:pointer; font-size:12px; font-weight:700;">
                                        <i class="fa-solid fa-wand-magic-sparkles"></i>
                                    </button>
                                    <button type="button" class="password-toggle" id="btn-toggle-modal-password" title="عرض كلمة المرور" style="position:static; transform:none;">
                                        <i class="fa-solid fa-eye" id="modal-password-toggle-icon"></i>
                                    </button>
                                </div>
                            </div>
                            <span class="error-msg" id="password-error">يرجى إدخال كلمة مرور (4 خانات على الأقل)</span>
                            <span id="password-help-text" style="font-size:11px; color:var(--text-secondary); display:none; margin-top:4px;">اترك حقل كلمة المرور فارغاً للاحتفاظ بكلمة المرور القديمة دون تعديل.</span>
                        </div>
                    </div>

                    <!-- Permissions Matrix Table -->
                    <div class="form-group" style="margin-bottom: 0;">
                        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;">
                            <label style="font-weight:700; color:var(--text-primary); margin:0;">صلاحيات تصفح الصفحات والعمليات والبيانات <span class="required">*</span></label>
                            <div style="display:flex; gap:8px;">
                                <button type="button" onclick="toggleAllPermissions(true)" class="btn btn-sm btn-secondary-outline" style="font-size:11.5px; padding:3px 10px; border-radius:12px; gap:4px; color:var(--success);">
                                    <i class="fa-solid fa-check-double"></i> تحديد الكل
                                </button>
                                <button type="button" onclick="toggleAllPermissions(false)" class="btn btn-sm btn-secondary-outline" style="font-size:11.5px; padding:3px 10px; border-radius:12px; gap:4px; color:var(--danger);">
                                    <i class="fa-solid fa-xmark"></i> تفريغ الكل
                                </button>
                            </div>
                        </div>
                        <div style="max-height: 280px; overflow-y: auto; border: 1.5px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card);">
                            <table class="data-table" style="width:100%; border-collapse: collapse; margin-bottom:0;">
                                <thead style="position: sticky; top:0; z-index: 20; background: var(--bg-card);">
                                    <tr>
                                        <th style="padding: 10px 14px; font-size:12px; text-align:right; font-weight:700; border-bottom:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary);">الصفحة</th>
                                        <th style="padding: 10px 14px; font-size:12px; text-align:center; font-weight:700; border-bottom:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); width:18%;">عرض / دخول</th>
                                        <th style="padding: 10px 14px; font-size:12px; text-align:center; font-weight:700; border-bottom:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); width:18%;">إضافة وحفظ</th>
                                        <th style="padding: 10px 14px; font-size:12px; text-align:center; font-weight:700; border-bottom:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); width:18%;">تعديل البيانات</th>
                                        <th style="padding: 10px 14px; font-size:12px; text-align:center; font-weight:700; border-bottom:1.5px solid var(--border-color); background:var(--bg-input); color:var(--text-primary); width:18%;">حذف البيانات</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Row 1: index -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-chart-pie" style="color:var(--primary); margin-left:8px;"></i>الرئيسية</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-index-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                    <!-- Row 2: gatherers -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-people-carry-box" style="color:var(--primary); margin-left:8px;"></i>إدارة الجلابين</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-gatherers-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-gatherers-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-gatherers-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-gatherers-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 2.5: customers -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-users" style="color:var(--primary); margin-left:8px;"></i>إدارة العملاء</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-customers-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-customers-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-customers-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-customers-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 3: expenses -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-receipt" style="color:var(--primary); margin-left:8px;"></i>إدارة المصروفات</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-expenses-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-expenses-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-expenses-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-expenses-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 4: safes -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-vault" style="color:var(--primary); margin-left:8px;"></i>صناديق الأموال</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-safes-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-safes-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-safes-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-safes-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 6: materials -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-boxes-stacked" style="color:var(--primary); margin-left:8px;"></i>إضافة المادة</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-materials-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-materials-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-materials-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-materials-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 7: materials_report -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-clipboard-list" style="color:var(--primary); margin-left:8px;"></i>كشف المواد</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-materials_report-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                    <!-- Row 7.5: gatherers_report -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-truck-fast" style="color:var(--primary); margin-left:8px;"></i>كشف الجلابين</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-gatherers_report-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                    <!-- Row 7.6: settlements -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-scale-balanced" style="color:var(--primary); margin-left:8px;"></i>التسويات المالية</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settlements-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settlements-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settlements-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settlements-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 7.7: calibration -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-sliders" style="color:var(--primary); margin-left:8px;"></i>إدارة المعايرة والموازين</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-calibration-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-calibration-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-calibration-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-calibration-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 8: forms -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-file-signature" style="color:var(--primary); margin-left:8px;"></i>الاستمارات</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-forms-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-forms-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-forms-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-forms-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 8.5: pricing -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-tag" style="color:var(--primary); margin-left:8px;"></i>تسعير الاستمارات</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-pricing-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-pricing-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                    <!-- Row 9: debts -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-file-invoice-dollar" style="color:var(--primary); margin-left:8px;"></i>إدارة الديون</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-debts-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-debts-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-debts-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-debts-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 10: users -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-users-gear" style="color:var(--primary); margin-left:8px;"></i>المستخدمين والصلاحيات</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-users-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-users-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-users-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-users-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 10.5: activity_logs -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-history" style="color:var(--primary); margin-left:8px;"></i>سجل العمليات</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-activity_logs-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                    <!-- Row 11: settings -->
                                    <tr style="border-bottom:1px solid var(--border-color);">
                                        <td style="padding: 10px 14px; font-weight:600; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-gears" style="color:var(--primary); margin-left:8px;"></i>إعدادات النظام</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settings-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settings-add" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settings-edit" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-settings-delete" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                    </tr>
                                    <!-- Row 12: view_others_data -->
                                    <tr style="border-bottom:none; background: rgba(59,130,246,0.03);">
                                        <td style="padding: 10px 14px; font-weight:700; font-size:13px; color:var(--text-primary);"><i class="fa-solid fa-users-viewfinder" style="color:var(--primary); margin-left:8px;"></i>عرض بيانات الموظفين الآخرين</td>
                                        <td style="padding: 10px 14px; text-align:center;"><input type="checkbox" id="perm-view_others_data-view" class="perm-matrix-checkbox" checked style="width:16px; height:16px; cursor:pointer; accent-color:var(--primary);"></td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                        <td style="padding: 10px 14px; text-align:center; color:var(--text-muted); font-weight:bold;">-</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" id="cancel-modal-btn">إلغاء</button>
                    <button type="submit" class="btn btn-primary" id="save-btn">
                        <i class="fa-solid fa-save"></i>
                        <span>حفظ الحساب</span>
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Delete Confirmation Modal -->
    <div class="modal-overlay" id="delete-confirm-modal">
        <div class="modal-card modal-confirm">
            <div class="modal-body text-center">
                <div class="confirm-icon">
                    <i class="fa-solid fa-triangle-exclamation text-danger"></i>
                </div>
                <h3>تأكيد عملية الحذف</h3>
                <p>هل أنت متأكد من رغبتك في حذف حساب الموظف <strong id="delete-item-name">---</strong>؟</p>
                <p class="text-danger text-sm" style="font-weight:700; margin-top:8px;">سيتم إيقاف صلاحية دخول هذا الحساب ولن يتمكن من الوصول للمنظومة.</p>
            </div>
            <div class="modal-footer justify-center">
                <button type="button" class="btn btn-secondary" id="cancel-delete-btn">تراجع</button>
                <button type="button" class="btn btn-danger" id="confirm-delete-btn">
                    <i class="fa-solid fa-trash-can"></i>
                    نعم، حذف الحساب
                </button>
            </div>
        </div>
    </div>

    <!-- Toast Container -->
    <div class="toast-container" id="toast-container"></div>

    <script src="js/users.js?v=<?php echo time(); ?>"></script>
</body>
</html>

