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

{% block content %}
<div class="container-fluid px-4 mt-4">
    
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="mb-1 fw-bold">
                <i class="fas fa-chart-line text-primary me-2"></i>
                Subject School Ranking Report
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-book me-1"></i>{{ subject.subject_code }} - {{ subject.subject_name_eng }} | 
                <i class="fas fa-calendar me-1"></i>{{ project.name }} ({{ project.year }})
            </p>
        </div>
        <div>
            <a href="{% url 'exams:subject_school_ranking_page' project.project_code %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
            <button onclick="window.print();" class="btn btn-primary ms-2">
                <i class="fas fa-print me-2"></i>Print
            </button>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <h6 class="card-title">Total Schools</h6>
                    <h2 class="mb-0">{{ total_schools }}</h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h6 class="card-title">Average GPA</h6>
                    <h2 class="mb-0">
                        {% with total_gpa=0 %}
                            {% for school in ranking_data %}
                                {% with total_gpa=total_gpa|add:school.gpa %}
                                {% endwith %}
                            {% endfor %}
                        {% endwith %}
                        {{ ranking_data|length|yesno:"-,0" }}
                    </h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h6 class="card-title">Average Pass Rate</h6>
                    <h2 class="mb-0">
                        {% with total_pass=0 %}
                            {% for school in ranking_data %}
                                {% with total_pass=total_pass|add:school.passed_pct %}
                                {% endwith %}
                            {% endfor %}
                        {% endwith %}
                        {% if ranking_data %}
                            {{ ranking_data|length|add:0 }}
                        {% else %}
                            0
                        {% endif %}%
                    </h2>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <h6 class="card-title">Total Students</h6>
                    <h2 class="mb-0">
                        {% with total_students=0 %}
                            {% for school in ranking_data %}
                                {% with total_students=total_students|add:school.total_students %}
                                {% endwith %}
                            {% endfor %}
                        {% endwith %}
                        {{ ranking_data|length|yesno:"-,0" }}
                    </h2>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters Summary -->
    <div class="alert alert-info">
        <strong>Filters Applied:</strong>
        {% if region_id %} Region: {{ ranking_data.0.region|default:"Selected" }}{% else %} Region: All{% endif %} |
        {% if district_id %} District: {{ ranking_data.0.district|default:"Selected" }}{% else %} District: All{% endif %} |
        Layout: {{ layout|title }}
    </div>

    <!-- Ranking Table -->
    <div class="card shadow mb-4">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-table me-2"></i>School Rankings by GPA (Lower is Better)
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-striped" id="rankingTable">
                    <thead class="table-dark">
                        <tr>
                            <th>Rank</th>
                            <th>School Code</th>
                            <th>School Name</th>
                            <th>District</th>
                            <th>Region</th>
                            <th>Ownership</th>
                            <th>Total</th>
                            <th>Passed</th>
                            <th>Pass %</th>
                            <th>Avg Score</th>
                            <th>GPA</th>
                            <th>Grade</th>
                            {% if layout == 'extended' %}
                                {% if academic_level_id == 2 %}
                                    <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>S</th><th>F</th>
                                {% elif academic_level_id == 1 %}
                                    <th>A</th><th>B</th><th>C</th><th>D</th><th>F</th>
                                {% else %}
                                    <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th>
                                {% endif %}
                            {% endif %}
                        </tr>
                    </thead>
                    <tbody>
                        {% for school in ranking_data %}
                        <tr>
                            <td class="text-center">{{ school.rank }}</td>
                            <td>{{ school.school_code }}</td>
                            <td>{{ school.school_short|truncatechars:30 }}</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.passed }}</td>
                            <td class="text-center">{{ school.passed_pct }}%</td>
                            <td class="text-center">{{ school.avg_score|floatformat:2 }}</td>
                            <td class="text-center fw-bold" style="background-color: {{ school.gpa_color }}20;">
                                {{ school.gpa|floatformat:4 }}
                            </td>
                            <td class="text-center">
                                <span class="badge" style="background-color: {{ school.gpa_color }};">
                                    {{ school.grade }}
                                </span>
                            </td>
                            {% if layout == 'extended' %}
                                {% if academic_level_id == 2 %}
                                    <td class="text-center">{{ school.A|default:"0" }}</td>
                                    <td class="text-center">{{ school.B|default:"0" }}</td>
                                    <td class="text-center">{{ school.C|default:"0" }}</td>
                                    <td class="text-center">{{ school.D|default:"0" }}</td>
                                    <td class="text-center">{{ school.E|default:"0" }}</td>
                                    <td class="text-center">{{ school.S|default:"0" }}</td>
                                    <td class="text-center">{{ school.F|default:"0" }}</td>
                                {% elif academic_level_id == 1 %}
                                    <td class="text-center">{{ school.A|default:"0" }}</td>
                                    <td class="text-center">{{ school.B|default:"0" }}</td>
                                    <td class="text-center">{{ school.C|default:"0" }}</td>
                                    <td class="text-center">{{ school.D|default:"0" }}</td>
                                    <td class="text-center">{{ school.F|default:"0" }}</td>
                                {% else %}
                                    <td class="text-center">{{ school.A|default:"0" }}</td>
                                    <td class="text-center">{{ school.B|default:"0" }}</td>
                                    <td class="text-center">{{ school.C|default:"0" }}</td>
                                    <td class="text-center">{{ school.D|default:"0" }}</td>
                                    <td class="text-center">{{ school.E|default:"0" }}</td>
                                {% endif %}
                            {% endif %}
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="20" class="text-center py-4">
                                <i class="fas fa-info-circle me-2"></i>No data available for the selected filters
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Notes -->
    <div class="alert alert-secondary">
        <strong>Notes:</strong>
        <ul class="mb-0 mt-2">
            <li>Schools are ranked by GPA (Lower GPA = Better Performance)</li>
            <li>Only schools with valid scores are included in the ranking</li>
            <li>"Total" refers to the number of students who sat for the exam</li>
            <li>"Passed" refers to students who achieved passing grades based on the academic level</li>
            <li>
                <strong>GPA Scale:</strong>
                {% if academic_level_id == 2 %}
                    A=1, B=2, C=3, D=4, E=5, S=6, F=7
                {% elif academic_level_id == 1 %}
                    A=1, B=2, C=3, D=4, F=5
                {% else %}
                    A=1, B=2, C=3, D=4, E=5
                {% endif %}
            </li>
        </ul>
    </div>
</div>

<style>
    @media print {
        .btn, .no-print {
            display: none !important;
        }
        .card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .table {
            font-size: 10pt;
        }
    }
    .badge {
        padding: 4px 8px;
        border-radius: 4px;
        color: white;
    }
    .table-dark th {
        background-color: #1a3e6f !important;
        color: white !important;
    }
</style>

<script>
    // Initialize DataTable for better sorting and searching (optional)
    if (typeof $.fn.DataTable !== 'undefined') {
        $('#rankingTable').DataTable({
            pageLength: 25,
            order: [[0, 'asc']],
            language: {
                search: "Search:",
                lengthMenu: "Show _MENU_ entries",
                info: "Showing _START_ to _END_ of _TOTAL_ schools",
            }
        });
    }
</script>
{% endblock %}