<?= $this->extend('layouts/main') ?>
<?= $this->section('content') ?>

<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card">
            <div class="card-header">
                <i class="bi bi-gear me-2 text-primary"></i>
                <span class="fw-semibold">Setting Koreksi Asesmen</span>
            </div>
            <div class="card-body">
                <div class="alert alert-info py-2 small mb-3">
                    <strong><?= esc($assessment['name']) ?></strong><br>
                    Jenis: <?= esc($assessmentType['name'] ?? '-') ?> | 
                    Mapel: <?= esc($subject['name'] ?? 'Semua Mapel') ?> | 
                    Kelas: <?= esc($classroom['name'] ?? ($assessment['grade_id'] ? 'Kelas ' . esc($assessment['grade_id']) : 'Semua Kelas')) ?>
                </div>

                <?php if (session()->getFlashdata('error')): ?>
                <div class="alert alert-danger py-2 small">
                    <?= session()->getFlashdata('error') ?>
                </div>
                <?php endif; ?>

                <form action="/guru/assessment/save-setting/<?= $assessment['id'] ?>" method="post">
                    <?= csrf_field() ?>

                    <div class="row">
                        <div class="col-md-4 mb-3">
                            <label class="form-label">KKM/KKTP <span class="text-danger">*</span></label>
                            <input type="number" name="kkm" class="form-control" value="<?= $setting['kkm'] ?>" min="0" max="100" required>
                            <div class="form-text">0-100</div>
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Bobot Pilgan (%)</label>
                            <input type="number" name="weight_multiple_choice" id="weight_pilgan" class="form-control" value="<?= $setting['weight_multiple_choice'] ?>" min="0" max="100">
                        </div>
                        <div class="col-md-4 mb-3">
                            <label class="form-label">Bobot Essay (%)</label>
                            <input type="number" name="weight_essay" id="weight_essay" class="form-control" value="<?= $setting['weight_essay'] ?>" min="0" max="100">
                        </div>
                    </div>

                    <div class="alert alert-secondary py-2 small">
                        <i class="bi bi-info-circle"></i> Total bobot harus 100%. Saat ini: <span id="totalWeight">0</span>%
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Kunci Jawaban Pilgan</label>
                        <textarea name="answer_key" class="form-control" rows="3" placeholder="Contoh: A,B,C,D,A&#10;Atau: ABCDA&#10;Pisahkan dengan koma atau tanpa spasi"><?= esc($setting['answer_key']) ?></textarea>
                        <div class="form-text">Masukkan kunci jawaban untuk soal pilgan. Contoh: A,B,C,D,A atau ABCDA</div>
                    </div>

                    <hr>

                    <h6 class="fw-semibold mb-3">Setting Essay</h6>
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <div class="form-check">
                                <input type="checkbox" name="essay_mode" id="essay_mode" class="form-check-input" value="1" <?= $setting['essay_mode'] ? 'checked' : '' ?>>
                                <label class="form-check-label" for="essay_mode">
                                    Mode Koreksi Per Soal Essay
                                </label>
                            </div>
                            <div class="form-text">Jika diaktifkan, guru akan mengisi nilai per soal essay</div>
                        </div>
                        <div class="col-md-6 mb-3" id="totalEssayField" style="<?= $setting['essay_mode'] ? '' : 'display:none' ?>">
                            <label class="form-label">Jumlah Soal Essay</label>
                            <input type="number" name="total_essay_questions" class="form-control" value="<?= $setting['total_essay_questions'] ?>" min="0">
                        </div>
                    </div>

                    <hr>

                    <div class="d-flex justify-content-end gap-2">
                        <a href="/guru/assessment" class="btn btn-secondary btn-sm">Batal</a>
                        <button type="submit" class="btn btn-primary btn-sm">Simpan Setting</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

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

<?= $this->section('scripts') ?>
<script>
$(document).ready(function() {
    function updateTotal() {
        var pilgan = parseInt($('#weight_pilgan').val()) || 0;
        var essay = parseInt($('#weight_essay').val()) || 0;
        var total = pilgan + essay;
        $('#totalWeight').text(total);
        
        if (total !== 100) {
            $('#totalWeight').css('color', 'red');
        } else {
            $('#totalWeight').css('color', 'green');
        }
    }
    
    $('#weight_pilgan, #weight_essay').on('input', updateTotal);
    updateTotal();
    
    $('#essay_mode').change(function() {
        if ($(this).is(':checked')) {
            $('#totalEssayField').show();
        } else {
            $('#totalEssayField').hide();
        }
    });
});
</script>
<?= $this->endSection() ?>