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

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

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem;">
    <h1 class="page-title" style="margin-bottom: 0;">Pilih Mata Kuliah (KRS)</h1>
    <a href="<?= base_url('krs') ?>" class="btn btn-secondary">
        <i class='bx bx-arrow-back'></i> Kembali ke KRS
    </a>
</div>

<?php if(session()->getFlashdata('error')) : ?>
    <div class="alert alert-danger" style="background-color: #fee2e2; color: #991b1b; padding: 1rem; border-radius: 6px; margin-bottom: 1rem; border: 1px solid #fecaca;">
        <?= session()->getFlashdata('error') ?>
    </div>
<?php endif; ?>

<div class="card glass" style="margin-bottom: 20px;">
    <div class="card-body">
        <h5 style="margin-top:0; color: #1e293b;">Panduan Pengisian KRS</h5>
        <ul style="color: #475569; padding-left: 20px; font-size: 14px;">
            <li>Centang mata kuliah yang ingin diambil pada semester ini.</li>
            <li>Batas maksimal SKS yang dapat diambil adalah <strong><?= $maxSks ?> SKS</strong>.</li>
            <li>Mata kuliah yang sudah dicentang akan otomatis dijumlahkan SKS-nya.</li>
            <li>Jika sudah selesai, klik tombol "Simpan Kelas Terpilih" di bagian bawah halaman.</li>
        </ul>
    </div>
</div>

<div class="card glass" style="margin-bottom: 20px;">
    <div class="card-body">
        <form action="" method="GET" id="filterForm">
            <div style="display: flex; gap: 15px; align-items: end;">
                <div class="form-group" style="margin: 0; flex: 1;">
                    <label style="font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 5px; display: block;">Filter Program Studi</label>
                    <select name="prodi_id" class="form-control" style="width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #cbd5e1;" onchange="document.getElementById('filterForm').submit();">
                        <option value="all">-- Semua Program Studi --</option>
                        <?php foreach($listProdi as $p): ?>
                            <option value="<?= $p['id'] ?>" <?= $activeProdiFilter == $p['id'] ? 'selected' : '' ?>><?= $p['jenjang'] ?> <?= $p['nama_prodi'] ?></option>
                        <?php endforeach; ?>
                    </select>
                </div>
                <div class="form-group" style="margin: 0; flex: 1;">
                    <label style="font-size: 0.85rem; font-weight: 600; color: #475569; margin-bottom: 5px; display: block;">Filter Semester</label>
                    <select name="semester" class="form-control" style="width: 100%; padding: 8px 10px; border-radius: 6px; border: 1px solid #cbd5e1;" onchange="document.getElementById('filterForm').submit();">
                        <option value="all">-- Semua Semester --</option>
                        <?php for($i=1; $i<=8; $i++): ?>
                            <option value="<?= $i ?>" <?= $activeSemesterFilter == $i ? 'selected' : '' ?>>Semester <?= $i ?></option>
                        <?php endfor; ?>
                    </select>
                </div>
            </div>
            <p style="margin-top: 10px; margin-bottom: 0; font-size: 0.8rem; color: #64748b;">
                <i class='bx bx-info-circle'></i> Secara default, mata kuliah yang tampil sudah disesuaikan dengan <strong>Program Studi</strong> Anda dan <strong>Semester</strong> Anda saat ini (Semester <?= $expectedSemester ?>).
            </p>
        </form>
    </div>
</div>

<form action="<?= base_url('krs/simpan') ?>" method="POST" id="formKrs">
    <?= csrf_field() ?>
    
    <div class="card glass">
        <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
            <h5 class="m-0">Daftar Kelas Tersedia - <?= esc($ta['nama_ta']) ?></h5>
            <div style="font-weight: bold; color: #3b82f6;">Total SKS Dipilih: <span id="sksCounter"><?= $currentSks ?></span> / <?= $maxSks ?></div>
        </div>
        <div class="card-body" style="padding: 0;">
            <div class="table-responsive">
                <table class="table" style="width: 100%; border-collapse: collapse; margin: 0;">
                    <thead>
                        <tr style="background-color: #f8fafc; border-bottom: 2px solid #e2e8f0;">
                            <th style="padding: 1rem; text-align: center; width: 50px;">
                                <i class='bx bx-check-square'></i>
                            </th>
                            <th style="padding: 1rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.875rem;">MATA KULIAH</th>
                            <th style="padding: 1rem; text-align: left; color: #64748b; font-weight: 600; font-size: 0.875rem;">KELAS</th>
                            <th style="padding: 1rem; text-align: center; color: #64748b; font-weight: 600; font-size: 0.875rem;">SKS</th>
                            <th style="padding: 1rem; text-align: center; color: #64748b; font-weight: 600; font-size: 0.875rem;">PESERTA</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach($availableKelas as $k): 
                            $isChecked = in_array($k['id_kelas_kuliah_pddikti'], $enrolledKelasIds);
                        ?>
                        <tr style="border-bottom: 1px solid #e2e8f0; cursor: pointer;" onclick="toggleCheckbox('cb_<?= $k['id_kelas_kuliah_pddikti'] ?>')">
                            <td style="padding: 1rem; text-align: center;" onclick="event.stopPropagation();">
                                <input type="checkbox" name="kelas_ids[]" value="<?= esc($k['id_kelas_kuliah_pddikti']) ?>" 
                                       id="cb_<?= $k['id_kelas_kuliah_pddikti'] ?>" 
                                       class="krs-checkbox" 
                                       data-sks="<?= $k['sks'] ?>" 
                                       <?= $isChecked ? 'checked' : '' ?>
                                       style="width: 18px; height: 18px; cursor: pointer;">
                            </td>
                            <td style="padding: 1rem; font-weight: 500;"><?= esc($k['nama_mata_kuliah']) ?></td>
                            <td style="padding: 1rem;"><?= esc($k['nama_kelas_kuliah']) ?></td>
                            <td style="padding: 1rem; text-align: center; font-weight: bold;"><?= esc($k['sks']) ?></td>
                            <td style="padding: 1rem; text-align: center;">
                                <span style="background-color: #e0f2fe; color: #0284c7; padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: bold;">
                                    <?= esc($k['jumlah_mahasiswa']) ?>
                                </span>
                            </td>
                        </tr>
                        <?php endforeach; ?>
                        <?php if(empty($availableKelas)): ?>
                        <tr>
                            <td colspan="5" style="text-align: center; padding: 2rem; color: #64748b;">
                                Belum ada kelas yang ditawarkan pada semester ini.
                            </td>
                        </tr>
                        <?php endif; ?>
                    </tbody>
                </table>
            </div>
        </div>
        
        <div class="card-footer" style="padding: 1.5rem; background: #f8fafc; border-top: 1px solid #e2e8f0; text-align: right;">
            <button type="submit" class="btn btn-primary" id="btnSimpan" <?= empty($availableKelas) ? 'disabled' : '' ?>>
                <i class='bx bx-save'></i> Simpan Kelas Terpilih
            </button>
        </div>
    </div>
</form>

<script>
    const maxSks = <?= $maxSks ?>;
    const checkboxes = document.querySelectorAll('.krs-checkbox');
    const sksCounter = document.getElementById('sksCounter');
    
    function toggleCheckbox(id) {
        const cb = document.getElementById(id);
        if (cb) {
            cb.checked = !cb.checked;
            updateCounter();
        }
    }

    function updateCounter() {
        let total = 0;
        checkboxes.forEach(cb => {
            if (cb.checked) {
                total += parseInt(cb.dataset.sks);
            }
        });
        
        sksCounter.textContent = total;
        
        if (total > maxSks) {
            sksCounter.style.color = '#dc2626';
            alert(`Total SKS melebihi batas maksimal (${maxSks} SKS). Anda tidak dapat menyimpan.`);
        } else {
            sksCounter.style.color = '';
        }
    }

    checkboxes.forEach(cb => {
        cb.addEventListener('change', updateCounter);
    });
</script>

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