<?php
/**
 * modules/roles/list_roles.php
 */

// 1. FETCH GLOBAL PERMISSIONS
$p = $GLOBALS['my_privs'] ?? ['can_view' => 0, 'can_add' => 0, 'can_edit' => 0, 'can_del' => 0];
if (in_array(1, $_SESSION['all_role_ids'] ?? [])) {
    $p = ['can_view' => 1, 'can_add' => 1, 'can_edit' => 1, 'can_del' => 1];
}

// 2. FETCH DATA
$sql = "SELECT * FROM TBL_ROLES ORDER BY ROLE_ID ASC";
$result = $db->query($sql);
?>

<style>
    .dataTables_filter input { border-radius: 20px; border: 1px solid #ced4da; padding: 5px 12px; width: 250px !important; }
</style>

<section class="content-header">
    <div class="container-fluid">
        <div class="row mb-2">
            <div class="col-sm-6">
                <h1 class="font-weight-bold text-primary"><i class="fas fa-user-shield mr-2"></i>System Roles</h1>
            </div>
            <div class="col-sm-6 text-right">
                <?php if($p['can_add'] == 1): ?>
                <a href="index.php?s=<?php echo encrypt_url('mod=roles&page=add_roles'); ?>" class="btn btn-primary shadow-sm">
                    <i class="fas fa-plus-circle mr-1"></i> Register New Role
                </a>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<section class="content">
    <div class="container-fluid">
        <div class="card card-outline card-primary shadow-sm">
            <div class="card-body">
                <table id="rolesTable" class="table table-bordered table-striped table-hover w-100">
                    <thead>
                        <tr>
                            <th width="5%">#</th>
                            <th width="25%">Role Name</th>
                            <th>Description</th>
                            <th width="10%" class="text-center">Status</th>
                            <th width="10%" class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php $i=1; while($row = mysqli_fetch_assoc($result)): ?>
                        <tr>
                            <td class="align-middle"><?php echo $i++; ?></td>
                            <td class="align-middle font-weight-bold text-dark"><?php echo $row['ROLE_NAME']; ?></td>
                            <td class="align-middle text-muted"><?php echo $row['DESCRIPTION']; ?></td>
                            <td class="text-center align-middle">
                                <span class="badge <?php echo ($row['STATUS'] == 'ACTIVE') ? 'badge-success' : 'badge-danger'; ?> px-2 py-1">
                                    <?php echo $row['STATUS']; ?>
                                </span>
                            </td>
                            <td class="text-center align-middle">
                                <div class="btn-group">
                                    <?php if($p['can_edit'] == 1): ?>
                                    <a href="index.php?s=<?php echo encrypt_url('mod=roles&page=edit_roles&id='.$row['ROLE_ID']); ?>" 
                                       class="btn btn-xs btn-outline-primary mr-1" title="Edit Role">
                                        <i class="fas fa-edit"></i>
                                    </a>
                                    <?php endif; ?>
                                </div>
                            </td>
                        </tr>
                        <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</section>

<script src="assets/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="assets/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<link rel="stylesheet" href="assets/plugins/datatables-bs4/css/dataTables.bootstrap4.min.js">

<script>
$(function () {
    $("#rolesTable").DataTable({
      "responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 10
    });
});
</script>