{% extends 'base.html' %}
{% block content %}
<div class="row justify-content-center">
  <div class="col-lg-9">
    <div class="card shadow-sm">
      <div class="card-header bg-white fw-semibold">Tambah Soal Tes</div>
      <div class="card-body">
        <div class="alert alert-info">
          Ingin input banyak soal sekaligus? Gunakan
          <a href="{{ url_for('admin_bulk_questions') }}" class="alert-link">Bulk Upload Soal</a>.
        </div>
        <form method="post">
          <div class="mb-3">
            <label class="form-label">Mata Pelajaran</label>
            <select name="subject_id" class="form-select" required>
              <option value="">Pilih mapel...</option>
              {% for s in subjects %}
                <option value="{{ s.id }}">{{ s.name }}</option>
              {% endfor %}
            </select>
          </div>

          <div class="d-flex justify-content-between align-items-center mb-2">
            <h6 class="mb-0">Form Soal Manual (Bisa Banyak)</h6>
            <button type="button" class="btn btn-sm btn-outline-primary" id="add-question-btn">+ Tambah Form Soal</button>
          </div>

          <div id="question-list">
            <div class="border rounded p-3 mb-3 question-item">
              <div class="d-flex justify-content-between align-items-center mb-2">
                <strong>Soal #1</strong>
                <button type="button" class="btn btn-sm btn-outline-danger remove-question-btn" style="display:none;">Hapus</button>
              </div>

              <div class="mb-3">
                <label class="form-label">Pertanyaan</label>
                <textarea name="question_text[]" class="form-control" rows="3" required></textarea>
              </div>

              <div class="row g-3">
                <div class="col-md-6">
                  <label class="form-label">Pilihan A</label>
                  <input type="text" name="option_a[]" class="form-control" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Pilihan B</label>
                  <input type="text" name="option_b[]" class="form-control" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Pilihan C</label>
                  <input type="text" name="option_c[]" class="form-control" required>
                </div>
                <div class="col-md-6">
                  <label class="form-label">Pilihan D</label>
                  <input type="text" name="option_d[]" class="form-control" required>
                </div>
              </div>

              <div class="mt-3">
                <label class="form-label">Jawaban Benar</label>
                <select name="correct_option[]" class="form-select" required>
                  <option value="">Pilih jawaban benar...</option>
                  <option value="A">A</option>
                  <option value="B">B</option>
                  <option value="C">C</option>
                  <option value="D">D</option>
                </select>
              </div>
            </div>
          </div>

          <div class="d-flex justify-content-between">
            <a href="{{ url_for('admin_dashboard') }}" class="btn btn-outline-secondary">Kembali</a>
            <button class="btn btn-primary">Simpan Semua Soal</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
  const questionList = document.getElementById('question-list');
  const addBtn = document.getElementById('add-question-btn');

  function refreshQuestionUI() {
    const items = questionList.querySelectorAll('.question-item');
    items.forEach((item, index) => {
      item.querySelector('strong').textContent = `Soal #${index + 1}`;
      const removeBtn = item.querySelector('.remove-question-btn');
      removeBtn.style.display = items.length > 1 ? 'inline-block' : 'none';
    });
  }

  function createQuestionItem() {
    const first = questionList.querySelector('.question-item');
    const clone = first.cloneNode(true);
    clone.querySelectorAll('textarea, input').forEach(el => el.value = '');
    clone.querySelectorAll('select').forEach(el => el.selectedIndex = 0);
    questionList.appendChild(clone);
    refreshQuestionUI();
  }

  addBtn.addEventListener('click', createQuestionItem);

  questionList.addEventListener('click', (e) => {
    if (e.target.classList.contains('remove-question-btn')) {
      e.target.closest('.question-item').remove();
      refreshQuestionUI();
    }
  });

  refreshQuestionUI();
</script>
{% endblock %}