{% extends "exams/base.html" %}
{% load static %}

{% block page_title %}Manage Questions{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="card">
        <div class="card-header d-flex justify-content-between align-items-center">
            <h3 class="card-title mb-0">Questions</h3>

            <!-- Button to trigger Add Question modal -->
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addQuestionModal">
                <i class="fas fa-plus"></i> Add Question
            </button>

            <!-- Bulk Upload Button -->
            <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#bulkUploadModal">
                <i class="fas fa-file-excel"></i> Upload Excel
            </button>
        </div>
        <div class="card-body">
            <!-- Messages -->
            {% if messages %}
            <div>
                {% for message in messages %}
                    <div class="alert alert-{{ message.tags }}">{{ message }}</div>
                {% endfor %}
            </div>
            {% endif %}

            <!-- Questions DataTable -->
            <table id="questionsTable" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Question Title</th>
                        <th>Answer</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {% for q in questions %}
                    <tr>
                        <td>{{ q.question_id }}</td>
                        <td>{{ q.question_title }}</td>
                        <td>{{ q.question_answer }}</td>
                        <td>
                            <!-- Edit -->
                            <a href="{% url 'exams:edit_question' q.question_id %}" class="btn btn-sm btn-warning">
                                <i class="fas fa-edit"></i>
                            </a>
                            <!-- Delete -->
                            <form action="{% url 'exams:delete_question' q.question_id %}" method="POST" style="display:inline;">
                                {% csrf_token %}
                                <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this question?');">
                                    <i class="fas fa-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>




<!-- Add Question Modal -->
<div class="modal fade" id="addQuestionModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{% url 'exams:add_question' %}">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">Add Question</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">

          <!-- Class -->
          <div class="mb-3">
            <label for="class_id" class="form-label">Class</label>
            <select id="class_id" name="class_id" class="form-control" required>
              <option value="">Select Class</option>
              {% for cls in classes %}
                <option value="{{ cls.class_id }}">{{ cls.class_name }}</option>
              {% endfor %}
            </select>
          </div>

          <!-- Subject -->
          <div class="mb-3">
            <label for="subject_id" class="form-label">Subject</label>
            <select id="subject_id" name="subject_id" class="form-control" required>
              <option value="">Select Subject</option>
            </select>
          </div>

          <!-- Topic -->
          <div class="mb-3">
            <label for="topic_id" class="form-label">Topic</label>
            <select id="topic_id" name="topic_id" class="form-control" required>
              <option value="">Select Topic</option>
            </select>
          </div>

          <!-- SubTopic -->
          <div class="mb-3">
            <label for="subtopic_id" class="form-label">SubTopic</label>
            <select id="subtopic_id" name="subtopic_id" class="form-control" required>
              <option value="">Select SubTopic</option>
            </select>
          </div>

        <!-- Question Type -->
        <div class="mb-3">
        <label for="question_type" class="form-label">Question</label>
        <select name="question_type" class="form-control" rows="3" required>
            <option value="">Select Question Type</option>
            {% for val, label in question_types %}
                <option value="{{ val }}">{{ label }}</option>
            {% endfor %}
        </select>
        </div>

          <!-- Question -->
          <div class="mb-3">
            <label for="question_text" class="form-label">Question</label>
            <textarea id="question_text" name="question_text" class="form-control" rows="3" required></textarea>
          </div>

          <!-- Answer -->
          <div class="mb-3">
            <label for="question_answer" class="form-label">Answer</label>
            <textarea id="question_answer" name="question_answer" class="form-control" rows="2" required></textarea>
          </div>

        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary">Add Question</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>





<!-- Bulk Upload Modal -->
<div class="modal fade" id="bulkUploadModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <form method="POST" action="{% url 'exams:add_question' %}" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="modal-header">
          <h5 class="modal-title">Bulk Upload Questions</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
        </div>
        <div class="modal-body">
          <div class="mb-3">
            <label for="excel_file" class="form-label">Upload Excel File</label>
            <input type="file" class="form-control" name="excel_file" accept=".xlsx,.xls" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="submit" class="btn btn-primary"><i class="fas fa-upload"></i> Upload</button>
          <a href="{% url 'exams:download_question_sample' %}" class="btn btn-success"><i class="fas fa-download"></i> Download Sample</a>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>

<script>
  $(document).ready(function() {
    $('#questionsTable').DataTable({
        "responsive": true,
        "autoWidth": false
    });
  });
 
  // Auto dismiss alerts after 5 sec
  setTimeout(() => {
    document.querySelectorAll('.alert').forEach(el => el.remove());
  }, 5000);

</script>


<script>
document.getElementById("class_id").addEventListener("change", function() {
    const classId = this.value;
    const subjectSelect = document.getElementById("subject_id");
    const topicSelect = document.getElementById("topic_id");
    const subtopicSelect = document.getElementById("subtopic_id");

    subjectSelect.innerHTML = '<option value="">Loading...</option>';
    topicSelect.innerHTML = '<option value="">Select Topic</option>';
    subtopicSelect.innerHTML = '<option value="">Select Subtopic</option>';

    if (!classId) {
        subjectSelect.innerHTML = '<option value="">Select Subject</option>';
        return;
    }

    fetch(`/ajax/get-subjects/?class_id=${classId}`)
        .then(res => res.json())
        .then(data => {
            subjectSelect.innerHTML = data.options;
        })
        .catch(() => {
            subjectSelect.innerHTML = '<option value="">Error loading subjects</option>';
        });
});

// When subject changes -> load topics
document.getElementById("subject_id").addEventListener("change", function() {
    const subjectId = this.value;
    const topicSelect = document.getElementById("topic_id");
    topicSelect.innerHTML = '<option value="">Loading...</option>';

    if (!subjectId) {
        topicSelect.innerHTML = '<option value="">Select Topic</option>';
        return;
    }

    fetch(`/ajax/get-topics/?subject_id=${subjectId}`)
        .then(res => res.json())
        .then(data => {
            topicSelect.innerHTML = data.options;
        });
});

// When topic changes -> load subtopics
document.getElementById("topic_id").addEventListener("change", function() {
    const topicId = this.value;
    const subtopicSelect = document.getElementById("subtopic_id");
    subtopicSelect.innerHTML = '<option value="">Loading...</option>';

    if (!topicId) {
        subtopicSelect.innerHTML = '<option value="">Select Subtopic</option>';
        return;
    }

    fetch(`/ajax/get-subtopics/?topic_id=${topicId}`)
        .then(res => res.json())
        .then(data => {
            subtopicSelect.innerHTML = data.options;
        });
});

</script>




{% endblock %}