{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">
<h3 class="fw-bold text-primary mb-3">



    SUBJECT SUMMARY – {{ year }}{% if subject == "ALL" %} (ALL SUBJECTS) {% else %} – {{ subject }} {% endif %}



<a href="{% url 'exams:regional_subject_school_ranking_pdf' %}?region={{ region.id }}&year={{ year }}&subject={{ subject_code }}" class="btn btn-danger btn-sm">
Export PDF
</a>



<a href="/reports/reg-subj-excel/?region={{ region.id }}&year={{ year }}" 
   class="btn btn-success btn-sm">Export Excel</a>

           <a href="{% url 'exams:regionwise' %}" class="btn btn-primary">
    <i class="fas fa-long-arrow-alt-left"></i> BACK
    </a>
</h3>
        <div class="card">
        <div class="card-header">
        <div class="card-body">
<table class="table table-bordered table-striped table-sm" id="summaryTable">
    <thead class="table-dark">
        <tr>
            <th>Subject</th>
            <th>Name</th>
            <th>Total</th>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
            <th>E</th>
            <th>Pass A–C</th>
            <th>% Pass</th>
        </tr>
    </thead>

    <tbody>
        {% for row in summary %}
        {% with pass_ac=row.A|add:row.B|add:row.C %}
        <tr>
            <td>{{ row.subject_code }}</td>
            <td>{{ row.subject_name_sw }}</td>
            <td>{{ row.total_std }}</td>
            <td>{{ row.A }}</td>
            <td>{{ row.B }}</td>
            <td>{{ row.C }}</td>
            <td>{{ row.D }}</td>
            <td>{{ row.E }}</td>

            <td>{{ row.pass_ac }}</td>
            <td>{{ row.pass_pct }}%</td>

        </tr>
        {% endwith %}
        {% endfor %}
    </tbody>
</table>
</div>
</div>
</div>
</div>
<!-- jQuery (required by DataTables) -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- DataTables JS -->
<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 () {
    $('#summaryTable').DataTable({
        responsive: true,
        pageLength: 20
    });
});
</script>


{% endblock %}