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

<?= $this->section('content') ?>

<div class="content-header">
    <div class="header-title">
        <h2>Tambah Kelas Perkuliahan Baru</h2>
        <p>Membuat master kelas perkuliahan secara lokal untuk KRS</p>
    </div>
    <div class="header-actions">
        <a href="<?= base_url('kelas-perkuliahan') ?>" class="btn btn-secondary">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>
</div>

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

<div class="card" style="background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem; overflow: hidden;">
    <div class="card-header" style="background: #f8f9fa; padding: 15px 20px; border-bottom: 1px solid #eee;">
        <h3 style="margin: 0; font-size: 16px; font-weight: bold;">Formulir Pembuatan Kelas Lokal</h3>
    </div>
    <div class="card-body" style="padding: 20px;">
        <form action="<?= base_url('kelas-perkuliahan/store') ?>" method="POST">
            <?= csrf_field() ?>
            
            <div class="form-group" style="margin-bottom: 15px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px;">Tahun Akademik (Periode) *</label>
                <select name="id_semester" class="form-control" required style="width: 100%; max-width: 500px;">
                    <option value="<?= esc($tahun_aktif['kode_ta']) ?>">
                        <?= esc($tahun_aktif['nama_ta']) ?> (Aktif)
                    </option>
                </select>
            </div>

            <div class="form-group" style="margin-bottom: 15px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px;">Program Studi *</label>
                <select name="id_prodi" id="id_prodi" class="form-control" required style="width: 100%; max-width: 500px;" onchange="loadMataKuliah()">
                    <option value="">-- Pilih Program Studi --</option>
                    <?php foreach ($list_prodi as $p) : ?>
                        <option value="<?= esc($p['id']) ?>">
                            <?= esc($p['nama_prodi']) ?>
                        </option>
                    <?php endforeach; ?>
                </select>
            </div>

            <div class="form-group" style="margin-bottom: 15px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px;">Semester Mata Kuliah</label>
                <select name="semester_matkul" id="semester_matkul" class="form-control" style="width: 100%; max-width: 500px;" onchange="loadMataKuliah()">
                    <option value="">-- Semua Semester --</option>
                    <?php for($i=1; $i<=8; $i++): ?>
                        <option value="<?= $i ?>">Semester <?= $i ?></option>
                    <?php endfor; ?>
                </select>
                <small style="color: #6c757d; display: block; margin-top: 4px;">Opsional: Filter daftar Mata Kuliah berdasarkan semester pengambilannya.</small>
            </div>

            <div class="form-group" style="margin-bottom: 15px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px;">Mata Kuliah *</label>
                <select name="id_mata_kuliah" id="id_mata_kuliah" class="form-control" required style="width: 100%; max-width: 500px;" disabled>
                    <option value="">-- Pilih Prodi Terlebih Dahulu --</option>
                </select>
            </div>

            <div class="form-group" style="margin-bottom: 25px;">
                <label style="font-weight: bold; display: block; margin-bottom: 5px;">Nama Kelas *</label>
                <input type="text" name="nama_kelas_kuliah" class="form-control" required placeholder="Contoh: A, B, TI-Pagi, dsb" style="width: 100%; max-width: 500px;">
            </div>
            
            <button type="submit" class="btn btn-primary" style="height: 38px;">
                <i class="fas fa-save"></i> Simpan Kelas
            </button>
        </form>
    </div>
</div>

<script>
function loadMataKuliah() {
    var idProdi = document.getElementById('id_prodi').value;
    var semesterMatkul = document.getElementById('semester_matkul').value;
    var mkSelect = document.getElementById('id_mata_kuliah');
    
    // Reset and disable the mata kuliah select
    mkSelect.innerHTML = '<option value="">-- Memuat Mata Kuliah... --</option>';
    mkSelect.disabled = true;

    if (idProdi === '') {
        mkSelect.innerHTML = '<option value="">-- Pilih Prodi Terlebih Dahulu --</option>';
        return;
    }

    // Fetch data via AJAX
    var url = '<?= base_url('kelas-perkuliahan/get-matkul') ?>?id_prodi=' + idProdi;
    if (semesterMatkul !== '') {
        url += '&semester=' + semesterMatkul;
    }

    fetch(url)
        .then(response => response.json())
        .then(data => {
            mkSelect.innerHTML = '<option value="">-- Pilih Mata Kuliah --</option>';
            if (data.length > 0) {
                data.forEach(function(mk) {
                    var option = document.createElement('option');
                    option.value = mk.id_matkul_pddikti;
                    option.text = mk.kode_mata_kuliah + ' - ' + mk.nama_mata_kuliah + ' (' + mk.sks_mata_kuliah + ' SKS)';
                    mkSelect.appendChild(option);
                });
                mkSelect.disabled = false;
            } else {
                mkSelect.innerHTML = '<option value="">-- Tidak ada Mata Kuliah di Prodi ini --</option>';
            }
        })
        .catch(error => {
            console.error('Error fetching matkul:', error);
            mkSelect.innerHTML = '<option value="">-- Gagal memuat data --</option>';
        });
}
</script>

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