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

{% block page_title %}
School Subject 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_subject_trend_print' %}
?school={{ school.school_code }}
&subject={{ subject.subject_code }}
&exam_type_id={{ exam_type_id }}
&start={{ start }}
&end={{ end }}"
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>
      <p class="fw-bold">
        Subject Performance Trend ({{ start }} – {{ end }})
      </p>

      <p class="fw-bold text-info">
        Subject: {{ subject.subject_name_eng }} ({{ subject.subject_code }})
      </p>

    </div>
  </div>

  <!-- ================= TABLE ================= -->

  <div class="card">
    <div class="card-header bg-info text-white fw-bold">
      Subject 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>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>F</th>
            <th>#A–C</th>
            <th>%A–C</th>
            <th>#A–D</th>
            <th>%A–D</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.a }}</td>
            <td>{{ r.b }}</td>
            <td>{{ r.c }}</td>
            <td>{{ r.d }}</td>
            <td class="text-danger fw-bold">{{ r.f }}</td>

            <td class="fw-bold text-success">{{ r.ac }}</td>
            <td class="fw-bold text-success">{{ r.pct_ac }}%</td>

            <td class="fw-bold text-primary">{{ r.ad }}</td>
            <td class="fw-bold text-primary">{{ r.pct_ad }}%</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="13" class="text-center text-danger fw-bold">
              No data available for selected subject, exam type, or year range
            </td>
          </tr>
        {% endfor %}
        </tbody>

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


<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>

{% endblock %}