<?php include_once __DIR__ . '/../layouts/head.php'; ?>
<div class="container py-4" style="max-width: 1350px; width: 100%;">
  <div class="row">
    <div class="col-lg-12">
      <div class="shadow-sm bg-white rounded overflow-hidden border">
        <div class="row px-0 m-0">
          <?php include_once __DIR__ . '/../layouts/menu_body.php'; ?>

          <div class="col-12 col-md-9 px-0">
            <div class="tab-content" id="v-pills-tabContent">
              <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel">
                <div class="p-4">
                  <div class="mb-4">
                    <h5 class="mb-0 fw-bold">Input Nilai</h5>
                  </div>

                  <div class="bg-white rounded shadow-sm p-4">
                    <form method="POST" action="/dashboard/pegawai-view-nilaikelas">
                      <div class="row g-4">

                        <!-- Pilih Tahun Akademik -->
                        <div class="col-md-4">
                          <div class="border rounded p-3">
                            <select id="tahun-akademik" name="tahun_akademik" class="form-control" required>
                              <option value="">Pilih Tahun Akademik</option>
                              <?php foreach ($tahunAkademikList as $tahun): ?>
                                <option value="<?= htmlspecialchars($tahun) ?>"><?= htmlspecialchars($tahun) ?></option>
                              <?php endforeach; ?>
                            </select>
                          </div>
                        </div>

                        <!-- Pilih Mata Kuliah -->
                        <div class="col-md-6">
                          <div class="border rounded p-3 d-flex gap-2 align-items-center">
                            <input list="list-mk" id="mata-kuliah-input" class="form-control" placeholder="Ketik nama mata kuliah..." required>
                            <datalist id="list-mk"></datalist>
                        
                            <input type="hidden" name="id_dmk" id="id_dmk">
                            <button type="submit" class="btn btn-info" name="cari">Cari</button>
                          </div>
                        </div>

                      </div>
                    </form>

                    <table class="table table-bordered mt-4" id="data-table">
                      <thead>
                        <tr style="font-size: 13px;">
                          <th><center>No</center></th>
                          <th><center>NIM</center></th>
                          <th><center>Nama</center></th>
                          <th><center>UTS</center></th>
                          <th><center>UAS</center></th>
                          <th><center>Tugas</center></th>
                          <th><center>Absensi</center></th>
                          <th><center>Nilai Akhir</center></th>
                        </tr>
                      </thead>
                      <tbody></tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </div>
  </div>
</div>

<!-- AJAX untuk filter MK -->
<script>
document.getElementById('tahun-akademik').addEventListener('change', function () {
  const tahun = this.value;
  const listMK = document.getElementById('list-mk');
  listMK.innerHTML = '';

  if (tahun) {
    fetch(`/dashboard/pegawai-mk-by-tahun?tahun=${tahun}`)
      .then(res => res.json())
      .then(data => {
        listMK.innerHTML = '';
        data.forEach(item => {
          const option = document.createElement('option');
          option.value = `${item.singkatan} / ${item.kode_kelas} - ${item.nama_dosen}`;
          option.dataset.id_dmk = item.id_dmk;
          listMK.appendChild(option);
        });

        // Saat user pilih dari list
        const input = document.getElementById('mata-kuliah-input');
        input.addEventListener('input', function () {
          const val = this.value;
          const opts = listMK.children;
          for (let i = 0; i < opts.length; i++) {
            if (opts[i].value === val) {
              document.getElementById('id_dmk').value = opts[i].dataset.id_dmk;
              break;
            }
          }
        });
      })
      .catch(() => {
        listMK.innerHTML = '';
      });
  } else {
    listMK.innerHTML = '';
  }
});
</script>


<?php include_once __DIR__ . '/../layouts/footer.php'; ?>
