Mini Shell

<?php
session_start();
$rootPath = realpath(dirname(__FILE__) . '/..');
require_once $rootPath . '/Portal/config/config.php';
require_once $rootPath . '/Portal/include/auth_validate.php';

// Get current session user id
$sessionUserId = $_SESSION['id'];
$currentUserRegion = '';
$managerRegUsers = 0;
$managerUsers = 0;

// Check user's permissions from accesslevelmanagement table where UserID equals session user id
$accessQuery = mysqli_query($conn, "SELECT Manager_Reg_Users, ManagerUsers FROM accesslevelmanagement WHERE UserID = '$sessionUserId' LIMIT 1");
if ($accessQuery && mysqli_num_rows($accessQuery) > 0) {
    $accessRights = mysqli_fetch_assoc($accessQuery);
    $managerRegUsers = isset($accessRights['Manager_Reg_Users']) ? (int)$accessRights['Manager_Reg_Users'] : 0;
    $managerUsers = isset($accessRights['ManagerUsers']) ? (int)$accessRights['ManagerUsers'] : 0;
}

// IF BOTH ManagerUsers AND Manager_Reg_Users = 0 THEN REDIRECT TO AdminPortal.php
if ($managerUsers == 0 && $managerRegUsers == 0) {
    $_SESSION['failure'] = "You don't have permission to access Access Levels Management.";
    header('location: AdminPortal.php');
    exit();
}

// Get current user's region from admin_accounts (only needed for regional managers)
$userQuery = mysqli_query($conn, "SELECT Region FROM admin_accounts WHERE id = '$sessionUserId'");
if ($userQuery && mysqli_num_rows($userQuery) > 0) {
    $userData = mysqli_fetch_assoc($userQuery);
    $currentUserRegion = $userData['Region'];
}

// Get database instance for db library
$db = getDbInstance();

// Get data from query string
$search_string = filter_input(INPUT_GET, 'search_string', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$filter_col = filter_input(INPUT_GET, 'filter_col', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$order_by = filter_input(INPUT_GET, 'order_by', FILTER_SANITIZE_FULL_SPECIAL_CHARS);
$page = filter_input(INPUT_GET, 'page', FILTER_SANITIZE_NUMBER_INT);

$pagelimit = 10;
if (!$page) {
    $page = 1;
}

// If filter types are not selected we show latest added data first
if (!$filter_col) {
    $filter_col = "accesslevelmanagementID";
}
if (!$order_by) {
    $order_by = "desc";
}

// Select the columns including UserID and Region
$select = array('accesslevelmanagementID', 'AccessName', 'UserID', 'Region');

// APPLY ACCESS CONTROL BASED ON USER PERMISSIONS
if ($managerUsers == 1) {
    // ManagerUsers = 1: Full access - display ALL records from accesslevelmanagement
    // No additional WHERE clause needed - show everything
} elseif ($managerRegUsers == 1) {
    // Manager_Reg_Users = 1: Limited to user's region only
    // First, get all user IDs from admin_accounts that have the same region as the current user
    $usersInSameRegion = [];
    $regionQuery = mysqli_query($conn, "SELECT id FROM admin_accounts WHERE Region = '$currentUserRegion'");
    if ($regionQuery && mysqli_num_rows($regionQuery) > 0) {
        while ($regionUser = mysqli_fetch_assoc($regionQuery)) {
            $usersInSameRegion[] = $regionUser['id'];
        }
    }
    
    // Also include UserID = 0 (unassigned access levels)
    $usersInSameRegion[] = 0;
    
    if (!empty($usersInSameRegion)) {
        $userIdsString = implode(',', array_unique($usersInSameRegion));
        $db->where("UserID IN ($userIdsString)");
    } else {
        // No users in same region, only show unassigned
        $db->where("UserID = 0");
    }
}

// If user searches
if ($search_string) {
    $db->where('AccessName', '%' . $search_string . '%', 'like');
}

if ($order_by) {
    $db->orderBy($filter_col, $order_by);
}

$db->pageLimit = $pagelimit;
$result = $db->arraybuilder()->paginate("accesslevelmanagement", $page, $select);
$total_pages = $db->totalPages;

// Get all user data from admin_accounts to map UserID to Full_Name and Region
// Apply same region restriction for consistency
$users = [];

if ($managerUsers == 1) {
    // Full access - get all active users
    $userQuery2 = mysqli_query($conn, "SELECT id, Full_Name, Region, User_Type FROM admin_accounts WHERE Status = 'Active' ORDER BY Full_Name ASC");
    if ($userQuery2) {
        while ($user = mysqli_fetch_assoc($userQuery2)) {
            $users[$user['id']] = [
                'Full_Name' => $user['Full_Name'],
                'Region' => $user['Region']
            ];
        }
    }
} elseif ($managerRegUsers == 1) {
    // Regional manager - only get users in their region
    $userQuery2 = mysqli_query($conn, "SELECT id, Full_Name, Region, User_Type FROM admin_accounts WHERE Status = 'Active' AND Region = '$currentUserRegion' ORDER BY Full_Name ASC");
    if ($userQuery2) {
        while ($user = mysqli_fetch_assoc($userQuery2)) {
            $users[$user['id']] = [
                'Full_Name' => $user['Full_Name'],
                'Region' => $user['Region']
            ];
        }
    }
}

// Get columns for order filter
$filter_options = array();
if (!empty($result)) {
    foreach ($result as $value) {
        foreach ($value as $col_name => $col_value) {
            $filter_options[$col_name] = $col_name;
        }
        break;
    }
}

include_once 'include/AdminHeader.php';
?>

<!-- Add Font Awesome and Bootstrap JS for Modals -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
    /* BEAUTIFUL STYLING - Professional Design */
    :root {
        --primary-green: #2ecc71;
        --dark-green: #27ae60;
        --light-green: #d4edda;
        --soft-white: #f8f9fa;
        --pure-white: #ffffff;
        --light-gray: #e9ecef;
        --medium-gray: #ced4da;
        --dark-gray: #495057;
        --charcoal: #343a40;
        --black: #212529;
        --shadow: 0 2px 4px rgba(0,0,0,0.1);
        --warning-color: #ffc107;
        --danger-color: #dc3545;
        --info-color: #17a2b8;
    }

    body {
        background-color: #f0f2f5;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    #page-wrapper {
        min-height: 100vh;
        padding: 15px;
    }

    /* Main Container */
    .form-container {
        max-width: 1400px;
        margin: 0 auto;
    }

    /* Header Styles */
    .page-header {
        background: var(--pure-white);
        padding: 15px 25px;
        border-radius: 8px;
        margin: 0 0 20px 0;
        box-shadow: var(--shadow);
        border-left: 4px solid var(--primary-green);
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 15px;
    }

    .page-header h4 {
        margin: 0;
        font-size: 20px;
        font-weight: 600;
        color: var(--black);
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .page-header h4 i {
        color: var(--primary-green);
        font-size: 24px;
    }

    .access-badge {
        font-size: 12px;
        padding: 4px 12px;
        border-radius: 20px;
        background: var(--light-green);
        color: var(--dark-green);
        margin-left: 10px;
    }

    .access-badge i {
        font-size: 12px;
        margin-right: 5px;
    }

    /* Action Buttons */
    .action-buttons {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    .btn-custom {
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
    }

    .btn-custom i {
        font-size: 14px;
    }

    .btn-custom-primary {
        background: var(--pure-white);
        color: var(--black);
        border: 1px solid var(--light-gray);
    }

    .btn-custom-primary:hover {
        background: var(--light-gray);
        text-decoration: none;
        color: var(--black);
    }

    .btn-custom-success {
        background: var(--primary-green);
        color: var(--pure-white);
    }

    .btn-custom-success:hover {
        background: var(--dark-green);
        text-decoration: none;
        color: var(--pure-white);
    }

    /* Alert Messages */
    .alert-custom {
        padding: 12px 18px;
        border-radius: 6px;
        margin-bottom: 20px;
        border: none;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 14px;
        box-shadow: var(--shadow);
    }

    .alert-custom i {
        font-size: 18px;
    }

    .alert-custom-success {
        background: var(--light-green);
        color: var(--dark-green);
        border-left: 4px solid var(--primary-green);
    }

    .alert-custom-danger {
        background: #f8d7da;
        color: #721c24;
        border-left: 4px solid var(--danger-color);
    }

    .alert-custom-info {
        background: #d1ecf1;
        color: #0c5460;
        border-left: 4px solid var(--info-color);
    }

    /* Filter Section - One Line */
    .filter-section {
        background: var(--pure-white);
        border-radius: 8px;
        padding: 15px 20px;
        margin-bottom: 20px;
        box-shadow: var(--shadow);
        border: 1px solid var(--light-gray);
        overflow-x: auto;
    }

    .filter-form {
        display: flex;
        align-items: center;
        gap: 15px;
        min-width: min-content;
    }

    .filter-form .form-control {
        height: 38px;
        border: 1px solid var(--light-gray);
        border-radius: 6px;
        padding: 0 10px;
        font-size: 13px;
        background: var(--pure-white);
    }

    .filter-form .form-control:focus {
        border-color: var(--primary-green);
        outline: none;
        box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.1);
    }

    .filter-form .btn-primary {
        height: 38px;
        padding: 0 20px;
        background: var(--primary-green);
        border: none;
        border-radius: 6px;
        color: white;
        font-weight: 500;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 5px;
        white-space: nowrap;
        cursor: pointer;
    }

    .filter-form .btn-primary:hover {
        background: var(--dark-green);
    }

    .filter-label {
        display: flex;
        align-items: center;
        gap: 5px;
        color: var(--dark-gray);
        font-weight: 500;
        font-size: 13px;
        white-space: nowrap;
    }

    .filter-label i {
        color: var(--primary-green);
        font-size: 14px;
    }

    /* Table Styles - Beautiful Design */
    .table-container {
        background: var(--pure-white);
        border-radius: 10px;
        padding: 15px;
        box-shadow: var(--shadow);
        margin-bottom: 20px;
        overflow-x: auto;
    }

    .table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 0;
    }

    .table thead tr {
        background: linear-gradient(135deg, var(--charcoal) 0%, var(--black) 100%);
    }

    .table thead th {
        padding: 12px 10px;
        color: var(--pure-white);
        font-weight: 500;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        border: none;
        white-space: nowrap;
    }

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

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

    .table tbody td {
        padding: 12px 10px;
        color: var(--dark-gray);
        font-size: 13px;
        vertical-align: middle;
    }

    .table tbody td h5 {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
        color: var(--black);
    }

    /* Badge for unassigned */
    .unassigned-badge {
        background-color: #f8d7da;
        color: #721c24;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 500;
        display: inline-block;
    }

    .user-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .user-name {
        font-weight: 500;
        color: var(--black);
    }

    /* Action Dropdown - Click-based */
    .action-dropdown {
        position: relative;
        display: inline-block;
    }

    .action-toggle {
        background: var(--light-gray);
        border: none;
        padding: 8px 12px;
        border-radius: 6px;
        color: var(--dark-gray);
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        transition: all 0.2s ease;
    }

    .action-toggle:hover {
        background: var(--primary-green);
        color: white;
    }

    .action-menu {
        position: absolute;
        right: 0;
        top: 100%;
        background: var(--pure-white);
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        min-width: 200px;
        z-index: 1000;
        display: none;
        margin-top: 5px;
        border: 1px solid var(--light-gray);
    }

    .action-menu.show {
        display: block;
    }

    .action-menu-item {
        padding: 12px 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        color: var(--dark-gray);
        text-decoration: none;
        font-size: 13px;
        transition: all 0.2s ease;
        border-bottom: 1px solid var(--light-gray);
        cursor: pointer;
        white-space: nowrap;
    }

    .action-menu-item:last-child {
        border-bottom: none;
    }

    .action-menu-item:hover {
        background: rgba(46, 204, 113, 0.1);
        color: var(--primary-green);
        text-decoration: none;
    }

    .action-menu-item i {
        width: 18px;
        font-size: 14px;
        text-align: center;
    }

    /* Modal Styles */
    .modal-content-custom {
        border-radius: 12px;
        border: none;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        overflow: hidden;
    }

    .modal-header-custom {
        background: linear-gradient(135deg, var(--charcoal) 0%, var(--black) 100%);
        color: var(--pure-white);
        padding: 15px 20px;
        border-bottom: none;
    }

    .modal-header-custom h5 {
        margin: 0;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .modal-header-custom h5 i {
        color: var(--primary-green);
        font-size: 20px;
    }

    .modal-header-custom .close {
        color: var(--pure-white);
        opacity: 0.8;
    }

    .modal-header-custom .close:hover {
        opacity: 1;
    }

    .modal-body-custom {
        padding: 20px;
        background: var(--soft-white);
    }

    .modal-footer-custom {
        padding: 15px 20px;
        background: var(--pure-white);
        border-top: 1px solid var(--light-gray);
    }

    /* Modal Buttons */
    .modal-btn {
        padding: 8px 20px;
        border-radius: 6px;
        font-weight: 500;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        transition: all 0.2s ease;
        border: none;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

    .modal-btn-primary {
        background: var(--primary-green);
        color: var(--pure-white);
    }

    .modal-btn-primary:hover {
        background: var(--dark-green);
    }

    .modal-btn-default {
        background: var(--light-gray);
        color: var(--dark-gray);
    }

    .modal-btn-default:hover {
        background: var(--medium-gray);
    }

    .modal-btn-danger {
        background: var(--danger-color);
        color: white;
    }

    .modal-btn-danger:hover {
        background: #c82333;
    }

    /* Pagination */
    .pagination-container {
        text-align: center;
        margin-top: 20px;
    }

    .pagination {
        display: inline-flex;
        gap: 5px;
        list-style: none;
        padding: 0;
        margin: 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    .pagination li {
        display: inline;
    }

    .pagination li a {
        display: inline-block;
        padding: 8px 12px;
        background: var(--pure-white);
        border: 1px solid var(--light-gray);
        border-radius: 6px;
        color: var(--dark-gray);
        font-size: 13px;
        text-decoration: none;
        transition: all 0.2s ease;
    }

    .pagination li.active a {
        background: var(--primary-green);
        color: white;
        border-color: var(--primary-green);
    }

    .pagination li a:hover {
        background: var(--light-gray);
        text-decoration: none;
    }

    /* Empty State */
    .empty-state {
        text-align: center;
        padding: 50px;
        color: var(--dark-gray);
    }

    .empty-state i {
        font-size: 48px;
        color: var(--light-gray);
        margin-bottom: 15px;
        display: block;
    }

    /* Responsive */
    @media (max-width: 992px) {
        .filter-section {
            overflow-x: auto;
        }
        
        .filter-form {
            min-width: 700px;
        }
    }

    @media (max-width: 768px) {
        .page-header {
            flex-direction: column;
            text-align: center;
        }
        
        .pagination li a {
            padding: 6px 10px;
            font-size: 11px;
        }
    }
</style>

<div id="page-wrapper">
    <div class="form-container">
        <!-- Header Section -->
        <div class="page-header">
            <h4>
                <i class="fas fa-shield-alt"></i>
                Manage Access Levels
                <?php if ($managerUsers == 1): ?>
                    <span class="access-badge">
                        <i class="fas fa-globe"></i> Full Access - All Records
                    </span>
                <?php elseif ($managerRegUsers == 1): ?>
                    <span class="access-badge">
                        <i class="fas fa-map-marker-alt"></i> Regional View - <?php echo htmlspecialchars($currentUserRegion); ?>
                    </span>
                <?php endif; ?>
            </h4>
            <div class="action-buttons">
                <a href="AddAccessLevel.php?operation=create" class="btn-custom btn-custom-success">
                    <i class="fas fa-plus-circle"></i>
                    Add Access Level
                </a>
                <a href="AccessLevelListing.php" class="btn-custom btn-custom-primary">
                    <i class="fas fa-sync-alt"></i>
                    Refresh
                </a>
            </div>
        </div>
        
        <!-- Alert Messages -->
        <?php include('include/flash_messages.php'); ?>
        
        <!-- Access Info Alert -->
        <?php if ($managerUsers == 1): ?>
            <div class="alert-custom alert-custom-info">
                <i class="fas fa-info-circle"></i>
                <span>You have full access to all access level records.</span>
            </div>
        <?php elseif ($managerRegUsers == 1): ?>
            <div class="alert-custom alert-custom-info">
                <i class="fas fa-info-circle"></i>
                <span>You are viewing access levels for users in <strong><?php echo htmlspecialchars($currentUserRegion); ?></strong> region only.</span>
            </div>
        <?php endif; ?>
        
        <!-- Filter Section -->
        <div class="filter-section">
            <form class="filter-form" action="" method="GET">
                <div class="filter-label">
                    <i class="fas fa-search"></i>
                    <span>Search Access Level</span>
                </div>
                <input type="text" class="form-control" id="input_search" placeholder="Type access level name" 
                       name="search_string" value="<?php echo htmlspecialchars($search_string ?? ''); ?>" style="width: 200px;">
                
                <div class="filter-label" style="margin-left: 5px;">
                    <i class="fas fa-sort"></i>
                    <span>Order By</span>
                </div>
                <select name="filter_col" class="form-control" style="width: 120px;">
                    <?php
                    foreach ($filter_options as $option) {
                        $selected = ($filter_col === $option) ? "selected" : "";
                        echo '<option value="' . htmlspecialchars($option) . '" ' . $selected . '>' . htmlspecialchars($option) . '</option>';
                    }
                    ?>
                </select>

                <select name="order_by" class="form-control" style="width: 100px;">
                    <option value="asc" <?php echo ($order_by == 'asc') ? "selected" : ""; ?>>Ascending</option>
                    <option value="desc" <?php echo ($order_by == 'desc') ? "selected" : ""; ?>>Descending</option>
                </select>
                
                <button type="submit" class="btn-primary">
                    <i class="fas fa-filter"></i> Go
                </button>
            </form>
        </div>
        
        <!-- Table Section -->
        <div class="table-container">
            <?php if (empty($result)): ?>
                <div class="empty-state">
                    <i class="fas fa-shield-alt"></i>
                    <h5>No Access Levels found</h5>
                    <p style="margin-top: 10px;">Click the "Add Access Level" button to create one.</p>
                </div>
            <?php else: ?>
                <table class="table">
                    <thead>
                        <tr>
                            <th>Access Level Name</th>
                            <th>Assigned To</th>
                            <th>Region</th>
                            <th style="width: 100px;">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($result as $row): ?>
                            <?php
                            // Get user information based on UserID
                            $assignedUser = isset($users[$row['UserID']]) ? $users[$row['UserID']] : null;
                            $assignedName = $assignedUser ? htmlspecialchars($assignedUser['Full_Name']) : 'Not Assigned';
                            $region = $assignedUser ? htmlspecialchars($assignedUser['Region']) : (isset($row['Region']) && !empty($row['Region']) ? htmlspecialchars($row['Region']) : 'Not Assigned');
                            
                            // If UserID is 0 or not found, show as unassigned
                            if ($row['UserID'] == 0 || $row['UserID'] == '' || $row['UserID'] === null) {
                                $assignedName = 'Not Assigned';
                                $region = 'Not Assigned';
                            }
                            ?>
                            <tr>
                                <td>
                                    <h5><?php echo htmlspecialchars($row['AccessName'] ?? ''); ?></h5>
                                 </div>
                                </div>
                                <td>
                                    <?php if ($assignedName != 'Not Assigned'): ?>
                                        <div class="user-info">
                                            <span class="user-name">
                                                <i class="fas fa-user-circle" style="color: var(--primary-green);"></i>
                                                <?php echo $assignedName; ?>
                                            </span>
                                        </div>
                                    <?php else: ?>
                                        <span class="unassigned-badge">
                                            <i class="fas fa-user-slash"></i> Not Assigned
                                        </span>
                                    <?php endif; ?>
                                 </div>
                                </div>
                                <td>
                                    <?php if ($region != 'Not Assigned'): ?>
                                        <span style="display: flex; align-items: center; gap: 5px;">
                                            <i class="fas fa-map-marker-alt" style="color: var(--primary-green);"></i>
                                            <?php echo $region; ?>
                                        </span>
                                    <?php else: ?>
                                        <span class="unassigned-badge">
                                            <i class="fas fa-question-circle"></i> Not Assigned
                                        </span>
                                    <?php endif; ?>
                                 </div>
                                </div>
                                <td>
                                    <div class="action-dropdown" id="dropdown-<?php echo $row['accesslevelmanagementID']; ?>">
                                        <button class="action-toggle" onclick="toggleDropdown('<?php echo $row['accesslevelmanagementID']; ?>')">
                                            <i class="fas fa-cog"></i> Actions <i class="fas fa-chevron-down"></i>
                                        </button>
                                        <div class="action-menu" id="menu-<?php echo $row['accesslevelmanagementID']; ?>">
                                            <a href="UpdateAccessLevel.php?Access_id=<?php echo $row['accesslevelmanagementID']; ?>&operation=edit" class="action-menu-item">
                                                <i class="fas fa-edit" style="color: var(--primary-green);"></i>
                                                Update Record
                                            </a>
                                            <?php if ($managerUsers == 1): ?>
                                            <a href="#" class="action-menu-item" onclick="showDeleteModal(<?php echo $row['accesslevelmanagementID']; ?>, '<?php echo addslashes(htmlspecialchars($row['AccessName'])); ?>'); return false;">
                                                <i class="fas fa-trash-alt" style="color: var(--danger-color);"></i>
                                                Delete Record
                                            </a>
                                            <?php endif; ?>
                                        </div>
                                    </div>
                                 </div>
                                </div>
                             </div>
                            </div>
                            <tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php endif; ?>
        </div>

        <!-- Pagination -->
        <?php if (isset($total_pages) && $total_pages > 1): ?>
            <div class="pagination-container">
                <?php
                // Build query string
                $query_params = $_GET;
                unset($query_params['page']);
                $query_string = !empty($query_params) ? '&' . http_build_query($query_params) : '';
                ?>
                <ul class="pagination">
                    <?php for ($i = 1; $i <= $total_pages; $i++): ?>
                        <li class="<?php echo ($page == $i) ? 'active' : ''; ?>">
                            <a href="?page=<?php echo $i . $query_string; ?>"><?php echo $i; ?></a>
                        </li>
                    <?php endfor; ?>
                </ul>
            </div>
        <?php endif; ?>
    </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content modal-content-custom">
            <div class="modal-header modal-header-custom">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle"></i>
                    Confirm Deletion
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="DeleteAccessLevel.php" method="POST" id="deleteForm">
                <div class="modal-body modal-body-custom">
                    <input type="hidden" name="del_id" id="delete_id">
                    <div style="text-align: center; padding: 20px;">
                        <i class="fas fa-trash-alt" style="font-size: 48px; color: var(--danger-color); margin-bottom: 15px;"></i>
                        <p style="font-size: 16px; color: var(--dark-gray);">
                            Are you sure you want to delete the access level <strong id="delete_access_name"></strong>?
                        </p>
                        <p style="font-size: 13px; color: #999;">This action cannot be undone.</p>
                    </div>
                </div>
                <div class="modal-footer modal-footer-custom">
                    <button type="button" class="modal-btn modal-btn-default" data-dismiss="modal">
                        <i class="fas fa-times"></i> Cancel
                    </button>
                    <button type="submit" class="modal-btn modal-btn-danger">
                        <i class="fas fa-trash-alt"></i> Delete
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
// Close all dropdowns function
function closeAllDropdowns() {
    var dropdowns = document.querySelectorAll('.action-menu');
    dropdowns.forEach(function(menu) {
        menu.classList.remove('show');
    });
}

// Toggle dropdown on click
function toggleDropdown(id) {
    var menu = document.getElementById('menu-' + id);
    var isShow = menu.classList.contains('show');
    
    // Close all dropdowns first
    closeAllDropdowns();
    
    // If current dropdown wasn't shown, show it
    if (!isShow) {
        menu.classList.add('show');
    }
}

// Show delete modal
function showDeleteModal(id, name) {
    document.getElementById('delete_id').value = id;
    document.getElementById('delete_access_name').innerHTML = name;
    $('#deleteModal').modal('show');
}

// Close dropdown when clicking outside
document.addEventListener('click', function(event) {
    // Check if click is outside any dropdown
    var isDropdownButton = event.target.closest('.action-toggle');
    var isDropdownMenu = event.target.closest('.action-menu');
    
    if (!isDropdownButton && !isDropdownMenu) {
        closeAllDropdowns();
    }
});

// Prevent closing when clicking inside menu
document.querySelectorAll('.action-menu').forEach(function(menu) {
    menu.addEventListener('click', function(event) {
        event.stopPropagation();
    });
});

// Initialize when document is ready
$(document).ready(function() {
    // Add escape key handler to close dropdowns
    $(document).keydown(function(e) {
        if (e.key === 'Escape') {
            closeAllDropdowns();
        }
    });
});
</script>

<?php 
include_once 'include/footer.php'; 
?>