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

<div class="card shadow-sm">
    <div class="card-header bg-primary text-white">
        <b>Daftar Ulang PPDB</b>
    </div>

    <div class="card-body">
        <table id="dt_daftarulang" class="table table-bordered w-100">
            <thead class="table-dark">
                <tr>
                    <th>No</th>
                    <th>No Pendaftaran</th>
                    <th>Nama</th>
                    <th>NISN</th>
                    <th>Status</th>
                    <th>Aksi</th>
                </tr>
            </thead>
        </table>
    </div>
</div>

<!-- MODAL -->
<div class="modal fade" id="modalDaftarUlang" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content rounded-4">
            <div class="modal-header bg-success text-white">
                <h5 class="modal-title">
                    <i class="fas fa-check-circle"></i> Daftar Ulang
                </h5>
                <button class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <input type="hidden" id="ppdb_id">

                <label class="form-label fw-bold">Keterangan</label>
                <textarea id="keterangan" class="form-control"
                    placeholder="Contoh: Berkas asli sudah diterima"></textarea>
            </div>

            <div class="modal-footer">
                <button class="btn btn-light" data-bs-dismiss="modal">Batal</button>
                <button class="btn btn-success fw-bold" onclick="submitDaftarUlang()">
                    Simpan
                </button>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
$(function () {
    $('#dt_daftarulang').DataTable({
        ajax: "<?= site_url('ppdb/daftarulang/data') ?>",
        columns: [
            {
                data: null,
                render: (d, t, r, m) => m.row + 1
            },
            { data: 'reg_no' },
            { data: 'name' },
            { data: 'nisn' },
            {
                data: 'status',
                render: () => `<span class="badge bg-success">APPROVED</span>`
            },
            {
                data: null,
                render: function (r) {

                    // SUDAH DAFTAR ULANG
                    if (r.daftar_ulang_id) {
                        return `
                            <button class="btn btn-secondary btn-sm" disabled>
                                <i class="fas fa-check"></i> Sudah Daftar
                            </button>

                            <a href="<?= site_url('ppdb/daftarulang/print') ?>/${r.id}"
                               target="_blank"
                               class="btn btn-danger btn-sm ms-1">
                                <i class="fas fa-file-pdf"></i>
                            </a>
                        `;
                    }

                    // BELUM
                    return `
                        <button class="btn btn-success btn-sm"
                            onclick="openDaftarUlang(${r.id})">
                            <i class="fas fa-save"></i> Daftar Ulang
                        </button>
                    `;
                }
            }
        ]
    });
});


function openDaftarUlang(id) {
    document.getElementById('ppdb_id').value = id;
    document.getElementById('keterangan').value = '';

    const modalEl = document.getElementById('modalDaftarUlang');
    const modal = new bootstrap.Modal(modalEl);
    modal.show();
}

function submitDaftarUlang() {
    fetch("<?= site_url('ppdb/daftarulang/save') ?>", {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: new URLSearchParams({
            ppdb_id: $('#ppdb_id').val(),
            keterangan: $('#keterangan').val()
        })
    })
    .then(r => r.json())
    .then(r => {
        alert(r.message);
        if (r.status) $('#dt_daftarulang').DataTable().ajax.reload();
    });
}
</script>
<?= $this->endSection() ?>
