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

{% block title %}View Your Questions{% endblock %}

{% block content %}
<div class="container py-5">
    <h2 class="text-center mb-5"> Questions Bank</h2>
    <form method="get" class="mb-5">
      <div class="row g-3">

        <!-- Source -->
        <div class="col-md-2">
          <label for="question_source" class="form-label">Source</label>
          <select name="question_source" id="question_source" class="form-select">
            <option value="">All</option>
            {% for source in QUESTION_SOURCES %}
              <option value="{{ source.0 }}" {% if request.GET.question_source == source.0 %}selected{% endif %}>
                {{ source.1 }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Question Type -->
        <div class="col-md-2">
          <label for="question_type" class="form-label">Question Type</label>
          <select name="question_type" id="question_type" class="form-select">
            <option value="">All</option>
            {% for qtype in QUESTION_TYPES %}
              <option value="{{ qtype.0 }}" {% if request.GET.question_type == qtype.0 %}selected{% endif %}>
                {{ qtype.1 }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Area (ManyToMany) -->
        <div class="col-md-2">
          <label for="area_name" class="form-label">Area</label>
          <select name="area_name" id="area_name" class="form-select">
            <option value="">All</option>
            {% for area in areas %}
              <option value="{{ area.pk }}" {% if request.GET.area_name == area.pk|stringformat:"s" %}selected{% endif %}>
                {{ area.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Section (ManyToMany) -->
        <div class="col-md-2">
          <label for="section_name" class="form-label">Section</label>
          <select name="section_name" id="section_name" class="form-select">
            <option value="">All</option>
            {% for section in sections %}
              <option value="{{ section.pk }}" {% if request.GET.section_name == section.pk|stringformat:"s" %}selected{% endif %}>
                {{ section.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Part (ManyToMany) -->
        <div class="col-md-2">
          <label for="part_name" class="form-label">Part</label>
          <select name="part_name" id="part_name" class="form-select">
            <option value="">All</option>
            {% for part in parts %}
              <option value="{{ part.pk }}" {% if request.GET.part_name == part.pk|stringformat:"s" %}selected{% endif %}>
                {{ part.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Chapter (ManyToMany) -->
        <div class="col-md-2">
          <label for="chapter_name" class="form-label">Chapter</label>
          <select name="chapter_name" id="chapter_name" class="form-select">
            <option value="">All</option>
            {% for chapter in chapters %}
              <option value="{{ chapter.pk }}" {% if request.GET.chapter_name == chapter.pk|stringformat:"s" %}selected{% endif %}>
                {{ chapter.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Topic (ManyToMany) -->
        <div class="col-md-2">
          <label for="topic_name" class="form-label">Topic</label>
          <select name="topic_name" id="topic_name" class="form-select">
            <option value="">All</option>
            {% for topic in topics %}
              <option value="{{ topic.pk }}" {% if request.GET.topic_name == topic.pk|stringformat:"s" %}selected{% endif %}>
                {{ topic.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Subtopic (ManyToMany) -->
        <div class="col-md-2">
          <label for="subtopic_name" class="form-label">Sub-topic</label>
          <select name="subtopic_name" id="subtopic_name" class="form-select">
            <option value="">All</option>
            {% for subtopic in subtopics %}
              <option value="{{ subtopic.pk }}" {% if request.GET.subtopic_name == subtopic.pk|stringformat:"s" %}selected{% endif %}>
                {{ subtopic.name }}
              </option>
            {% endfor %}
          </select>
        </div>

        <!-- Submit -->
        <div class="col-md-2 align-self-end">
          <button type="submit" class="btn btn-primary w-100">Apply Filters</button>
        </div>

        <!-- ✅ Clear Filters -->
        <div class="col-md-2 align-self-end">
          <a href="{% url 'view_questions' %}" class="btn btn-outline-secondary w-100">
            Clear Filters
          </a>
        </div>

<div class="row mt-4 mb-4 text-center">
    <div class="col-md-3">
        <div class="alert alert-primary">
            <strong>Total Questions:-</strong> {{ total_questions }}
        </div>
    </div>

    <div class="col-md-3">
        <div class="alert alert-success">
            <strong>Total English:-</strong> {{ total_english }}
        </div>
    </div>

    <div class="col-md-3">
        <div class="alert alert-warning">
            <strong>Total Hindi:-</strong> {{ total_hindi }}
        </div>
    </div>

    <div class="col-md-3">
        <div class="alert alert-danger">
            <strong>Total AI Questions:-</strong> {{ total_ai }}
        </div>
    </div>
</div>


      </div>
    </form>




    {% if grouped_questions %}
    <div class="row">
        {% for base_id, question_group in grouped_questions.items %}
        <div class="row mb-4">

            <!-- English Column -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-light fw-bold">
                        English — Question {% if question_group.original.english %}{{ question_group.original.english.question_number }}{% else %}Not Uploaded{% endif %}
                        <p>Type Of Question --> {{ question_group.original.english.question_sub_type }}</p>
                    </div>
                    <div class="card-body">
                        {% if question_group.original.english %}
                            {% if question_group.original.english.question_sub_type in 'simple_type true_and_false_type fill_in_the_blank_type' %}
                                <p>{{ question_group.original.english.question_part }}</p>
                            {% elif question_group.original.english.question_sub_type == 'r_and_a_type' %}
                                <p>{{ question_group.original.english.question_part_first }}</p>
                                <p style="color: #ea5323;">Assertion - </p>
                                <p>{{ question_group.original.english.assertion }}</p>
                                <p style="color: rgb(0 63 137);">Reason -</p>
                                <p>{{ question_group.original.english.reason }}</p>
                            {% elif question_group.original.english.question_sub_type == 'list_type_1' %}
                                <p><strong>{{ question_group.original.english.question_part_first|default:"-" }}</strong></p>
                                <ol style="list-style: none; padding-left: 0;">
                                  {% for item in question_group.original.english.list_1_items %}
                                      <li style="margin-bottom: 6px;">
                                          <strong>{{ forloop.counter }}.</strong> {{ item }}
                                      </li>
                                  {% endfor %}
                              </ol>

                                <p><strong>{{ question_group.original.english.question_part_third|default:"-" }}</strong></p>

                            {% load custom_tags %}

{% elif question_group.original.english.question_sub_type == 'list_type_2' %}
    <p><strong>{{ question_group.original.english.question_part_first|default:"-" }}</strong></p>

    {% with letters="A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z"|split:"," %}
    <table class="table table-bordered align-middle" style="width:100%; text-align:left;">
        <thead class="table-light">
            <tr>
                <th>{{ question_group.original.english.list_1_name|default:"List-I" }}</th>
                <th>{{ question_group.original.english.list_2_name|default:"List-II" }}</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td style="vertical-align: top;">
                    <ul style="list-style: none; padding-left: 0; margin: 0;">
                        {% for item in question_group.original.english.list_1_items %}
                            <li style="margin-bottom: 6px;">
                                ({{ forloop.counter|to_letter }}). {{ item }}
                            </li>
                        {% endfor %}
                    </ul>
                </td>
                <td style="vertical-align: top;">
                    <ul style="list-style: none; padding-left: 0; margin: 0;">
                        {% for item in question_group.original.english.list_2_items %}
                            <li style="margin-bottom: 6px;">
                                ({{ forloop.counter }}). {{ item }}
                            </li>
                        {% endfor %}
                    </ul>
                </td>
            </tr>
        </tbody>
    </table>
    {% endwith %}


                            {% elif question_group.original.english.question_sub_type == 'statement_type' %}
        <p><strong>{{ question_group.original.english.question_part_first|default:"-" }}</strong></p>
        <table class="table table-bordered">
            <thead class="table-light">
                {% comment %} <tr><th style="width:45%">Statement</th><th style="width:10%" class="text-center">:</th><th style="width:45%">List-II</th></tr> {% endcomment %}
            </thead>
            <tbody style="width:45%">
                {% with s1=question_group.original.english.stmt_line_row1 l1=question_group.original.english.list_2_row1 %}{% if s1 or l1 %}<tr><td>{{ s1|default:"-" }}</td><td class="text-center">:</td><td>{{ l1|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s2=question_group.original.english.stmt_line_row2 l2=question_group.original.english.list_2_row2 %}{% if s2 or l2 %}<tr><td>{{ s2|default:"-" }}</td><td class="text-center">:</td><td>{{ l2|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s3=question_group.original.english.stmt_line_row3 l3=question_group.original.english.list_2_row3 %}{% if s3 or l3 %}<tr><td>{{ s3|default:"-" }}</td><td class="text-center">:</td><td>{{ l3|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s4=question_group.original.english.stmt_line_row4 l4=question_group.original.english.list_2_row4 %}{% if s4 or l4 %}<tr><td>{{ s4|default:"-" }}</td><td class="text-center">:</td><td>{{ l4|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s5=question_group.original.english.stmt_line_row5 l5=question_group.original.english.list_2_row5 %}{% if s5 or l5 %}<tr><td>{{ s5|default:"-" }}</td><td class="text-center">:</td><td>{{ l5|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s6=question_group.original.english.stmt_line_row6 l6=question_group.original.english.list_2_row6 %}{% if s6 or l6 %}<tr><td>{{ s6|default:"-" }}</td><td class="text-center">:</td><td>{{ l6|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s7=question_group.original.english.stmt_line_row7 l7=question_group.original.english.list_2_row7 %}{% if s7 or l7 %}<tr><td>{{ s7|default:"-" }}</td><td class="text-center">:</td><td>{{ l7|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s8=question_group.original.english.stmt_line_row8 l8=question_group.original.english.list_2_row8 %}{% if s8 or l8 %}<tr><td>{{ s8|default:"-" }}</td><td class="text-center">:</td><td>{{ l8|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s9=question_group.original.english.stmt_line_row9 l9=question_group.original.english.list_2_row9 %}{% if s9 or l9 %}<tr><td>{{ s9|default:"-" }}</td><td class="text-center">:</td><td>{{ l9|default:"-" }}</td></tr>{% endif %}{% endwith %}
            </tbody>
        </table>
        <p><strong>{{ question_group.original.english.question_part_third|default:"-" }}</strong></p>
    {% endif %}

    <p>(a) {{ question_group.original.english.answer_option_a }}</p>
    <p>(b) {{ question_group.original.english.answer_option_b }}</p>
    <p>(c) {{ question_group.original.english.answer_option_c }}</p>
    <p>(d) {{ question_group.original.english.answer_option_d }}</p>
    <hr>
    <p><strong>Correct Answer:</strong> {{ question_group.original.english.correct_answer_choice }}</p>
    <p><strong>Solution:</strong> {{ question_group.original.english.correct_answer_description }}</p>
{% else %}
    <p class="text-danger">English version not uploaded.</p>
{% endif %}
                    </div>
                </div>
            </div>

            <!-- Hindi Column -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-light fw-bold">
                        Hindi — Question {% if question_group.original.hindi %}{{ question_group.original.hindi.question_number }}{% else %}Not Uploaded{% endif %}
                        <p>Type Of Question --> {{ question_group.original.hindi.question_sub_type }}</p>
                    </div>
                    <div class="card-body">
                        {% if question_group.original.hindi %}
                            {% if question_group.original.hindi.question_sub_type in 'simple_type true_and_false_type fill_in_the_blank_type' %}
                                <p>{{ question_group.original.hindi.question_part_hi|default:"-" }}</p>
                                
                            {% elif question_group.original.hindi.question_sub_type == 'r_and_a_type' %}
                                <p>{{ question_group.original.hindi.question_part_first_hi|default:"-" }}</p>
                                <p style="color: #ea5323;">Assertion -</p>
                                <p>{{ question_group.original.hindi.assertion_hi|default:"-" }}</p>
                                <p style="color: rgb(0 63 137);">Reason -</p>
                                <p>{{ question_group.original.hindi.reason_hi|default:"-" }}</p>

                            {% elif question_group.original.hindi.question_sub_type == 'list_type_1' %}
                            <p><strong>{{ question_group.original.hindi.question_part_first_hi|default:"-" }}</strong></p>
                            <ol>
                                {% for item in question_group.original.hindi.list_1_items_hi %}
                                    <li>{{ item }}</li>
                                {% endfor %}
                            </ol>
                            <p><strong>{{ question_group.original.hindi.question_part_third_hi|default:"-" }}</strong></p>

                            {% elif question_group.original.hindi.question_sub_type == 'list_type_2' %}
                                <p>{{ question_group.original.hindi.question_part_first_hi|default:"-" }}</p>
                                <table class="table">
                                    <thead><tr><th>List-I (हिंदी)</th><th>List-II (हिंदी)</th></tr></thead>
                                    <tbody><tr>
                                        <td>
                                            <ol>{% for item in question_group.original.hindi|get_list_items_hi:"list_1" %}<li>{{ item }}</li>{% endfor %}</ol>
                                        </td>
                                        <td>
                                            <ol>{% for item in question_group.original.hindi|get_list_items_hi:"list_2" %}<li>{{ item }}</li>{% endfor %}</ol>
                                        </td>
                                    </tr></tbody>
                                </table>
                            {% elif question_group.original.hindi.question_sub_type == 'statement_type' %}
        <p><strong>{{ question_group.original.hindi.question_part_first_hi|default:"-" }}</strong></p>
        <table class="table table-bordered">
            <thead class="table-light">
                {% comment %} <tr><th style="width:45%">वक्तव्य</th><th style="width:10%" class="text-center">:</th><th style="width:45%">List-II</th></tr> {% endcomment %}
            </thead>
            <tbody style="width:45%">
                {% with s1=question_group.original.hindi.stmt_line_row1_hi l1=question_group.original.hindi.list_2_row1_hi %}{% if s1 or l1 %}<tr><td>{{ s1|default:"-" }}</td><td class="text-center">:</td><td>{{ l1|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s2=question_group.original.hindi.stmt_line_row2_hi l2=question_group.original.hindi.list_2_row2_hi %}{% if s2 or l2 %}<tr><td>{{ s2|default:"-" }}</td><td class="text-center">:</td><td>{{ l2|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s3=question_group.original.hindi.stmt_line_row3_hi l3=question_group.original.hindi.list_2_row3_hi %}{% if s3 or l3 %}<tr><td>{{ s3|default:"-" }}</td><td class="text-center">:</td><td>{{ l3|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s4=question_group.original.hindi.stmt_line_row4_hi l4=question_group.original.hindi.list_2_row4_hi %}{% if s4 or l4 %}<tr><td>{{ s4|default:"-" }}</td><td class="text-center">:</td><td>{{ l4|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s5=question_group.original.hindi.stmt_line_row5_hi l5=question_group.original.hindi.list_2_row5_hi %}{% if s5 or l5 %}<tr><td>{{ s5|default:"-" }}</td><td class="text-center">:</td><td>{{ l5|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s6=question_group.original.hindi.stmt_line_row6_hi l6=question_group.original.hindi.list_2_row6_hi %}{% if s6 or l6 %}<tr><td>{{ s6|default:"-" }}</td><td class="text-center">:</td><td>{{ l6|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s7=question_group.original.hindi.stmt_line_row7_hi l7=question_group.original.hindi.list_2_row7_hi %}{% if s7 or l7 %}<tr><td>{{ s7|default:"-" }}</td><td class="text-center">:</td><td>{{ l7|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s8=question_group.original.hindi.stmt_line_row8_hi l8=question_group.original.hindi.list_2_row8_hi %}{% if s8 or l8 %}<tr><td>{{ s8|default:"-" }}</td><td class="text-center">:</td><td>{{ l8|default:"-" }}</td></tr>{% endif %}{% endwith %}
                {% with s9=question_group.original.hindi.stmt_line_row9_hi l9=question_group.original.hindi.list_2_row9_hi %}{% if s9 or l9 %}<tr><td>{{ s9|default:"-" }}</td><td class="text-center">:</td><td>{{ l9|default:"-" }}</td></tr>{% endif %}{% endwith %}
            </tbody>
        </table>
        <p><strong>{{ question_group.original.hindi.question_part_third_hi|default:"-" }}</strong></p>
    {% endif %}

    <p>(a) {{ question_group.original.hindi.answer_option_a_hi }}</p>
    <p>(b) {{ question_group.original.hindi.answer_option_b_hi }}</p>
    <p>(c) {{ question_group.original.hindi.answer_option_c_hi }}</p>
    <p>(d) {{ question_group.original.hindi.answer_option_d_hi }}</p>
    <hr>
    <p><strong>Correct Answer:</strong> {{ question_group.original.hindi.correct_answer_choice }}</p>
    <p><strong>answer_description:</strong> {{ question_group.original.hindi.correct_answer_description_hi|default:"-" }}</p>
{% else %}
    <p class="text-danger">Hindi version not uploaded.</p>
{% endif %}
                    </div>
                </div>
            </div>
{% if question_group.ai_versions_list %}
<div class="text-end mb-2">
    <button type="button"
            class="btn btn-sm btn-dark toggle-ai-btn"
            data-base-id="{{ base_id }}">
        🤖 Show AI Versions
    </button>
</div>

<div id="ai-section-{{ base_id }}" class="ai-section" style="display:none; margin-top:20px;">

    {% for ai in question_group.ai_versions_list %}
    <div class="card mb-3 border border-danger">
        <div class="card-header bg-danger text-white">
            AI Version {{ ai.version }}
        </div>

        <div class="card-body row">

            <!-- English Column -->
            <div class="col-md-6">
                <h6>English (AI)</h6>
                {% if ai.english %}
                    {% if ai.english.question_sub_type in 'simple_type true_and_false_type fill_in_the_blank_type' %}
                        <p>{{ ai.english.question_part|default:"-" }}</p>

                    {% elif ai.english.question_sub_type == 'r_and_a_type' %}
                        <p>{{ ai.english.question_part_first|default:"-" }}</p>
                        <p style="color: #ea5323;">Assertion - </p>
                        <p>{{ ai.english.assertion|default:"-" }}</p>
                        <p style="color: rgb(0 63 137);">Reason - </p>
                        <p>{{ ai.english.reason|default:"-" }}</p>

                    {% elif ai.english.question_sub_type == 'list_type_1' %}
                        <p><strong>{{ ai.english.question_part_first|default:"-" }}</strong></p>
                        <ol style="list-style: none; padding-left: 0;">
                            {% for item in ai.english.list_1_items %}
                                <li style="margin-bottom: 6px;">
                                    <strong>{{ forloop.counter }}.</strong> {{ item }}
                                </li>
                            {% endfor %}
                        </ol>
                        <p><strong>{{ ai.english.question_part_third|default:"-" }}</strong></p>

                    {% elif ai.english.question_sub_type == 'list_type_2' %}
                        <p><strong>{{ ai.english.question_part_first|default:"-" }}</strong></p>
                        <table class="table table-bordered align-middle">
                            <thead class="table-light">
                                <tr>
                                    <th>{{ ai.english.list_1_name|default:"List-I" }}</th>
                                    <th>{{ ai.english.list_2_name|default:"List-II" }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td style="vertical-align: top;">
                                        <ul style="list-style: none; padding-left: 0; margin:0;">
                                            {% for item in ai.english.list_1_items %}
                                                <li style="margin-bottom: 6px;">
                                                    ({{ forloop.counter|to_letter }}) {{ item }}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </td>
                                    <td style="vertical-align: top;">
                                        <ul style="list-style: none; padding-left: 0; margin:0;">
                                            {% for item in ai.english.list_2_items %}
                                                <li style="margin-bottom: 6px;">
                                                    ({{ forloop.counter }}) {{ item }}
                                                </li>
                                            {% endfor %}
                                        </ul>
                                    </td>
                                </tr>
                            </tbody>
                        </table>

                    {% elif ai.english.question_sub_type == 'statement_type' %}
                        <p><strong>{{ ai.english.question_part_first|default:"-" }}</strong></p>
                        <table class="table table-bordered">
                            <tbody>
                                {% with s1=ai.english.stmt_line_row1 l1=ai.english.list_2_row1 %}{% if s1 or l1 %}<tr><td>{{ s1|default:"-" }}</td><td class="text-center">:</td><td>{{ l1|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s2=ai.english.stmt_line_row2 l2=ai.english.list_2_row2 %}{% if s2 or l2 %}<tr><td>{{ s2|default:"-" }}</td><td class="text-center">:</td><td>{{ l2|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s3=ai.english.stmt_line_row3 l3=ai.english.list_2_row3 %}{% if s3 or l3 %}<tr><td>{{ s3|default:"-" }}</td><td class="text-center">:</td><td>{{ l3|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s4=ai.english.stmt_line_row4 l4=ai.english.list_2_row4 %}{% if s4 or l4 %}<tr><td>{{ s4|default:"-" }}</td><td class="text-center">:</td><td>{{ l4|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s5=ai.english.stmt_line_row5 l5=ai.english.list_2_row5 %}{% if s5 or l5 %}<tr><td>{{ s5|default:"-" }}</td><td class="text-center">:</td><td>{{ l5|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s6=ai.english.stmt_line_row6 l6=ai.english.list_2_row6 %}{% if s6 or l6 %}<tr><td>{{ s6|default:"-" }}</td><td class="text-center">:</td><td>{{ l6|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s7=ai.english.stmt_line_row7 l7=ai.english.list_2_row7 %}{% if s7 or l7 %}<tr><td>{{ s7|default:"-" }}</td><td class="text-center">:</td><td>{{ l7|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s8=ai.english.stmt_line_row8 l8=ai.english.list_2_row8 %}{% if s8 or l8 %}<tr><td>{{ s8|default:"-" }}</td><td class="text-center">:</td><td>{{ l8|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s9=ai.english.stmt_line_row9 l9=ai.english.list_2_row9 %}{% if s9 or l9 %}<tr><td>{{ s9|default:"-" }}</td><td class="text-center">:</td><td>{{ l9|default:"-" }}</td></tr>{% endif %}{% endwith %}
                            </tbody>
                        </table>
                        <p><strong>{{ ai.english.question_part_third|default:"-" }}</strong></p>
                    {% endif %}

                    <p>(a) {{ ai.english.answer_option_a }}</p>
                    <p>(b) {{ ai.english.answer_option_b }}</p>
                    <p>(c) {{ ai.english.answer_option_c }}</p>
                    <p>(d) {{ ai.english.answer_option_d }}</p>
                    <hr>
                    <p><strong>Correct Answer:</strong> {{ ai.english.correct_answer_choice }}</p>
                    <p><strong>Solution:</strong> {{ ai.english.correct_answer_description|default:"-" }}</p>
                {% else %}
                    <p class="text-danger">Not available</p>
                {% endif %}
            </div>

            <!-- Hindi Column -->
            <div class="col-md-6">
                <h6>Hindi (AI)</h6>
                {% if ai.hindi %}
                    {% if ai.hindi.question_sub_type in 'simple_type true_and_false_type fill_in_the_blank_type' %}
                        <p>{{ ai.hindi.question_part_hi|default:"-" }}</p>

                    {% elif ai.hindi.question_sub_type == 'r_and_a_type' %}
                        <p>{{ ai.hindi.question_part_first_hi|default:"-" }}</p>
                        <p style="color: #ea5323;">Assertion - </p>
                        <p>{{ ai.hindi.assertion_hi|default:"-" }}</p>
                        <p style="color: rgb(0 63 137);">Reason - </p>
                        <p>{{ ai.hindi.reason_hi|default:"-" }}</p>

                    {% elif ai.hindi.question_sub_type == 'list_type_1' %}
                        <p><strong>{{ ai.hindi.question_part_first_hi|default:"-" }}</strong></p>
                        <ol>
                            {% for item in ai.hindi.list_1_items_hi %}
                                <li>{{ item }}</li>
                            {% endfor %}
                        </ol>
                        <p><strong>{{ ai.hindi.question_part_third_hi|default:"-" }}</strong></p>

                    {% elif ai.hindi.question_sub_type == 'list_type_2' %}
                        <p>{{ ai.hindi.question_part_first_hi|default:"-" }}</p>
                        <table class="table">
                            <thead><tr><th>List-I (हिंदी)</th><th>List-II (हिंदी)</th></tr></thead>
                            <tbody><tr>
                                <td>
                                    <ol>{% for item in ai.hindi|get_list_items_hi:"list_1" %}<li>{{ item }}</li>{% endfor %}</ol>
                                </td>
                                <td>
                                    <ol>{% for item in ai.hindi|get_list_items_hi:"list_2" %}<li>{{ item }}</li>{% endfor %}</ol>
                                </td>
                            </tr></tbody>
                        </table>

                    {% elif ai.hindi.question_sub_type == 'statement_type' %}
                        <p><strong>{{ ai.hindi.question_part_first_hi|default:"-" }}</strong></p>
                        <table class="table table-bordered">
                            <tbody>
                                {% with s1=ai.hindi.stmt_line_row1_hi l1=ai.hindi.list_2_row1_hi %}{% if s1 or l1 %}<tr><td>{{ s1|default:"-" }}</td><td class="text-center">:</td><td>{{ l1|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s2=ai.hindi.stmt_line_row2_hi l2=ai.hindi.list_2_row2_hi %}{% if s2 or l2 %}<tr><td>{{ s2|default:"-" }}</td><td class="text-center">:</td><td>{{ l2|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s3=ai.hindi.stmt_line_row3_hi l3=ai.hindi.list_2_row3_hi %}{% if s3 or l3 %}<tr><td>{{ s3|default:"-" }}</td><td class="text-center">:</td><td>{{ l3|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s4=ai.hindi.stmt_line_row4_hi l4=ai.hindi.list_2_row4_hi %}{% if s4 or l4 %}<tr><td>{{ s4|default:"-" }}</td><td class="text-center">:</td><td>{{ l4|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s5=ai.hindi.stmt_line_row5_hi l5=ai.hindi.list_2_row5_hi %}{% if s5 or l5 %}<tr><td>{{ s5|default:"-" }}</td><td class="text-center">:</td><td>{{ l5|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s6=ai.hindi.stmt_line_row6_hi l6=ai.hindi.list_2_row6_hi %}{% if s6 or l6 %}<tr><td>{{ s6|default:"-" }}</td><td class="text-center">:</td><td>{{ l6|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s7=ai.hindi.stmt_line_row7_hi l7=ai.hindi.list_2_row7_hi %}{% if s7 or l7 %}<tr><td>{{ s7|default:"-" }}</td><td class="text-center">:</td><td>{{ l7|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s8=ai.hindi.stmt_line_row8_hi l8=ai.hindi.list_2_row8_hi %}{% if s8 or l8 %}<tr><td>{{ s8|default:"-" }}</td><td class="text-center">:</td><td>{{ l8|default:"-" }}</td></tr>{% endif %}{% endwith %}
                                {% with s9=ai.hindi.stmt_line_row9_hi l9=ai.hindi.list_2_row9_hi %}{% if s9 or l9 %}<tr><td>{{ s9|default:"-" }}</td><td class="text-center">:</td><td>{{ l9|default:"-" }}</td></tr>{% endif %}{% endwith %}
                            </tbody>
                        </table>
                        <p><strong>{{ ai.hindi.question_part_third_hi|default:"-" }}</strong></p>
                    {% endif %}

                    <p>(a) {{ ai.hindi.answer_option_a_hi }}</p>
                    <p>(b) {{ ai.hindi.answer_option_b_hi }}</p>
                    <p>(c) {{ ai.hindi.answer_option_c_hi }}</p>
                    <p>(d) {{ ai.hindi.answer_option_d_hi }}</p>
                    <hr>
                    <p><strong>Correct Answer:</strong> {{ ai.hindi.correct_answer_choice }}</p>
                    <p><strong>Solution:</strong> {{ ai.hindi.correct_answer_description_hi|default:"-" }}</p>
                {% else %}
                    <p class="text-danger">Not available</p>
                {% endif %}
            </div>

        </div>
    </div>
    {% endfor %}

</div>
{% endif %}
            <!-- ✅ Common Meta Information Card -->
            <div class="col-md-12 mt-3">
                <div class="card">
                    <div class="card-body row">
                        <div class="col-md-6">
    <p><strong>Marks:</strong> {{ question_group.original.english.marks }}</p>
    <p><strong>Negative Marks:</strong> {{ question_group.original.english.negative_marks }}</p>
    <p><strong>Degree of Difficulty:</strong> {{ question_group.original.english.degree_of_difficulty }}</p>
    <p><strong>Elimination Tactics Degree:</strong> {{ question_group.original.english.elim_tactics_degree }}</p>
    <p><strong>Current Relevance:</strong> {{ question_group.original.english.current_relevance }}</p>
    <p><strong>Current Relevance Topic Explanation:</strong> {{ question_group.original.english.current_relevance_topic }}</p>
    <p><strong>Evergreen Index:</strong> {{ question_group.original.english.evergreen_index }}</p>

    <!-- ✅ Question Source -->
    <p><strong>Question Source:</strong> {{ question_group.original.english.type_of_question }} ({{ question_group.original.english.get_type_of_question_display }})</p>
    <p><strong>Exam Year:</strong> {{ question_group.original.english.exam_year|default:"-" }}</p>

    <!-- ✅ Keywords -->
    <p><strong>Keywords:</strong> 
        {% if question_group.original.english.key_words %}
            {{ question_group.original.english.key_words }}
        {% else %}
            <span class="text-muted">-</span>
        {% endif %}
    </p>

    <p><strong>Created At:</strong> {{ question_group.original.english.created_at|date:"Y-m-d H:i" }}</p>
    <p><strong>Created By:</strong> {{ question_group.original.english.created_by }}</p>
</div>


                        <div class="col-md-6">
                            <p><strong>Area Name(s):</strong> {% for area in question_group.original.english.area_name.all %}{{ area.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                            <p><strong>Section Name(s):</strong> {% for section in question_group.original.english.section_name.all %}{{ section.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                            <p><strong>Part Name(s):</strong> {% for part in question_group.original.english.part_name.all %}{{ part.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                            <p><strong>Chapter Name(s):</strong> {% for chapter in question_group.original.english.chapter_name.all %}{{ chapter.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                            <p><strong>Topic Name(s):</strong> {% for topic in question_group.original.english.topic_name.all %}{{ topic.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
                            <p><strong>Sub-topic Name(s):</strong> {% for subtopic in question_group.original.english.subtopic_name.all %}{{ subtopic.name }}{% if not forloop.last %}, {% endif %}{% endfor %}</p>
<p><strong>Sub-topic Short Code(s):</strong>
    {% for subtopic in question_group.original.english.subtopic_name.all %}
        {{ subtopic.sub_topic_short_Code }}{% if not forloop.last %}, {% endif %}
    {% empty %}
        -
    {% endfor %}
</p>

                            <!-- ✅ Exams -->
                            <p><strong>Exam Name(s):</strong>
                                {% for exam in question_group.original.english.exam_name.all %}
                                    {{ exam.name }}{% if exam.exam_code %} ({{ exam.exam_code }}){% endif %}
                                    {% if not forloop.last %}, {% endif %}
                                {% empty %}
                                    -
                                {% endfor %}
                            </p>
                        </div>


                        <div class="col-12 text-end mt-3">
  {# Safe URL capture to avoid NoReverseMatch if routes aren't defined yet #}
  {% url 'edit-statement-type-question' question_group.original.english.pk as edit_stmt_url %}
  {% url 'delete-statement-type-question' question_group.original.english.pk as del_stmt_url %}

  {% if question_group.original.english.question_sub_type == 'statement_type' %}
      {% if edit_stmt_url %}
        <a href="{{ edit_stmt_url }}" class="btn btn-primary me-2">✏️ Edit</a>
      {% endif %}
      {% if del_stmt_url %}
        <a href="{{ del_stmt_url }}" class="btn btn-danger"
           onclick="return confirm('Are you sure you want to delete this Statement Type Question?');">🗑️ Delete</a>
      {% endif %}

  {% elif question_group.original.english.question_sub_type == 'simple_type' %}
      <a href="{% url 'edit-simple-type-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-simple-type-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this Simple Type Question?');">🗑️ Delete</a>

  {% elif question_group.original.english.question_sub_type == 'r_and_a_type' %}
      <a href="{% url 'edit-r-and-a-type-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-r-and-a-type-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this R and A Type Question?');">🗑️ Delete</a>

  {% elif question_group.original.english.question_sub_type == 'list_type_1' %}
      <a href="{% url 'edit-list-type-1-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-list-type-1-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this List Type 1 Question?');">🗑️ Delete</a>

  {% elif question_group.original.english.question_sub_type == 'list_type_2' %}
      <a href="{% url 'edit-list-type-2-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-list-type-2-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this List Type 2 Question?');">🗑️ Delete</a>

  {% elif question_group.original.english.question_sub_type == 'true_and_false_type' %}
      <a href="{% url 'edit-true-and-false-type-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-true-and-false-type-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this True/False Question?');">🗑️ Delete</a>

  {% elif question_group.original.english.question_sub_type == 'fill_in_the_blank_type' %}
      <a href="{% url 'edit-fill-in-the-blank-question' question_group.original.english.pk %}" class="btn btn-primary me-2">✏️ Edit</a>
      <a href="{% url 'delete-fill-in-the-blank-question' question_group.original.english.pk %}" class="btn btn-danger" onclick="return confirm('Are you sure you want to delete this Fill in the Blank Question?');">🗑️ Delete</a>
  {% endif %}
</div>

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

        </div>
        {% endfor %}
    </div>

<!-- Pagination Controls -->
<div class="pagination mt-4">
    <!-- First Page Link -->
    <span class="page-link {% if not page_obj.has_previous %}disabled{% endif %}">
        <a href="?page=1" class="page-link">First</a>
    </span>
    
    <!-- Previous Page Link -->
    <span class="page-link {% if not page_obj.has_previous %}disabled{% endif %}">
        <a href="{% if page_obj.has_previous %}?page={{ page_obj.previous_page_number }}{% else %}#{% endif %}" class="page-link">Previous</a>
    </span>
    
    <!-- Page Number -->
    <span class="page-link">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
    
    <!-- Next Page Link -->
    <span class="page-link {% if not page_obj.has_next %}disabled{% endif %}">
        <a href="{% if page_obj.has_next %}?page={{ page_obj.next_page_number }}{% else %}#{% endif %}" class="page-link">Next</a>
    </span>
    
    <!-- Last Page Link -->
    <span class="page-link {% if not page_obj.has_next %}disabled{% endif %}">
        <a href="?page={{ page_obj.paginator.num_pages }}" class="page-link">Last</a>
    </span>
</div>



    {% else %}
    <p class="text-center">No questions available.</p>
    {% endif %}
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {

    document.querySelectorAll(".toggle-ai-btn").forEach(function(button) {

        button.addEventListener("click", function() {

            const baseId = this.getAttribute("data-base-id");
            const section = document.getElementById("ai-section-" + baseId);

            if (!section) return;

            const isHidden = window.getComputedStyle(section).display === "none";

            if (isHidden) {
                section.style.display = "block";
                this.innerHTML = "❌ Hide AI Versions";
            } else {
                section.style.display = "none";
                this.innerHTML = "🤖 Show AI Versions";
            }

        });

    });

});
</script>
{% endblock %}