{% extends 'base.html' %}

{% block title %}Hasil Jadwal Perkuliahan{% endblock %}
{% block page_title %}Hasil Jadwal Perkuliahan{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <a href="{% url 'buat_jadwal' %}" class="btn btn-warning me-2">
            <i class="fas fa-sync me-2"></i>Generate Ulang
        </a>
        <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#modalAdd">
            <i class="fas fa-plus me-2"></i>Tambah Manual
        </button>
        <a href="{% url 'jadwal_export_excel' %}" class="btn btn-success">
            <i class="fas fa-file-excel me-2"></i>Export Excel (.xlsx)
        </a>
    </div>
</div>

<div class="card border-0 shadow-sm">
    <div class="card-body">
        <form method="POST" id="bulkForm">
            {% csrf_token %}
            <input type="hidden" name="delete_massal" value="1">
            <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>Hari & Jam</th>
                            <th>Kode MK</th>
                            <th>Mata Kuliah</th>
                            <th>Dosen</th>
                            <th>Prodi</th>
                            <th>Sem.</th>
                            <th>Kelas</th>
                            <th>Ruangan</th>
                            <th width="100" class="text-center">Aksi</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for jadwal in jadwal_all %}
                        <tr>
                            <td><input type="checkbox" name="selected_ids" value="{{ jadwal.id }}" class="form-check-input item-checkbox"></td>
                            <td>
                                <div class="fw-bold">{{ jadwal.hari.nama }}</div>
                                <small class="text-primary">{{ jadwal.jam.range_waktu }}</small>
                            </td>
                            <td><code class="text-dark">{{ jadwal.dosen_pengampu.matkul.kode }}</code></td>
                            <td>
                                <div class="fw-bold text-dark">{{ jadwal.dosen_pengampu.matkul.nama }}</div>
                                {% if jadwal.is_manual %}
                                <span class="badge bg-info-subtle text-info border border-info-subtle">Manual</span>
                                {% endif %}
                            </td>
                            <td>{{ jadwal.dosen_pengampu.dosen.nama }}</td>
                            <td>{{ jadwal.dosen_pengampu.matkul.prodi.nama }}</td>
                            <td>{{ jadwal.dosen_pengampu.matkul.semester }}</td>
                            <td><span class="badge bg-secondary">{{ jadwal.kelas.nama }}</span></td>
                            <td><span class="badge bg-info text-white">{{ jadwal.ruangan.nama }}</span></td>
                            <td class="text-center">
                                <div class="btn-group">
                                    <button type="button" class="btn btn-sm btn-outline-primary" 
                                            onclick="editJadwal('{{ jadwal.id }}', '{{ jadwal.dosen_pengampu.id }}', '{{ jadwal.ruangan.id }}', '{{ jadwal.hari.id }}', '{{ jadwal.jam.id }}', '{{ jadwal.kelas.id }}')">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <a href="{% url 'jadwal_delete' jadwal.id %}" class="btn btn-sm btn-outline-danger" onclick="return confirm('Hapus jadwal ini?')">
                                        <i class="fas fa-trash"></i>
                                    </a>
                                </div>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="10" class="text-center py-4 text-muted">Belum ada jadwal yang digenerate.</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            {% if jadwal_all %}
            <div class="mt-3">
                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Hapus data yang dipilih?')">
                    <i class="fas fa-trash me-2"></i>Hapus Terpilih
                </button>
            </div>
            {% endif %}
        </form>
    </div>
</div>

<!-- Modal Add -->
<div class="modal fade" id="modalAdd" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 bg-primary text-white">
                <h5 class="modal-title"><i class="fas fa-plus-circle me-2"></i>Tambah Jadwal Manual</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                {% csrf_token %}
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Dosen Pengampu (Matkul & Dosen)</label>
                            <select name="pengampu" class="form-select select2-modal" required>
                                <option value="">Pilih Pengampu...</option>
                                {% for p in pengampu_all %}
                                <option value="{{ p.id }}">{{ p.matkul.kode }} - {{ p.matkul.nama }} ({{ p.dosen.nama }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Hari</label>
                            <select name="hari" class="form-select select2-modal" required>
                                <option value="">Pilih Hari...</option>
                                {% for h in hari_all %}
                                <option value="{{ h.id }}">{{ h.nama }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Jam</label>
                            <select name="jam" class="form-select select2-modal" required>
                                <option value="">Pilih Jam...</option>
                                {% for j in jam_all %}
                                <option value="{{ j.id }}">{{ j.range_waktu }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Kelas</label>
                            <select name="kelas" class="form-select select2-modal" required>
                                <option value="">Pilih Kelas...</option>
                                {% for k in kelas_all %}
                                <option value="{{ k.id }}">{{ k.nama }} - {{ k.prodi.nama }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Ruangan</label>
                            <select name="ruangan" class="form-select select2-modal" required>
                                <option value="">Pilih Ruangan...</option>
                                {% for r in ruangan_all %}
                                <option value="{{ r.id }}">{{ r.nama }} (Kap: {{ r.kapasitas }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-primary px-4">Simpan Jadwal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Edit -->
<div class="modal fade" id="modalEdit" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header border-0 bg-info text-white">
                <h5 class="modal-title"><i class="fas fa-edit me-2"></i>Edit Jadwal</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form method="POST">
                {% csrf_token %}
                <input type="hidden" name="pk" id="edit_pk">
                <div class="modal-body p-4">
                    <div class="row g-3">
                        <div class="col-md-12">
                            <label class="form-label fw-bold">Dosen Pengampu</label>
                            <select name="pengampu" id="edit_pengampu" class="form-select select2-modal-edit" required>
                                {% for p in pengampu_all %}
                                <option value="{{ p.id }}">{{ p.matkul.kode }} - {{ p.matkul.nama }} ({{ p.dosen.nama }})</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Hari</label>
                            <select name="hari" id="edit_hari" class="form-select select2-modal-edit" required>
                                {% for h in hari_all %}
                                <option value="{{ h.id }}">{{ h.nama }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Jam</label>
                            <select name="jam" id="edit_jam" class="form-select select2-modal-edit" required>
                                {% for j in jam_all %}
                                <option value="{{ j.id }}">{{ j.range_waktu }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Kelas</label>
                            <select name="kelas" id="edit_kelas" class="form-select select2-modal-edit" required>
                                {% for k in kelas_all %}
                                <option value="{{ k.id }}">{{ k.nama }} - {{ k.prodi.nama }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="col-md-6">
                            <label class="form-label fw-bold">Ruangan</label>
                            <select name="ruangan" id="edit_ruangan" class="form-select select2-modal-edit" required>
                                {% for r in ruangan_all %}
                                <option value="{{ r.id }}">{{ r.nama }} (Kap: {{ r.kapasitas }})</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer border-0 p-4 pt-0">
                    <button type="button" class="btn btn-light px-4" data-bs-dismiss="modal">Batal</button>
                    <button type="submit" class="btn btn-info text-white px-4">Update Jadwal</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $(document).ready(function() {
        $('.select2-modal').select2({
            dropdownParent: $('#modalAdd'),
            width: '100%',
            placeholder: 'Pilih...'
        });
        
        $('#checkAll').click(function() {
            $('.item-checkbox').prop('checked', this.checked);
        });
    });

    function editJadwal(id, pengampu, ruangan, hari, jam, kelas) {
        $('#edit_pk').val(id);
        $('#edit_pengampu').val(pengampu).trigger('change');
        $('#edit_ruangan').val(ruangan).trigger('change');
        $('#edit_hari').val(hari).trigger('change');
        $('#edit_jam').val(jam).trigger('change');
        $('#edit_kelas').val(kelas).trigger('change');
        
        var modalEdit = new bootstrap.Modal(document.getElementById('modalEdit'));
        
        // Initialize Select2 for Edit Modal if not already done
        $('.select2-modal-edit').select2({
            dropdownParent: $('#modalEdit'),
            width: '100%'
        });
        
        modalEdit.show();
    }
</script>
{% endblock %}