{{ block title }}
{{ endblock }}

{{ block content }}

<style>
     .circle-checklist {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 950px;
    }

    .circle-opt {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0;
        cursor: pointer;
        user-select: none;
    }

    .circle-opt input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        width: 18px;
        height: 18px;
        border: 2px solid #666;
        display: inline-block;
        position: relative;
        margin: 0;
        cursor: pointer;
        background: white;
    }

    .circle-opt input[type="checkbox"]:checked::after {
        content: "";
        position: absolute;
        top: 2px;
        left: 2px;
        width: 10px;
        height: 10px;
        background: #222;
    }

    .circle-opt span {
        line-height: 1.3;
    }

    .other-wrap {
        display: none;
        margin-top: 4px;
    }

    .inline-input input {
        width: 320px;
        max-width: 100%;
        font-size: 20px;
        font-family: "Times New Roman", Georgia, serif;
    }
    .q-box {
        font-family: "Times New Roman", Georgia, serif;
        font-size: 20px;
        line-height: 1.55;
        max-width: 1120px;
        margin: 0 auto;
    }

    .q-title {
        font-weight: 700;
        font-size: 28px;
        margin-bottom: 26px;
    }

    .q-item {
        margin-bottom: 30px;
    }

    .q-text {
        margin-bottom: 12px;
    }

    .short-inline {
        display: inline-block;
        margin-right: 24px;
        vertical-align: top;
    }

    .short-inline input {
        width: 110px;
        font-size: 20px;
        font-family: "Times New Roman", Georgia, serif;
    }

    .medium-input input {
        width: 520px;
        max-width: 100%;
        font-size: 20px;
        font-family: "Times New Roman", Georgia, serif;
    }

    .long-input textarea {
        width: 100%;
        min-height: 100px;
        font-size: 19px;
        font-family: "Times New Roman", Georgia, serif;
    }

    .choice-block {
        margin-left: 18px;
    }

    .choice-block label {
        display: block;
        margin: 6px 0;
    }

    .check-list {
        margin-left: 18px;
        margin-top: 6px;
    }

    .check-list .check-row {
        margin: 8px 0;
    }

    .scale-wrap {
        margin-top: 10px;
        margin-left: 8px;
    }

    .scale-row {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: nowrap;
    }

    .scale-left,
    .scale-right {
        font-size: 18px;
        white-space: nowrap;
    }

    .scale-field .controls {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 16px;
    }

    .scale-field .controls label {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        margin: 0;
        white-space: nowrap;
    }

    .errorlist {
        color: #b00020;
        font-size: 18px;
        margin-top: 8px;
        margin-bottom: 0;
    }

    .next-wrap {
        margin-top: 30px;
        text-align: right;
    }

    .otree-btn-next {
        font-size: 22px;
        font-family: "Times New Roman", Georgia, serif;
        padding: 8px 22px;
    }
</style>

<div class="q-box">
    <div class="q-title">
        Kuesioner Akhir
    </div>

    <div class="q-item">
        <div class="q-text">1. Apa jenis kelamin Anda?</div>
        <div class="choice-block">
            {{ formfield 'gender' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">2. Berapa usia Anda (tahun, bulan)?</div>
        <div class="short-inline">
            {{ formfield 'age_year' label="Tahun" }}
        </div>
        <div class="short-inline">
            {{ formfield 'age_month' label="Bulan" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            3. Seberapa kuat keinginan Anda untuk melanjutkan pendidikan ke jenjang perguruan tinggi (universitas) setelah lulus SMA?
        </div>
        <div class="scale-wrap">
            <div class="scale-row">
                <div class="scale-left">Rendah</div>
                <div class="scale-field">
                    {{ formfield 'desire_university' label="" }}
                </div>
                <div class="scale-right">Tinggi</div>
            </div>
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            4. Jika Anda memiliki kebebasan penuh untuk memilih, jurusan apa yang paling ingin Anda ambil di universitas?
        </div>
        <div class="medium-input">
            {{ formfield 'preferred_major' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            5. Jika Anda memiliki kebebasan penuh untuk memilih, universitas mana yang paling ingin Anda masuki?
        </div>
        <div class="medium-input">
            {{ formfield 'preferred_university' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            6. Apakah Anda memenuhi syarat dan mendaftarkan diri melalui jalur SNBP?
        </div>
        <div class="choice-block">
            {{ formfield 'snbp_applied' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            7. Jika ya, program studi dan universitas mana yang Anda daftarkan?
            (Pertanyaan terbuka. Anda dapat menuliskan hingga tiga pilihan. Jika Anda tidak mendaftar, Anda dapat membiarkan semua kolom kosong.)
        </div>
        <div class="medium-input">{{ formfield 'snbp_choice1' label="Pilihan 1: Program Studi/Universitas" }}</div>
        <div class="medium-input">{{ formfield 'snbp_choice2' label="Pilihan 2: Program Studi/Universitas" }}</div>
        <div class="medium-input">{{ formfield 'snbp_choice3' label="Pilihan 3: Program Studi/Universitas" }}</div>
    </div>

    <div class="q-item">
        <div class="q-text">
            8. Apakah Anda diterima melalui jalur SNBP? Jika ya, tuliskan program studi dan universitas tempat Anda diterima. Jika Anda tidak mendaftar, Anda dapat membiarkan kolom di bawah ini kosong.
        </div>
        <div class="medium-input">
            {{ formfield 'snbp_accepted_program' label="Program Studi/Universitas" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            9. Apakah Anda berencana untuk mendaftar atau mengikuti ujian SNBT (UTBK)?
        </div>
        <div class="choice-block">
            {{ formfield 'snbt_plan' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            10. Program studi dan universitas mana yang Anda rencanakan untuk dipilih melalui SNBT (UTBK)?
            (Pertanyaan terbuka, Anda dapat menuliskan hingga tiga pilihan. Jika Anda tidak berencana mendaftar melalui SNBT (UTBK), Anda dapat membiarkan semua kolom kosong.)
        </div>
        <div class="medium-input">{{ formfield 'snbt_choice1' label="Pilihan 1: Program Studi/Universitas" }}</div>
        <div class="medium-input">{{ formfield 'snbt_choice2' label="Pilihan 2: Program Studi/Universitas" }}</div>
        <div class="medium-input">{{ formfield 'snbt_choice3' label="Pilihan 3: Program Studi/Universitas" }}</div>
    </div>

   <div class="q-item">
    <div class="q-text">
        11. Secara lengkap, jalur masuk universitas mana yang Anda rencanakan untuk Anda ikuti?
        <br>(Anda dapat memilih lebih dari satu.)
    </div>

    <div class="circle-checklist" style="margin-top: 12px; margin-left: 18px;">

        <label class="circle-opt">
            <input type="checkbox" name="path_snbp" id="id_path_snbp">
            <span>SNBP (Seleksi Nasional Berdasarkan Prestasi)</span>
        </label>

        <label class="circle-opt">
            <input type="checkbox" name="path_snbt" id="id_path_snbt">
            <span>SNBT (UTBK)</span>
        </label>

        <label class="circle-opt">
            <input type="checkbox" name="path_independent" id="id_path_independent">
            <span>Seleksi Mandiri</span>
        </label>

        <label class="circle-opt">
            <input type="checkbox" name="path_service" id="id_path_service">
            <span>Sekolah Kedinasan</span>
        </label>

        <label class="circle-opt">
            <input type="checkbox" name="path_private" id="id_path_private">
            <span>Perguruan Tinggi Swasta</span>
        </label>

        <label class="circle-opt">
            <input type="checkbox"
                   name="path_other"
                   id="id_path_other"
                   data-other-target="path_other_wrap">
            <span>Lainnya:</span>
        </label>

        <div id="path_other_wrap" class="other-wrap" style="display:none; margin-left: 30px;">
            <div class="inline-input medium-input">
                {{ formfield 'path_other_text' label="" }}
            </div>
        </div>

    </div>
</div>

    <div class="q-item">
        <div class="q-text">
            12. Seberapa besar dukungan yang Anda terima dari orang tua/keluarga untuk melanjutkan pendidikan ke perguruan tinggi?
        </div>
        <div class="scale-wrap">
            {{ formfield 'family_support' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            13. Menurut Anda, seberapa besar kemungkinan Anda benar-benar akan dapat melanjutkan pendidikan ke perguruan tinggi?
        </div>
        <div class="scale-wrap">
            {{ formfield 'likelihood_pursue' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            14. Apa alasan utama Anda ingin (atau tidak ingin) melanjutkan pendidikan ke perguruan tinggi?
        </div>
        <div class="long-input">
            {{ formfield 'main_reason' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            15. Secara umum, apakah Anda lebih suka menghindari risiko, atau justru siap mengambil risiko?
            Gunakan skala berikut, di mana nilai 0 berarti “menghindari risiko” dan nilai 10 berarti “sepenuhnya siap mengambil risiko”.
        </div>
        <div class="scale-wrap">
            <div class="scale-row">
                <div class="scale-left">Menghindari risiko</div>
                <div class="scale-field">
                    {{ formfield 'risk_preference' label="" }}
                </div>
                <div class="scale-right">Sepenuhnya siap mengambil risiko</div>
            </div>
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            16. Seberapa penting bagi Anda untuk memaksimalkan pendapatan Anda dalam penelitian ini?
        </div>
        <div class="scale-wrap">
            {{ formfield 'income_importance' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            17. Bagaimana menurut Anda petunjuk yang diberikan dalam penelitian ini?
        </div>
        <div class="scale-wrap">
            {{ formfield 'instruction_difficulty' label="" }}
        </div>
    </div>

    <div class="q-item">
        <div class="q-text">
            18. Apakah Anda memiliki saran atau masukan lain terkait penelitian ini?
        </div>
        <div class="long-input">
            {{ formfield 'other_comments' label="" }}
        </div>
    </div>

    <div class="next-wrap">
        {{ next_button }}
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector(".otree-btn-next");
    if (btn) btn.textContent = "Lanjut";
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    const btn = document.querySelector(".otree-btn-next");
    if (btn) btn.textContent = "Lanjut";

    function toggleWrap(checkbox) {
        const targetId = checkbox.getAttribute('data-other-target');
        if (!targetId) return;
        const wrap = document.getElementById(targetId);
        if (!wrap) return;
        wrap.style.display = checkbox.checked ? 'block' : 'none';
    }

    const otherBoxes = document.querySelectorAll('input[type="checkbox"][data-other-target]');

    otherBoxes.forEach(cb => toggleWrap(cb));

    otherBoxes.forEach(cb => {
        cb.addEventListener('change', function () {
            toggleWrap(cb);
        });
    });
});
</script>
{{ endblock }}