<div class="card mb-4">
  <div class="card-header bg-primary text-white">Add New Question</div>
  <div class="card-body">
    <form method="post" enctype="multipart/form-data">
      <div class="form-row">
        <div class="form-group col-md-4">
          <label>Exam</label>
          <select name="exam_id" class="form-control" required>
            <option value="">-- Select Exam --</option>
            <?php
              $exams = $conn->query("
                SELECT 
                  e.id, 
                  e.exam_type, 
                  eg.class, 
                  eg.term, 
                  eg.session, 
                  ss.subjects 
                FROM exams e
                JOIN exam_groups eg ON e.exam_group_id = eg.id
                JOIN school_subjects ss ON eg.subject_id = ss.id
                ORDER BY e.created_at DESC
              ");
              while ($exam = $exams->fetch_assoc()):
            ?>
              <option value="<?= $exam['id'] ?>">
                <?= strtoupper($exam['exam_type']) ?> | <?= $exam['class'] ?> | <?= $exam['subjects'] ?> | <?= $exam['term'] ?> | <?= $exam['session'] ?>
              </option>
            <?php endwhile; ?>
          </select>
        </div>

        <div class="form-group col-md-4">
          <label>Question Type</label>
          <select name="question_type" class="form-control" id="qtype" onchange="toggleOptions()" required>
            <option value="">--Select Type--</option>
            <option value="mcq">Multiple Choice</option>            
            <option value="theory">Theory</option>
          </select>
        </div>

        <div class="form-group col-md-4">
          <label>Marks</label>
          <input type="number" name="marks" class="form-control" step="0.01" required>
        </div>
      </div>

      <div class="form-group">
        <label>Question Text</label>
        <textarea name="question_text" class="form-control" rows="3" required></textarea>
      </div>

      <div class="form-group">
        <label>Question Image (optional)</label>
        <input type="file" name="question_image" class="form-control-file">
      </div>

      <div id="mcq-options" style="display: none;">
        <div class="form-row">
          <div class="form-group col-md-3">
            <label>Option A</label>
            <input type="text" name="option_a" class="form-control">
          </div>
          <div class="form-group col-md-3">
            <label>Option B</label>
            <input type="text" name="option_b" class="form-control">
          </div>
          <div class="form-group col-md-3">
            <label>Option C</label>
            <input type="text" name="option_c" class="form-control">
          </div>
          <div class="form-group col-md-3">
            <label>Option D</label>
            <input type="text" name="option_d" class="form-control">
          </div>
        </div>
      </div>

      <div class="form-group" id="correct-answer-block">
        <label>Correct Answer</label>
        <input type="text" name="correct_answer" class="form-control">
      </div>

      <button type="submit" name="add_question" class="btn btn-success">Save Question</button>
    </form>
  </div>
</div>

<script>
function toggleOptions() {
  const type = document.getElementById("qtype").value;
  document.getElementById("mcq-options").style.display = (type === "mcq") ? "block" : "none";
  document.getElementById("correct-answer-block").style.display = (type === "theory") ? "none" : "block";
}
</script>
