{% extends 'base.html' %}

{% block title %}Daftar Dosen Pengampu{% endblock %}
{% block page_title %}Daftar Dosen Pengampu{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
            <i class="fas fa-plus me-2"></i>Tambah Dosen Pengampu
        </button>
    </div>
    <form method="POST" id="massDeleteForm" onsubmit="return confirm('Hapus terpilih?')">
        {% csrf_token %}
        <button type="submit" name="delete_massal" class="btn btn-danger mass-delete-btn" id="massDeleteBtn">
            <i class="fas fa-trash me-2"></i>Hapus Terpilih
        </button>
    </form>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-light">
                    <tr>
                        <th width="40"><input type="checkbox" id="checkAll" class="form-check-input"></th>
                        <th>Dosen</th>
                        <th>Program Studi</th>
                        <th>Mata Kuliah</th>
                        <th>Kelas</th>
                        <th>Tahun Akademik</th>
                        <th width="120" class="text-center">Aksi</th>
                    </tr>
                </thead>
                <tbody>
                    {% for pengampu in pengampu_all %}
                    <tr>
                        <td>
                            <input type="checkbox" name="selected_ids" value="{{ pengampu.id }}" form="massDeleteForm" class="form-check-input item-checkbox">
                        </td>
                        <td>
                            <div class="fw-bold">{{ pengampu.dosen.nama }}</div>
                            <small class="text-muted">NIDN: {{ pengampu.dosen.nidn }}</small>
                        </td>
                        <td>{{ pengampu.prodi.nama|default:"-" }}</td>
                        <td>
                            <div>{{ pengampu.matkul.nama }}</div>
                            <small class="text-muted">{{ pengampu.matkul.kode }} ({{ pengampu.matkul.sks }} SKS)</small>
                        </td>
                        <td><span class="badge bg-secondary">{{ pengampu.kelas.nama|default:"-" }}</span></td>
                        <td>{{ pengampu.tahun_akademik.nama }}</td>
                        <td class="text-center">
                            <button class="btn btn-sm btn-info text-white me-1 edit-btn" 
                                    data-pk="{{ pengampu.id }}" 
                                    data-dosen="{{ pengampu.dosen.id }}"
                                    data-prodi="{{ pengampu.prodi.id|default:'' }}"
                                    data-matkul="{{ pengampu.matkul.id }}"
                                    data-kelas="{{ pengampu.kelas.id|default:'' }}"
                                    data-tahun="{{ pengampu.tahun_akademik.id }}"
                                    data-bs-toggle="modal" data-bs-target="#editModal">
                                <i class="fas fa-edit"></i>
                            </button>
                            <a href="{% url 'pengampu_delete' pengampu.id %}" class="btn btn-sm btn-outline-danger" onclick="return confirm('Hapus data ini?')">
                                <i class="fas fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="7" class="text-center py-4 text-muted">Belum ada data dosen pengampu.</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Add Modal -->
<div class="modal fade" id="addModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            {% csrf_token %}
            <div class="modal-header">
                <h5 class="modal-title">Tambah Dosen Pengampu</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Dosen</label>
                    <select name="dosen" class="form-select select2-modal" required>
                        <option value="">Cari Dosen...</option>
                        {% for dosen in dosen_all %}
                        <option value="{{ dosen.id }}">{{ dosen.nama }} ({{ dosen.nidn }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Program Studi</label>
                    <select name="prodi" id="add_prodi" class="form-select select2-modal prodi-select" required>
                        <option value="">Pilih Program Studi...</option>
                        {% for prodi in prodi_all %}
                        <option value="{{ prodi.id }}">{{ prodi.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Mata Kuliah</label>
                    <select name="matkul" id="add_matkul" class="form-select select2-modal matkul-select" required>
                        <option value="">Pilih Program Studi Terlebih Dahulu...</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Kelas</label>
                    <select name="kelas" id="add_kelas" class="form-select select2-modal kelas-select" required>
                        <option value="">Pilih Program Studi Terlebih Dahulu...</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Tahun Akademik</label>
                    <select name="tahun" class="form-select select2-modal" required>
                        <option value="">Pilih Tahun...</option>
                        {% for tahun in tahun_all %}
                        <option value="{{ tahun.id }}" {% if tahun.is_active %}selected{% endif %}>{{ tahun.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Simpan</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Modal -->
<div class="modal fade" id="editModal" tabindex="-1">
    <div class="modal-dialog">
        <form method="POST" class="modal-content">
            {% csrf_token %}
            <input type="hidden" name="pk" id="edit_pk">
            <div class="modal-header">
                <h5 class="modal-title">Edit Dosen Pengampu</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label class="form-label">Dosen</label>
                    <select name="dosen" id="edit_dosen" class="form-select select2-modal" required>
                        {% for dosen in dosen_all %}
                        <option value="{{ dosen.id }}">{{ dosen.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Program Studi</label>
                    <select name="prodi" id="edit_prodi" class="form-select select2-modal prodi-select" required>
                        <option value="">Pilih Program Studi...</option>
                        {% for prodi in prodi_all %}
                        <option value="{{ prodi.id }}">{{ prodi.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Mata Kuliah</label>
                    <select name="matkul" id="edit_matkul" class="form-select select2-modal matkul-select" required>
                        {% for matkul in matkul_all %}
                        <option value="{{ matkul.id }}">{{ matkul.kode }} - {{ matkul.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Kelas</label>
                    <select name="kelas" id="edit_kelas" class="form-select select2-modal kelas-select" required>
                        {% for kelas in kelas_all %}
                        <option value="{{ kelas.id }}">{{ kelas.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">Tahun Akademik</label>
                    <select name="tahun" id="edit_tahun" class="form-select select2-modal" required>
                        {% for tahun in tahun_all %}
                        <option value="{{ tahun.id }}">{{ tahun.nama }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        function loadOptions(prodiId, targetMatkul, targetKelas, selectedMatkul = null, selectedKelas = null) {
            if (!prodiId) {
                targetMatkul.html('<option value="">Pilih Program Studi Terlebih Dahulu...</option>');
                targetKelas.html('<option value="">Pilih Program Studi Terlebih Dahulu...</option>');
                return;
            }

            // Load Kelas
            $.ajax({
                url: "{% url 'get_kelas_by_prodi' %}",
                data: { 'prodi_id': prodiId },
                success: function(data) {
                    targetKelas.empty();
                    targetKelas.append('<option value="">Pilih Kelas...</option>');
                    data.forEach(function(item) {
                        let selected = (item.id == selectedKelas) ? 'selected' : '';
                        targetKelas.append(`<option value="${item.id}" ${selected}>${item.nama}</option>`);
                    });
                    targetKelas.trigger('change.select2');
                }
            });

            // Load Matkul
            $.ajax({
                url: "{% url 'get_matkul_by_prodi' %}",
                data: { 'prodi_id': prodiId },
                success: function(data) {
                    targetMatkul.empty();
                    targetMatkul.append('<option value="">Pilih Mata Kuliah...</option>');
                    data.forEach(function(item) {
                        let selected = (item.id == selectedMatkul) ? 'selected' : '';
                        targetMatkul.append(`<option value="${item.id}" ${selected}>${item.kode} - ${item.nama}</option>`);
                    });
                    targetMatkul.trigger('change.select2');
                }
            });
        }

        $('.prodi-select').on('change', function() {
            let prodiId = $(this).val();
            let modal = $(this).closest('.modal');
            let targetMatkul = modal.find('.matkul-select');
            let targetKelas = modal.find('.kelas-select');
            loadOptions(prodiId, targetMatkul, targetKelas);
        });

        $('.edit-btn').on('click', function() {
            let pk = $(this).data('pk');
            let dosen = $(this).data('dosen');
            let prodi = $(this).data('prodi');
            let matkul = $(this).data('matkul');
            let kelas = $(this).data('kelas');
            let tahun = $(this).data('tahun');

            $('#edit_pk').val(pk);
            $('#edit_dosen').val(dosen).trigger('change');
            $('#edit_tahun').val(tahun).trigger('change');
            $('#edit_prodi').val(prodi).trigger('change.select2');
            
            // For edit modal, we need to load options then set the selected values
            loadOptions(prodi, $('#edit_matkul'), $('#edit_kelas'), matkul, kelas);
        });
    });
</script>
{% endblock %}
