<?= $this->extend('layout/admin') ?>
<?= $this->section('content') ?>

<div class="card shadow-sm">

    <div class="card-header d-flex justify-content-between align-items-center bg-primary text-white">
        <b>Manajemen Akun Calon Siswa PPDB</b>

        <div>
            <a href="<?= site_url('ppdb/account/register') ?>" 
               class="btn btn-success btn-sm fw-bold shadow-sm">
                <i class="fas fa-user-plus me-1"></i> Tambah Akun
            </a>
        </div>
    </div>

    <div class="card-body">
        <table id="dt_user_account" class="table table-bordered table-striped w-100">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>Email</th>
                    <th>Username</th>
                    <th>Nama Lengkap</th>
                    <th>No HP</th>
                    <th>Status Akun</th>
                    <th>Status PPDB</th>
                    <th>Last Login</th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<?= $this->endSection() ?>

<?= $this->section('scripts') ?>
<script>
$(function () {
    $('#dt_user_account').DataTable({
        processing: true,
        ordering: true,
        ajax: {
            url: "<?= site_url('ppdb/account/data') ?>",
            type: "GET",
            dataSrc: "data",
            error: function (xhr) {
                console.error(xhr.responseText);
                alert('Gagal load data user account');
            }
        },
        columns: [
            {
                data: null,
                render: function (data, type, row, meta) {
                    return meta.row + meta.settings._iDisplayStart + 1;
                }
            },
            { data: "email" },
            { data: "username" },
            { data: "full_name" },
            { data: "phone" },
            {
                data: "account_status",
                render: s => {
                    let badge = 'secondary';
                    if (s === 'active') badge = 'success';
                    if (s === 'pending') badge = 'warning';
                    if (s === 'blocked') badge = 'danger';
                    return `<span class="badge bg-${badge}">${s}</span>`;
                }
            },
            {
                data: "registration_status",
                render: s => {
                    let badge = 'secondary';
                    if (s === 'not_registered') badge = 'dark';
                    if (s === 'draft') badge = 'warning';
                    if (s === 'submitted') badge = 'info';
                    if (s === 'verified') badge = 'success';
                    return `<span class="badge bg-${badge}">${s}</span>`;
                }
            },
            {
                data: "last_login",
                render: d => d ? d : '-'
            },
            {
                data: "id",
                render: id => `
                    <div class="btn-group">
                        <a href="<?= site_url('ppdb/account/detail') ?>/${id}" 
                           class="btn btn-info btn-sm">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="<?= site_url('ppdb/account/edit') ?>/${id}" 
                           class="btn btn-warning btn-sm">
                            <i class="fas fa-edit"></i>
                        </a>
                    </div>
                `
            }
        ]
    });
});
</script>
<?= $this->endSection() ?>
