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

{% block page_title %}
School Performance Trend – {{ school.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:school_trend_print' %}
?school={{ school.school_code }}
&exam_type_id={{ exam_type_id }}
&start={{ start }}
&end={{ end }}"
target="_blank"
class="btn btn-danger btn-sm">
  <i class="fas fa-print"></i> PRINT
</a>





  <div class="card mb-3">
    <div class="card-body text-center">
      <h4 class="fw-bold text-primary">{{ school.name }}</h4>
      <p class="mb-1">
        Ward: <strong>{{ school.ward.name }}</strong> |
        District: <strong>{{ school.district.name }}</strong> |
        Region: <strong>{{ school.district.region.name }}</strong>
      </p>
      <h4 class="fw-bold text-primary">EXAM: {{ exam_type }}</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">
      School 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>Pass I–III</th>
  <th>Pass 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-primary fw-bold">{{ r.pass_i_iv }}</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 %}