{% extends 'base.html' %}
{% load static %}
{% load custom_tags %}
{% block custom_css %}
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
{% endblock custom_css %}

{% block title %}Add R & A Type Question - Hajela's IAS Academy (HIA){% endblock %}

{% block content %}
<style>
    .exam-tag-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 5px;
}

.exam-tag {
    background-color: #ffeeba; /* Light yellow to indicate auto-filled */
    color: #333;
    border: 1px solid #f0c36d;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    white-space: nowrap;
    transition: background-color 0.3s;
}

.exam-tag:hover {
    background-color: #ffeb99;
}

</style>
<!-- R & A Type Question Form Start -->
<div class="container-xxl py-5">
    <div class="container">
        {% if messages %}
            <div class="alert alert-success alert-dismissible fade show" role="alert">
                {% for message in messages %}
                    {{ message }}
                {% endfor %}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endif %}
        <div class="text-center wow fadeInUp" data-wow-delay="0.1s">
            <h6 class="section-title bg-white text-center text-primary px-3">Add R & A Type Question</h6>
            <h1 class="mb-5">Fill in the details to add a new R & A type question</h1>
        </div>

        <div class="row g-4">
            <div class="col-lg-12 wow fadeInUp" data-wow-delay="0.5s">
                <form id="rAndATypeForm" method="POST" enctype="multipart/form-data">
                    {% csrf_token %}


                        <!-- Question Type Selection -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-12">
                                <h5 class="text-primary mb-3">Choose Question Type</h5>
                                <div class="mb-3">
                                    <a href="{% url 'add-simple-type-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-simple-type-question' %}active{% endif %}">Simple Type</a>
                                    <a href="{% url 'add-r-and-a-type-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-r-and-a-type-question' %}active{% endif %}">R & A</a>
                                    <a href="{% url 'add-list-type-1-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-list-type-1-question' %}active{% endif %}">List-I</a>
                                    <a href="{% url 'add-list-type-2-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-list-type-2-question' %}active{% endif %}">List-II</a>
                                    <a href="{% url 'add-true-and-false-type-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-true-and-false-type-question' %}active{% endif %}">True & False</a>
                                    <a href="{% url 'add-fill-in-the-blank-question' %}" class="btn btn-outline-primary {% if request.resolver_match.url_name == 'add-fill-in-the-blank-question' %}active{% endif %}">Fill in the Blank</a>
                                </div>
                            </div>
                        </div>

                        <input type="hidden" name="questionType" value="r_and_a_type">

                                                <!-- Language and Script Fields -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-6 mb-4">
                                <label for="language" class="form-label">Language(s)</label>
                                <select class="form-select" id="language" name="language" multiple required>
                                    <option value="e">English</option>
                                    <option value="h">Hindi</option>
                                </select>
                                <div class="form-text">Hold Ctrl (Windows) or Command (Mac) to select both languages.</div>
                            </div>

                            {% comment %} <div class="col-md-6">
                                <div class="form-floating">
                                    <select class="form-select" id="script" name="script" required>
                                        <option value="">Select Script</option>
                                        <option value="Latin">Latin</option>
                                        <option value="Devanagari">Devanagari</option>
                                    </select>
                                    <label for="script">Script</label>
                                </div>
                            </div> {% endcomment %}
                        </div>

                                                
                        <!-- Question, Assertion, Reason (Bilingual) -->
                        <div class="row g-3 mb-4">
                            <div class="col-md-6 mb-3">
                                <label for="question_part_first" class="text-primary fw-bold">Question (English)</label>
                                <div class="form-floating">
                                    <textarea class="form-control" name="question_part_first" id="question_part_first" placeholder="Question Part First" required></textarea>
                                </div>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="question_part_first_hi" class="text-primary fw-bold">Question (Hindi)</label>
                                <div class="form-floating">
                                    <textarea class="form-control" name="question_part_first_hi" id="question_part_first_hi" placeholder="हिंदी में प्रश्न"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="assertion" class="form-label">Assertion (English)</label>
                                <input type="text" class="form-control" name="assertion" id="assertion" placeholder="Assertion">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="assertion_hi" class="form-label">Assertion (Hindi)</label>
                                <input type="text" class="form-control" name="assertion_hi" id="assertion_hi" placeholder="कथन">
                            </div>

                            <div class="col-md-6 mb-3">
                                <label for="reason" class="form-label">Reason (English)</label>
                                <input type="text" class="form-control" name="reason" id="reason" placeholder="Reason">
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="reason_hi" class="form-label">Reason (Hindi)</label>
                                <input type="text" class="form-control" name="reason_hi" id="reason_hi" placeholder="कारण">
                            </div>
                        </div>

                        <!-- Options Section -->
                        <div class="row g-3 mb-4">
                            {% for label in 'abcd' %}
                            <div class="col-md-6 mb-3">
                                <label for="answer_option_{{ label }}" class="form-label">Option {{ label|upper }} (English)</label>
                                <input type="text" class="form-control" name="answer_option_{{ label }}" id="answer_option_{{ label }}" placeholder="Option {{ label|upper }}" required>
                            </div>
                            <div class="col-md-6 mb-3">
                                <label for="answer_option_{{ label }}_hi" class="form-label">Option {{ label|upper }} (Hindi)</label>
                                <input type="text" class="form-control" name="answer_option_{{ label }}_hi" id="answer_option_{{ label }}_hi" placeholder="विकल्प {{ label|upper }}">
                            </div>
                            {% endfor %}
                        </div>

                        <div class="row g-3 mb-4">
                            <div class="col-md-6 mb-4">
                                <div class="form-floating">
                                    <select class="form-select" id="correctAnswer" name="correct_answer_choice" required>
                                        <option value="">Select the correct answer</option>
                                        <option value="a">Option A</option>
                                        <option value="b">Option B</option>
                                        <option value="c">Option C</option>
                                        <option value="d">Option D</option>
                                    </select>
                                    <label for="correctAnswer">Correct Answer</label>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4">
                                <label for="answerDescription" class="form-label">Answer Explanation (English)</label>
                                <div class="form-floating">
                                    <textarea class="form-control" id="answerDescription" name="correct_answer_description" placeholder="Answer Description"></textarea>
                                </div>
                            </div>

                            <div class="col-md-6 mb-4 offset-md-6">
                                <label for="answerDescription_hi" class="form-label">Answer Explanation (Hindi)</label>
                                <div class="form-floating">
                                    <textarea class="form-control" id="answerDescription_hi" name="correct_answer_description_hi" placeholder="उत्तर विवरण"></textarea>
                                </div>
                            </div>
                        </div>


<hr>
          <!-- Other details -->
          <div class="row g-3">
            <label class="form-label">Other Details</label>

            <!-- Source -->
            <div class="col-md-6 mb-4">
              <label for="questionTypeSelector" class="form-label">Select Question Source</label>
              <select class="form-select" id="questionTypeSelector" name="question_type_source" required>
                <option value="">Select Type</option>
                <option value="modern" {% if request.GET.question_type_source == 'modern' %}selected{% endif %}>Model (New)</option>
                <option value="pyq" {% if request.GET.question_type_source == 'pyq' %}selected{% endif %}>PYQ</option>
                <option value="osq" {% if request.GET.question_type_source == 'osq' %}selected{% endif %}>OSQ (Other Source Question)</option>
              </select>
            </div>

            <!-- Shortcode -->
            <div class="col-md-6 mb-4">
              <label for="subTopicShortCode" class="form-label">Sub Topic Short Code</label>
              <input type="text" class="form-control" id="subTopicShortCode" name="sub_topic_short_code" placeholder="Enter Sub Topic Short Code">
              <div class="form-text">Auto-fills hierarchy when short code is matched</div>
            </div>

            <!-- Area -->
            <div class="col-md-6 mb-4">
              <label for="areaName" class="form-label">Area Name(s)</label>
              <select id="areaName" name="area_name[]" class="form-control select2" multiple>
                {% for area in areas %}
                  <option value="{{ area.area_SI_Code }}" {% if area.area_SI_Code in area_ids %}selected{% endif %}>{{ area.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Hold Ctrl (Windows) or Command (Mac) to select multiple areas.</div>
            </div>

            <!-- Section -->
            <div class="col-md-6 mb-4">
              <label for="sectionName" class="form-label">Section Name(s)</label>
              <select id="sectionName" name="section_name[]" class="form-control select2" multiple>
                {% for section in sections %}
                  <option value="{{ section.section_Unit_SI }}" {% if section.section_Unit_SI in section_ids %}selected{% endif %}>{{ section.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Select area(s) first to load related sections.</div>
            </div>

            <!-- Part -->
            <div class="col-md-6 mb-4">
              <label for="partName" class="form-label">Part Name(s)</label>
              <select id="partName" name="part_name[]" class="form-control select2" multiple>
                {% for part in parts %}
                  <option value="{{ part.part_serial }}" {% if part.part_serial in part_ids %}selected{% endif %}>{{ part.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Select section(s) first to load related parts.</div>
            </div>

            <!-- Chapter -->
            <div class="col-md-6 mb-4">
              <label for="chapterName" class="form-label">Chapter Name(s)</label>
              <select id="chapterName" name="chapter_name[]" class="form-control select2" multiple>
                {% for chapter in chapters %}
                  <option value="{{ chapter.chapter_number }}" {% if chapter.chapter_number in chapter_ids %}selected{% endif %}>{{ chapter.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Select part(s) first to load related chapters.</div>
            </div>

            <!-- Topic -->
            <div class="col-md-6 mb-4">
              <label for="topicName" class="form-label">Topic Name(s)</label>
              <select id="topicName" name="topic_name[]" class="form-control select2" multiple>
                {% for topic in topics %}
                  <option value="{{ topic.topic_SI_number }}" {% if topic.topic_SI_number in topic_ids %}selected{% endif %}>{{ topic.name }}</option>
                {% endfor %}
              </select>
              <div class="form-text">Select chapter(s) first to load related topics.</div>
            </div>

            <!-- Subtopic -->
            <!-- Subtopic -->
            <div class="col-md-6 mb-4">
              <label for="subTopicName" class="form-label">Sub Topic Name(s)</label>
              <select id="subTopicName" name="subtopic_name[]" class="form-control select2" multiple>
                {% for subtopic in subtopics %}
                  <option value="{{ subtopic.sub_topic_SI_Number }}"
                          {% if subtopic.sub_topic_SI_Number in subtopic_ids %}selected{% endif %}>
                    {{ subtopic.name }}
                  </option>
                {% endfor %}
              </select>
              <!-- Hidden mirror to support views that read 'sub_topic_name[]' -->
              <div id="subtopicHiddenMirror"></div>
              <div class="form-text">Select topic(s) first to load related subtopics.</div>
            </div>

            <!-- Exams -->
            <!-- Exams -->
            <div class="col-md-6 mb-4">
              <label for="examName" class="form-label">Exam Name</label>
              <select id="examName"
                      name="exam_name[]"
                      class="form-control select2"
                      multiple
                      required
                      disabled
                      data-preselected-exams='{{ exam_ids|default:"[]"|safe }}'>
                <option value="">Select Exam</option>
              </select>
              <div id="relatedExamsContainer" class="exam-tag-container"></div>
            </div>


          <!-- Exam Year -->
          <div class="col-md-6 mb-4 examYearFieldContainer" id="examYearField" style="display:none;">
            <div class="form-floating">
              <input type="number" class="form-control" id="year" name="exam_year" placeholder="Year">
              <label for="year">Year</label>
            </div>
          </div>

          <!-- Marks etc. -->
          <div class="col-md-6 mb-4">
            <label for="marks">Marks</label>
            <div class="form-floating">
              <select class="form-select" id="marks" name="marks" required>
                <option value="">Select Marks</option>
                <option value="0.5">0.5</option><option value="1.0">1.0</option>
                <option value="1.5">1.5</option><option value="2.0">2.0</option>
                <option value="2.5">2.5</option><option value="3.0">3.0</option>
              </select>
            </div>
          </div>

          <div class="col-md-6 mb-4">
            <label for="negativeMarks">Negative Marks</label>
            <div class="form-floating">
              <select class="form-select" id="negativeMarks" name="negative_marks" required>
                <option value="">Select Negative Marks</option>
                <option value="1.0">1.0</option><option value="0.5">0.5</option>
                <option value="0.33">0.33</option><option value="0.25">0.25</option>
                <option value="0.2">0.2</option><option value="0">0</option>
              </select>
            </div>
          </div>

          <div class="col-md-6 mb-4">
            <label for="degreeOfDifficulty">Degree of Difficulty</label>
            <div class="form-floating">
              <select class="form-select" id="degreeOfDifficulty" name="degree_of_difficulty" required>
                <option value="">Select Degree of Difficulty</option>
                {% for i in 5|to_range %}
                  <option value="{{ i }}" {% if english_q.degree_of_difficulty == i|stringformat:"s" %}selected{% endif %}>{{ i }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="col-md-6 mb-4">
            <label for="elimTacticsDegree">Elimination Tactics</label>
            <div class="form-floating">
              <select class="form-select" id="elimTacticsDegree" name="elim_tactics_degree" required>
                <option value="">Select Elimination Tactics</option>
                {% for i in 5|to_range %}
                  <option value="{{ i }}" {% if english_q.elim_tactics_degree == i|stringformat:"s" %}selected{% endif %}>{{ i }}</option>
                {% endfor %}
              </select>
            </div>
          </div>

          <div class="col-md-6 mb-4">
            <label for="currentRelevance" class="form-label">Current Relevance</label>
            <div class="form-floating">
              <select class="form-select" id="currentRelevance" name="current_relevance" required>
                <option value="">Select Current Relevance</option>
                <option value="0" {% if english_q.current_relevance == "0" %}selected{% endif %}>0 - Not Relevant</option>
                <option value="1" {% if english_q.current_relevance == "1" %}selected{% endif %}>1 - Moderately Relevant</option>
                <option value="2" {% if english_q.current_relevance == "2" %}selected{% endif %}>2 - Very Relevant</option>
              </select>
            </div>
          </div>

          <div class="col-md-6 mb-4">
            <label for="currentRelevanceTopic" class="form-label">Current Relevance Topic Explanation</label>
            <div class="form-floating">
              <textarea class="form-control" id="currentRelevanceTopic" name="current_relevance_topic" placeholder="Current Relevance Topic Explanation">{{ english_q.current_relevance_topic }}</textarea>
            </div>
          </div>

          <div class="col-12 mt-3">
            <button class="btn btn-primary w-100 py-3" type="submit">Submit Question</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock content %}

{% block custom_js %}
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function () {
  // Set from current value on load
  let questionTypeSource = $('#questionTypeSelector').val() || '';

  // ------ Select2 init (fixed ids) ------
  $('#areaName, #sectionName, #partName, #chapterName, #topicName, #subTopicName, #examName, #language, #elimTacticsDegree, #currentRelevance')
    .select2({ placeholder: " ", allowClear: true });

  disableDropdowns(['#sectionName', '#partName', '#chapterName', '#topicName', '#subTopicName', '#examName']);

  // --- Helper: mirror subtopic values under 'sub_topic_name[]' too ---
  function syncSubtopicHiddenMirror() {
    const $mirror = $('#subtopicHiddenMirror');
    $mirror.empty();
    const vals = ($('#subTopicName').val() || []).map(String);
    vals.forEach(v => {
      // Create a hidden input per value (legacy name)
      $mirror.append(
        $('<input>', { type: 'hidden', name: 'sub_topic_name[]', value: v })
      );
    });
  }

  // Change source
  $('#questionTypeSelector').on('change', function () {
    questionTypeSource = $(this).val();
    resetAllDropdowns();
  });

  // -------- Shortcode autofill (fetch => set) --------
  $('#subTopicShortCode').on('blur', async function () {
    const raw = $(this).val().trim();
    if (!raw) return;

    // ensure we have current source (even if user never changed it)
    questionTypeSource = $('#questionTypeSelector').val() || '';
    if (!questionTypeSource) {
      alert("Please select 'Select Question Source' first.");
      return;
    }

    const codes = raw.split(/[\s,]+/).filter(Boolean);
    const query = codes.map(c => `codes[]=${encodeURIComponent(c)}`).join('&');

    try {
      const res = await fetch(`/question-bank/get-hierarchy-from-shortcode/?${query}`);
      const payload = await res.json();
      if (payload.status !== 'success') {
        alert('Invalid or not found shortcode(s).');
        resetAllDropdowns();
        return;
      }
      const d = payload.data;

      // 1) AREA
      setDropdownValues('#areaName', d.area_ids);
      $('#areaName').trigger('change');

      // 2) SECTION or NO SECTION for "modern"
      if (questionTypeSource === 'modern') {
        $('#sectionName').html('<option value="no_section" selected>No Section</option>')
          .prop('disabled', true).trigger('change');
        // 3) PARTS (by AREA)
        await fetchDropdownData('#partName', `/question-bank/get-parts-by-area/`, d.area_ids, 'area_ids');
      } else {
        await fetchDropdownData('#sectionName', `/question-bank/get-sections-list/`, d.area_ids, 'area_ids');
        setDropdownValues('#sectionName', d.section_ids);
        $('#sectionName').prop('disabled', false).trigger('change');

        // 3) PARTS (by SECTION)
        await fetchDropdownData('#partName', `/question-bank/get-parts-list/`, d.section_ids, 'section_ids');
      }
      setDropdownValues('#partName', d.part_ids);
      $('#partName').prop('disabled', false).trigger('change');

      // 4) CHAPTERS (by PART)
      await fetchDropdownData('#chapterName', `/question-bank/get-chapters-list/`, d.part_ids, 'part_ids');
      setDropdownValues('#chapterName', d.chapter_ids);
      $('#chapterName').prop('disabled', false).trigger('change');

      // 5) TOPICS (by CHAPTER)
      await fetchDropdownData('#topicName', `/question-bank/get-topics-list/`, d.chapter_ids, 'chapter_ids');
      setDropdownValues('#topicName', d.topic_ids);
      $('#topicName').prop('disabled', false).trigger('change');

      // 6) SUBTOPICS (by TOPIC)
      await fetchDropdownData('#subTopicName', `/question-bank/get-subtopics-list/`, d.topic_ids, 'topic_ids');
      setDropdownValues('#subTopicName', d.subtopic_ids);
      $('#subTopicName').prop('disabled', false).trigger('change');

      // keep mirror in sync
      syncSubtopicHiddenMirror();

      // 7) EXAMS (by SUBTOPIC)
      $('#subTopicName').trigger('change');

    } catch (err) {
      console.error("Error fetching hierarchy:", err);
      alert("Failed to fetch data from shortcode(s).");
      resetAllDropdowns();
    }
  });

  // -------- Change handlers for cascading loads --------
  $('#areaName').on('change', async function () {
    const ids = ($(this).val() || []).map(String);
    resetDropdowns(['#sectionName', '#partName', '#chapterName', '#topicName', '#subTopicName', '#examName']);

    if (ids.length) {
      if (questionTypeSource === 'modern') {
        $('#sectionName').html('<option value="no_section" selected>No Section</option>')
          .prop('disabled', true).trigger('change');
        await fetchDropdownData('#partName', `/question-bank/get-parts-by-area/`, ids, 'area_ids');
        enableDropdown('#partName');
      } else {
        await fetchDropdownData('#sectionName', `/question-bank/get-sections-list/`, ids, 'area_ids');
        enableDropdown('#sectionName');
      }
    }
  });

  $('#sectionName').on('change', async function () {
    if (questionTypeSource === 'modern') return;
    const ids = ($(this).val() || []).map(String);
    if (ids.length) {
      await fetchDropdownData('#partName', `/question-bank/get-parts-list/`, ids, 'section_ids');
      enableDropdown('#partName');
    } else {
      resetDropdowns(['#partName', '#chapterName', '#topicName', '#subTopicName', '#examName']);
    }
  });

  $('#partName').on('change', async function () {
    const ids = ($(this).val() || []).map(String);
    if (ids.length) {
      await fetchDropdownData('#chapterName', `/question-bank/get-chapters-list/`, ids, 'part_ids');
      enableDropdown('#chapterName');
    } else {
      resetDropdowns(['#chapterName', '#topicName', '#subTopicName', '#examName']);
    }
  });

  $('#chapterName').on('change', async function () {
    const ids = ($(this).val() || []).map(String);
    if (ids.length) {
      await fetchDropdownData('#topicName', `/question-bank/get-topics-list/`, ids, 'chapter_ids');
      enableDropdown('#topicName');
    } else {
      resetDropdowns(['#topicName', '#subTopicName', '#examName']);
    }
  });

  $('#topicName').on('change', async function () {
    const ids = ($(this).val() || []).map(String);
    if (ids.length) {
      await fetchDropdownData('#subTopicName', `/question-bank/get-subtopics-list/`, ids, 'topic_ids');
      enableDropdown('#subTopicName');
    } else {
      resetDropdowns(['#subTopicName', '#examName']);
    }
  });

  // On-load: if subtopics are already selected (via shortcode or edit), fetch exams immediately.
  (function initExamsIfPreselected() {
    const subtopicVals = ($('#subTopicName').val() || []).map(String);
    if (subtopicVals.length) {
      syncSubtopicHiddenMirror();           // mirror now
      $('#subTopicName').trigger('change'); // will fetch exams
    }
  })();

  // -------- Change handler: when SubTopic changes, load Exams (with auto-select & preselect) --------
  $('#subTopicName').on('change', async function () {
    syncSubtopicHiddenMirror(); // keep legacy name posted too

    const ids = ($(this).val() || []).map(String);
    const examDropdown = $('#examName');
    const examTagContainer = $('#relatedExamsContainer');

    if (ids.length) {
      try {
        const query = ids.map(id => `subtopic_ids[]=${encodeURIComponent(id)}`).join('&');
        const res = await fetch(`/question-bank/get-exams-list/?${query}`);
        const data = await res.json();

        const relatedIds = new Set((data.related_exams || []).map(e => String(e.exam_SI_Number)));

        // Any preselected exams from the server (e.g., editing). Safe if attribute missing/invalid.
        let serverPreselected = [];
        try {
          const raw = examDropdown.attr('data-preselected-exams') || '[]';
          serverPreselected = JSON.parse(raw).map(String);
        } catch (e) { serverPreselected = []; }

        // Build the dropdown
        examDropdown.empty().append(`<option value="">Select Exam</option>`);
        (data.all_exams || []).forEach(exam => {
          const value = String(exam.exam_SI_Number);
          const label = `${exam.name}${exam.exam_code ? ' (' + exam.exam_code + ')' : ''}`;
          const opt = $('<option>').val(value).text(label);

          // Auto-select if related OR preselected by server
          if (relatedIds.has(value) || serverPreselected.includes(value)) {
            opt.prop('selected', true);
          }
          if (relatedIds.has(value)) opt.attr('data-related', '1');

          examDropdown.append(opt);
        });

        examDropdown.prop('disabled', false).trigger('change');

        // Render related exam tags
        examTagContainer.empty();
        (data.related_exams || []).forEach(exam => {
          const tag = $('<div>').addClass('exam-tag').text(
            exam.exam_code ? `${exam.name} (${exam.exam_code})` : exam.name
          );
          examTagContainer.append(tag);
        });

      } catch (err) {
        console.error("Error fetching exams:", err);
        resetDropdown('#examName', 'Select Exam');
        examTagContainer.empty();
      }
    } else {
      resetDropdown('#examName', 'Select Exam');
      examTagContainer.empty();
    }
  });

  // Ensure disabled selects do POST their values
  $('#simpleTypeForm').on('submit', function () {
    // enable all chained selects so values are submitted
    $('#sectionName, #partName, #chapterName, #topicName, #subTopicName, #examName').prop('disabled', false);
    // final sync of the legacy sub_topic_name[] mirror
    syncSubtopicHiddenMirror();
  });

  // -------- Helpers --------
  async function fetchDropdownData(selector, url, ids, paramName) {
    const query = ids.map(id => `${paramName}[]=${encodeURIComponent(id)}`).join('&');
    const res = await fetch(`${url}?${query}`);
    const data = await res.json();
    const key = Object.keys(data)[0];
    if (Array.isArray(data[key]) && data[key].length) {
      populateDropdown(selector, data[key]);
    } else {
      resetDropdown(selector, `No data available`);
    }
  }

  function populateDropdown(selector, items) {
    const dropdown = $(selector);
    dropdown.empty().append(`<option value="">Select ${dropdown.attr('id')}</option>`);
    const idKey = Object.keys(items[0]).find(k =>
      ['area_SI_Code', 'section_Unit_SI', 'part_serial', 'chapter_number', 'topic_SI_number', 'sub_topic_SI_Number', 'exam_SI_Number', 'id'].includes(k)
    );
    items.forEach(item => {
      dropdown.append(`<option value="${item[idKey]}">${item.name}</option>`);
    });
    dropdown.trigger('change');
  }

  function setDropdownValues(selector, values) {
    $(selector).val(values).trigger('change');
  }

  function resetDropdowns(selectors) {
    selectors.forEach(sel => resetDropdown(sel, `Select ${capitalizeFirstLetter($(sel).attr('id') || 'Option')}`));
  }

  function resetDropdown(sel, placeholder) {
    $(sel).empty().append(`<option value="">${placeholder}</option>`).prop('disabled', true).trigger('change');
  }

  function resetAllDropdowns() {
    resetDropdowns(['#sectionName', '#partName', '#chapterName', '#topicName', '#subTopicName', '#examName']);
  }

  function enableDropdown(sel) { $(sel).prop('disabled', false); }
  function disableDropdowns(sels) { sels.forEach(sel => $(sel).prop('disabled', true)); }
  function capitalizeFirstLetter(s) { return s.charAt(0).toUpperCase() + s.slice(1); }
});
</script>
{% endblock custom_js %}