<?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="p-0">
          <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">Buat Soal</h5>
                    </div>

                    <div class="bg-white rounded shadow-sm p-4">
                      <div class="container">

                        <div class="d-flex justify-content-end mb-3 gap-2">
                          <a href="/dashboard/dosen-lihatsoal" class="btn btn-secondary d-flex align-items-center gap-1">
                            <i class="bi bi-file-earmark-text"></i> Lihat Soal
                          </a>
                          
                          <a href="/dashboard/dosen-upload-soal-excel" class="btn btn-primary d-flex align-items-center gap-1">
                            <i class="bi bi-file-earmark-spreadsheet"></i> Upload Excel
                          </a>
                        </div>

                        <form method="post" action="/dashboard/dosen-upload-soal/upload" class="mt-3" id="uploadForm">
						  <input type="hidden" name="csrf_token" value="<?= $csrf_token ?>">                            
                          <div class="mb-3">
                            <label for="kode_mk" class="form-label">Mata Kuliah dan Kelas</label>
                            <select name="kode_mk" id="kode_mk" class="form-select" required>
                              <option value="">Pilih Mata Kuliah dan Kelas</option>
                              <?php foreach ($courses as $course): ?>
                                <option value="<?= $course->kode_mk ?>|<?= $course->kode_kelas ?>">
                                  <?= $course->nama_mk ?> - Kelas <?= $course->kode_kelas ?>
                                </option>
                              <?php endforeach; ?>
                            </select>
                          </div>

                          <div class="mb-3">
                            <label for="tipe_soal" class="form-label">Tipe Soal</label>
                            <?php foreach ($jenis_soal as $jenis): ?>
                              <input type="text" class="form-control" value="<?= $jenis->jenis_soal ?>" disabled>
                              <input type="hidden" name="tipe_soal" id="tipe_soal" value="<?= $jenis->jenis_soal ?>" required>
                            <?php endforeach; ?>
                          </div>

                          <div id="soalContainer" class="mb-3">
                            <label class="form-label">Soal</label>
                            <div class="soal-wrapper mb-3">
                              <span class="soal-number">1.</span>
                              <textarea name="soal[]" class="form-control" placeholder="Masukkan soal..." required></textarea>
                            </div>
                          </div>

                          <div class="d-flex mb-3">
                            <button type="button" id="addSoal" class="btn btn-secondary">Tambah Soal</button>
                            <button type="button" id="submitBtn" class="btn btn-success">Upload Soal</button>
                          </div>
                        </form>

                        <?php if (!empty($message)): ?>
                          <div id="successMessage" class="alert alert-success"><?= $message ?></div>
                        <?php endif; ?>

                      </div>

                      <script>
                        let soalCount = 1;
                        document.getElementById('addSoal').onclick = function () {
                          soalCount++;
                          const container = document.getElementById('soalContainer');

                          const newSoalDiv = document.createElement('div');
                          newSoalDiv.className = 'soal-wrapper mb-3';

                          const soalNumber = document.createElement('span');
                          soalNumber.className = 'soal-number';
                          soalNumber.innerText = soalCount + '.';

                          const textarea = document.createElement('textarea');
                          textarea.name = 'soal[]';
                          textarea.placeholder = 'Masukkan soal...';
                          textarea.className = 'form-control';
                          textarea.required = true;

                          newSoalDiv.appendChild(soalNumber);
                          newSoalDiv.appendChild(textarea);
                          container.appendChild(newSoalDiv);
                        };

                        document.getElementById('submitBtn').onclick = function () {
                          const kodeMk = document.getElementById('kode_mk').value;
                          const tipeSoal = document.getElementById('tipe_soal').value;
                          const soalElements = document.querySelectorAll('textarea[name="soal[]"]');

                          let valid = true;

                          if (!kodeMk || !tipeSoal) {
                            alert("Kelas/MK Belum dipilih, Pastika Kelas/MK sudah dipilih.");
                            valid = false;
                          }

                          soalElements.forEach((textarea, index) => {
                            if (!textarea.value.trim()) {
                              alert("Soal nomor " + (index + 1) + " harus diisi.");
                              valid = false;
                            }
                          });

                          if (valid && confirm("Apakah Anda ingin meng-upload soal?")) {
                            document.getElementById('uploadForm').submit();
                          }
                        };

                        window.onload = function () {
                          const successMessage = document.getElementById('successMessage');
                          if (successMessage) {
                            setTimeout(() => {
                              successMessage.style.display = 'none';
                            }, 2000);
                          }
                        };
                      </script>
                    </div>
                  </div>
                </div>
              </div>
            </div>

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