<?= $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-success text-white">
        <b>Manajemen PPDB</b>

        <div>
            <a href="<?= site_url('ppdb/register') ?>" class="btn btn-warning btn-sm fw-bold text-dark shadow-sm">
                <i class="fas fa-user-plus me-1"></i> Daftar PPDB
            </a>

            <a href="<?= site_url('ppdb/status') ?>" class="btn btn-info btn-sm fw-bold text-white shadow-sm">
                <i class="fas fa-search me-1"></i> Cek Status
            </a>
        </div>
    </div>

    <div class="card-body">
        <table id="dt_ppdb" class="table table-bordered table-striped w-100">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>No Pendaftaran</th>
                    <th>Nama</th>
                    <th>NISN</th>
                    <th>TTL</th>
                    <th>Jenis Kelamin</th>
                    <th>No HP</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

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


<?= $this->section('scripts') ?>
<script>
    $(function () {
        $('#dt_ppdb').DataTable({
            processing: true,
            ordering: true,
            ajax: {
                url: "<?= site_url('ppdb/admin/data') ?>",
                type: "GET",
                dataSrc: "data",
                error: function (xhr) {
                    console.error(xhr.responseText);
                    alert('Gagal load data PPDB');
                }
            },
            columns: [
                {
                    data: null,
                    render: function (data, type, row, meta) {
                        return meta.row + meta.settings._iDisplayStart + 1;
                    }
                },
                { data: "reg_no" },
                { data: "name" },
                { data: "nisn" },
                {
                    data: null,
                    render: function (r) {
                        if (!r.birth_date) return r.birth_place;

                        const d = new Date(r.birth_date);
                        const day = String(d.getDate()).padStart(2, '0');
                        const month = String(d.getMonth() + 1).padStart(2, '0');
                        const year = d.getFullYear();

                        return `${r.birth_place}, ${day}/${month}/${year}`;
                    }
                },
                {
                    data: "gender",
                    render: g => g === 'M' ? 'Laki-laki' : 'Perempuan'
                },
                {
                    data: null,
                    render: function (r) {
                        if (r.parent_status === 'WALI') {
                            return r.guardian_phone ?? '-';
                        }
                        return r.father_phone ?? r.mother_phone ?? '-';
                    }
                },
                {
                    data: "status",
                    render: status => {
                        let badge = 'secondary';
                        if (status === 'PENDING') badge = 'warning';
                        if (status === 'APPROVED') badge = 'success';
                        if (status === 'REJECTED') badge = 'danger';
                        return `<span class="badge bg-${badge}">${status}</span>`;
                    }
                },
                {
                    data: "id",
                    render: id => `
                <div class="btn-group">
                    <a href="<?= site_url('ppdb/admin/detail_reg') ?>/${id}" class="btn btn-info btn-sm">
                        <i class="fas fa-eye"></i>
                    </a>
                    <a href="<?= site_url('ppdb/admin/edit') ?>/${id}" class="btn btn-warning btn-sm">
                        <i class="fas fa-edit"></i>
                    </a>
                </div>`
                }
            ]
        });
    });
</script>
<?= $this->endSection() ?>