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

{% block page_title %}District Results Download - {{ project.name }}{% endblock %}

{% block content %}
<style>
    .stats-card {
        background: white;
        border-radius: 8px;
        padding: 15px 20px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        margin-bottom: 15px;
    }
    .stats-number {
        font-size: 28px;
        font-weight: bold;
        color: #003366;
    }
    .stats-label {
        font-size: 12px;
        color: #666;
        text-transform: uppercase;
    }
    .district-row {
        transition: background 0.2s;
    }
    .district-row:hover {
        background-color: #f8f9fa;
    }
    .btn-download-pdf {
        background: #dc3545;
        color: white;
        border: none;
        padding: 5px 15px;
        border-radius: 4px;
        font-size: 12px;
        transition: all 0.2s;
    }
    .btn-download-pdf:hover {
        background: #c82333;
        transform: scale(1.02);
        color: white;
    }
    .badge-division {
        display: inline-block;
        padding: 2px 8px;
        border-radius: 3px;
        font-size: 11px;
        font-weight: bold;
        margin: 0 1px;
        color: white;
    }
    .badge-division.I { background: #28a745; }
    .badge-division.II { background: #17a2b8; }
    .badge-division.III { background: #ffc107; color: #212529; }
    .badge-division.IV { background: #fd7e14; }
    .badge-division.0 { background: #dc3545; }
    .gpa-value {
        font-weight: bold;
        font-family: monospace;
    }
    .gpa-excellent { color: #28a745; }
    .gpa-good { color: #17a2b8; }
    .gpa-average { color: #ffc107; }
    .gpa-poor { color: #dc3545; }
</style>

<div class="container-fluid mt-3">
    <!-- Header -->
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h4>
                <i class="fas fa-download"></i> District Results Download
            </h4>
            <small class="text-muted">{{ project.name }} - {{ project.year }}</small>
        </div>
        <div>
            <a href="{% url 'exams:project_list' %}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Projects
            </a>
        </div>
    </div>

    <!-- Stats Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_districts }}</div>
                <div class="stats-label">Districts</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_schools }}</div>
                <div class="stats-label">Schools</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ total_students }}</div>
                <div class="stats-label">Students</div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="stats-card">
                <div class="stats-number">{{ page_obj|length }}</div>
                <div class="stats-label">Displayed</div>
            </div>
        </div>
    </div>

    <!-- Districts Table -->
    <div class="card">
        <div class="card-header bg-primary text-white">
            <i class="fas fa-list"></i> Districts with Results
            <span class="badge badge-light float-right">{{ page_obj.paginator.count }} Total</span>
        </div>
        <div class="card-body p-0">
            <div class="table-responsive">
                <table class="table table-striped table-hover mb-0">
                    <thead class="thead-light">
                        <tr>
                            <th>#</th>
                            <th>District</th>
                            <th>Region</th>
                            <th>Schools</th>
                            <th>Students</th>
                            <th>Division Summary</th>
                            <th>GPA</th>
                            <th>Best School</th>
                            <th class="text-center">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for district in page_obj %}
                        <tr class="district-row">
                            <td>{{ forloop.counter0|add:page_obj.start_index }}</td>
                            <td>
                                <strong>{{ district.name }}</strong>
                            </td>
                            <td>{{ district.region }}</td>
                            <td class="text-center">{{ district.school_count }}</td>
                            <td class="text-center">{{ district.total_students }}</td>
                            <td>
                                {% with dc=district.division_counts %}
                                <span class="badge-division I">{{ dc.I }}</span>
                                <span class="badge-division II">{{ dc.II }}</span>
                                <span class="badge-division III">{{ dc.III }}</span>
                                <span class="badge-division IV">{{ dc.IV }}</span>
                                <span class="badge-division 0">{{ dc.0 }}</span>
                                {% endwith %}
                            </td>
                            <td>
                                {% if district.avg_gpa != '-' %}
                                <span class="gpa-value 
                                    {% if district.avg_gpa <= 2.5 %}gpa-excellent
                                    {% elif district.avg_gpa <= 3.5 %}gpa-good
                                    {% elif district.avg_gpa <= 4.5 %}gpa-average
                                    {% else %}gpa-poor{% endif %}">
                                    {{ district.avg_gpa }}
                                </span>
                                {% else %}
                                -
                                {% endif %}
                            </td>
                            <td>{{ district.best_school|truncatechars:20 }}</td>
                            <td class="text-center">
                                <a href="{% url 'exams:district_results_download_pdf' project.id district.id %}" 
                                   class="btn btn-download-pdf" 
                                   title="Download {{ district.name }} Results PDF"
                                   download>
                                    <i class="fas fa-file-pdf"></i> PDF
                                </a>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="9" class="text-center py-4">
                                <i class="fas fa-info-circle"></i> No districts with results found.
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <div class="card-footer">
            <!-- Pagination -->
            {% if page_obj.has_other_pages %}
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center mb-0">
                    {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">
                            <i class="fas fa-chevron-left"></i>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if num == page_obj.number %}
                        <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 }}">{{ 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 }}">
                            <i class="fas fa-chevron-right"></i>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
            {% endif %}
            <div class="mt-2 text-muted small">
                Showing {{ page_obj.start_index }} - {{ page_obj.end_index }} of {{ page_obj.paginator.count }} districts
            </div>
        </div>
    </div>

    <!-- Bulk Download All -->
    <div class="mt-3">
        <div class="alert alert-info">
            <i class="fas fa-info-circle"></i> 
            <strong>Tip:</strong> Click the PDF button next to each district to download results. 
            Each PDF contains school ranking, division summary, and student details.
        </div>
    </div>
</div>

<!-- Auto-download trigger for single district (optional) -->
<script>
    // Check if we have a district_id in GET parameters for auto-download
    document.addEventListener('DOMContentLoaded', function() {
        const urlParams = new URLSearchParams(window.location.search);
        const autoDownload = urlParams.get('download');
        if (autoDownload) {
            setTimeout(function() {
                const link = document.querySelector(`a[data-district-id="${autoDownload}"]`);
                if (link) {
                    link.click();
                }
            }, 500);
        }
    });
</script>
{% endblock %}