{% 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
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-calendar me-1"></i>{{ project.name }} ({{ project.year }}) | 
                <i class="fas fa-graduation-cap me-1"></i>{{ project.academic_level.name }}
            </p>
        </div>
        <a href="{% url 'exams:project_manage' project.project_code %}" class="btn btn-secondary">
            <i class="fas fa-arrow-left me-2"></i>Back to Project
        </a>
    </div>

    <!-- Filters Card -->
    <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-filter me-2"></i>Select Subject and Filters
            </h6>
        </div>
        <div class="card-body">
            <form method="GET" action="{% url 'exams:subject_rank_router' project.project_code %}" id="rankingForm">
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Select Subject</label>
                        <select name="subject_code" id="subjectSelect" class="form-select" required>
                            <option value="">-- Select Subject --</option>
                            {% for subject in subjects %}
                            <option value="{{ subject.subject_code }}">
                                {{ subject.subject_code }} - {{ subject.subject_name_eng }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label fw-bold">Region (Optional)</label>
                        <select name="region_id" id="regionSelect" class="form-select">
                            <option value="">All Regions</option>
                            {% for region in regions %}
                            <option value="{{ region.id }}">{{ region.name }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-md-3 mb-3">
                        <label class="form-label fw-bold">District (Optional)</label>
                        <select name="district_id" id="districtSelect" class="form-select">
                            <option value="">All Districts</option>
                            {% for district in districts %}
                            <option value="{{ district.id }}" data-region="{{ district.region_id }}">
                                {{ district.name }}
                            </option>
                            {% endfor %}
                        </select>
                    </div>
                    
                    <div class="col-md-2 mb-3">
                        <label class="form-label fw-bold">Layout</label>
                        <select name="layout" class="form-select">
                            <option value="normal">Normal Layout</option>
                            <option value="extended">Extended Layout</option>
                        </select>
                    </div>
                </div>
                
                <div class="row">
                    <div class="col-md-12 text-end">
                        <button type="submit" name="format" value="html" class="btn btn-primary">
                            <i class="fas fa-eye me-1"></i> View Report
                        </button>
                        <button type="submit" name="format" value="excel" class="btn btn-success">
                            <i class="fas fa-file-excel me-1"></i> Export Excel
                        </button>
                        <button type="submit" name="format" value="pdf" class="btn btn-danger">
                            <i class="fas fa-file-pdf me-1"></i> Export PDF
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <!-- Instructions Card -->
    <div class="card shadow">
        <div class="card-header py-3">
            <h6 class="m-0 font-weight-bold text-primary">
                <i class="fas fa-info-circle me-2"></i>Instructions
            </h6>
        </div>
        <div class="card-body">
            <ul class="mb-0">
                <li>Select a subject to view school rankings based on performance.</li>
                <li>Use filters to narrow down by region or district.</li>
                <li>Normal layout shows basic statistics (Rank, School, Total, Pass %, GPA, Grade).</li>
                <li>Extended layout includes grade distribution (A, B, C, D, E, S, F) with gender breakdown.</li>
                <li>Export options available in Excel and PDF formats.</li>
                <li><strong>Lower GPA indicates better performance.</strong></li>
                <li>
                    <strong>Passing Criteria:</strong>
                    {% if project.academic_level.id == 2 %}
                        Grades A, B, C, D, E = Pass
                    {% elif project.academic_level.id == 1 %}
                        Grades A, B, C, D = Pass
                    {% else %}
                        Grades A, B, C = Pass
                    {% endif %}
                </li>
                <li>
                    <strong>GPA Scale:</strong>
                    {% if project.academic_level.id == 2 %}
                        A=1, B=2, C=3, D=4, E=5, S=6, F=7
                    {% elif project.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>
</div>

<script>
    // Handle form submission
    document.getElementById('rankingForm').addEventListener('submit', function(e) {
        // No need to prevent default - let the form submit normally to the router
        const subjectSelect = document.getElementById('subjectSelect');
        if (!subjectSelect.value) {
            e.preventDefault();
            alert('Please select a subject first');
            return false;
        }
    });
    
    // Filter districts based on selected region
    document.getElementById('regionSelect').addEventListener('change', function() {
        const regionId = this.value;
        const districtSelect = document.getElementById('districtSelect');
        const options = districtSelect.querySelectorAll('option');
        
        // Reset district select
        districtSelect.value = '';
        
        // Show/hide districts based on region
        options.forEach(option => {
            if (option.value === '') {
                option.style.display = 'block';
            } else {
                const districtRegion = option.getAttribute('data-region');
                if (regionId === '' || districtRegion === regionId) {
                    option.style.display = 'block';
                } else {
                    option.style.display = 'none';
                }
            }
        });
    });
</script>

<style>
    .card {
        border-radius: 12px;
        overflow: hidden;
    }
    .btn-group-sm .btn {
        margin-right: 5px;
    }
    select.form-select:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }
</style>
{% endblock %}