<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Bukti Pendaftaran PPDB</title>

<style>
@media print {
    .no-print { display: none; }
}

body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: #f4f6f9;
    margin: 0;
    padding: 30px;
}

.card {
    max-width: 760px;
    margin: auto;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    overflow: hidden;
}

.header {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: #fff;
    padding: 25px;
    text-align: center;
}

.header h1 {
    margin: 0;
    font-size: 22px;
    letter-spacing: 1px;
}

.header small {
    display: block;
    margin-top: 6px;
    font-size: 14px;
    opacity: .9;
}

.body {
    padding: 30px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table tr {
    border-bottom: 1px solid #eee;
}

.table tr:last-child {
    border-bottom: none;
}

.table td {
    padding: 12px 8px;
    font-size: 14px;
}

.table td:first-child {
    width: 220px;
    font-weight: 600;
    color: #555;
}

.badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    letter-spacing: .5px;
}

.badge.pending { background: #ffc107; color:#000; }
.badge.approved { background: #198754; }
.badge.rejected { background: #dc3545; }

.footer {
    background: #f8f9fa;
    padding: 20px;
    text-align: center;
    border-top: 1px dashed #ddd;
}

.print-btn {
    background: linear-gradient(135deg, #198754, #20c997);
    border: none;
    color: #fff;
    padding: 12px 28px;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(25,135,84,.3);
}

.print-btn:hover {
    opacity: .9;
}

.note {
    margin-top: 15px;
    font-size: 12px;
    color: #777;
}
</style>
</head>

<body>

<div class="card">

    <div class="header">
        <h1>BUKTI PENDAFTARAN PPDB</h1>
        <small>No. Pendaftaran: <?= $record['reg_no'] ?></small>
    </div>

    <div class="body">
        <table class="table">
            <tr>
                <td>Nama Lengkap</td>
                <td><?= $record['name'] ?></td>
            </tr>
            <tr>
                <td>NISN</td>
                <td><?= $record['nisn'] ?></td>
            </tr>
            <tr>
                <td>Jenis Kelamin</td>
                <td><?= $record['gender']=='M' ? 'Laki-laki' : 'Perempuan' ?></td>
            </tr>
            <tr>
                <td>Sekolah Asal</td>
                <td><?= $record['school_origin'] ?></td>
            </tr>
            <tr>
                <td>No. HP</td>
                <td><?= $record['father_phone'] ?></td>
            </tr>
            <tr>
                <td>Status Pendaftaran</td>
                <td>
                    <span class="badge <?= strtolower($record['status']) ?>">
                        <?= strtoupper($record['status']) ?>
                    </span>
                </td>
            </tr>
        </table>
    </div>

    <div class="footer no-print">
        <button class="print-btn" onclick="window.print()">🖨 Cetak Bukti</button>
        <div class="note">
            Simpan bukti ini sebagai arsip pendaftaran resmi PPDB.
        </div>
    </div>

</div>

</body>
</html>
