{% extends 'base.html' %}
{% load custom_tags %}

{% block title %}Generate Test Paper{% endblock %}

{% block content %}
<div class="container mt-4">
  <div class="row">

    <!-- ===================================== -->
    <!-- FILTERS SECTION -->
    <!-- ===================================== -->
    <div class="col-lg-3">
      <h4 class="mb-3">Filter Questions</h4>

      <form method="GET" id="filterForm">

        <!-- ✅ Batch -->
        <div class="form-group mb-3">
          <label for="batch">Batch</label>
          <select name="batch_id" id="batch" class="form-control">
            <option value="">Select Batch</option>
            {% for batch in batches %}
              <option value="{{ batch.id }}"
                {% if batch.id|stringformat:"s" == selected_batch_id %}selected{% endif %}>
                {{ batch.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ AI FILTER (NEW) -->
        <div class="form-group mb-3">
          <label for="ai_filter">Question Source</label>
          <select name="ai_filter" id="ai_filter" class="form-control">
            <option value="">All Questions</option>
            <option value="base"
              {% if request.GET.ai_filter == "base" %}selected{% endif %}>
              Base Questions Only
            </option>
            <option value="ai"
              {% if request.GET.ai_filter == "ai" %}selected{% endif %}>
              AI Versions Only
            </option>
          </select>
        </div>

        <!-- ✅ Area -->
        <div class="form-group mb-3">
          <label for="area">Area</label>
          <select name="area" id="area" class="form-control">
            <option value="">Select Area</option>
            {% for area in areas %}
              <option value="{{ area.area_SI_Code }}"
                {% if request.GET.area == area.area_SI_Code|stringformat:"s" %}selected{% endif %}>
                {{ area.area_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Section -->
        <div class="form-group mb-3">
          <label for="section">Section</label>
          <select name="section" id="section" class="form-control">
            <option value="">Select Section</option>
            {% for section in sections %}
              <option value="{{ section.section_Unit_SI }}"
                {% if request.GET.section == section.section_Unit_SI|stringformat:"s" %}selected{% endif %}>
                {{ section.section_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Part -->
        <div class="form-group mb-3">
          <label for="part">Part</label>
          <select name="part" id="part" class="form-control">
            <option value="">Select Part</option>
            {% for part in parts %}
              <option value="{{ part.part_serial }}"
                {% if request.GET.part == part.part_serial|stringformat:"s" %}selected{% endif %}>
                {{ part.part_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Chapter -->
        <div class="form-group mb-3">
          <label for="chapter">Chapter</label>
          <select name="chapter" id="chapter" class="form-control">
            <option value="">Select Chapter</option>
            {% for chapter in chapters %}
              <option value="{{ chapter.chapter_number }}"
                {% if request.GET.chapter == chapter.chapter_number|stringformat:"s" %}selected{% endif %}>
                {{ chapter.chapter_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Topic -->
        <div class="form-group mb-3">
          <label for="topic">Topic</label>
          <select name="topic" id="topic" class="form-control">
            <option value="">Select Topic</option>
            {% for topic in topics %}
              <option value="{{ topic.topic_SI_number }}"
                {% if request.GET.topic == topic.topic_SI_number|stringformat:"s" %}selected{% endif %}>
                {{ topic.topic_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Subtopic -->
        <div class="form-group mb-3">
          <label for="subtopic">Subtopic</label>
          <select name="subtopic" id="subtopic" class="form-control">
            <option value="">Select Subtopic</option>
            {% for subtopic in subtopics %}
              <option value="{{ subtopic.sub_topic_SI_Number }}"
                {% if request.GET.subtopic == subtopic.sub_topic_SI_Number|stringformat:"s" %}selected{% endif %}>
                {{ subtopic.sub_topic_name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- ✅ Question Sub Type -->
        <div class="form-group mb-3">
          <label for="question_sub_type">Question Sub Type</label>
          <select name="question_sub_type" id="question_sub_type" class="form-control">
            <option value="">Select Question Sub Type</option>
            <option value="simple_type" {% if request.GET.question_sub_type == "simple_type" %}selected{% endif %}>Simple Type</option>
            <option value="r_and_a_type" {% if request.GET.question_sub_type == "r_and_a_type" %}selected{% endif %}>R & A Type</option>
            <option value="list_type_1" {% if request.GET.question_sub_type == "list_type_1" %}selected{% endif %}>List Type 1</option>
            <option value="list_type_2" {% if request.GET.question_sub_type == "list_type_2" %}selected{% endif %}>List Type 2</option>
            <option value="true_and_false_type" {% if request.GET.question_sub_type == "true_and_false_type" %}selected{% endif %}>True & False</option>
            <option value="fill_in_the_blank_type" {% if request.GET.question_sub_type == "fill_in_the_blank_type" %}selected{% endif %}>Fill in the Blank</option>
          </select>
        </div>

        <!-- ✅ Exam Year -->
        <div class="form-group mb-3">
          <label for="exam_year">Exam Year</label>
          <input type="text"
                 name="exam_year"
                 id="exam_year"
                 value="{{ request.GET.exam_year }}"
                 class="form-control">
        </div>

        <button type="submit" class="btn btn-primary w-100">
          Apply Filters
        </button>

      </form>
    </div>

    <!-- ===================================== -->
    <!-- QUESTION SECTION -->
    <!-- ===================================== -->
    <div class="col-lg-9">

      <h4 class="mb-3">Manually Select Questions</h4>

      <form method="POST" action="{% url 'generate_test' %}">
        {% csrf_token %}

        {% if selected_batch_id %}
          <input type="hidden" name="batch_id" value="{{ selected_batch_id }}">
        {% else %}
          <p class="text-danger">
            <strong>Please select a batch first.</strong>
          </p>
        {% endif %}

        <input type="hidden" name="action" value="manual_generate">
        <input type="hidden" name="ai_filter" value="{{ ai_filter }}">

        <div class="row">

          {% for pair in questions %}
          <div class="col-12 mb-4">

            <!-- Checkbox -->
            <div class="form-check mb-2">
              <input type="checkbox"
                     name="manual_questions"
                     value="{{ pair.english.id }}"
                     class="form-check-input">

              <label class="form-check-label">
                <strong>
                  Question {{ pair.english.question_number }}

                  {% if pair.english.ai_version > 0 %}
                    <span class="badge bg-warning text-dark">
                      AI Version {{ pair.english.ai_version }}
                    </span>
                  {% endif %}
                </strong>
              </label>
            </div>

            <div class="row">

              <!-- ======================= -->
              <!-- ENGLISH CARD -->
              <!-- ======================= -->
              <div class="col-md-6 mb-2">
                <div class="card h-100 border {% if pair.english.ai_version > 0 %}border-warning{% endif %}">
                  <div class="card-body">

                    {% if pair.english %}
                      <h6>
                        <strong>
                          English — Question {{ pair.english.question_number }}
                          {% if pair.english.ai_version > 0 %}
                            <span class="badge bg-warning text-dark">
                              AI {{ pair.english.ai_version }}
                            </span>
                          {% endif %}
                        </strong>
                      </h6>

                      <p><strong>Type:</strong> {{ pair.english.question_sub_type }}</p>

                      <p>{{ pair.english.question_part|default:pair.english.script }}</p>

                      {% if pair.english.answer_option_a %}<p>(a) {{ pair.english.answer_option_a }}</p>{% endif %}
                      {% if pair.english.answer_option_b %}<p>(b) {{ pair.english.answer_option_b }}</p>{% endif %}
                      {% if pair.english.answer_option_c %}<p>(c) {{ pair.english.answer_option_c }}</p>{% endif %}
                      {% if pair.english.answer_option_d %}<p>(d) {{ pair.english.answer_option_d }}</p>{% endif %}

                      <hr>
                      <p><strong>Answer:</strong> {{ pair.english.correct_answer_choice }}</p>

                    {% else %}
                      <p class="text-danger">No English version.</p>
                    {% endif %}

                  </div>
                </div>
              </div>

              <!-- ======================= -->
              <!-- HINDI CARD -->
              <!-- ======================= -->
              <div class="col-md-6 mb-2">
                <div class="card h-100 border {% if pair.hindi and pair.hindi.ai_version > 0 %}border-warning{% endif %}">
                  <div class="card-body">

                    {% if pair.hindi %}
                      <h6>
                        <strong>
                          Hindi — Question {{ pair.hindi.question_number }}
                          {% if pair.hindi.ai_version > 0 %}
                            <span class="badge bg-warning text-dark">
                              AI {{ pair.hindi.ai_version }}
                            </span>
                          {% endif %}
                        </strong>
                      </h6>

                      <p>{{ pair.hindi.question_part_hi }}</p>

                      {% if pair.hindi.answer_option_a_hi %}<p>(a) {{ pair.hindi.answer_option_a_hi }}</p>{% endif %}
                      {% if pair.hindi.answer_option_b_hi %}<p>(b) {{ pair.hindi.answer_option_b_hi }}</p>{% endif %}
                      {% if pair.hindi.answer_option_c_hi %}<p>(c) {{ pair.hindi.answer_option_c_hi }}</p>{% endif %}
                      {% if pair.hindi.answer_option_d_hi %}<p>(d) {{ pair.hindi.answer_option_d_hi }}</p>{% endif %}

                      <hr>
                      <p><strong>Answer:</strong> {{ pair.hindi.correct_answer_choice }}</p>

                    {% else %}
                      <p class="text-danger">No Hindi version.</p>
                    {% endif %}

                  </div>
                </div>
              </div>

            </div>
          </div>

          {% empty %}
            <p>No questions found.</p>
          {% endfor %}

        </div>

        <button type="submit" class="btn btn-primary mt-3">
          Generate from Selected
        </button>
      </form>


      <!-- ===================================== -->
      <!-- PAGINATION (FILTER SAFE) -->
      <!-- ===================================== -->
      {% if is_paginated %}
      <nav class="mt-4">
        <ul class="pagination justify-content-center">

          {% if page_obj.has_previous %}
            <li class="page-item">
              <a class="page-link"
                 href="?page={{ page_obj.previous_page_number }}&ai_filter={{ ai_filter }}">
                 Previous
              </a>
            </li>
          {% endif %}

          {% for num in paginator.page_range %}
            {% if page_obj.number == num %}
              <li class="page-item active">
                <span class="page-link">{{ num }}</span>
              </li>
            {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
              <li class="page-item">
                <a class="page-link"
                   href="?page={{ num }}&ai_filter={{ ai_filter }}">
                   {{ num }}
                </a>
              </li>
            {% endif %}
          {% endfor %}

          {% if page_obj.has_next %}
            <li class="page-item">
              <a class="page-link"
                 href="?page={{ page_obj.next_page_number }}&ai_filter={{ ai_filter }}">
                 Next
              </a>
            </li>
          {% endif %}

        </ul>
      </nav>
      {% endif %}

    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
$(document).ready(function() {

  // Utility function to reset dropdown
  function resetDropdown(selector, placeholder, disable = true) {
    $(selector)
      .html('<option value="">' + placeholder + '</option>')
      .prop('disabled', disable);
  }

  // Utility function to load dropdown data
  function loadDropdown(url, paramKey, paramValue, targetSelector, valueField, textField) {

    if (!paramValue) return;

    $(targetSelector).prop('disabled', true)
                     .html('<option>Loading...</option>');

    $.ajax({
      url: url,
      type: "GET",
      data: { [paramKey]: paramValue },
      success: function(data) {

        resetDropdown(targetSelector, 'Select option', false);

        if (data && Object.keys(data).length > 0) {

          let items = Object.values(data)[0]; // get first array in response

          $.each(items, function(i, item) {
            $(targetSelector).append($('<option>', {
              value: item[valueField],
              text: item[textField]
            }));
          });

        } else {
          $(targetSelector).html('<option value="">No data available</option>');
        }
      },
      error: function(xhr) {
        $(targetSelector).html('<option value="">Error loading data</option>');
        console.error("Error:", xhr.responseText);
      }
    });
  }

  // Initial disable
  $('#section, #part, #chapter, #topic, #subtopic').prop('disabled', true);

  // =========================
  // 1️⃣ AREA → SECTIONS
  // =========================
  $('#area').change(function() {

    let areaID = $(this).val();

    resetDropdown('#section', 'Select Section');
    resetDropdown('#part', 'Select Part');
    resetDropdown('#chapter', 'Select Chapter');
    resetDropdown('#topic', 'Select Topic');
    resetDropdown('#subtopic', 'Select Subtopic');

    loadDropdown(
      '/api/get-sections/',
      'area_id',
      areaID,
      '#section',
      'section_Unit_SI',
      'section_name'
    );
  });

  // =========================
  // 2️⃣ SECTION → PARTS
  // =========================
  $('#section').change(function() {

    let sectionID = $(this).val();

    resetDropdown('#part', 'Select Part');
    resetDropdown('#chapter', 'Select Chapter');
    resetDropdown('#topic', 'Select Topic');
    resetDropdown('#subtopic', 'Select Subtopic');

    loadDropdown(
      '/api/get-parts/',
      'section_id',
      sectionID,
      '#part',
      'part_serial',
      'part_name'
    );
  });

  // =========================
  // 3️⃣ PART → CHAPTERS
  // =========================
  $('#part').change(function() {

    let partID = $(this).val();

    resetDropdown('#chapter', 'Select Chapter');
    resetDropdown('#topic', 'Select Topic');
    resetDropdown('#subtopic', 'Select Subtopic');

    loadDropdown(
      '/api/get-chapters/',
      'part_id',
      partID,
      '#chapter',
      'chapter_number',
      'chapter_name'
    );
  });

  // =========================
  // 4️⃣ CHAPTER → TOPICS
  // =========================
  $('#chapter').change(function() {

    let chapterID = $(this).val();

    resetDropdown('#topic', 'Select Topic');
    resetDropdown('#subtopic', 'Select Subtopic');

    loadDropdown(
      '/api/get-topics/',
      'chapter_id',
      chapterID,
      '#topic',
      'topic_SI_number',
      'topic_name'
    );
  });

  // =========================
  // 5️⃣ TOPIC → SUBTOPICS
  // =========================
  $('#topic').change(function() {

    let topicID = $(this).val();

    resetDropdown('#subtopic', 'Select Subtopic');

    loadDropdown(
      '/api/get-subtopics/',
      'topic_id',
      topicID,
      '#subtopic',
      'sub_topic_SI_Number',
      'sub_topic_name'
    );
  });

});
</script>

{% endblock %}