<?= $this->extend('layout/default') ?>

<?= $this->section('content') ?>
<style>
    .kelulusan-wrapper { 
        background-image: url('<?= base_url('assets/img/background.jpg') ?>'); 
        background-size: cover; background-position: center; background-attachment: fixed;
        min-height: 90vh; display: flex; align-items: center; position: relative; padding: 80px 0;
    }
    .kelulusan-wrapper::before {
        content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0, 0, 0, 0.3); z-index: 1;
    }
    .container-content { position: relative; z-index: 2; width: 100%; }
    .card-glass { 
        background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px); border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 40px; box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    }
    .form-control-custom {
        background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 50px; color: white; padding: 15px 25px; height: auto;
    }
    .btn-gradient {
        background: linear-gradient(45deg, #28a745, #218838);
        border: none; border-radius: 50px; padding: 15px 40px;
        color: white; font-weight: bold; text-transform: uppercase;
    }
    /* Update Desain Slider agar lebih menonjol */
/* Warna Default & Psywar (Merah) */
.pesan-merah {
    color: #ff4d4d !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* Warna Gembira (Hijau Terang / Kuning Emas) */
.pesan-gembira {
    color: #2dfd54 !important; /* Hijau Stabilo yang ceria */
    text-shadow: 0 0 10px rgba(45, 253, 84, 0.5);
}

.pesan-container {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    padding: 12px 25px;
    display: inline-block;
    max-width: 90%;
}

/* Membuat teks merah menyala, tebal, dan ada bayangan tipis agar tetap terbaca di bg gelap */
#isi-pesan {
    color: #ff4d4d; /* Merah Terang */
    font-weight: 900; /* Sangat Tebal */
    text-transform: uppercase; /* Huruf Besar Semua agar lebih tegas */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-size: 1rem;
    letter-spacing: 1px;
}
#pesan-slider { 
    min-height: 40px; 
    transition: opacity 0.5s ease-in-out; 
}
</style>

<div class="kelulusan-wrapper">
    <div class="container container-content">
        <div class="row justify-content-center">
            <div class="col-lg-7">
                <div class="card card-glass p-4 p-md-5">
                    <div class="text-center mb-4">
                        <img src="<?= base_url('assets/img/logo_sekolah.png') ?>" width="100" class="mb-3 img-fluid shadow-sm rounded-circle p-2 bg-white">
                        <h2 class="text-white font-weight-bold mb-1 text-uppercase">Cek Kelulusan</h2>
                        <p class="text-white-50 small">SMK Negeri 1 Sukalarang</p>
                    </div>

                    <form action="<?= base_url('kelulusan/cek') ?>" method="post" class="mb-4">
                        <?= csrf_field() ?>
                        <div class="input-group">
                            <input type="text" name="nisn" class="form-control form-control-custom" placeholder="Masukkan Nomor NISN..." required value="<?= $nisn ?? '' ?>">
                            <div class="input-group-append ml-2">
                                <button type="submit" class="btn btn-gradient px-4 shadow">CEK</button>
                            </div>
                        </div>
                    </form>

                    <?php if ($hasil) : ?>
                        <div class="result-area animate__animated animate__fadeInUp">
                            <div class="table-responsive">
                                <table class="table table-borderless text-white mb-0">
                                    <tr><td width="40%">NAMA SISWA</td><td width="5%">:</td><td><strong><?= strtoupper($hasil['nama_siswa']) ?></strong></td></tr>
                                    <tr><td>JURUSAN</td><td>:</td><td><?= $hasil['jurusan'] ?></td></tr>
                                    <tr><td>STATUS</td><td>:</td><td><span class="badge <?= $hasil['status'] == 'LULUS' ? 'badge-success' : 'badge-danger' ?> px-3 py-2 rounded-pill"><?= $hasil['status'] ?></span></td></tr>
                                </table>
                            </div>
                            <div class="alert <?= $hasil['status'] == 'LULUS' ? 'alert-success' : 'alert-danger' ?> border-0 shadow-sm rounded-pill py-3 px-4 mt-3 text-center">
                                <p class="mb-0 font-weight-bold"><?= $hasil['keterangan'] ?></p>
                            </div>

                            <?php if ($hasil['status'] == 'LULUS') : ?>
                                <div class="mt-4 text-center">
                                    <!-- Ubah data-toggle jadi data-bs-toggle dan data-target jadi data-bs-target -->
<button type="button" class="btn btn-light btn-lg rounded-pill shadow-sm px-5 font-weight-bold text-success btn-buka-modal" data-bs-toggle="modal" data-bs-target="#modalDownload">
    <i class="fa fa-file-pdf mr-2"></i> DOWNLOAD SURAT
</button>
                                </div>
                            <?php endif; ?>
                        </div>
                    <?php endif; ?>

                    <div class="text-center mt-5">
    <!-- Tambahkan class gembira jika statusnya LULUS -->
    <div class="pesan-container animate__animated <?= ($hasil && $hasil['status'] == 'LULUS') ? 'animate__bounceIn' : 'animate__pulse animate__infinite' ?>">
        <div id="pesan-slider">
            <!-- Ikon juga berubah: Peringatan (Psywar) vs Bintang/Pesta (Gembira) -->
            <i class="fa <?= ($hasil && $hasil['status'] == 'LULUS') ? 'fa-star' : 'fa-exclamation-triangle' ?> mr-2 <?= ($hasil && $hasil['status'] == 'LULUS') ? 'pesan-gembira' : 'pesan-merah' ?>"></i>
            
            <span id="isi-pesan" class="<?= ($hasil && $hasil['status'] == 'LULUS') ? 'pesan-gembira' : 'pesan-merah' ?>" style="font-weight: 900; text-transform: uppercase;">
                Memuat pesan...
            </span>
            
            <i class="fa <?= ($hasil && $hasil['status'] == 'LULUS') ? 'fa-star' : 'fa-exclamation-triangle' ?> ml-2 <?= ($hasil && $hasil['status'] == 'LULUS') ? 'pesan-gembira' : 'pesan-merah' ?>"></i>
        </div>
    </div>
</div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalDownload" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 30px; background: rgba(255,255,255,0.98);">
            <form action="<?= base_url('kelulusan/verifikasi_download') ?>" method="post">
                <?= csrf_field() ?>
                <input type="hidden" name="nisn" value="<?= $hasil['nisn'] ?? '' ?>">
                <div class="modal-header border-0 p-4 pb-0">
                    <h5 class="modal-title font-weight-bold text-dark"><i class="fa fa-lock text-success mr-2"></i> Verifikasi Data</h5>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body p-4">
                    <?php if (session()->getFlashdata('error_verifikasi')) : ?>
                        <div class="alert alert-danger small py-2 border-0 mb-3 rounded-lg text-center"><?= session()->getFlashdata('error_verifikasi') ?></div>
                    <?php endif; ?>
                    <div class="form-group mb-3 text-left"><label class="small font-weight-bold text-dark ml-2">TANGGAL LAHIR</label><input type="date" name="tgl_lahir" class="form-control rounded-pill px-3" style="height: 50px;" required></div>
                    <div class="form-group text-left"><label class="small font-weight-bold text-dark ml-2">NAMA AYAH</label><input type="text" name="nama_ibu" class="form-control rounded-pill px-3" style="height: 50px;" placeholder="Nama Ayah" required autocomplete="off"></div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="submit" class="btn btn-success btn-block rounded-pill font-weight-bold p-3 shadow-lg">KONFIRMASI & UNDUH</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
    $(document).ready(function() {
        // 1. Kumpulan kata-kata PSYWAR (Saat belum cek atau data tidak ditemukan)
        const pesanMendebarkan = [
            "Satu langkah lagi menuju masa depan, tapi sabar ya, gerbangnya belum dibuka.",
            "Coba cek lagi NISN-nya, yakin udah bener?",
            "Lagi proses pengecekan dosa-dosa selama sekolah nih...",
            "Hati aja bisa kamu jaga buat dia, masa nunggu hasil kelulusan nggak bisa?",
            "Duh, datanya kok merah ya? Eh, tenang... itu cuma warna background-nya aja.",
            "Setidaknya nunggu pengumuman ini ada ujungnya, daripada nunggu chat dia cuma di-read.",
            "Nunggu pengumuman ini emang berat, tapi lebih berat lagi kalau udah lulus tapi nggak tahu mau kemana.",
            "Cek NISN berkali-kali nggak akan ngerubah hasil. Sama kayak kamu nge-chat dia berkali-kali nggak akan ngerubah perasaannya.",
            "Status kelulusan itu pasti, yang nggak pasti itu janji dia yang katanya mau nemenin sampai sukses.",
            "Setidaknya kalau kamu nggak lulus, sistem ini bakal jujur bilang 'Maaf'. Nggak kayak dia yang bilang 'Sayang' tapi tiba-tiba menghilang.",
            "Lagi loading... Bayangkan wajah orang tua kamu pas liat hasil ini. Udah siap bikin mereka bangga, atau mau bikin drama?",
            "Pesan Sistem: 'Harap tenang, keringat dingin tidak akan membantu mempercepat proses pengecekan'.",
            "Sistem mendeteksi adanya getaran tremor di jari kamu. Tenang, ini baru simulasi mental sebelum ijazah asli keluar."
        ];

        // 2. Kumpulan kata-kata SELAMAT (Muncul hanya jika HASIL ada)
        const pesanSelamat = [
            "Selamat! Perjuangan 3 tahun di SMKN 1 Sukalarang terbayar lunas hari ini. Kami bangga melepaskanmu menjadi pemenang!",  
            "LULUS! Hari ini seragam putih abu-abumu resmi menjadi saksi bisu kesuksesan awalmu. Selamat menempuh perjalanan baru!",  
            "Bukan sekadar angka, kelulusan ini adalah bukti kamu mampu melewati ujian mental dan ilmu di Negla. Selamat, Sang Alumni!",  
            "Air mata dan lelahmu saat ngerjain tugas akhirnya berganti senyum hari ini. Selamat, masa depan cerah sudah menantimu!",
            "Selamat atas kelulusannya! Perjalanan baru saja dimulai.",
            "Sukses selalu untuk alumni SMK Negeri 1 Sukalarang!",
            "Jangan lupa sujud syukur dan minta doa restu orang tua.",
            "Jaga nama baik almamater di mana pun kamu berada.",
            "Pintu kesuksesan terbuka lebar bagi mereka yang tidak berhenti belajar.",
            "Rayakan dengan cara yang positif ya, hindari konvoi dan corat-coret!",
            "Cie yang lulus! Status 'Siswa' sudah berganti jadi 'Alumni'. Selamat beristirahat sejenak sebelum tempur di dunia kerja!"
        ];

        // LOGIKA PEMILIHAN ARRAY SINKRON DENGAN PHP
        const koleksiPesan = <?= $hasil ? 'pesanSelamat' : 'pesanMendebarkan' ?>;

        let i = 0;
        const isiPesan = document.getElementById("isi-pesan");
        const sliderParent = document.querySelector(".pesan-container");

        // Set pesan pertama
        isiPesan.innerHTML = koleksiPesan[0];

        function gantiPesan() {
            if (isiPesan) {
                isiPesan.parentElement.style.opacity = 0;
                setTimeout(() => {
                    i = (i + 1) % koleksiPesan.length;
                    isiPesan.innerHTML = koleksiPesan[i];
                    isiPesan.parentElement.style.opacity = 1;
                }, 500);
            }
        }

        setInterval(gantiPesan, 6000); // Pesan berganti setiap 6 detik
    });
</script>
<?= $this->endSection() ?>