<?= $this->extend('layout/template') ?>

<?= $this->section('content') ?>
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-1 text-gray-800 fw-bold">Kelola User</h1>
            <p class="mb-0 text-muted">Manajemen pengguna sistem monitoring</p>
        </div>
        <a href="<?= base_url('users/create') ?>" class="btn btn-primary shadow-sm">
            <i class="fas fa-plus fa-sm text-white-50 me-1"></i> Tambah User
        </a>
    </div>

    <?php if(session()->getFlashdata('success')): ?>
        <div class="alert alert-success alert-dismissible fade show shadow-sm border-0 border-start border-success border-4" role="alert">
            <i class="fas fa-check-circle me-2"></i> <?= session()->getFlashdata('success') ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    <?php endif; ?>

    <div class="card shadow-sm border-0 mb-4 rounded-3">
        <div class="card-header bg-white py-3 border-0 d-flex align-items-center justify-content-between">
            <h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-users me-2"></i>Daftar Pengguna</h6>
            <div class="input-group input-group-sm" style="width: 250px;">
                <input type="text" class="form-control bg-light border-0 small" placeholder="Cari user..." aria-label="Search" aria-describedby="basic-addon2">
                <div class="input-group-append">
                    <button class="btn btn-primary" type="button">
                        <i class="fas fa-search fa-sm"></i>
                    </button>
                </div>
            </div>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-hover table-striped align-middle mb-0" width="100%" cellspacing="0">
                    <thead class="bg-light text-secondary">
                        <tr>
                            <th width="5%" class="text-center py-3">No</th>
                            <th class="py-3">Username</th>
                            <th class="py-3">Role</th>
                            <th class="py-3">Unit Kerja</th>
                            <th width="15%" class="text-center py-3">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($users as $index => $u): ?>
                        <tr>
                            <td class="text-center fw-bold text-secondary"><?= $index + 1 ?></td>
                            <td>
                                <div class="d-flex align-items-center">
                                    <div class="bg-primary bg-opacity-10 text-primary rounded-circle d-flex align-items-center justify-content-center me-3" style="width: 35px; height: 35px; font-weight: bold;">
                                        <?= strtoupper(substr($u['username'], 0, 1)) ?>
                                    </div>
                                    <span class="fw-bold"><?= $u['username'] ?></span>
                                </div>
                            </td>
                            <td>
                                <?php 
                                    $badgeClass = 'bg-secondary';
                                    $roleName = str_replace('_', ' ', $u['role']);
                                    if($u['role'] == 'superadmin') $badgeClass = 'bg-danger';
                                    elseif($u['role'] == 'admin_bidang') $badgeClass = 'bg-primary';
                                    elseif($u['role'] == 'opd') $badgeClass = 'bg-success';
                                ?>
                                <span class="badge <?= $badgeClass ?> text-uppercase rounded-pill px-3"><?= $roleName ?></span>
                            </td>
                            <td class="text-muted">
                                <?php 
                                    if ($u['role'] == 'admin_bidang') echo '<i class="fas fa-layer-group me-1 text-primary"></i> ' . $u['nama_bidang'];
                                    elseif ($u['role'] == 'opd') echo '<i class="fas fa-building me-1 text-success"></i> ' . $u['nama_opd'];
                                    else echo '<span class="text-muted fst-italic">-</span>';
                                ?>
                            </td>
                            <td class="text-center">
                                <a href="<?= base_url('users/edit/'.$u['id']) ?>" class="btn btn-warning btn-sm btn-icon-split shadow-sm me-1" title="Edit">
                                    <span class="icon text-white-50"><i class="fas fa-edit"></i></span>
                                </a>
                                <a href="<?= base_url('users/delete/'.$u['id']) ?>" class="btn btn-danger btn-sm btn-icon-split shadow-sm" onclick="return confirm('Yakin ingin menghapus user <?= $u['username'] ?>?')" title="Hapus">
                                    <span class="icon text-white-50"><i class="fas fa-trash"></i></span>
                                </a>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer bg-white border-0 py-3 d-flex justify-content-between align-items-center">
            <small class="text-muted">Menampilkan <?= count($users) ?> data user</small>
            <nav aria-label="Page navigation">
                <ul class="pagination pagination-sm mb-0">
                    <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
                    <li class="page-item active"><a class="page-link" href="#">1</a></li>
                    <li class="page-item disabled"><a class="page-link" href="#">Next</a></li>
                </ul>
            </nav>
        </div>
    </div>
</div>
<?= $this->endSection() ?>
