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

{% block title %}School Ranking{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>School Ranking</h2>
        <div>
            <button onclick="window.print()" class="btn btn-primary">
                <i class="fas fa-print"></i> Print
            </button>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h4 class="mb-0">School Performance Ranking</h4>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th width="50">Rank</th>
                            <th>Code</th>
                            <th>School Name</th>
                            <th>District</th>
                            <th>Region</th>
                            <th width="60">I</th>
                            <th width="60">II</th>
                            <th width="60">III</th>
                            <th width="60">IV</th>
                            <th width="60">0</th>
                            <th width="80">Pass I-IV</th>
                            <th width="80">Pass %</th>
                            <th width="100">GPA</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for row in rows %}
                        <tr>
                            <td class="text-center fw-bold">
                                {% if row.rank %}
                                    <span class="badge {% if row.rank <= 3 %}bg-success{% elif row.rank <= 10 %}bg-warning{% else %}bg-secondary{% endif %}">
                                        {{ row.rank }}
                                    </span>
                                {% else %}
                                    -
                                {% endif %}
                            </td>
                            <td><code>{{ row.code|default:row.cno|default:"-" }}</code></td>
                            <td>{{ row.name|default:"-" }}</td>
                            <td>{{ row.district|default:"-" }}</td>
                            <td>{{ row.region|default:"-" }}</td>
                            <td class="text-center">{{ row.d1|default:row.i_t|default:0 }}</td>
                            <td class="text-center">{{ row.d2|default:row.ii_t|default:0 }}</td>
                            <td class="text-center">{{ row.d3|default:row.iii_t|default:0 }}</td>
                            <td class="text-center">{{ row.d4|default:row.iv_t|default:0 }}</td>
                            <td class="text-center">{{ row.d0|default:row.f_t|default:0 }}</td>
                            <td class="text-center">{{ row.pass|default:row.pass_i_iv_t|default:0 }}</td>
                            <td class="text-center">{{ row.pass_pct|default:row.pass_i_iv_pct|default:0 }}%</td>
                            <td class="text-center">
                                <strong>{{ row.gpa|floatformat:4|default:"0.0000" }}</strong>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="13" class="text-center text-muted">
                                No school ranking data available.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if rows %}
            <div class="mt-3 text-muted">
                <small>Total Schools: {{ rows|length }}</small>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    @media print {
        .btn {
            display: none;
        }
        .card-header {
            background-color: #1a3e6f !important;
            color: white !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
        .table-dark {
            background-color: #1a3e6f !important;
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
    
    .table th, .table td {
        vertical-align: middle;
    }
    
    .badge {
        font-size: 0.85em;
        padding: 5px 8px;
    }
</style>
{% endblock %}