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

<?= $this->section('content') ?>
<div class="content-header">
    <div class="header-title">
        <h2>Data Mata Kuliah</h2>
        <p>Kelola data mata kuliah program studi</p>
    </div>
    <div class="header-actions">
        <a href="<?= base_url('mata-kuliah/sync') ?>" class="btn btn-primary" onclick="return confirm('Proses sinkronisasi akan memakan waktu, bergantung pada jumlah data. Lanjutkan?')">
            <i class="fas fa-sync-alt"></i> Sinkronisasi PDDIKTI
        </a>
    </div>
</div>

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

<div class="filter-section" style="background: white; padding: 1.5rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); margin-bottom: 1.5rem;">
    <form action="" method="GET" class="filter-form" style="display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap;">
        <div class="form-group" style="flex: 1; min-width: 200px;">
            <label for="search">Pencarian</label>
            <input type="text" name="search" id="search" class="form-control" placeholder="Kode atau Nama Mata Kuliah..." value="<?= htmlspecialchars($_GET['search'] ?? '') ?>">
        </div>
        <div class="form-group" style="flex: 1; min-width: 200px;">
            <label for="prodi">Program Studi</label>
            <select name="prodi" id="prodi" class="form-control">
                <option value="">-- Semua Program Studi --</option>
                <?php foreach ($list_prodi as $p) : ?>
                    <option value="<?= $p['id'] ?>" <?= (isset($_GET['prodi']) && $_GET['prodi'] == $p['id']) ? 'selected' : '' ?>>
                        <?= esc($p['nama_prodi']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="form-group" style="flex: 1; min-width: 200px;">
            <label for="kurikulum">Kurikulum</label>
            <select name="kurikulum" id="kurikulum" class="form-control">
                <option value="">-- Semua Kurikulum --</option>
                <?php foreach ($list_kurikulum as $k) : ?>
                    <option value="<?= $k['id'] ?>" data-prodi="<?= $k['id_program_studi'] ?>" <?= (isset($_GET['kurikulum']) && $_GET['kurikulum'] == $k['id']) ? 'selected' : '' ?>>
                        <?= esc($k['nama_kurikulum']) ?>
                    </option>
                <?php endforeach; ?>
            </select>
        </div>
        <div class="form-group" style="flex: 1; min-width: 150px;">
            <label for="semester">Semester</label>
            <select name="semester" id="semester" class="form-control">
                <option value="">-- Semua --</option>
                <?php for($i = 1; $i <= 8; $i++): ?>
                    <option value="<?= $i ?>" <?= (isset($_GET['semester']) && $_GET['semester'] == $i) ? 'selected' : '' ?>><?php echo $i; ?></option>
                <?php endfor; ?>
            </select>
        </div>
        <div class="form-group" style="flex: 0 0 100px;">
            <label for="per_page">Tampilkan</label>
            <select name="per_page" id="per_page" class="form-control">
                <option value="10" <?= (isset($per_page) && $per_page == 10) ? 'selected' : '' ?>>10</option>
                <option value="25" <?= (isset($per_page) && $per_page == 25) ? 'selected' : '' ?>>25</option>
                <option value="50" <?= (isset($per_page) && $per_page == 50) ? 'selected' : '' ?>>50</option>
                <option value="100" <?= (isset($per_page) && $per_page == 100) ? 'selected' : '' ?>>100</option>
            </select>
        </div>
        <div class="form-actions" style="margin-bottom: 4px;">
            <button type="submit" class="btn btn-primary"><i class="fas fa-search"></i> Filter</button>
            <a href="<?= base_url('mata-kuliah') ?>" class="btn btn-secondary"><i class="fas fa-undo"></i> Reset</a>
        </div>
    </form>
</div>

<div class="card">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>Kode MK</th>
                        <th>Nama Mata Kuliah</th>
                        <th>Program Studi</th>
                        <th>Kurikulum</th>
                        <th>Semester</th>
                        <th>SKS</th>
                        <th>Jenis</th>
                    </tr>
                </thead>
                <tbody>
                    <?php if (empty($mata_kuliah)) : ?>
                        <tr>
                            <td colspan="8" class="text-center">Tidak ada data mata kuliah. Silakan lakukan sinkronisasi.</td>
                        </tr>
                    <?php else : ?>
                        <?php 
                        $page = isset($_GET['page_mata_kuliah']) ? $_GET['page_mata_kuliah'] : 1;
                        $no = ($page - 1) * $per_page + 1;
                        foreach ($mata_kuliah as $mk) : 
                        ?>
                            <tr>
                                <td><?= $no++ ?></td>
                                <td><?= esc($mk['kode_mata_kuliah']) ?></td>
                                <td><?= esc($mk['nama_mata_kuliah']) ?></td>
                                <td><?= esc($mk['nama_prodi'] ?? '-') ?></td>
                                <td><?= esc($mk['nama_kurikulum'] ?? '-') ?></td>
                                <td><?= esc($mk['semester'] ?? '-') ?></td>
                                <td>
                                    Total: <?= esc($mk['sks_mata_kuliah']) ?><br>
                                    <small class="text-muted">TM: <?= esc($mk['sks_tatap_muka']) ?> | P: <?= esc($mk['sks_praktek']) ?></small>
                                </td>
                                <td><?= esc($mk['jenis_mata_kuliah']) ?></td>
                            </tr>
                        <?php endforeach; ?>
                    <?php endif; ?>
                </tbody>
            </table>
        </div>
        
        <div class="pagination-container" style="padding: 1.5rem; border-top: 1px solid #e2e8f0; background: #f8fafc;">
            <?= $pager->links('mata_kuliah', 'custom_pagination') ?>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const prodiSelect = document.getElementById('prodi');
    const kurikulumSelect = document.getElementById('kurikulum');
    
    // Simpan semua option aslinya
    const allKurikulumOptions = Array.from(kurikulumSelect.querySelectorAll('option'));
    
    function filterKurikulum() {
        const selectedProdi = prodiSelect.value;
        const currentKurikulum = kurikulumSelect.value;
        
        // Hapus semua option saat ini
        kurikulumSelect.innerHTML = '';
        
        // Kembalikan option yang cocok atau default (value="")
        let optionsAdded = 0;
        allKurikulumOptions.forEach(option => {
            if (option.value === '' || option.getAttribute('data-prodi') === selectedProdi || selectedProdi === '') {
                kurikulumSelect.appendChild(option.cloneNode(true));
                optionsAdded++;
            }
        });
        
        // Kembalikan value sebelumnya jika masih ada di dalam daftar yang sudah difilter
        const stillExists = Array.from(kurikulumSelect.options).some(opt => opt.value === currentKurikulum);
        if (stillExists && currentKurikulum !== '') {
            kurikulumSelect.value = currentKurikulum;
        } else {
            kurikulumSelect.value = '';
        }
    }
    
    // Dengarkan event change
    prodiSelect.addEventListener('change', filterKurikulum);
    
    // Panggil saat halaman pertama kali dimuat
    filterKurikulum();
});
</script>

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