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

{% block page_title %}
{{ subject.subject_code }} School Ranking (Extended) - {{ project.name }}
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-primary">
                <i class="fas fa-chart-line"></i>
                {{ subject.subject_code }} - {{ subject.subject_name_eng }}
            </h4>
            <p class="text-muted mb-0">{{ project.name }} - {{ project.year }}</p>
            <span class="badge bg-success">Extended Layout - Detailed Grade Breakdown</span>
            {% if region_id %}
                <span class="badge bg-info">Region Filter Applied</span>
            {% endif %}
            {% if district_id %}
                <span class="badge bg-info">District Filter Applied</span>
            {% endif %}
        </div>
        <div>
            <button onclick="window.print()" class="btn btn-secondary">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="?format=excel&layout=extended{% if region_id %}&region_id={{ region_id }}{% endif %}{% if district_id %}&district_id={{ district_id }}{% endif %}" 
               class="btn btn-success">
                <i class="fas fa-file-excel"></i> Excel
            </a>
            <a href="?format=pdf&layout=extended{% if region_id %}&region_id={{ region_id }}{% endif %}{% if district_id %}&district_id={{ district_id }}{% endif %}" 
               class="btn btn-danger">
                <i class="fas fa-file-pdf"></i> PDF
            </a>
            <a href="{% url 'exams:subject_school_ranking_page' project.project_code %}" 
               class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Subjects
            </a>
        </div>
    </div>

    <div class="card">
        <div class="card-header bg-primary text-white">
            <h5 class="mb-0">School Ranking by Subject Performance - Detailed Grade Analysis</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover">
                    <thead class="table-dark">
                        <tr>
                            <th rowspan="2" width="50">Rank</th>
                            <th rowspan="2">School Code</th>
                            <th rowspan="2">School Name</th>
                            <th rowspan="2">District</th>
                            <th rowspan="2">Region</th>
                            <th rowspan="2">Ownership</th>
                            <th rowspan="2" width="60">Total</th>
                            <th colspan="7" class="text-center">Grade Distribution</th>
                            <th rowspan="2" width="60">Passed</th>
                            <th rowspan="2" width="70">Pass %</th>
                            <th rowspan="2" width="80">Avg Score</th>
                            <th rowspan="2" width="100">GPA</th>
                            <th rowspan="2" width="80">Grade</th>
                        </tr>
                        <tr class="table-dark">
                            <th class="text-center" style="background-color: #28a745;">A</th>
                            <th class="text-center" style="background-color: #17a2b8;">B</th>
                            <th class="text-center" style="background-color: #007bff;">C</th>
                            <th class="text-center" style="background-color: #ffc107;">D</th>
                            <th class="text-center" style="background-color: #6c757d;">E</th>
                            <th class="text-center" style="background-color: #6f42c1;">S</th>
                            <th class="text-center" style="background-color: #dc3545;">F</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for school in ranking_data %}
                        <tr>
                            <td class="text-center fw-bold">
                                <span class="badge {% if school.rank <= 3 %}bg-success{% elif school.rank <= 10 %}bg-warning{% else %}bg-secondary{% endif %}">
                                    {{ school.rank }}
                                </span>
                            </td>
                            <td><code>{{ school.school_code }}</code></td>
                            <td>{{ school.school_short|default:school.school_name }}</td>
                            <td>{{ school.district }}</td>
                            <td>{{ school.region }}</td>
                            <td>{{ school.ownership }}</td>
                            <td class="text-center">{{ school.total_students }}</td>
                            <td class="text-center">{{ school.A }}</td>
                            <td class="text-center">{{ school.B }}</td>
                            <td class="text-center">{{ school.C }}</td>
                            <td class="text-center">{{ school.D }}</td>
                            <td class="text-center">{{ school.E }}</td>
                            <td class="text-center">{{ school.S }}</td>
                            <td class="text-center">{{ school.F }}</td>
                            <td class="text-center">{{ school.passed }}</td>
                            <td class="text-center">
                                <span class="badge {% if school.passed_pct >= 75 %}bg-success{% elif school.passed_pct >= 50 %}bg-warning{% else %}bg-danger{% endif %}">
                                    {{ school.passed_pct }}%
                                </span>
                            </td>
                            <td class="text-center">{{ school.avg_score|floatformat:2 }}</td>
                            <td class="text-center">
                                <strong>{{ school.gpa|floatformat:4 }}</strong>
                            </td>
                            <td class="text-center">
                                <span class="badge {% if school.grade == 'A' %}bg-success{% elif school.grade == 'B' %}bg-info{% elif school.grade == 'C' %}bg-primary{% elif school.grade == 'D' %}bg-warning{% else %}bg-danger{% endif %}">
                                    {{ school.grade }}
                                </span>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="20" class="text-center text-muted">
                                No schools found for this subject.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            
            {% if ranking_data %}
            <div class="mt-3 text-muted">
                <small>Total Schools: {{ total_schools }}</small>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<style>
    @media print {
        .btn, .btn-group {
            display: none !important;
        }
        .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;
        }
        .badge {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
    
    .table th, .table td {
        vertical-align: middle;
    }
    
    .table thead th {
        white-space: nowrap;
    }
</style>
{% endblock %}