<div class="card card-outline card-primary rounded-0 shadow">
    <div class="card-header">
        <h3 class="card-title">Usuarios PMO</h3>
        <div class="card-tools">
            <?php if ($_settings->userdata('role') === 'ADMIN'): ?>
            <a href="javascript:void(0)" id="create_new"
               class="btn btn-flat btn-sm btn-primary">
                <span class="fas fa-plus"></span> Nuevo Usuario
            </a>
            <?php endif; ?>
        </div>
    </div>

    <div class="card-body">
        <div class="container-fluid">
            <table class="table table-bordered table-hover table-striped">
                <thead class="bg-gradient-primary text-light">
                    <tr>
                        <th>#</th>
                        <th>Usuario</th>
                        <th>Email</th>
                        <th>Rol</th>
                        <th>Estado</th>
                        <th>Acción</th>
                    </tr>
                </thead>

                <tbody>
                <?php
                $i = 1;
                $qry = $conn->query("
                    SELECT
                        id,
                        username,
                        email,
                        role,
                        active
                    FROM users
                    ORDER BY role ASC, username ASC
                ");

                while($row = $qry->fetch_assoc()):
                ?>
                    <tr>
                        <td class="text-center"><?= $i++ ?></td>

                        <td><?= htmlspecialchars($row['username']) ?></td>

                        <td><?= htmlspecialchars($row['email']) ?></td>

                        <td class="text-center">
                            <?php
                            switch ($row['role']) {
                                case 'ADMIN':
                                    echo '<span class="badge badge-dark">ADMIN</span>';
                                    break;
                                case 'SUPERVISOR':
                                    echo '<span class="badge badge-secondary">SUPERVISOR</span>';
                                    break;
                                case 'GESTOR':
                                    echo '<span class="badge badge-primary">GESTOR PMO</span>';
                                    break;
                                case 'PO':
                                    echo '<span class="badge badge-info">PO</span>';
                                    break;
                            }
                            ?>
                        </td>

                        <td class="text-center">
                            <?php if ($row['active']): ?>
                                <span class="badge badge-success">Activo</span>
                            <?php else: ?>
                                <span class="badge badge-danger">Inactivo</span>
                            <?php endif; ?>
                        </td>

                        <td class="text-center">
                            <a class="btn btn-sm btn-outline-dark"
                               href="javascript:void(0)"
                               onclick="uni_modal(
                                   'Detalle Usuario',
                                   'employees/view_employee.php?id=<?= $row['id'] ?>'
                               )">
                                <i class="fas fa-eye"></i>
                            </a>

                            <?php if ($_settings->userdata('role') === 'ADMIN'): ?>
                            <a class="btn btn-sm btn-outline-primary"
                               href="javascript:void(0)"
                               onclick="uni_modal(
                                   'Editar Usuario',
                                   'employees/manage_employee.php?id=<?= $row['id'] ?>',
                                   'mid-large'
                               )">
                                <i class="fas fa-edit"></i>
                            </a>
                            <?php endif; ?>
                        </td>
                    </tr>
                <?php endwhile; ?>
                </tbody>
            </table>
        </div>
    </div>
</div>

<script>
$(document).ready(function(){
    $('#create_new').click(function(){
        uni_modal(
            "Nuevo Usuario",
            "employees/manage_employee.php",
            "mid-large"
        );
    });

    $('.table').DataTable({
        columnDefs: [{ orderable:false, targets: 5 }]
    });
});
</script>
