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

{% block page_title %}
region Performance Trend – {{ region.name }}
{% endblock %}

{% block content %}


<style>
@media print {
  body {
    zoom: 90%;
  }

  button, .btn {
    display: none !important;
  }

  .card {
    border: none !important;
  }
}
</style>


<div class="container mt-4">

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

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

<a href="{% url 'exams:region_trend_excel' %}?region={{ region.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:region_trend_pdf' %}?region={{ region.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>



<div class="card mb-3">
  <div class="card-body text-center">
    <h4 class="fw-bold text-primary">
      {{ region.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">
      region 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 class="text-success">{{ r.pass_i_iii_pct }}%</td>
<td class="text-primary fw-bold">{{ r.pass_i_iv }}</td>
<td class="text-primary">{{ 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="12" class="text-center text-danger fw-bold">
    No data available
  </td>
</tr>
{% endfor %}
</tbody>

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

  <!-- ================= LEGEND ================= -->
  <div class="mt-3">
    <span class="fw-bold">Legend:</span>
    <span class="text-success ms-2">▲ Rise = GPA decreased (improved)</span> |
    <span class="text-danger ms-2">▼ Drop = GPA increased (worsened)</span> |
    <span class="text-warning ms-2">■ Same</span> |
    <span class="text-secondary ms-2">◎ Start</span>
  </div>

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

</div>



<script>
function printTrend(){
    window.print();
}
</script>


{% endblock %}