<?php // app/Views/guru/assessment/create_ash.php ?>
<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="container-fluid py-4">

    <div class="d-flex align-items-center gap-2 mb-4">
        <a href="/guru/assessment" class="btn btn-outline-secondary btn-sm">
            <i class="bi bi-arrow-left"></i>
        </a>
        <div>
            <h4 class="mb-0 fw-bold">Buat Event ASH</h4>
            <small class="text-muted">Asesmen Sumatif Harian — dibuat sendiri oleh guru</small>
        </div>
    </div>

    <?php if (session()->getFlashdata('error')): ?>
        <div class="alert alert-danger"><?= session()->getFlashdata('error') ?></div>
    <?php endif; ?>
    <?php if (session()->getFlashdata('errors')): ?>
        <div class="alert alert-danger">
            <ul class="mb-0">
                <?php foreach (session()->getFlashdata('errors') as $err): ?>
                    <li><?= esc($err) ?></li>
                <?php endforeach; ?>
            </ul>
        </div>
    <?php endif; ?>

    <form action="/guru/assessment/store-ash" method="POST">
        <?= csrf_field() ?>
        <input type="hidden" name="academic_period_id" value="<?= $activePeriod['id'] ?>">

        <div class="row g-4">

            <!-- Kiri: info dasar -->
            <div class="col-lg-6">
                <div class="card shadow-sm">
                    <div class="card-header bg-white fw-semibold border-bottom">
                        <i class="bi bi-info-circle me-2 text-primary"></i>Informasi ASH
                    </div>
                    <div class="card-body">

                        <!-- Nama Event -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Nama Event <span class="text-danger">*</span></label>
                            <input type="text" name="name" class="form-control"
                                   placeholder="misal: ASH 1, ASH 2, ..."
                                   value="<?= old('name') ?>" required>
                        </div>

                        <!-- Pilih Mapel -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Mata Pelajaran <span class="text-danger">*</span></label>
                            <select name="subject_id" class="form-select" id="subject_select" required onchange="updateKelas()">
                                <option value="">-- Pilih Mapel --</option>
                                <?php foreach ($subjectClassMap as $sm): ?>
                                    <option value="<?= $sm['subject_id'] ?>"
                                        data-classrooms='<?= json_encode($sm['classrooms']) ?>'
                                        <?= old('subject_id') == $sm['subject_id'] ? 'selected' : '' ?>>
                                        <?= esc($sm['subject_name']) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                        </div>

                        <!-- Pilih Kelas -->
                        <div class="mb-3">
                            <label class="form-label fw-semibold">Kelas yang Diampu <span class="text-danger">*</span></label>
                            <div id="kelas_list" class="border rounded p-3 bg-light">
                                <small class="text-muted">Pilih mapel terlebih dahulu</small>
                            </div>
                            <div class="form-text">Centang semua kelas yang akan mengikuti ASH ini</div>
                        </div>

                        <!-- Tanggal -->
                        <div class="row g-3">
                            <div class="col-6">
                                <label class="form-label fw-semibold">Tanggal Mulai <span class="text-danger">*</span></label>
                                <input type="date" name="start_date" class="form-control"
                                       value="<?= old('start_date', date('Y-m-d')) ?>" required>
                            </div>
                            <div class="col-6">
                                <label class="form-label fw-semibold">Tanggal Selesai <span class="text-danger">*</span></label>
                                <input type="date" name="end_date" class="form-control"
                                       value="<?= old('end_date', date('Y-m-d')) ?>" required>
                            </div>
                        </div>

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

            <!-- Kanan: jenis soal -->
            <div class="col-lg-6">
                <div class="card shadow-sm">
                    <div class="card-header bg-white fw-semibold border-bottom">
                        <i class="bi bi-list-check me-2 text-success"></i>Jenis Soal
                        <small class="text-muted fw-normal ms-1">— pilih minimal 1</small>
                    </div>
                    <div class="card-body">

                        <!-- PG -->
                        <div class="form-check form-switch mb-3 border rounded p-3">
                            <input class="form-check-input" type="checkbox" name="has_pg"
                                   id="has_pg" value="1" <?= old('has_pg') ? 'checked' : '' ?>>
                            <label class="form-check-label fw-semibold" for="has_pg">
                                Pilihan Ganda (PG)
                            </label>
                            <div class="form-text">Koreksi otomatis dari kunci jawaban</div>
                        </div>

                        <!-- BS -->
                        <div class="form-check form-switch mb-3 border rounded p-3">
                            <input class="form-check-input" type="checkbox" name="has_bs"
                                   id="has_bs" value="1" <?= old('has_bs') ? 'checked' : '' ?>>
                            <label class="form-check-label fw-semibold" for="has_bs">
                                Benar Salah (BS)
                            </label>
                            <div class="form-text">Koreksi otomatis dari kunci jawaban</div>
                        </div>

                        <!-- ISIAN -->
                        <div class="border rounded p-3 mb-3">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" name="has_isian"
                                       id="has_isian" value="1"
                                       <?= old('has_isian') ? 'checked' : '' ?>
                                       onchange="toggleIsian(this.checked)">
                                <label class="form-check-label fw-semibold" for="has_isian">Isian Singkat</label>
                            </div>
                            <div id="isian_options" class="<?= old('has_isian') ? '' : 'd-none' ?> ms-3">
                                <label class="form-label small fw-semibold">Mode Input Skor</label>
                                <div class="d-flex gap-3 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="isian_mode"
                                               id="isian_total" value="total"
                                               <?= old('isian_mode', 'total') === 'total' ? 'checked' : '' ?>
                                               onchange="toggleIsianSoal()">
                                        <label class="form-check-label" for="isian_total">Total Skor</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="isian_mode"
                                               id="isian_per_nomor" value="per_nomor"
                                               <?= old('isian_mode') === 'per_nomor' ? 'checked' : '' ?>
                                               onchange="toggleIsianSoal()">
                                        <label class="form-check-label" for="isian_per_nomor">Per Nomor Soal</label>
                                    </div>
                                </div>
                                <div id="isian_total_soal_wrap" class="<?= old('isian_mode') === 'per_nomor' ? '' : 'd-none' ?>">
                                    <label class="form-label small">Jumlah Soal Isian</label>
                                    <input type="number" name="isian_total_soal" class="form-control form-control-sm"
                                           min="1" max="50" value="<?= old('isian_total_soal', 5) ?>">
                                </div>
                            </div>
                        </div>

                        <!-- ESSAY -->
                        <div class="border rounded p-3 mb-3">
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" name="has_essay"
                                       id="has_essay" value="1"
                                       <?= old('has_essay') ? 'checked' : '' ?>
                                       onchange="toggleEssay(this.checked)">
                                <label class="form-check-label fw-semibold" for="has_essay">Essay</label>
                            </div>
                            <div id="essay_options" class="<?= old('has_essay') ? '' : 'd-none' ?> ms-3">
                                <label class="form-label small fw-semibold">Mode Input Skor</label>
                                <div class="d-flex gap-3 mb-2">
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="essay_mode"
                                               id="essay_total" value="total"
                                               <?= old('essay_mode', 'total') === 'total' ? 'checked' : '' ?>
                                               onchange="toggleEssaySoal()">
                                        <label class="form-check-label" for="essay_total">Total Skor</label>
                                    </div>
                                    <div class="form-check">
                                        <input class="form-check-input" type="radio" name="essay_mode"
                                               id="essay_per_nomor" value="per_nomor"
                                               <?= old('essay_mode') === 'per_nomor' ? 'checked' : '' ?>
                                               onchange="toggleEssaySoal()">
                                        <label class="form-check-label" for="essay_per_nomor">Per Nomor Soal</label>
                                    </div>
                                </div>
                                <div id="essay_total_soal_wrap" class="<?= old('essay_mode') === 'per_nomor' ? '' : 'd-none' ?>">
                                    <label class="form-label small">Jumlah Soal Essay</label>
                                    <input type="number" name="essay_total_soal" class="form-control form-control-sm"
                                           min="1" max="20" value="<?= old('essay_total_soal', 5) ?>">
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <div class="d-grid mt-3">
                    <button type="submit" class="btn btn-success btn-lg">
                        <i class="bi bi-check-lg me-2"></i>Buat Event ASH
                    </button>
                </div>
            </div>

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

<script>
function updateKelas() {
    const select = document.getElementById('subject_select');
    const opt = select.options[select.selectedIndex];
    const kelasList = document.getElementById('kelas_list');

    if (!opt.value) {
        kelasList.innerHTML = '<small class="text-muted">Pilih mapel terlebih dahulu</small>';
        return;
    }

    const classrooms = JSON.parse(opt.dataset.classrooms || '[]');
    if (classrooms.length === 0) {
        kelasList.innerHTML = '<small class="text-muted">Tidak ada kelas untuk mapel ini</small>';
        return;
    }

    let html = '';
    classrooms.forEach(c => {
        html += `
        <div class="form-check mb-1">
            <input class="form-check-input" type="checkbox"
                   name="classroom_ids[]" value="${c.classroom_id}"
                   id="cls_${c.classroom_id}" checked>
            <label class="form-check-label" for="cls_${c.classroom_id}">
                ${c.grade_name} — ${c.classroom_name}
            </label>
        </div>`;
    });
    kelasList.innerHTML = html;
}

function toggleIsian(checked) {
    document.getElementById('isian_options').classList.toggle('d-none', !checked);
}
function toggleEssay(checked) {
    document.getElementById('essay_options').classList.toggle('d-none', !checked);
}
function toggleIsianSoal() {
    const isPerNomor = document.getElementById('isian_per_nomor').checked;
    document.getElementById('isian_total_soal_wrap').classList.toggle('d-none', !isPerNomor);
}
function toggleEssaySoal() {
    const isPerNomor = document.getElementById('essay_per_nomor').checked;
    document.getElementById('essay_total_soal_wrap').classList.toggle('d-none', !isPerNomor);
}
</script>

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