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

{% block content %}

<div class="container mt-4">

  <!-- ================= HEADER ================= -->
  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4 class="fw-bold text-primary">
      DISTRICT SUBJECT SUMMARY – {{ district.name }} – {{ year }}
      {% if subject != "ALL" %}
        ({{ subject }})
      {% endif %}
    </h4>

    <div class="btn-group">

      <a href="{% url 'exams:districtwise' %}" class="btn btn-primary btn-sm">
        <i class="fas fa-long-arrow-alt-left"></i> BACK
      </a>
    </div>
  </div>

  <!-- ================= TABLE ================= -->
  <div class="card shadow-sm">
    <div class="card-body p-0">

      <div class="table-responsive">
        <table class="table table-bordered table-striped table-sm mb-0" id="subjectSummaryTable">

          <thead class="table-dark text-center">
            <tr>
              <th rowspan="2">Code</th>
              <th rowspan="2">Subject</th>
              <th rowspan="2">Total</th>
              <th colspan="5">Grade Distribution</th>
              <th rowspan="2">Pass A–C</th>
              <th rowspan="2">% Pass</th>
              <th rowspan="2">Average</th>
            </tr>
            <tr>
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
              <th>E</th>
            </tr>
          </thead>

          <tbody>
            {% for r in rows %}
            <tr class="text-center">
              <td>{{ r.subject_code }}</td>
              <td class="text-start">{{ r.subject_name_sw }}</td>
              <td>{{ r.total_std }}</td>

              <td>{{ r.A }}</td>
              <td>{{ r.B }}</td>
              <td>{{ r.C }}</td>
              <td>{{ r.D }}</td>
              <td>{{ r.E }}</td>

              <td class="fw-bold">{{ r.pass_ac }}</td>
              <td class="fw-bold">{{ r.pass_pct }}%</td>
              <td>{{ r.avg_subj }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="11" class="text-center text-muted">
                No data available for the selected criteria.
              </td>
            </tr>
            {% endfor %}
          </tbody>

        </table>
      </div>

    </div>
  </div>

</div>

<!-- ================= DATATABLE ================= -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function () {
  $('#subjectSummaryTable').DataTable({
    responsive: true,
    pageLength: 25,
    order: [[9, "desc"]]  // sort by % pass
  });
});
</script>

{% endblock %}