<!doctype html>
<html lang="id">
<head>
    <meta charset="utf-8">
    <title>Cek Hasil Kelulusan PPDB</title>

    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <style>
        body {
            background: linear-gradient(135deg,#1e3c72,#2a5298);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card-result {
            border-radius: 20px;
            max-width: 500px;
            width: 100%;
        }
        .header {
            background: #0d6efd;
            color: #fff;
            padding: 20px;
            text-align: center;
        }
        .status-box {
            padding: 20px;
            border-radius: 15px;
            font-weight: bold;
            margin-top: 15px;
            text-align: center;
        }
    </style>
</head>

<body>

<div class="card shadow-lg card-result">
    <div class="header">
        <h4>🔎 Cek Hasil Kelulusan PPDB</h4>
        <small>Masukkan data pendaftaran Anda</small>
    </div>

    <div class="card-body">
        <div class="mb-3">
            <label>No Pendaftaran</label>
            <input type="text" id="reg_no" class="form-control">
        </div>

        <div class="mb-3">
            <label>NISN</label>
            <input type="text" id="nisn" class="form-control">
        </div>

        <button id="btnCheck" class="btn btn-primary w-100 fw-bold">
            🔍 Cek Kelulusan
        </button>

        <div id="resultArea" style="display:none;">
            <div id="statusBox" class="status-box"></div>
        </div>
    </div>
</div>

<script>
$('#btnCheck').click(function () {

    let regNo = $('#reg_no').val();
    let nisn  = $('#nisn').val();

    if (!regNo || !nisn) {
        Swal.fire('Oops!', 'Data wajib diisi', 'warning');
        return;
    }

    $.ajax({
        url: "<?= site_url('ppdb/result/check') ?>",
        type: "POST",
        data: { reg_no: regNo, nisn: nisn },
        dataType: "json",
        beforeSend() {
            $('#btnCheck').prop('disabled', true).text('Memproses...');
        },
        success(res) {

            $('#btnCheck').prop('disabled', false).text('🔍 Cek Kelulusan');
            $('#resultArea').show();
            $('#statusBox').html('');

            if (res.status === 'error') {
                $('#statusBox')
                    .addClass('bg-danger text-white')
                    .html(res.message);
                return;
            }

            let html = '';
            let status = res.data.status;

            if (status === 'APPROVED') {
                html = `
                    <div class="bg-success text-white status-box">
                        🎉 <b>SELAMAT ANDA LULUS</b>
                        <hr>
                        <div>${res.data.name}</div>
                        <a href="<?= site_url('ppdb/result/letter') ?>/${res.data.token}"
                           target="_blank"
                           class="btn btn-light w-100 mt-3 fw-bold">
                           📄 Download Surat Kelulusan
                        </a>
                    </div>`;
            } 
            else if (status === 'REJECTED') {
                html = `
                    <div class="bg-danger text-white status-box">
                        ❌ <b>ANDA BELUM LULUS</b>
                        <hr>
                        Tetap semangat 🙏
                    </div>`;
            } 
            else {
                html = `
                    <div class="bg-warning text-dark status-box">
                        ⏳ <b>MASIH DALAM PROSES VERIFIKASI</b>
                    </div>`;
            }

            $('#statusBox').replaceWith(html);
        },
        error() {
            $('#btnCheck').prop('disabled', false);
            Swal.fire('Error', 'Server error', 'error');
        }
    });
});
</script>

</body>
</html>
