<?php
// Database connection
class QuantumDatabase {
    private $conn;
    
    public function __construct() {
        $this->conn = new mysqli('localhost', 'root', '', 'your_database');
        if ($this->conn->connect_error) {
            die("Connection failed: " . $this->conn->connect_error);
        }
    }
    
    public function query($sql, $params = []) {
        $stmt = $this->conn->prepare($sql);
        if (!$stmt) return false;
        
        if (!empty($params)) {
            $types = str_repeat('s', count($params));
            $stmt->bind_param($types, ...$params);
        }
        
        $stmt->execute();
        $result = $stmt->get_result();
        
        if ($result) {
            return $result->fetch_all(MYSQLI_ASSOC);
        }
        
        return $stmt->affected_rows;
    }
    
    public function getSingle($sql, $params = []) {
        $result = $this->query($sql, $params);
        return $result[0] ?? [];
    }
    
    public function escape($data) {
        return $this->conn->real_escape_string($data);
    }
}

$db = new QuantumDatabase();

// Handle form submissions
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_POST['form_type'])) {
        switch ($_POST['form_type']) {
            case 'add_user':
                $name = $db->escape($_POST['name']);
                $username = $db->escape($_POST['username']);
                $email = $db->escape($_POST['email']);
                $password = password_hash($_POST['password'], PASSWORD_BCRYPT);
                $role = $db->escape($_POST['role']);
                $two_factor = isset($_POST['two_factor_enabled']) ? 1 : 0;
                
                // Check if user already exists
                $existing = $db->query("SELECT id FROM users WHERE email = ? OR username = ?", [$email, $username]);
                if (empty($existing)) {
                    $sql = "INSERT INTO users (name, username, email, password, role, two_factor_enabled, status, created_at) 
                            VALUES (?, ?, ?, ?, ?, ?, 'active', NOW())";
                    $result = $db->query($sql, [$name, $username, $email, $password, $role, $two_factor]);
                    
                    if ($result) {
                        echo json_encode(['success' => true, 'message' => 'User created successfully']);
                    } else {
                        echo json_encode(['success' => false, 'message' => 'Error creating user: ' . $db->conn->error]);
                    }
                } else {
                    echo json_encode(['success' => false, 'message' => 'User already exists']);
                }
                exit;
                
            case 'update_user':
                $id = (int)$_POST['id'];
                $name = $db->escape($_POST['name']);
                $username = $db->escape($_POST['username']);
                $email = $db->escape($_POST['email']);
                $role = $db->escape($_POST['role']);
                $status = $db->escape($_POST['status']);
                
                $sql = "UPDATE users SET name = ?, username = ?, email = ?, role = ?, status = ? WHERE id = ?";
                $result = $db->query($sql, [$name, $username, $email, $role, $status, $id]);
                
                echo json_encode(['success' => (bool)$result]);
                exit;
                
            case 'update_security':
                $id = (int)$_POST['id'];
                $two_factor = isset($_POST['two_factor_enabled']) ? 1 : 0;
                $session_limit = isset($_POST['session_limit']) ? (int)$_POST['session_limit'] : null;
                
                $sql = "UPDATE users SET two_factor_enabled = ?, session_limit = ? WHERE id = ?";
                $result = $db->query($sql, [$two_factor, $session_limit, $id]);
                
                echo json_encode(['success' => (bool)$result]);
                exit;
                
            case 'update_password':
                $id = (int)$_POST['id'];
                $password = password_hash($_POST['password'], PASSWORD_BCRYPT);
                
                $sql = "UPDATE users SET password = ? WHERE id = ?";
                $result = $db->query($sql, [$password, $id]);
                
                echo json_encode(['success' => (bool)$result]);
                exit;
                
            case 'update_permissions':
                $id = (int)$_POST['id'];
                $permissions = json_encode($_POST['permissions'] ?? []);
                
                $sql = "UPDATE users SET permissions = ? WHERE id = ?";
                $result = $db->query($sql, [$permissions, $id]);
                
                echo json_encode(['success' => (bool)$result]);
                exit;
                
            case 'bulk_operations':
                $operation = $_POST['operation'];
                $userIds = json_decode($_POST['user_ids'], true);
                
                if ($operation === 'enable_2fa') {
                    $sql = "UPDATE users SET two_factor_enabled = 1 WHERE id IN (" . implode(',', $userIds) . ")";
                    $result = $db->query($sql);
                } elseif ($operation === 'reset_password') {
                    foreach ($userIds as $userId) {
                        $tempPassword = bin2hex(random_bytes(8));
                        $hashed = password_hash($tempPassword, PASSWORD_BCRYPT);
                        $db->query("UPDATE users SET password = ? WHERE id = ?", [$hashed, $userId]);
                    }
                    $result = true;
                } elseif ($operation === 'change_role') {
                    $role = $_POST['role'] ?? 'user';
                    $sql = "UPDATE users SET role = ? WHERE id IN (" . implode(',', $userIds) . ")";
                    $result = $db->query($sql, [$role]);
                } elseif ($operation === 'deactivate') {
                    $sql = "UPDATE users SET status = 'inactive' WHERE id IN (" . implode(',', $userIds) . ")";
                    $result = $db->query($sql);
                } elseif ($operation === 'delete') {
                    $sql = "DELETE FROM users WHERE id IN (" . implode(',', $userIds) . ")";
                    $result = $db->query($sql);
                }
                
                echo json_encode(['success' => (bool)$result]);
                exit;
        }
    }
}

// Handle GET requests
if (isset($_GET['action'])) {
    switch ($_GET['action']) {
        case 'get_user':
            $id = (int)$_GET['id'];
            $user = $db->getSingle("SELECT * FROM users WHERE id = ?", [$id]);
            echo json_encode($user ?: []);
            exit;
            
        case 'toggle_user_status':
            $id = (int)$_GET['id'];
            $status = $_GET['status'];
            $result = $db->query("UPDATE users SET status = ? WHERE id = ?", [$status, $id]);
            echo json_encode(['success' => (bool)$result]);
            exit;
            
        case 'delete_user':
            $id = (int)$_GET['id'];
            $result = $db->query("DELETE FROM users WHERE id = ?", [$id]);
            echo json_encode(['success' => (bool)$result]);
            exit;
            
        case 'mass_enable_2fa':
            $result = $db->query("UPDATE users SET two_factor_enabled = 1");
            echo json_encode(['success' => (bool)$result]);
            exit;
    }
}

function includeUsers() {
    global $db;
    ?>
    
    <!-- QUANTUM USER MANAGEMENT SYSTEM -->
    <div class="quantum-dashboard animate-slide-in">
        <!-- SYSTEM STATUS HEADER -->
        <div class="quantum-header">
            <div class="quantum-title">
                <div class="quantum-icon" style="background: linear-gradient(135deg, var(--primary), #00ccff);">
                    <i class="fas fa-user-astronaut"></i>
                </div>
                <div class="quantum-title-content">
                    <h1 class="quantum-title-text">QUANTUM USER CONTROL</h1>
                    <div class="quantum-title-sub">Neural Network Access Management v5.0</div>
                </div>
            </div>
            
            <div class="quantum-controls">
                <div class="quantum-search">
                    <i class="fas fa-search"></i>
                    <input type="text" class="quantum-search-input" placeholder="NEURAL SEARCH...">
                    <div class="quantum-search-indicator"></div>
                </div>
                
                <div class="quantum-filters">
                    <button class="quantum-chip active" data-filter="all">
                        <span class="quantum-chip-text">ALL USERS</span>
                        <span class="quantum-chip-count"><?php echo $db->getSingle("SELECT COUNT(*) as count FROM users")['count']; ?></span>
                    </button>
                    <button class="quantum-chip" data-filter="online">
                        <span class="quantum-chip-text">ONLINE</span>
                        <span class="quantum-chip-count"><?php 
                            echo $db->getSingle("SELECT COUNT(*) as count FROM users WHERE last_login >= DATE_SUB(NOW(), INTERVAL 15 MINUTE)")['count'];
                        ?></span>
                    </button>
                    <button class="quantum-chip" data-filter="admins">
                        <span class="quantum-chip-text">ADMINS</span>
                        <span class="quantum-chip-count"><?php echo $db->getSingle("SELECT COUNT(*) as count FROM users WHERE role = 'administrator'")['count']; ?></span>
                    </button>
                    <button class="quantum-chip" data-filter="2fa">
                        <span class="quantum-chip-text">2FA ENABLED</span>
                        <span class="quantum-chip-count"><?php echo $db->getSingle("SELECT COUNT(*) as count FROM users WHERE two_factor_enabled = 1")['count']; ?></span>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- QUANTUM METRICS DASHBOARD - RESPONSIVE GRID -->
        <div class="quantum-metrics-grid" id="quantumMetrics">
            <!-- Metrics will be 2x2 grid on mobile -->
            <?php
            $metrics = [
                [
                    'icon' => 'users',
                    'value' => $db->getSingle("SELECT COUNT(*) as count FROM users")['count'],
                    'label' => 'TOTAL USERS',
                    'trend' => '12.5% increase',
                    'color' => '#00ff00'
                ],
                [
                    'icon' => 'shield-alt',
                    'value' => $db->getSingle("SELECT COUNT(*) as count FROM users WHERE two_factor_enabled = 1")['count'],
                    'label' => 'SECURE ACCOUNTS',
                    'trend' => '85% secured',
                    'color' => '#00ccff'
                ],
                [
                    'icon' => 'user-clock',
                    'value' => $db->getSingle("SELECT COUNT(*) as count FROM users WHERE last_login >= DATE_SUB(NOW(), INTERVAL 15 MINUTE)")['count'],
                    'label' => 'ACTIVE NOW',
                    'trend' => '62% online rate',
                    'color' => '#ff00ff'
                ],
                [
                    'icon' => 'user-tag',
                    'value' => $db->getSingle("SELECT COUNT(*) as count FROM users WHERE role IN ('administrator', 'manager')")['count'],
                    'label' => 'ADMIN TEAM',
                    'trend' => '5 roles defined',
                    'color' => '#ffaa00'
                ]
            ];
            
            foreach ($metrics as $metric):
            ?>
            <div class="quantum-metric-card" style="--metric-color: <?php echo $metric['color']; ?>;">
                <div class="quantum-metric-icon">
                    <i class="fas fa-<?php echo $metric['icon']; ?>"></i>
                </div>
                <div class="quantum-metric-content">
                    <div class="quantum-metric-value"><?php echo $metric['value']; ?></div>
                    <div class="quantum-metric-label"><?php echo $metric['label']; ?></div>
                    <div class="quantum-metric-trend">
                        <i class="fas fa-arrow-up"></i> <?php echo $metric['trend']; ?>
                    </div>
                </div>
                <div class="quantum-metric-graph">
                    <svg viewBox="0 0 100 40" class="metric-wave">
                        <path d="M0,20 Q25,10 50,20 T100,20" fill="none" stroke="rgba(0,255,0,0.3)" stroke-width="2"/>
                    </svg>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
        
        <!-- QUANTUM COMMAND CENTER -->
        <div class="quantum-command-center">
            <div class="quantum-command-header">
                <h3 class="quantum-command-title">
                    <i class="fas fa-terminal"></i> USER CONTROL MATRIX
                </h3>
                <div class="quantum-command-actions">
                    <button class="quantum-btn quantum-btn-primary" onclick="openQuantumModal('quantumUserModal')">
                        <i class="fas fa-atom"></i> QUANTUM CREATE
                    </button>
                    <button class="quantum-btn" onclick="bulkUserActions()">
                        <i class="fas fa-layer-group"></i> QUANTUM BULK OPS
                    </button>
                    <button class="quantum-btn" onclick="exportNeuralData()">
                        <i class="fas fa-database"></i> EXPORT MATRIX
                    </button>
                    <button class="quantum-btn quantum-btn-danger" onclick="securityAudit()">
                        <i class="fas fa-radar"></i> SECURITY SCAN
                    </button>
                </div>
            </div>
            
            <!-- USER MATRIX GRID -->
            <div class="quantum-matrix-grid">
                <?php
                $users = $db->query("SELECT * FROM users ORDER BY created_at DESC");
                foreach ($users as $user):
                    $isOnline = strtotime($user['last_login']) >= strtotime('-15 minutes');
                    $lastSeen = $user['last_login'] ? date('Y-m-d H:i', strtotime($user['last_login'])) : 'Never';
                ?>
                <div class="quantum-user-card" data-user-id="<?php echo $user['id']; ?>" data-status="<?php echo $user['status']; ?>" data-role="<?php echo $user['role']; ?>">
                    <!-- USER IDENTIFICATION HOVER -->
                    <div class="quantum-user-hover"></div>
                    
                    <!-- USER HEADER -->
                    <div class="quantum-user-header">
                        <div class="quantum-user-avatar <?php echo $isOnline ? 'avatar-online' : 'avatar-offline'; ?>">
                            <?php echo strtoupper(substr($user['name'], 0, 2)); ?>
                            <?php if ($user['two_factor_enabled']): ?>
                            <div class="avatar-2fa" title="2FA Enabled">
                                <i class="fas fa-shield"></i>
                            </div>
                            <?php endif; ?>
                        </div>
                        
                        <div class="quantum-user-info">
                            <div class="quantum-user-name"><?php echo htmlspecialchars($user['name']); ?></div>
                            <div class="quantum-user-id">@<?php echo htmlspecialchars($user['username']); ?></div>
                            <div class="quantum-user-email"><?php echo htmlspecialchars($user['email']); ?></div>
                        </div>
                        
                        <div class="quantum-user-status">
                            <div class="status-dot <?php echo $isOnline ? 'dot-online' : 'dot-offline'; ?>"></div>
                            <span class="status-text"><?php echo $isOnline ? 'ONLINE' : 'OFFLINE'; ?></span>
                        </div>
                    </div>
                    
                    <!-- USER METADATA -->
                    <div class="quantum-user-meta">
                        <div class="quantum-meta-item">
                            <i class="fas fa-user-tag"></i>
                            <span class="meta-label">ROLE</span>
                            <span class="meta-value role-<?php echo $user['role']; ?>"><?php echo strtoupper($user['role']); ?></span>
                        </div>
                        
                        <div class="quantum-meta-item">
                            <i class="fas fa-calendar"></i>
                            <span class="meta-label">JOINED</span>
                            <span class="meta-value"><?php echo date('d M Y', strtotime($user['created_at'])); ?></span>
                        </div>
                        
                        <div class="quantum-meta-item">
                            <i class="fas fa-clock"></i>
                            <span class="meta-label">LAST SEEN</span>
                            <span class="meta-value"><?php echo $lastSeen; ?></span>
                        </div>
                    </div>
                    
                    <!-- SECURITY STATUS -->
                    <div class="quantum-user-security">
                        <div class="security-indicator <?php echo $user['status']; ?>">
                            <div class="security-bar">
                                <div class="security-fill" style="width: <?php 
                                    $securityScore = 0;
                                    if ($user['two_factor_enabled']) $securityScore += 40;
                                    if (strlen($user['password']) > 10) $securityScore += 30;
                                    if ($user['role'] == 'administrator') $securityScore += 30;
                                    echo min($securityScore, 100);
                                ?>%"></div>
                            </div>
                            <span class="security-text">SECURITY: <?php echo $securityScore; ?>%</span>
                        </div>
                    </div>
                    
                    <!-- QUANTUM ACTIONS -->
                    <div class="quantum-user-actions">
                        <button class="action-btn action-view" onclick="viewUserQuantum(<?php echo $user['id']; ?>)">
                            <i class="fas fa-eye"></i>
                            <span class="action-tooltip">NEURAL VIEW</span>
                        </button>
                        <button class="action-btn action-edit" onclick="editUserQuantum(<?php echo $user['id']; ?>)">
                            <i class="fas fa-pen"></i>
                            <span class="action-tooltip">EDIT PROFILE</span>
                        </button>
                        <button class="action-btn action-security" onclick="manageUserSecurity(<?php echo $user['id']; ?>)">
                            <i class="fas fa-shield-alt"></i>
                            <span class="action-tooltip">SECURITY</span>
                        </button>
                        <button class="action-btn action-permissions" onclick="managePermissions(<?php echo $user['id']; ?>)">
                            <i class="fas fa-key"></i>
                            <span class="action-tooltip">PERMISSIONS</span>
                        </button>
                        <button class="action-btn action-status <?php echo $user['status'] == 'active' ? 'active' : 'inactive'; ?>" 
                                onclick="toggleUserStatus(<?php echo $user['id']; ?>, '<?php echo $user['status']; ?>')">
                            <i class="fas fa-power-off"></i>
                            <span class="action-tooltip"><?php echo $user['status'] == 'active' ? 'DEACTIVATE' : 'ACTIVATE'; ?></span>
                        </button>
                        <button class="action-btn action-delete" onclick="deleteUser(<?php echo $user['id']; ?>)">
                            <i class="fas fa-trash"></i>
                            <span class="action-tooltip">DELETE</span>
                        </button>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
        </div>
        
        <!-- QUANTUM SIDE PANEL -->
        <div class="quantum-side-panel">
            <!-- Side panel content remains same -->
        </div>
    </div>

    <!-- MODAL SYSTEM -->
    <!-- 1. NEURAL VIEW MODAL -->
    <div class="quantum-modal" id="neuralViewModal">
        <div class="quantum-modal-content large">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-brain"></i>
                    <span>NEURAL USER PROFILE</span>
                </div>
                <button class="modal-close" onclick="closeModal('neuralViewModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="quantum-modal-body">
                <div class="neural-view-content" id="neuralViewContent">
                    <!-- Content loaded via AJAX -->
                </div>
            </div>
        </div>
    </div>

    <!-- 2. EDIT PROFILE MODAL -->
    <div class="quantum-modal" id="editProfileModal">
        <div class="quantum-modal-content">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-user-edit"></i>
                    <span>EDIT USER PROFILE</span>
                </div>
                <button class="modal-close" onclick="closeModal('editProfileModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="editProfileForm" onsubmit="return updateProfile(event)">
                <div class="quantum-modal-body">
                    <input type="hidden" id="editUserId" name="id">
                    <input type="hidden" name="form_type" value="update_user">
                    
                    <div class="quantum-form-grid">
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-user"></i> FULL NAME
                            </label>
                            <input type="text" class="quantum-form-input" id="editName" name="name" required>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-at"></i> USERNAME
                            </label>
                            <input type="text" class="quantum-form-input" id="editUsername" name="username" required>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-envelope"></i> EMAIL
                            </label>
                            <input type="email" class="quantum-form-input" id="editEmail" name="email" required>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-user-tag"></i> ROLE
                            </label>
                            <select class="quantum-form-input" id="editRole" name="role">
                                <option value="administrator">Administrator</option>
                                <option value="manager">Manager</option>
                                <option value="supervisor">Supervisor</option>
                                <option value="officer">Officer</option>
                                <option value="user">User</option>
                            </select>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-power-off"></i> STATUS
                            </label>
                            <select class="quantum-form-input" id="editStatus" name="status">
                                <option value="active">Active</option>
                                <option value="inactive">Inactive</option>
                                <option value="suspended">Suspended</option>
                            </select>
                        </div>
                    </div>
                </div>
                
                <div class="quantum-modal-footer">
                    <button type="button" class="quantum-btn" onclick="closeModal('editProfileModal')">
                        CANCEL
                    </button>
                    <button type="submit" class="quantum-btn quantum-btn-primary">
                        <i class="fas fa-save"></i> UPDATE PROFILE
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 3. SECURITY MODAL -->
    <div class="quantum-modal" id="securityModal">
        <div class="quantum-modal-content">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-shield-alt"></i>
                    <span>SECURITY SETTINGS</span>
                </div>
                <button class="modal-close" onclick="closeModal('securityModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="securityForm" onsubmit="return updateSecurity(event)">
                <div class="quantum-modal-body">
                    <input type="hidden" id="securityUserId" name="id">
                    <input type="hidden" name="form_type" value="update_security">
                    
                    <div class="quantum-form-group">
                        <label class="quantum-form-label">
                            <i class="fas fa-shield-alt"></i> TWO-FACTOR AUTHENTICATION
                        </label>
                        <div class="security-toggle-group">
                            <label class="security-option">
                                <input type="checkbox" id="security2FA" name="two_factor_enabled" value="1">
                                <div class="security-toggle"></div>
                                <span>Enable Two-Factor Authentication</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="quantum-form-group">
                        <label class="quantum-form-label">
                            <i class="fas fa-user-lock"></i> SESSION MANAGEMENT
                        </label>
                        <select class="quantum-form-input" id="sessionLimit" name="session_limit">
                            <option value="0">Unlimited Sessions</option>
                            <option value="1">1 Concurrent Session</option>
                            <option value="2">2 Concurrent Sessions</option>
                            <option value="3">3 Concurrent Sessions</option>
                        </select>
                    </div>
                    
                    <div class="quantum-form-group">
                        <label class="quantum-form-label">
                            <i class="fas fa-key"></i> PASSWORD RESET
                        </label>
                        <button type="button" class="quantum-btn" onclick="showPasswordReset()">
                            <i class="fas fa-redo"></i> RESET PASSWORD
                        </button>
                    </div>
                    
                    <div class="quantum-form-group" id="passwordResetSection" style="display: none;">
                        <label class="quantum-form-label">
                            <i class="fas fa-lock"></i> NEW PASSWORD
                        </label>
                        <div class="password-input-group">
                            <input type="password" class="quantum-form-input" id="newPassword" placeholder="Enter new password">
                            <button type="button" class="password-generate" onclick="generatePassword()">
                                <i class="fas fa-random"></i>
                            </button>
                        </div>
                        <div class="password-strength">
                            <div class="strength-bar">
                                <div class="strength-fill"></div>
                            </div>
                            <span class="strength-text">STRENGTH: 0%</span>
                        </div>
                    </div>
                </div>
                
                <div class="quantum-modal-footer">
                    <button type="button" class="quantum-btn" onclick="closeModal('securityModal')">
                        CANCEL
                    </button>
                    <button type="submit" class="quantum-btn quantum-btn-primary">
                        <i class="fas fa-save"></i> SAVE SECURITY SETTINGS
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 4. PERMISSIONS MODAL -->
    <div class="quantum-modal" id="permissionsModal">
        <div class="quantum-modal-content large">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-key"></i>
                    <span>PERMISSIONS MATRIX</span>
                </div>
                <button class="modal-close" onclick="closeModal('permissionsModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="permissionsForm" onsubmit="return updatePermissions(event)">
                <div class="quantum-modal-body">
                    <input type="hidden" id="permissionsUserId" name="id">
                    <input type="hidden" name="form_type" value="update_permissions">
                    
                    <div class="permissions-matrix-grid">
                        <div class="permission-category">
                            <h4><i class="fas fa-users"></i> USER MANAGEMENT</h4>
                            <div class="permission-list">
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="view_users">
                                    <span>View Users</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="create_users">
                                    <span>Create Users</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="edit_users">
                                    <span>Edit Users</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="delete_users">
                                    <span>Delete Users</span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="permission-category">
                            <h4><i class="fas fa-cogs"></i> SYSTEM SETTINGS</h4>
                            <div class="permission-list">
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="view_settings">
                                    <span>View Settings</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="edit_settings">
                                    <span>Edit Settings</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="manage_roles">
                                    <span>Manage Roles</span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="permission-category">
                            <h4><i class="fas fa-chart-bar"></i> REPORTS</h4>
                            <div class="permission-list">
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="view_reports">
                                    <span>View Reports</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="generate_reports">
                                    <span>Generate Reports</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="export_data">
                                    <span>Export Data</span>
                                </label>
                            </div>
                        </div>
                        
                        <div class="permission-category">
                            <h4><i class="fas fa-shield-alt"></i> SECURITY</h4>
                            <div class="permission-list">
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="view_audit_logs">
                                    <span>View Audit Logs</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="manage_2fa">
                                    <span>Manage 2FA</span>
                                </label>
                                <label class="permission-item">
                                    <input type="checkbox" name="permissions[]" value="manage_sessions">
                                    <span>Manage Sessions</span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="quantum-modal-footer">
                    <button type="button" class="quantum-btn" onclick="closeModal('permissionsModal')">
                        CANCEL
                    </button>
                    <button type="submit" class="quantum-btn quantum-btn-primary">
                        <i class="fas fa-save"></i> SAVE PERMISSIONS
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 5. DEACTIVATE MODAL -->
    <div class="quantum-modal" id="deactivateModal">
        <div class="quantum-modal-content">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-power-off"></i>
                    <span>DEACTIVATE USER</span>
                </div>
                <button class="modal-close" onclick="closeModal('deactivateModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="quantum-modal-body">
                <div class="deactivate-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <h3>WARNING: USER DEACTIVATION</h3>
                    <p>Are you sure you want to deactivate this user? They will lose access to the system immediately.</p>
                    <div class="deactivate-options">
                        <label class="deactivate-option">
                            <input type="radio" name="deactivateOption" value="temporary" checked>
                            <span>Temporary Deactivation (Can be reactivated)</span>
                        </label>
                        <label class="deactivate-option">
                            <input type="radio" name="deactivateOption" value="permanent">
                            <span>Permanent Deactivation (Requires admin approval to reactivate)</span>
                        </label>
                    </div>
                    <div class="deactivate-reason">
                        <label>Reason for deactivation:</label>
                        <textarea class="quantum-form-input" placeholder="Enter reason..."></textarea>
                    </div>
                </div>
            </div>
            
            <div class="quantum-modal-footer">
                <button type="button" class="quantum-btn" onclick="closeModal('deactivateModal')">
                    CANCEL
                </button>
                <button type="button" class="quantum-btn quantum-btn-danger" onclick="confirmDeactivation()">
                    <i class="fas fa-power-off"></i> CONFIRM DEACTIVATION
                </button>
            </div>
        </div>
    </div>

    <!-- 6. DELETE MODAL -->
    <div class="quantum-modal" id="deleteModal">
        <div class="quantum-modal-content">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-trash"></i>
                    <span>DELETE USER</span>
                </div>
                <button class="modal-close" onclick="closeModal('deleteModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="quantum-modal-body">
                <div class="delete-warning">
                    <i class="fas fa-skull-crossbones"></i>
                    <h3>CRITICAL: USER DELETION</h3>
                    <p>This action will permanently delete the user and all associated data. This cannot be undone!</p>
                    <div class="delete-confirm">
                        <label>
                            <input type="checkbox" id="deleteConfirm">
                            <span>I understand this action is irreversible</span>
                        </label>
                    </div>
                </div>
            </div>
            
            <div class="quantum-modal-footer">
                <button type="button" class="quantum-btn" onclick="closeModal('deleteModal')">
                    CANCEL
                </button>
                <button type="button" class="quantum-btn quantum-btn-danger" id="deleteButton" disabled onclick="confirmDelete()">
                    <i class="fas fa-trash"></i> PERMANENTLY DELETE
                </button>
            </div>
        </div>
    </div>

    <!-- 7. QUANTUM BULK OPERATIONS MODAL -->
    <div class="quantum-modal" id="bulkOperationsModal">
        <div class="quantum-modal-content large">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-layer-group"></i>
                    <span>QUANTUM BULK OPERATIONS</span>
                </div>
                <button class="modal-close" onclick="closeModal('bulkOperationsModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <div class="quantum-modal-body">
                <div class="bulk-operations-grid">
                    <div class="bulk-selection">
                        <h4>SELECT OPERATION</h4>
                        <div class="bulk-options-grid">
                            <div class="bulk-option-card" data-operation="enable_2fa">
                                <div class="bulk-option-icon">
                                    <i class="fas fa-shield-alt"></i>
                                </div>
                                <div class="bulk-option-content">
                                    <h5>Enable 2FA</h5>
                                    <p>Enable two-factor authentication for selected users</p>
                                </div>
                            </div>
                            
                            <div class="bulk-option-card" data-operation="reset_password">
                                <div class="bulk-option-icon">
                                    <i class="fas fa-key"></i>
                                </div>
                                <div class="bulk-option-content">
                                    <h5>Reset Passwords</h5>
                                    <p>Generate and send new passwords to selected users</p>
                                </div>
                            </div>
                            
                            <div class="bulk-option-card" data-operation="change_role">
                                <div class="bulk-option-icon">
                                    <i class="fas fa-user-tag"></i>
                                </div>
                                <div class="bulk-option-content">
                                    <h5>Change Role</h5>
                                    <p>Change role for multiple users at once</p>
                                </div>
                            </div>
                            
                            <div class="bulk-option-card" data-operation="deactivate">
                                <div class="bulk-option-icon">
                                    <i class="fas fa-power-off"></i>
                                </div>
                                <div class="bulk-option-content">
                                    <h5>Deactivate Users</h5>
                                    <p>Deactivate multiple users simultaneously</p>
                                </div>
                            </div>
                            
                            <div class="bulk-option-card" data-operation="delete">
                                <div class="bulk-option-icon">
                                    <i class="fas fa-trash"></i>
                                </div>
                                <div class="bulk-option-content">
                                    <h5>Delete Users</h5>
                                    <p>Permanently delete selected users</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="bulk-preview">
                        <h4>SELECTED USERS: <span id="selectedCount">0</span></h4>
                        <div class="selected-users-grid" id="selectedUsersGrid">
                            <!-- Selected users will appear here -->
                        </div>
                    </div>
                    
                    <div class="bulk-parameters" id="bulkParameters" style="display: none;">
                        <!-- Dynamic parameters will appear here -->
                    </div>
                </div>
            </div>
            
            <div class="quantum-modal-footer">
                <button type="button" class="quantum-btn" onclick="closeModal('bulkOperationsModal')">
                    CANCEL
                </button>
                <button type="button" class="quantum-btn quantum-btn-primary" id="executeBulkBtn" onclick="executeBulkOperation()" disabled>
                    <i class="fas fa-bolt"></i> EXECUTE QUANTUM OPERATION
                </button>
            </div>
        </div>
    </div>

    <!-- 8. CREATE USER MODAL -->
    <div class="quantum-modal" id="quantumUserModal">
        <div class="quantum-modal-content">
            <div class="quantum-modal-header">
                <div class="modal-title">
                    <i class="fas fa-atom"></i>
                    <span>QUANTUM USER CREATION</span>
                </div>
                <button class="modal-close" onclick="closeModal('quantumUserModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            
            <form id="createUserForm" onsubmit="return createQuantumUser(event)">
                <div class="quantum-modal-body">
                    <input type="hidden" name="form_type" value="add_user">
                    
                    <div class="quantum-form-grid">
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-user"></i> FULL NAME
                            </label>
                            <input type="text" class="quantum-form-input" name="name" required placeholder="Enter full name...">
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-at"></i> USERNAME
                            </label>
                            <input type="text" class="quantum-form-input" name="username" required placeholder="Enter username...">
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-envelope"></i> EMAIL
                            </label>
                            <input type="email" class="quantum-form-input" name="email" required placeholder="Enter email...">
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-key"></i> PASSWORD
                            </label>
                            <div class="password-input-group">
                                <input type="password" class="quantum-form-input" name="password" id="userPassword" required placeholder="Enter password...">
                                <button type="button" class="password-generate" onclick="generatePassword()">
                                    <i class="fas fa-random"></i>
                                </button>
                            </div>
                            <div class="password-strength">
                                <div class="strength-bar">
                                    <div class="strength-fill"></div>
                                </div>
                                <span class="strength-text">STRENGTH: 0%</span>
                            </div>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-user-tag"></i> ROLE
                            </label>
                            <select class="quantum-form-input" name="role">
                                <option value="administrator">Administrator</option>
                                <option value="manager">Manager</option>
                                <option value="supervisor">Supervisor</option>
                                <option value="officer">Officer</option>
                                <option value="user" selected>User</option>
                            </select>
                        </div>
                        
                        <div class="quantum-form-group">
                            <label class="quantum-form-label">
                                <i class="fas fa-shield-alt"></i> SECURITY
                            </label>
                            <label class="security-option">
                                <input type="checkbox" name="two_factor_enabled" value="1">
                                <div class="security-toggle"></div>
                                <span>Enable Two-Factor Authentication</span>
                            </label>
                        </div>
                    </div>
                </div>
                
                <div class="quantum-modal-footer">
                    <button type="button" class="quantum-btn" onclick="closeModal('quantumUserModal')">
                        CANCEL
                    </button>
                    <button type="submit" class="quantum-btn quantum-btn-primary">
                        <i class="fas fa-bolt"></i> QUANTUM CREATE
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- QUANTUM CSS WITH RESPONSIVE UPDATES -->
    <style>
    :root {
        --primary: #00ff00;
        --secondary: #00ccff;
        --success: #00ff00;
        --danger: #ff4757;
        --warning: #ffaa00;
        --text-primary: #ffffff;
        --text-secondary: #a0a0a0;
        --bg-primary: #0a0e17;
        --bg-secondary: #0c111f;
        --font-orbitron: 'Orbitron', sans-serif;
        --font-mono: 'Roboto Mono', monospace;
    }
    
    /* MOBILE RESPONSIVE METRICS GRID */
    @media (max-width: 768px) {
        .quantum-metrics-grid {
            display: grid !important;
            grid-template-columns: repeat(2, 1fr) !important;
            grid-template-rows: repeat(2, 1fr) !important;
            gap: 10px !important;
        }
        
        .quantum-metric-card {
            padding: 15px !important;
            min-height: 150px !important;
        }
        
        .quantum-metric-icon {
            width: 40px !important;
            height: 40px !important;
            font-size: 1.2rem !important;
        }
        
        .quantum-metric-value {
            font-size: 1.8rem !important;
        }
        
        .quantum-metric-label {
            font-size: 0.8rem !important;
        }
    }
    
    /* Desktop metrics grid */
    .quantum-metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
        margin-bottom: 25px;
    }
    
    /* MODAL ENHANCEMENTS */
    .quantum-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.95);
        z-index: 10000;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(10px);
    }
    
    .quantum-modal.active {
        display: flex;
        animation: quantum-modal-in 0.3s ease-out;
    }
    
    @keyframes quantum-modal-in {
        from {
            opacity: 0;
            transform: scale(0.9) translateY(-20px);
        }
        to {
            opacity: 1;
            transform: scale(1) translateY(0);
        }
    }
    
    .quantum-modal-content {
        background: linear-gradient(135deg, #0c111f, #0a0e17);
        border: 1px solid var(--primary);
        border-radius: 20px;
        width: 90%;
        max-width: 500px;
        max-height: 90vh;
        overflow: hidden;
        box-shadow: 0 0 100px rgba(0, 255, 0, 0.3);
        position: relative;
    }
    
    .quantum-modal-content.large {
        max-width: 800px;
    }
    
    /* BULK OPERATIONS STYLES */
    .bulk-operations-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .bulk-options-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 15px;
        margin-top: 20px;
    }
    
    .bulk-option-card {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 20px;
        cursor: pointer;
        transition: all 0.3s;
    }
    
    .bulk-option-card:hover {
        border-color: var(--primary);
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 255, 0, 0.1);
    }
    
    .bulk-option-card.active {
        background: rgba(0, 255, 0, 0.1);
        border-color: var(--primary);
    }
    
    .bulk-option-icon {
        width: 50px;
        height: 50px;
        background: rgba(0, 255, 0, 0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        color: var(--primary);
        margin-bottom: 15px;
    }
    
    .selected-users-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
        max-height: 200px;
        overflow-y: auto;
        margin-top: 15px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }
    
    .selected-user-item {
        background: rgba(0, 255, 0, 0.1);
        border: 1px solid rgba(0, 255, 0, 0.3);
        border-radius: 8px;
        padding: 8px 12px;
        font-size: 0.9rem;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    
    /* PERMISSIONS GRID */
    .permissions-matrix-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
    }
    
    .permission-category {
        background: rgba(0, 0, 0, 0.3);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 10px;
        padding: 20px;
    }
    
    .permission-category h4 {
        color: var(--primary);
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    
    .permission-list {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    
    .permission-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px;
        border-radius: 6px;
        transition: all 0.2s;
    }
    
    .permission-item:hover {
        background: rgba(0, 255, 0, 0.05);
    }
    
    /* WARNING SECTIONS */
    .deactivate-warning, .delete-warning {
        text-align: center;
        padding: 30px;
    }
    
    .deactivate-warning i, .delete-warning i {
        font-size: 4rem;
        color: var(--warning);
        margin-bottom: 20px;
    }
    
    .delete-warning i {
        color: var(--danger);
    }
    
    .deactivate-options {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin: 25px 0;
    }
    
    .deactivate-option {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 15px;
        background: rgba(255, 170, 0, 0.05);
        border: 1px solid rgba(255, 170, 0, 0.2);
        border-radius: 10px;
    }
    
    /* Add responsive styles for existing CSS */
    @media (max-width: 768px) {
        .quantum-modal-content.large {
            max-width: 95%;
            max-height: 85vh;
        }
        
        .quantum-form-grid {
            grid-template-columns: 1fr !important;
        }
        
        .bulk-options-grid {
            grid-template-columns: 1fr !important;
        }
        
        .permissions-matrix-grid {
            grid-template-columns: 1fr !important;
        }
        
        .quantum-command-actions {
            flex-direction: column;
        }
        
        .quantum-btn {
            width: 100%;
            justify-content: center;
        }
    }
    
    /* Keep all your existing CSS styles from the original code */
    /* ... previous CSS code ... */
    
    </style>

    <!-- QUANTUM JAVASCRIPT -->
    <script>
    // Initialize
    let selectedUsers = new Set();
    let currentModal = null;
    let currentBulkOperation = null;
    let currentUserId = null;
    
    document.addEventListener('DOMContentLoaded', function() {
        initQuantumSystem();
        setupEventListeners();
        checkMobileView();
        
        // Setup modal close on outside click
        document.querySelectorAll('.quantum-modal').forEach(modal => {
            modal.addEventListener('click', function(e) {
                if (e.target === this) {
                    closeModal(this.id);
                }
            });
        });
        
        // Setup escape key
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && currentModal) {
                closeModal(currentModal);
            }
        });
        
        // Setup password strength checker
        const passwordInput = document.getElementById('userPassword');
        if (passwordInput) {
            passwordInput.addEventListener('input', function() {
                updatePasswordStrength(this.value);
            });
        }
        
        // Setup delete confirmation
        const deleteConfirm = document.getElementById('deleteConfirm');
        if (deleteConfirm) {
            deleteConfirm.addEventListener('change', function() {
                document.getElementById('deleteButton').disabled = !this.checked;
            });
        }
    });
    
    // Initialize Quantum System
    function initQuantumSystem() {
        // Setup filter chips
        document.querySelectorAll('.quantum-chip').forEach(chip => {
            chip.addEventListener('click', function() {
                document.querySelectorAll('.quantum-chip').forEach(c => c.classList.remove('active'));
                this.classList.add('active');
                filterUsers(this.dataset.filter);
            });
        });
        
        // Setup user card selection
        document.querySelectorAll('.quantum-user-card').forEach(card => {
            card.addEventListener('click', function(e) {
                if (!e.target.closest('.action-btn')) {
                    this.classList.toggle('selected');
                    const userId = this.dataset.userId;
                    
                    if (selectedUsers.has(userId)) {
                        selectedUsers.delete(userId);
                    } else {
                        selectedUsers.add(userId);
                    }
                    
                    updateSelectionCount();
                }
            });
        });
        
        // Setup search
        const searchInput = document.querySelector('.quantum-search-input');
        if (searchInput) {
            searchInput.addEventListener('input', function() {
                searchUsers(this.value.toLowerCase());
            });
        }
        
        // Setup bulk operation cards
        document.querySelectorAll('.bulk-option-card').forEach(card => {
            card.addEventListener('click', function() {
                document.querySelectorAll('.bulk-option-card').forEach(c => c.classList.remove('active'));
                this.classList.add('active');
                currentBulkOperation = this.dataset.operation;
                showBulkParameters(currentBulkOperation);
                document.getElementById('executeBulkBtn').disabled = false;
            });
        });
    }
    
    function setupEventListeners() {
        // Password strength for all password fields
        document.querySelectorAll('input[type="password"]').forEach(input => {
            input.addEventListener('input', function() {
                updatePasswordStrength(this.value);
            });
        });
    }
    
    // Check mobile view and adjust metrics grid
    function checkMobileView() {
        const metricsGrid = document.getElementById('quantumMetrics');
        if (window.innerWidth <= 768) {
            metricsGrid.style.gridTemplateColumns = 'repeat(2, 1fr)';
            metricsGrid.style.gridTemplateRows = 'repeat(2, 1fr)';
        } else {
            metricsGrid.style.gridTemplateColumns = 'repeat(4, 1fr)';
            metricsGrid.style.gridTemplateRows = '1fr';
        }
    }
    
    // Add window resize listener
    window.addEventListener('resize', checkMobileView);
    
    // Modal Functions
    function openModal(modalId) {
        closeAllModals();
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.add('active');
            currentModal = modalId;
            document.body.style.overflow = 'hidden';
        }
    }
    
    function closeModal(modalId) {
        const modal = document.getElementById(modalId);
        if (modal) {
            modal.classList.remove('active');
            currentModal = null;
            document.body.style.overflow = '';
        }
    }
    
    function closeAllModals() {
        document.querySelectorAll('.quantum-modal').forEach(modal => {
            modal.classList.remove('active');
        });
        currentModal = null;
        document.body.style.overflow = '';
    }
    
    // User Action Functions
    function viewUserQuantum(userId) {
        fetch(`?action=get_user&id=${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data) {
                    const content = `
                        <div class="neural-profile">
                            <div class="profile-header">
                                <div class="profile-avatar large">
                                    ${data.name.substring(0, 2).toUpperCase()}
                                </div>
                                <div class="profile-info">
                                    <h2>${data.name}</h2>
                                    <p class="profile-username">@${data.username}</p>
                                    <p class="profile-email">${data.email}</p>
                                    <div class="profile-badges">
                                        <span class="badge role-${data.role}">${data.role}</span>
                                        <span class="badge status-${data.status}">${data.status}</span>
                                        ${data.two_factor_enabled ? '<span class="badge badge-2fa">2FA Enabled</span>' : ''}
                                    </div>
                                </div>
                            </div>
                            
                            <div class="profile-stats">
                                <div class="stat-card">
                                    <h4>Account Created</h4>
                                    <p>${new Date(data.created_at).toLocaleDateString()}</p>
                                </div>
                                <div class="stat-card">
                                    <h4>Last Login</h4>
                                    <p>${data.last_login ? new Date(data.last_login).toLocaleString() : 'Never'}</p>
                                </div>
                                <div class="stat-card">
                                    <h4>Account Status</h4>
                                    <p class="status-${data.status}">${data.status.toUpperCase()}</p>
                                </div>
                            </div>
                        </div>
                    `;
                    document.getElementById('neuralViewContent').innerHTML = content;
                    openModal('neuralViewModal');
                }
            })
            .catch(error => showNotification('Error loading user data', 'danger'));
    }
    
    function editUserQuantum(userId) {
        currentUserId = userId;
        fetch(`?action=get_user&id=${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data) {
                    document.getElementById('editUserId').value = data.id;
                    document.getElementById('editName').value = data.name;
                    document.getElementById('editUsername').value = data.username;
                    document.getElementById('editEmail').value = data.email;
                    document.getElementById('editRole').value = data.role;
                    document.getElementById('editStatus').value = data.status;
                    openModal('editProfileModal');
                }
            })
            .catch(error => showNotification('Error loading user data', 'danger'));
    }
    
    function manageUserSecurity(userId) {
        currentUserId = userId;
        fetch(`?action=get_user&id=${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data) {
                    document.getElementById('securityUserId').value = data.id;
                    document.getElementById('security2FA').checked = data.two_factor_enabled == 1;
                    document.getElementById('sessionLimit').value = data.session_limit || 0;
                    openModal('securityModal');
                }
            })
            .catch(error => showNotification('Error loading user data', 'danger'));
    }
    
    function managePermissions(userId) {
        currentUserId = userId;
        fetch(`?action=get_user&id=${userId}`)
            .then(response => response.json())
            .then(data => {
                if (data) {
                    document.getElementById('permissionsUserId').value = data.id;
                    // Load existing permissions
                    const permissions = data.permissions ? JSON.parse(data.permissions) : [];
                    document.querySelectorAll('input[name="permissions[]"]').forEach(input => {
                        input.checked = permissions.includes(input.value);
                    });
                    openModal('permissionsModal');
                }
            })
            .catch(error => showNotification('Error loading user data', 'danger'));
    }
    
    function toggleUserStatus(userId, currentStatus) {
        const newStatus = currentStatus === 'active' ? 'inactive' : 'active';
        if (confirm(`Are you sure you want to ${newStatus === 'active' ? 'activate' : 'deactivate'} this user?`)) {
            fetch(`?action=toggle_user_status&id=${userId}&status=${newStatus}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showNotification(`User ${newStatus}d successfully`, 'success');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showNotification('Error updating user status', 'danger');
                    }
                })
                .catch(error => showNotification('Network error', 'danger'));
        }
    }
    
    function deleteUser(userId) {
        currentUserId = userId;
        openModal('deleteModal');
    }
    
    // Form Submission Functions
    async function updateProfile(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        
        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            if (data.success) {
                showNotification('Profile updated successfully', 'success');
                closeModal('editProfileModal');
                setTimeout(() => location.reload(), 1000);
            } else {
                showNotification('Error updating profile', 'danger');
            }
        } catch (error) {
            showNotification('Network error', 'danger');
        }
    }
    
    async function updateSecurity(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        
        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            if (data.success) {
                showNotification('Security settings updated', 'success');
                closeModal('securityModal');
            } else {
                showNotification('Error updating security settings', 'danger');
            }
        } catch (error) {
            showNotification('Network error', 'danger');
        }
    }
    
    async function updatePermissions(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        
        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            if (data.success) {
                showNotification('Permissions updated', 'success');
                closeModal('permissionsModal');
            } else {
                showNotification('Error updating permissions', 'danger');
            }
        } catch (error) {
            showNotification('Network error', 'danger');
        }
    }
    
    async function createQuantumUser(event) {
        event.preventDefault();
        const formData = new FormData(event.target);
        
        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            if (data.success) {
                showNotification(data.message || 'User created successfully', 'success');
                closeModal('quantumUserModal');
                setTimeout(() => location.reload(), 1000);
            } else {
                showNotification(data.message || 'Error creating user', 'danger');
            }
        } catch (error) {
            showNotification('Network error', 'danger');
        }
    }
    
    // Bulk Operations
    function bulkUserActions() {
        if (selectedUsers.size === 0) {
            showNotification('Please select users first', 'warning');
            return;
        }
        
        updateSelectedUsersGrid();
        openModal('bulkOperationsModal');
    }
    
    function showBulkParameters(operation) {
        const paramsDiv = document.getElementById('bulkParameters');
        let html = '';
        
        switch(operation) {
            case 'change_role':
                html = `
                    <h4>ROLE SELECTION</h4>
                    <select class="quantum-form-input" id="bulkRoleSelect">
                        <option value="administrator">Administrator</option>
                        <option value="manager">Manager</option>
                        <option value="supervisor">Supervisor</option>
                        <option value="officer">Officer</option>
                        <option value="user">User</option>
                    </select>
                `;
                break;
                
            case 'reset_password':
                html = `
                    <h4>PASSWORD RESET OPTIONS</h4>
                    <label class="security-option">
                        <input type="checkbox" id="sendEmailNotification" checked>
                        <div class="security-toggle"></div>
                        <span>Send email notification with new password</span>
                    </label>
                    <div class="password-preview" id="passwordPreview"></div>
                `;
                break;
                
            case 'deactivate':
                html = `
                    <h4>DEACTIVATION OPTIONS</h4>
                    <div class="deactivate-options">
                        <label class="deactivate-option">
                            <input type="radio" name="bulkDeactivateOption" value="temporary" checked>
                            <span>Temporary Deactivation</span>
                        </label>
                        <label class="deactivate-option">
                            <input type="radio" name="bulkDeactivateOption" value="permanent">
                            <span>Permanent Deactivation</span>
                        </label>
                    </div>
                `;
                break;
        }
        
        paramsDiv.innerHTML = html;
        paramsDiv.style.display = html ? 'block' : 'none';
    }
    
    async function executeBulkOperation() {
        if (!currentBulkOperation || selectedUsers.size === 0) {
            showNotification('Please select an operation and users', 'warning');
            return;
        }
        
        const userIds = Array.from(selectedUsers);
        const formData = new FormData();
        formData.append('form_type', 'bulk_operations');
        formData.append('operation', currentBulkOperation);
        formData.append('user_ids', JSON.stringify(userIds));
        
        // Add operation-specific parameters
        if (currentBulkOperation === 'change_role') {
            const roleSelect = document.getElementById('bulkRoleSelect');
            if (roleSelect) {
                formData.append('role', roleSelect.value);
            }
        }
        
        try {
            const response = await fetch('', {
                method: 'POST',
                body: formData
            });
            
            const data = await response.json();
            if (data.success) {
                showNotification(`Bulk operation completed successfully`, 'success');
                closeModal('bulkOperationsModal');
                selectedUsers.clear();
                updateSelectionCount();
                setTimeout(() => location.reload(), 1500);
            } else {
                showNotification('Error executing bulk operation', 'danger');
            }
        } catch (error) {
            showNotification('Network error', 'danger');
        }
    }
    
    // Utility Functions
    function updateSelectionCount() {
        document.getElementById('selectedCount').textContent = selectedUsers.size;
    }
    
    function updateSelectedUsersGrid() {
        const grid = document.getElementById('selectedUsersGrid');
        grid.innerHTML = '';
        
        selectedUsers.forEach(userId => {
            const card = document.querySelector(`.quantum-user-card[data-user-id="${userId}"]`);
            if (card) {
                const name = card.querySelector('.quantum-user-name').textContent;
                const div = document.createElement('div');
                div.className = 'selected-user-item';
                div.innerHTML = `<i class="fas fa-user"></i> ${name}`;
                grid.appendChild(div);
            }
        });
    }
    
    function generatePassword() {
        const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*';
        let password = '';
        for (let i = 0; i < 12; i++) {
            password += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        
        // Update all password fields
        document.querySelectorAll('input[type="password"]').forEach(input => {
            input.value = password;
        });
        
        updatePasswordStrength(password);
    }
    
    function updatePasswordStrength(password) {
        let strength = 0;
        if (password.length >= 8) strength += 25;
        if (/[A-Z]/.test(password)) strength += 25;
        if (/[0-9]/.test(password)) strength += 25;
        if (/[^A-Za-z0-9]/.test(password)) strength += 25;
        
        document.querySelectorAll('.strength-fill').forEach(fill => {
            fill.style.width = `${strength}%`;
            fill.style.background = strength >= 75 ? 'var(--success)' : 
                                  strength >= 50 ? 'var(--warning)' : 'var(--danger)';
        });
        
        document.querySelectorAll('.strength-text').forEach(text => {
            text.textContent = `STRENGTH: ${strength}%`;
        });
    }
    
    function showPasswordReset() {
        document.getElementById('passwordResetSection').style.display = 'block';
    }
    
    function confirmDeactivation() {
        if (currentUserId) {
            toggleUserStatus(currentUserId, 'active');
            closeModal('deactivateModal');
        }
    }
    
    function confirmDelete() {
        if (currentUserId && confirm('Are you absolutely sure? This cannot be undone!')) {
            fetch(`?action=delete_user&id=${currentUserId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showNotification('User deleted successfully', 'success');
                        closeModal('deleteModal');
                        setTimeout(() => location.reload(), 1000);
                    } else {
                        showNotification('Error deleting user', 'danger');
                    }
                })
                .catch(error => showNotification('Network error', 'danger'));
        }
    }
    
    function filterUsers(filter) {
        document.querySelectorAll('.quantum-user-card').forEach(card => {
            switch(filter) {
                case 'all':
                    card.style.display = 'block';
                    break;
                case 'online':
                    const isOnline = card.querySelector('.dot-online');
                    card.style.display = isOnline ? 'block' : 'none';
                    break;
                case 'admins':
                    card.style.display = card.dataset.role === 'administrator' ? 'block' : 'none';
                    break;
                case '2fa':
                    const has2FA = card.querySelector('.avatar-2fa');
                    card.style.display = has2FA ? 'block' : 'none';
                    break;
            }
        });
    }
    
    function searchUsers(term) {
        document.querySelectorAll('.quantum-user-card').forEach(card => {
            const name = card.querySelector('.quantum-user-name').textContent.toLowerCase();
            const username = card.querySelector('.quantum-user-id').textContent.toLowerCase();
            const email = card.querySelector('.quantum-user-email').textContent.toLowerCase();
            
            card.style.display = (name.includes(term) || username.includes(term) || email.includes(term)) 
                ? 'block' : 'none';
        });
    }
    
    // Notification System
    function showNotification(message, type = 'info') {
        const notification = document.createElement('div');
        notification.className = `quantum-notification notification-${type}`;
        notification.innerHTML = `
            <i class="fas fa-${type === 'success' ? 'check-circle' : 
                               type === 'warning' ? 'exclamation-triangle' : 
                               type === 'danger' ? 'exclamation-circle' : 'info-circle'}"></i>
            <span>${message}</span>
        `;
        
        document.body.appendChild(notification);
        
        setTimeout(() => notification.classList.add('show'), 10);
        
        setTimeout(() => {
            notification.classList.remove('show');
            setTimeout(() => notification.remove(), 300);
        }, 3000);
    }
    
    // Other functions from your original code
    function exportNeuralData() {
        showNotification('Exporting user matrix data...', 'info');
    }
    
    function securityAudit() {
        showNotification('Running security audit...', 'info');
    }
    
    function massEnable2FA() {
        if (confirm('Enable 2FA for all users?')) {
            fetch('?action=mass_enable_2fa')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showNotification('2FA enabled for all users', 'success');
                        setTimeout(() => location.reload(), 1000);
                    }
                });
        }
    }
    
    function sendWelcomeEmails() {
        showNotification('Sending welcome emails...', 'info');
    }
    
    function generateAccessReports() {
        showNotification('Generating access reports...', 'info');
    }
    
    function sessionManagement() {
        showNotification('Opening session management...', 'info');
    }
    </script>

    <!-- NOTIFICATION STYLES -->
    <style>
    .quantum-notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(15, 23, 42, 0.95);
        border: 1px solid;
        border-color: var(--primary);
        border-radius: 10px;
        padding: 15px 20px;
        display: flex;
        align-items: center;
        gap: 15px;
        z-index: 10001;
        transform: translateX(150%);
        transition: transform 0.3s ease-out;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(10px);
        min-width: 300px;
    }
    
    .quantum-notification.show {
        transform: translateX(0);
    }
    
    .notification-success {
        border-color: var(--success);
    }
    
    .notification-warning {
        border-color: var(--warning);
    }
    
    .notification-danger {
        border-color: var(--danger);
    }
    
    .notification-info {
        border-color: var(--secondary);
    }
    
    .quantum-notification i {
        font-size: 1.2rem;
    }
    
    .notification-success i {
        color: var(--success);
    }
    
    .notification-warning i {
        color: var(--warning);
    }
    
    .notification-danger i {
        color: var(--danger);
    }
    
    .notification-info i {
        color: var(--secondary);
    }
    </style>
    <?php
}
?>