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

{% block page_title %}
District Performance Trend – {{ district.name }}
{% endblock %}

{% block content %}

<style>
@media print {
  button, .btn { display: none !important; }
  body { zoom: 90%; }
}
</style>

<div class="container mt-4">


  <!-- ================= HEADER ================= -->

<a href="{% url 'exams:district_trend_print' %}?district={{ district.id }}&start={{ start }}&end={{ end }}&exam_type_id={{ exam_type_id }}"
   class="btn btn-danger btn-sm">
  <i class="fas fa-print"></i> PRINT
</a>

<a href="{% url 'exams:district_trend_excel' %}?district={{ district.id }}&start={{ start }}&end={{ end }}&exam_type_id={{ exam_type_id }}"

   class="btn btn-success btn-sm">
  <i class="fas fa-excel"></i> Excel </a>



<!-- <a href="{% url 'exams:district_trend_pdf' %}?district={{ district.id }}&start={{ start }}&end={{ end }}&exam_type_id={{ exam_type_id }}"
   class="btn btn-warning btn-sm">
  <i class="fas fa-pdf"></i> PDF </a> -->

  <!-- HEADER -->
  <div class="card mb-3">
    <div class="card-body text-center">
      <h4 class="fw-bold text-primary">
        {{ district.name }} – {{ exam_type.name }}
      </h4>
      <p class="fw-bold">
        GPA Performance Trend ({{ start }} – {{ end }})
      </p>
    </div>
  </div>

  <!-- TABLE -->
  <div class="card">
    <div class="card-header bg-success text-white fw-bold">
      District GPA Trend Summary
    </div>

    <div class="card-body p-0">
      <table class="table table-bordered table-striped mb-0">
        <thead class="table-dark text-center">
          <tr>
            <th>Year</th>
            <th>I</th><th>II</th><th>III</th><th>IV</th><th>0</th>
            <th>Total</th>
            <th>#I–III</th><th>%I–III</th>
            <th>#I–IV</th><th>%I–IV</th>
            <th>GPA</th>
            <th>Trend</th>
            <th>Remark</th>
          </tr>
        </thead>
        <tbody>
          {% for r in rows %}
          <tr class="text-center">
            <td class="fw-bold">{{ r.year }}</td>
            <td>{{ r.d1 }}</td>
            <td>{{ r.d2 }}</td>
            <td>{{ r.d3 }}</td>
            <td>{{ r.d4 }}</td>
            <td class="text-danger fw-bold">{{ r.d0 }}</td>
            <td class="fw-bold">{{ r.total }}</td>
            <td class="text-success fw-bold">{{ r.pass_i_iii }}</td>
            <td>{{ r.pass_i_iii_pct }}%</td>
            <td class="text-primary fw-bold">{{ r.pass_i_iv }}</td>
            <td>{{ r.pass_i_iv_pct }}%</td>
            <td class="fw-bold">{{ r.gpa }}</td>
            <td>{{ r.icon }}</td>
            <td class="fw-bold
              {% if r.remark == 'RISE' %}text-success
              {% elif r.remark == 'DROP' %}text-danger
              {% elif r.remark == 'SAME' %}text-warning
              {% else %}text-secondary{% endif %}
            ">
              {{ r.remark }}
            </td>
          </tr>
          {% empty %}
          <tr>
            <td colspan="14" class="text-center text-danger fw-bold">
              No data available
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- BACK -->
  <div class="mt-3 text-end">
    <a href="javascript:window.history.back()" class="btn btn-secondary">
      ← Back
    </a>
  </div>

</div>

{% endblock %}