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

<style>
    .ppdb-wrapper {
        background: linear-gradient(160deg, #1f3c88, #0b1c3d);
        min-height: calc(100vh - 120px);
        padding: 60px 0;
    }

    .ppdb-card {
        max-width: 560px;
        margin: auto;
        border-radius: 18px;
        border: none;
    }

    .ppdb-card .card-body {
        padding: 40px;
    }

    .ppdb-title {
        font-weight: 700;
        color: #1f3c88;
        letter-spacing: .3px;
    }

    .ppdb-subtitle {
        font-size: 14px;
        color: #6c757d;
    }

    .ppdb-card label {
        font-weight: 600;
        font-size: 14px;
        color: #495057;
    }

    .ppdb-card input,
    .ppdb-card select,
    .ppdb-card textarea {
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 14px;
    }

    .ppdb-card textarea {
        resize: none;
    }

    .btn-ppdb {
        border-radius: 30px;
        padding: 12px;
        font-weight: 600;
        font-size: 15px;
        background: linear-gradient(135deg, #1f3c88, #2a56c6);
        border: none;
    }

    .btn-ppdb:hover {
        opacity: .9;
    }
</style>

<div class="ppdb-wrapper">
    <div class="card ppdb-card shadow-lg">
        <div class="card-body p-4">
            <?php if (session()->getFlashdata('error')): ?>
                <div class="alert alert-danger">
                    <ul class="mb-0">
                        <?php foreach (session()->getFlashdata('error') as $err): ?>
                            <li>
                                <?= esc($err) ?>
                            </li>
                        <?php endforeach ?>
                    </ul>
                </div>
            <?php endif; ?>

            <?php if (session()->getFlashdata('success')): ?>
                <div class="alert alert-success alert-dismissible fade show">
                    <strong>Berhasil!</strong><br>
                    <?= session()->getFlashdata('success') ?>
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            <?php endif; ?>


            <h4 class="text-center mb-4 fw-bold">Registrasi Siswa Baru!</h4>

            <form action="<?= site_url('ppdb/store') ?>" method="post">

                <div class="mb-3">
                    <label>Nama Siswa</label>
                    <input type="text" name="nama_siswa" class="form-control" value="<?= old('nama_siswa') ?>" required>
                </div>

                <div class="mb-3">
                    <label>Jenjang</label>
                    <select name="jenjang" class="form-control" required>
                        <option value="">Pilih</option>
                        <option value="SD" <?= old('jenjang') == 'SD' ? 'selected' : '' ?>>SD</option>
                        <option value="SMP" <?= old('jenjang') == 'SMP' ? 'selected' : '' ?>>SMP</option>
                        <option value="SMA" <?= old('jenjang') == 'SMA' ? 'selected' : '' ?>>SMA</option>
                        <option value="SMK" <?= old('jenjang') == 'SMK' ? 'selected' : '' ?>>SMK</option>
                    </select>
                </div>

                <div class="mb-3">
                    <label class="form-label">
                        Email
                        <span id="emailLabel">(Email Calon Siswa)</span>
                    </label>
                    <input type="email" name="email" class="form-control" value="<?= old('email') ?>" required>
                </div>

                <div class="mb-3">
                    <label>Telepon</label>
                    <input type="text" name="telpon" class="form-control" value="<?= old('telpon') ?>" required>
                </div>

                <button class="btn btn-primary w-100 mt-3">
                    Daftar Sekarang
                </button>
                <p class="text-center mt-3 text-muted small">
                    Registrasi Siswa Baru
                </p>

            </form>

        </div>
    </div>
</div>


<script>
    const jenjang = document.querySelector('select[name="jenjang"]');
    const emailLabel = document.getElementById('emailLabel');

    function updateEmailLabel() {
        if (jenjang.value === 'SD') {
            emailLabel.innerText = '(Email Orang Tua)';
        } else {
            emailLabel.innerText = '(Email Calon Siswa)';
        }
    }

    jenjang.addEventListener('change', updateEmailLabel);
    updateEmailLabel();
</script>

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