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

{% block page_title %}Subject-School Ranking - {{ project.name }}{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row mb-3">
        <div class="col">
            <h4 class="fw-bold text-primary">
                <i class="fas fa-chart-line"></i>
                Subject-School Ranking – {{ project.name }} ({{ project.year }})
            </h4>
            <p class="text-muted">Schools ranked by GPA per subject (lower GPA = better performance)</p>
        </div>
        <div class="col-auto">
            <a href="{% url 'exams:project_dashboard' project.id %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back
            </a>
            <button class="btn btn-success" onclick="window.print()">
                <i class="fas fa-print"></i> Print
            </button>
            <a href="?export=excel" class="btn btn-success">
                <i class="fas fa-file-excel"></i> Excel
            </a>
        </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 Subjects</h6>
                    <h3 class="mb-0">{{ subjects|length }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <h6 class="card-title">Total Rankings</h6>
                    <h3 class="mb-0">{{ page_obj.paginator.count }}</h3>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <h6 class="card-title">Ranking Method</h6>
                    <p class="mb-0">Schools ranked by GPA per subject (1 = Best, lower GPA is better)</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Search/Filter Bar -->
    <div class="card mb-3">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="subject" class="form-label">Filter by Subject</label>
                    <select name="subject" id="subject" class="form-select">
                        <option value="">All Subjects</option>
                        {% for subject in subjects %}
                        <option value="{{ subject.subject_code }}" {% if request.GET.subject == subject.subject_code %}selected{% endif %}>
                            {{ subject.subject_code }} - {{ subject.subject_name_sw|default:subject.subject_name_eng }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4">
                    <label for="school" class="form-label">Filter by School</label>
                    <input type="text" name="school" id="school" class="form-control" 
                           placeholder="School name or code" value="{{ request.GET.school }}">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-filter"></i> Filter
                    </button>
                    <a href="?" class="btn btn-secondary">Clear</a>
                </div>
            </form>
        </div>
    </div>

    <!-- Main Table -->
    <div class="card shadow-sm">
        <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
            <h5 class="mb-0"><i class="fas fa-table"></i> Subject-School Rankings</h5>
            <span>Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-bordered table-striped table-hover mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th>CODE</th>
                            <th>SUBJECT NAME</th>
                            <th>GPA</th>
                            <th>REG/RANK</th>
                            <th>SCHOOL</th>
                            <th>HALMASHAURI</th>
                            <th>#Std</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in page_obj %}
                        <tr>
                            <td><strong>{{ item.subject_code }}</strong></td>
                            <td>{{ item.subject_name }}</td>
                            <td class="fw-bold {% if item.school_gpa <= 2.0 %}text-success{% elif item.school_gpa <= 3.0 %}text-primary{% elif item.school_gpa <= 4.0 %}text-warning{% else %}text-danger{% endif %}">
                                {{ item.school_gpa|floatformat:4 }}
                            </td>
                            <td class="text-center">
                                <span class="badge {% if item.rank <= 3 %}bg-success{% elif item.rank <= 10 %}bg-primary{% else %}bg-secondary{% endif %}">
                                    {{ item.rank|stringformat:"02d" }}/{{ item.total_schools|stringformat:"03d" }}
                                </span>
                            </td>
                            <td>{{ item.school_name }}</td>
                            <td>{{ item.district }}</td>
                            <td class="text-center">{{ item.student_count }}</td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="7" class="text-center py-4">
                                <i class="fas fa-info-circle fa-2x text-muted mb-2"></i>
                                <p class="mb-0">No ranking data available</p>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Pagination -->
    {% if page_obj.has_other_pages %}
    <nav aria-label="Page navigation" class="mt-3">
        <ul class="pagination justify-content-center">
            {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1{% if request.GET.subject %}&subject={{ request.GET.subject }}{% endif %}{% if request.GET.school %}&school={{ request.GET.school }}{% endif %}">
                    <i class="fas fa-angle-double-left"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.subject %}&subject={{ request.GET.subject }}{% endif %}{% if request.GET.school %}&school={{ request.GET.school }}{% endif %}">
                    <i class="fas fa-angle-left"></i>
                </a>
            </li>
            {% endif %}

            {% for num in page_obj.paginator.page_range %}
                {% if page_obj.number == num %}
                <li class="page-item active"><span class="page-link">{{ num }}</span></li>
                {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                <li class="page-item">
                    <a class="page-link" href="?page={{ num }}{% if request.GET.subject %}&subject={{ request.GET.subject }}{% endif %}{% if request.GET.school %}&school={{ request.GET.school }}{% endif %}">{{ num }}</a>
                </li>
                {% endif %}
            {% endfor %}

            {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.subject %}&subject={{ request.GET.subject }}{% endif %}{% if request.GET.school %}&school={{ request.GET.school }}{% endif %}">
                    <i class="fas fa-angle-right"></i>
                </a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.subject %}&subject={{ request.GET.subject }}{% endif %}{% if request.GET.school %}&school={{ request.GET.school }}{% endif %}">
                    <i class="fas fa-angle-double-right"></i>
                </a>
            </li>
            {% endif %}
        </ul>
    </nav>
    {% endif %}

    <!-- Legend -->
    <div class="card mt-3">
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <h6>GPA Color Legend:</h6>
                    <span class="badge bg-success me-2">≤ 2.0</span> Excellent
                    <span class="badge bg-primary me-2 ms-3">2.1 - 3.0</span> Good
                    <span class="badge bg-warning me-2 ms-3">3.1 - 4.0</span> Average
                    <span class="badge bg-danger me-2 ms-3">> 4.0</span> Needs Improvement
                </div>
                <div class="col-md-6">
                    <h6>Rank Color Legend:</h6>
                    <span class="badge bg-success me-2">1-3</span> Top 3
                    <span class="badge bg-primary me-2 ms-3">4-10</span> Top 10
                    <span class="badge bg-secondary me-2 ms-3">>10</span> Others
                </div>
            </div>
            <p class="text-muted small mt-2 mb-0">
                <i class="fas fa-info-circle"></i> 
                Lower GPA indicates better performance. Schools are ranked per subject based on average GPA.
            </p>
        </div>
    </div>
</div>
{% endblock %}