{% 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" />
<style>
  .exam-tag-container{display:flex;flex-wrap:wrap;gap:10px;margin-top:5px}
  .exam-tag{background:#ffeeba;color:#333;border:1px solid #f0c36d;padding:6px 12px;border-radius:20px;font-weight:500;font-size:14px;white-space:nowrap;transition:background-color .3s}
  .exam-tag:hover{background:#ffeb99}
  .stmt-map-table td,.stmt-map-table th{vertical-align:middle}
</style>
{% endblock custom_css %}

{% block title %}Edit Statement Type Question - Hajela's IAS Academy (HIA){% endblock %}

{% block content %}
<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">Edit Statement Type Question</h6>
      <h1 class="mb-5">Update your Statement Type question</h1>
    </div>

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

          <!-- Switcher (links to add pages) -->
          <div class="row g-3 mb-3">
            <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">Simple Type</a>
                <a href="{% url 'add-r-and-a-type-question' %}" class="btn btn-outline-primary">R & A</a>
                <a href="{% url 'add-list-type-1-question' %}" class="btn btn-outline-primary">List-I</a>
                <a href="{% url 'add-list-type-2-question' %}" class="btn btn-outline-primary">List-II</a>
                <a href="{% url 'add-true-and-false-type-question' %}" class="btn btn-outline-primary">True & False</a>
                <a href="{% url 'add-fill-in-the-blank-question' %}" class="btn btn-outline-primary">Fill in the Blank</a>
                <a href="{% url 'add-statement-type-question' %}" class="btn btn-primary">Statement</a>
              </div>
            </div>
          </div>

          <!-- Language hint (not editable for the pair here; we always edit both) -->
          <div class="row g-3 mb-4">
            <div class="col-md-6">
              <label class="form-label">Languages</label>
              <input type="text" class="form-control" value="English & Hindi" disabled>
              <div class="form-text">This edit form updates the English/Hindi pair.</div>
            </div>
            <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" {% if english_q.script == 'Latin' %}selected{% endif %}>Latin</option>
                  <option value="Devanagari" {% if english_q.script == 'Devanagari' %}selected{% endif %}>Devanagari</option>
                </select>
                <label for="script">Script</label>
              </div>
            </div>
          </div>

          <!-- Question Part First -->
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label">Question First Part (English)</label>
              <div class="form-floating">
                <textarea class="form-control" name="question_part_first" id="question_part_first" placeholder="Question First Part (English)" required>{{ english_q.question_part_first }}</textarea>
                <label for="question_part_first">Question First Part (English)</label>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Question First Part (Hindi)</label>
              <div class="form-floating">
                <textarea class="form-control" name="question_part_first_hi" id="question_part_first_hi" placeholder="Question First Part (Hindi)" required">{% if hindi_q %}{{ hindi_q.question_part_first_hi }}{% endif %}</textarea>
                <label for="question_part_first_hi">Question First Part (Hindi)</label>
              </div>
            </div>
          </div>

          <!-- Statement ↔ List-II mapping table -->
          <div class="row g-3 mt-4">
            <div class="col-md-12">
              <label class="form-label fw-bold text-primary">Statements (Left) mapped to List-II (Right)</label>

              <!-- EN rows -->
              <div class="table-responsive">
                <table class="table table-bordered align-middle stmt-map-table">
                  <thead class="table-light">
                    <tr>
                      <th style="width:35%">Statement line (EN)</th>
                      <th style="width:15%" class="text-center">:</th>
                      <th style="width:35%">List-II item (EN)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td><input class="form-control" name="stmt_line_row1"  value="{{ english_q.stmt_line_row1|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row1"  value="{{ english_q.list_2_row1|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row2"  value="{{ english_q.stmt_line_row2|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row2"  value="{{ english_q.list_2_row2|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row3"  value="{{ english_q.stmt_line_row3|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row3"  value="{{ english_q.list_2_row3|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row4"  value="{{ english_q.stmt_line_row4|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row4"  value="{{ english_q.list_2_row4|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row5"  value="{{ english_q.stmt_line_row5|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row5"  value="{{ english_q.list_2_row5|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row6"  value="{{ english_q.stmt_line_row6|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row6"  value="{{ english_q.list_2_row6|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row7"  value="{{ english_q.stmt_line_row7|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row7"  value="{{ english_q.list_2_row7|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row8"  value="{{ english_q.stmt_line_row8|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row8"  value="{{ english_q.list_2_row8|default_if_none:'' }}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row9"  value="{{ english_q.stmt_line_row9|default_if_none:'' }}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row9"  value="{{ english_q.list_2_row9|default_if_none:'' }}"></td></tr>
                  </tbody>
                </table>
              </div>

              <!-- HI rows -->
              <div class="table-responsive mt-3">
                <table class="table table-bordered align-middle stmt-map-table">
                  <thead class="table-light">
                    <tr>
                      <th style="width:35%">Statement line (HI)</th>
                      <th style="width:15%" class="text-center">:</th>
                      <th style="width:35%">List-II item (HI)</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr><td><input class="form-control" name="stmt_line_row1_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row1_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row1_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row1_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row2_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row2_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row2_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row2_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row3_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row3_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row3_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row3_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row4_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row4_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row4_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row4_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row5_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row5_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row5_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row5_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row6_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row6_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row6_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row6_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row7_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row7_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row7_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row7_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row8_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row8_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row8_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row8_hi|default_if_none:'' }}{% endif %}"></td></tr>
                    <tr><td><input class="form-control" name="stmt_line_row9_hi" value="{% if hindi_q %}{{ hindi_q.stmt_line_row9_hi|default_if_none:'' }}{% endif %}"></td><td class="text-center">:</td><td><input class="form-control" name="list_2_row9_hi" value="{% if hindi_q %}{{ hindi_q.list_2_row9_hi|default_if_none:'' }}{% endif %}"></td></tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>

          <!-- Question Part Third -->
          <div class="row g-3 mt-2">
            <div class="col-md-6">
              <label class="form-label">Question Third Part (English)</label>
              <div class="form-floating">
                <textarea class="form-control" name="question_part_third" id="question_part_third" placeholder="Question Third Part (English)">{{ english_q.question_part_third }}</textarea>
                <label for="question_part_third">Question Third Part (English)</label>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Question Third Part (Hindi)</label>
              <div class="form-floating">
                <textarea class="form-control" name="question_part_third_hi" id="question_part_third_hi" placeholder="Question Third Part (Hindi)">{% if hindi_q %}{{ hindi_q.question_part_third_hi }}{% endif %}</textarea>
                <label for="question_part_third_hi">Question Third Part (Hindi)</label>
              </div>
            </div>
          </div>

          <!-- Options A-D -->
          <div class="row g-3 mt-3">
            <div class="col-md-12">
              <label class="form-label fw-bold text-primary">Options</label>
              <div class="row mb-3">
                <div class="col-md-6"><input class="form-control" name="answer_option_a" value="{{ english_q.answer_option_a|default_if_none:'' }}" placeholder="Option A (English)"></div>
                <div class="col-md-6"><input class="form-control" name="answer_option_a_hi" value="{% if hindi_q %}{{ hindi_q.answer_option_a_hi|default_if_none:'' }}{% endif %}" placeholder="Option A (Hindi)"></div>
              </div>
              <div class="row mb-3">
                <div class="col-md-6"><input class="form-control" name="answer_option_b" value="{{ english_q.answer_option_b|default_if_none:'' }}" placeholder="Option B (English)"></div>
                <div class="col-md-6"><input class="form-control" name="answer_option_b_hi" value="{% if hindi_q %}{{ hindi_q.answer_option_b_hi|default_if_none:'' }}{% endif %}" placeholder="Option B (Hindi)"></div>
              </div>
              <div class="row mb-3">
                <div class="col-md-6"><input class="form-control" name="answer_option_c" value="{{ english_q.answer_option_c|default_if_none:'' }}" placeholder="Option C (English)"></div>
                <div class="col-md-6"><input class="form-control" name="answer_option_c_hi" value="{% if hindi_q %}{{ hindi_q.answer_option_c_hi|default_if_none:'' }}{% endif %}" placeholder="Option C (Hindi)"></div>
              </div>
              <div class="row mb-3">
                <div class="col-md-6"><input class="form-control" name="answer_option_d" value="{{ english_q.answer_option_d|default_if_none:'' }}" placeholder="Option D (English)"></div>
                <div class="col-md-6"><input class="form-control" name="answer_option_d_hi" value="{% if hindi_q %}{{ hindi_q.answer_option_d_hi|default_if_none:'' }}{% endif %}" placeholder="Option D (Hindi)"></div>
              </div>
            </div>
          </div>

          <!-- Correct Answer & Description -->
          <div class="row g-3">
            <div class="col-md-6">
              <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" {% if english_q.correct_answer_choice == 'a' %}selected{% endif %}>Option A</option>
                  <option value="b" {% if english_q.correct_answer_choice == 'b' %}selected{% endif %}>Option B</option>
                  <option value="c" {% if english_q.correct_answer_choice == 'c' %}selected{% endif %}>Option C</option>
                  <option value="d" {% if english_q.correct_answer_choice == 'd' %}selected{% endif %}>Option D</option>
                </select>
                <label for="correctAnswer">Correct Answer</label>
              </div>
            </div>
            <div class="col-md-6">
              <label class="form-label">Answer Description</label>
              <div class="form-floating mb-2">
                <textarea class="form-control" id="answerDescription_en" name="correct_answer_description" placeholder="Answer Description (English)" style="height:100px">{{ english_q.correct_answer_description }}</textarea>
                <label for="answerDescription_en">Answer Description (English)</label>
              </div>
              <div class="form-floating">
                <textarea class="form-control" id="answerDescription_hi" name="correct_answer_description_hi" placeholder="Answer Description (Hindi)" style="height:100px">{% if hindi_q %}{{ hindi_q.correct_answer_description_hi }}{% endif %}</textarea>
                <label for="answerDescription_hi">Answer Description (Hindi)</label>
              </div>
            </div>
          </div>

          <hr>

{# --- REPLACE your existing "Other Details" block with this --- #}
<!-- Other details -->
<div class="row g-3">
  <label class="form-label">Other Details</label>

  <!-- Source (use 'modern' UI option but keep selection based on moq/pyq/osq) -->
  <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 english_q.type_of_question == 'moq' %}selected{% endif %}>Model (New)</option>
      <option value="pyq" {% if english_q.type_of_question == 'pyq' %}selected{% endif %}>PYQ</option>
      <option value="osq" {% if english_q.type_of_question == 'osq' %}selected{% endif %}>OSQ (Other Source Question)</option>
    </select>
  </div>

<!-- Shortcode (optional helper to auto-fill the cascade) -->
<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|stringformat:"s" in selected_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 disabled>
      <option value="no_section">No Section</option>
      {% for section in sections %}
        <option value="{{ section.section_Unit_SI }}" {% if section.section_Unit_SI|stringformat:"s" in selected_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 disabled>
      {% for part in parts %}
        <option value="{{ part.part_serial }}" {% if part.part_serial|stringformat:"s" in selected_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 disabled>
      {% for chapter in chapters %}
        <option value="{{ chapter.chapter_number }}" {% if chapter.chapter_number|stringformat:"s" in selected_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 disabled>
      {% for topic in topics %}
        <option value="{{ topic.topic_SI_number }}" {% if topic.topic_SI_number|stringformat:"s" in selected_topic_ids %}selected{% endif %}>{{ topic.name }}</option>
      {% endfor %}
    </select>
    <div class="form-text">Select chapter(s) first to load related topics.</div>
  </div>

<!-- Subtopic (name aligned to subtopic_name[]) -->
<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 disabled>
    {% for subtopic in subtopics %}
      <option
        value="{{ subtopic.sub_topic_SI_Number }}"
        data-shortcode="{{ subtopic.sub_topic_short_Code|default_if_none:'' }}"
        {% if subtopic.sub_topic_SI_Number|stringformat:"s" in selected_subtopic_ids %}selected{% endif %}
      >
        {{ subtopic.name }}
      </option>
    {% endfor %}
  </select>

  <!-- Hidden mirror so legacy views reading 'sub_topic_name[]' still work -->
  <div id="subtopicHiddenMirror"></div>

  <div class="form-text">Select topic(s) first to load related subtopics.</div>
</div>


  <!-- Exams (with preselect support) -->
  <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='{{ selected_exam_ids|default:"[]"|safe }}'>
      <option value="">Select Exam</option>
      {# You may leave this empty to be filled by JS after subtopic change; keeping static options is OK too #}
      {% for exam in exams %}
        {% with exam_id_str=exam.exam_SI_Number|stringformat:"s" %}
          <option value="{{ exam.exam_SI_Number }}" {% if exam_id_str in selected_exam_ids %}selected{% endif %}>
            {{ exam.name }}{% if exam.exam_code %} ({{ exam.exam_code }}){% endif %}
          </option>
        {% endwith %}
      {% endfor %}
    </select>
    <div id="relatedExamsContainer" class="exam-tag-container mt-2"></div>
    <div class="form-text">Select Sub topic(s) first to load related Exam Name.</div>
  </div>

  <!-- Exam Year -->
  <div class="col-md-6 mb-4 examYearFieldContainer" id="examYearField" style="display: {% if english_q.type_of_question == 'pyq' %}block{% else %}none{% endif %};">
    <div class="form-floating">
      <input type="number" class="form-control" id="year" name="exam_year" placeholder="Year" value="{{ english_q.exam_year }}">
      <label for="year">Year</label>
    </div>
  </div>

  <!-- Marks -->
  <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>
        {% for val in mark_options %}
          <option value="{{ val }}" {% if english_q.marks|stringformat:"s" == val %}selected{% endif %}>{{ val }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <!-- Negative Marks -->
  <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>
        {% for val in negative_mark_options %}
          <option value="{{ val }}" {% if english_q.negative_marks|stringformat:"s" == val %}selected{% endif %}>{{ val }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <!-- Degree of Difficulty -->
  <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 range_1_to_5 %}
          <option value="{{ i }}" {% if english_q.degree_of_difficulty|stringformat:"s" == i|stringformat:"s" %}selected{% endif %}>{{ i }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

<!-- Elimination Tactics -->
<div class="col-md-6 mb-4">
  <label for="elimTacticsDegree" class="form-label">Elimination Tactics</label>
  <div class="form-floating">
    <select class="form-select" id="elimTacticsDegree" name="elim_tactics_degree" required>
      <option value="">Select Elimination Tactics</option>
      {# Prefer context-provided range_1_to_5; fall back to literal 1..5 if not provided #}
      {% if range_1_to_5 %}
        {% for i in range_1_to_5 %}
          {% with selected_val=english_q.elim_tactics_degree|stringformat:"s"|default_if_none:"" %}
            <option value="{{ i }}" {% if selected_val == i|stringformat:"s" %}selected{% endif %}>{{ i }}</option>
          {% endwith %}
        {% endfor %}
      {% else %}
        {% for i in "1,2,3,4,5"|split:"," %}
          {% with selected_val=english_q.elim_tactics_degree|stringformat:"s"|default_if_none:"" %}
            <option value="{{ i }}" {% if selected_val == i %}selected{% endif %}>{{ i }}</option>
          {% endwith %}
        {% endfor %}
      {% endif %}
    </select>
    <label for="elimTacticsDegree">Elimination Tactics</label>
  </div>
</div>

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

  <!-- Current Relevance Topic -->
  <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>


                        <!-- Submit Button -->
                        <div class="col-12 mt-3">
                            <button class="btn btn-primary w-100 py-3" type="submit">Update Question</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- Simple Type Question Form End -->
{% 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 () {
  let questionTypeSource = $('#questionTypeSelector').val() || '';

  // Init Select2
  $('#areaName,#sectionName,#partName,#chapterName,#topicName,#subTopicName,#examName,#language,#elim_tactics_degree,#elimTacticsDegree,#currentRelevance')
    .select2({ placeholder: "Select or search", allowClear: true });

  // Disable cascades initially
  disableDropdowns(['#sectionName', '#partName', '#chapterName', '#topicName', '#subTopicName', '#examName']);

  // Toggle Exam Year for PYQ
  toggleExamYear(questionTypeSource);
  $('#questionTypeSelector').on('change', function () {
    questionTypeSource = $(this).val() || '';
    toggleExamYear(questionTypeSource);
    resetAllDropdowns();
  });

  // ---- Hidden mirror so backend accepts either param name ----
  function syncSubtopicHiddenMirror() {
    const $mirror = $('#subtopicHiddenMirror');
    if (!$mirror.length) return; // in case not added yet
    $mirror.empty();
    const vals = ($('#subTopicName').val() || []).map(String);
    vals.forEach(v => {
      $mirror.append($('<input>', { type: 'hidden', name: 'sub_topic_name[]', value: v }));
    });
  }

  // ---- Autofill shortcode field from current subtopic selections (edit mode too) ----
  function autofillShortcodeFromSelection() {
    const codes = [];
    $('#subTopicName option:selected').each(function () {
      const code = ($(this).attr('data-shortcode') || '').trim();
      if (code) codes.push(code);
    });
    const unique = [...new Set(codes)];
    if (unique.length) $('#subTopicShortCode').val(unique.join(', '));
  }

  // ---------- Shortcode → Autofill full cascade ----------
  $('#subTopicShortCode').on('blur', async function () {
    const raw = $(this).val().trim();
    if (!raw) return;

    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 / No section for modern
      if (questionTypeSource === 'modern' || questionTypeSource === 'moq') {
        $('#sectionName').html('<option value="no_section" selected>No Section</option>')
          .prop('disabled', true).trigger('change');
        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');
        await fetchDropdownData('#partName', `/question-bank/get-parts-list/`, d.section_ids, 'section_ids');
      }
      setDropdownValues('#partName', d.part_ids);
      $('#partName').prop('disabled', false).trigger('change');

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

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

      // 5) Subtopics
      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 and fetch exams
      syncSubtopicHiddenMirror();
      $('#subTopicName').trigger('change');
    } catch (err) {
      console.error("Error fetching hierarchy:", err);
      alert("Failed to fetch data from shortcode(s).");
      resetAllDropdowns();
    }
  });

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

    if (ids.length) {
      if (questionTypeSource === 'modern' || questionTypeSource === 'moq' || questionTypeSource === 'osq') {
        $('#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' || questionTypeSource === 'moq') 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 (edit mode): enable controls with values, sync/mirror, prefetch exams
  (function initFromExisting() {
    ['#sectionName','#partName','#chapterName','#topicName','#subTopicName','#examName'].forEach(sel => {
      const $el = $(sel);
      if (($el.val() || []).length) $el.prop('disabled', false);
    });

    const subtopicVals = ($('#subTopicName').val() || []).map(String);
    if (subtopicVals.length) {
      syncSubtopicHiddenMirror();
      autofillShortcodeFromSelection(); // fill code box from current selections
      $('#subTopicName').trigger('change'); // fetch exams
    } else {
      // If a shortcode is already in the box (edit deep link), try to resolve it
      const existingCode = ($('#subTopicShortCode').val() || '').trim();
      if (existingCode) $('#subTopicShortCode').trigger('blur');
    }
  })();

  // ---------- SubTopic → Exams (preselect + tags) ----------
  $('#subTopicName').on('change', async function () {
    syncSubtopicHiddenMirror();       // keep legacy name posted
    autofillShortcodeFromSelection(); // keep code in sync with selection

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

    if (!ids.length) {
      resetDropdown('#examName', 'Select Exam');
      examTagContainer.empty();
      return;
    }

    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)));

      // Preselected from server (edit mode)
      let serverPreselected = [];
      try {
        const raw = examDropdown.attr('data-preselected-exams') || '[]';
        serverPreselected = JSON.parse(raw).map(String);
      } catch (e) { serverPreselected = []; }

      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);
        if (relatedIds.has(value) || serverPreselected.includes(value)) opt.prop('selected', true);
        if (relatedIds.has(value)) opt.attr('data-related', '1'); // styling hook if needed
        examDropdown.append(opt);
      });

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

      // Related tags (yellow chips)
      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);
      });
      if (!data.related_exams || !data.related_exams.length) {
        examTagContainer.append('<div>No exams found.</div>');
      }
    } catch (err) {
      console.error("Error fetching exams:", err);
      resetDropdown('#examName', 'Select Exam');
      examTagContainer.empty();
    }
  });

  // Ensure disabled selects still POST values
  $('#simpleTypeForm').on('submit', function () {
    $('#sectionName, #partName, #chapterName, #topicName, #subTopicName, #examName').prop('disabled', false);
    syncSubtopicHiddenMirror(); // final sync
  });

  // ---------- Helpers ----------
  function toggleExamYear(source) {
    if (source === 'pyq') $('#examYearField').show();
    else $('#examYearField').hide();
  }

  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`);
    }
  }

  // Adds data-shortcode when available for subtopics
  function populateDropdown(selector, items) {
    const dropdown = $(selector);
    dropdown.empty().append(`<option value="">Select ${dropdown.attr('id') || 'Option'}</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 => {
      const $opt = $('<option>').val(String(item[idKey])).text(item.name);
      // Preserve subtopic shortcode if provided by API payload
      if (selector === '#subTopicName' && (item.sub_topic_short_Code || item.short_code)) {
        $opt.attr('data-shortcode', item.sub_topic_short_Code || item.short_code);
      }
      dropdown.append($opt);
    });

    dropdown.trigger('change');
  }

  function setDropdownValues(selector, values) {
    const vals = (values || []).map(String);
    $(selector).val(vals).trigger('change');
  }

  function resetDropdowns(selectors) { selectors.forEach(sel => resetDropdown(sel, `Select ${capitalizeFirstLetter($(sel).attr('id')?.replace('Name','') || '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 %}