{% extends "exams/base.html" %}
{% load static %}
{% load math_tags %}
{% 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">
      <i class="fas fa-chart-line"></i>
      DISTRICT PERFORMANCE TREND – {{ district.name }}
    </h4>

    <div class="btn-group">
      <a href="{% url 'exams:district_trend_pdf' %}?district={{ district.id }}"
         class="btn btn-danger btn-sm">
        <i class="fas fa-file-pdf"></i> PDF
      </a>

      <a href="{% url 'exams:district_trend_excel' %}?district={{ district.id }}"
         class="btn btn-success btn-sm">
        <i class="fas fa-file-excel"></i> Excel
      </a>

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

      {% if rows %}
      <div class="table-responsive">
        <table class="table table-bordered table-striped table-sm" id="trendTable">
          <thead class="table-dark">
            <tr>
              <th class="text-center">Year</th>
              <th class="text-center">Average Score</th>
              <th class="text-center">Grade</th>
              <th class="text-center">Total Candidates</th>
            </tr>
          </thead>

          <tbody>
            {% for r in rows %}
            <tr>
              <td class="text-center fw-bold">{{ r.year }}</td>
              <td class="text-center">{{ r.avg }}</td>
              <td class="text-center fw-bold">{{ r.grade }}</td>
              <td class="text-center">{{ r.total }}</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
        <div class="alert alert-warning mb-0">
          No trend data available for this district.
        </div>
      {% endif %}

    </div>
  </div>

</div>

<!-- DataTables -->
<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 () {
    $('#trendTable').DataTable({
        responsive: true,
        pageLength: 10,
        order: [[0, "asc"]],
        paging: true,
        searching: false,
        info: false
    });
});
</script>

{% endblock %}