{% extends 'base.html' %}
{% block content %}
<div class="container mx-auto py-8">
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Edit Quiz: {{ quiz.title }}</h1>
    <a href="{{ url_for('teacher.manage_quizzes') }}" class="btn btn-secondary">Back to Quizzes</a>
  </div>

  <!-- Quiz Details Form -->
  <div class="card bg-base-100 shadow-lg mb-8">
    <div class="card-body">
      <h2 class="card-title">Quiz Details</h2>
      <form method="POST" class="space-y-4">
        {{ form.csrf_token }}
        <input type="hidden" name="update_quiz" value="1">

        <div class="form-control">
          <label class="label">Quiz Title</label>
          {{ form.title(class="input input-bordered w-full") }}
          {% for error in form.title.errors %}<p class="text-error text-sm">{{ error }}</p>{% endfor %}
        </div>

        <div class="form-control">
          <label class="label">Description (Optional)</label>
          {{ form.description(class="textarea textarea-bordered w-full", rows=3) }}
          {% for error in form.description.errors %}<p class="text-error text-sm">{{ error }}</p>{% endfor %}
        </div>

        <div class="form-control">
          <label class="label">Quiz Type</label>
          {{ form.quiz_type(class="select select-bordered w-full") }}
          {% for error in form.quiz_type.errors %}<p class="text-error text-sm">{{ error }}</p>{% endfor %}
        </div>

        <button type="submit" class="btn btn-primary">Update Quiz</button>
      </form>
    </div>
  </div>

  <!-- Questions Section -->
  <div class="card bg-base-100 shadow-lg">
    <div class="card-body">
      <div class="flex justify-between items-center mb-4">
        <h2 class="card-title">Questions ({{ questions|length }})</h2>
        <button class="btn btn-primary btn-sm" onclick="toggleAddQuestion()">Add Question</button>
      </div>

      <!-- Add Question Form (Hidden by default) -->
      <div id="addQuestionForm" class="hidden mb-6 p-4 border rounded-lg bg-gray-50">
        <h3 class="font-semibold mb-4">Add New Question</h3>
        <form method="POST" class="space-y-4">
          <input type="hidden" name="add_question" value="1">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

          <div class="form-control">
            <label class="label">Question Type</label>
            <select name="question_type" class="select select-bordered w-full" onchange="toggleQuestionType()">
              <option value="mcq">Multiple Choice</option>
              <option value="qa">Question & Answer</option>
            </select>
          </div>

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

          <!-- MCQ Options -->
          <div id="mcqOptions" class="space-y-2">
            <label class="label">Options (at least 2 required)</label>
            <input type="text" name="option1" class="input input-bordered w-full" placeholder="Option 1" required>
            <input type="text" name="option2" class="input input-bordered w-full" placeholder="Option 2" required>
            <input type="text" name="option3" class="input input-bordered w-full" placeholder="Option 3">
            <input type="text" name="option4" class="input input-bordered w-full" placeholder="Option 4">

            <div class="form-control">
              <label class="label">Correct Answer</label>
              <select name="correct_option" class="select select-bordered w-full" required>
                <option value="1">Option 1</option>
                <option value="2">Option 2</option>
                <option value="3">Option 3</option>
                <option value="4">Option 4</option>
              </select>
            </div>
          </div>

          <!-- QA Expected Answer -->
          <div id="qaAnswer" class="hidden">
            <div class="form-control">
              <label class="label">Expected Answer</label>
              <textarea name="expected_answer" class="textarea textarea-bordered w-full" rows="3" required></textarea>
            </div>
          </div>

          <button type="submit" class="btn btn-success">Add Question</button>
        </form>
      </div>

      <!-- Existing Questions -->
      {% if questions %}
      <div class="space-y-4">
        {% for question in questions %}
        <div class="border rounded-lg p-4">
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <div class="flex items-center gap-2 mb-2">
                <span class="badge badge-outline">{{ question.question_type.upper() }}</span>
                <h4 class="font-semibold">{{ question.question_text }}</h4>
              </div>

              {% if question.question_type == 'mcq' %}
              <div class="ml-4">
                <p class="text-sm text-gray-600 mb-1">Options:</p>
                <ul class="list-disc list-inside text-sm">
                  {% for option in question.get_options() %}
                  <li class="{% if option == question.correct_answer %}font-bold text-green-600{% endif %}">
                    {{ option }}{% if option == question.correct_answer %} (Correct){% endif %}
                  </li>
                  {% endfor %}
                </ul>
              </div>
              {% elif question.question_type == 'qa' %}
              <div class="ml-4">
                <p class="text-sm text-gray-600">Expected Answer:</p>
                <p class="text-sm bg-gray-100 p-2 rounded">{{ question.expected_answer }}</p>
              </div>
              {% endif %}
            </div>

            <form method="POST" class="ml-4" onsubmit="return confirm('Delete this question?')">
              <input type="hidden" name="delete_question" value="1">
              <input type="hidden" name="question_id" value="{{ question.id }}">
              <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
              <button type="submit" class="btn btn-sm btn-error">Delete</button>
            </form>
          </div>
        </div>
        {% endfor %}
      </div>
      {% else %}
      <p class="text-gray-500 text-center py-8">No questions added yet. Click "Add Question" to get started.</p>
      {% endif %}
    </div>
  </div>
</div>

<script>
function toggleAddQuestion() {
  const form = document.getElementById('addQuestionForm');
  form.classList.toggle('hidden');
}

function toggleQuestionType() {
  const type = document.querySelector('select[name="question_type"]').value;
  const mcqOptions = document.getElementById('mcqOptions');
  const qaAnswer = document.getElementById('qaAnswer');

  if (type === 'mcq') {
    mcqOptions.classList.remove('hidden');
    qaAnswer.classList.add('hidden');
    // Make MCQ fields required
    document.querySelectorAll('#mcqOptions input').forEach(input => {
      if (input.name.startsWith('option') && input.name !== 'option3' && input.name !== 'option4') {
        input.required = true;
      }
    });
    document.querySelector('select[name="correct_option"]').required = true;
    document.querySelector('textarea[name="expected_answer"]').required = false;
  } else {
    mcqOptions.classList.add('hidden');
    qaAnswer.classList.remove('hidden');
    // Make QA field required
    document.querySelector('textarea[name="expected_answer"]').required = true;
    // Remove required from MCQ fields
    document.querySelectorAll('#mcqOptions input').forEach(input => input.required = false);
    document.querySelector('select[name="correct_option"]').required = false;
  }
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
  toggleQuestionType();
});
</script>
{% endblock %}