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

{% 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>
                Primary Level Report: {{ project.name }}
            </h4>
            <p class="text-muted mb-0">
                <i class="fas fa-calendar me-1"></i>{{ project.year }} | 
                <i class="fas fa-graduation-cap me-1"></i>{{ project.academic_level.name }}
            </p>
        </div>
        <div>
            <button onclick="window.print();" class="btn btn-secondary me-2">
                <i class="fas fa-print me-2"></i>Print
            </button>
            <a href="{% url 'exams:project_list' %}" class="btn btn-primary">
                <i class="fas fa-arrow-left me-2"></i>Back
            </a>
        </div>
    </div>

    <!-- Summary Cards -->
    <div class="row mb-4">
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-primary shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">
                                <i class="fas fa-users me-1"></i> Registered Students
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ registered_total }}</div>
                            <small>F: {{ registered_f }} | M: {{ registered_m }}</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-users fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-success shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-success text-uppercase mb-1">
                                <i class="fas fa-check-circle me-1"></i> Pass Rate (A-C)
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ pass_pct }}%</div>
                            <small>A-C: {{ grade_distribution.T.pass }}</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-warning shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">
                                <i class="fas fa-chart-bar me-1"></i> Overall GPA
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ overall_table.overall_gpa|floatformat:4 }}</div>
                            <small>A=1, B=2, C=3, D=4, E=5</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-chart-bar fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-xl-3 col-md-6 mb-4">
            <div class="card border-left-info shadow h-100 py-2">
                <div class="card-body">
                    <div class="row no-gutters align-items-center">
                        <div class="col mr-2">
                            <div class="text-xs font-weight-bold text-info text-uppercase mb-1">
                                <i class="fas fa-school me-1"></i> Schools
                            </div>
                            <div class="h5 mb-0 font-weight-bold text-gray-800">{{ best_10_all|length }}</div>
                            <small>Top 10 Schools Ranked</small>
                        </div>
                        <div class="col-auto">
                            <i class="fas fa-school fa-2x text-gray-300"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Grade Distribution by Gender -->
    <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-chart-pie me-2"></i>Grade Distribution by Gender (A-E)
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr style="background-color: #1a3e6f; color: white;">
                            <th>SEX</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            <th>TOTAL</th>
                            <th>PASS (A-C)</th>
                            <th>PASS %</th>
                            <th>FAIL (D-E)</th>
                            <th>FAIL %</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for sex in "FMT" %}
                        <tr>
                            <td>
                                {% if sex == 'F' %}FEMALE
                                {% elif sex == 'M' %}MALE
                                {% else %}TOTAL
                                {% endif %}
                            </td>
                            <td class="text-center bg-success text-white">{{ grade_distribution|get_item:sex|get_item:"A" }}</td>
                            <td class="text-center bg-info text-white">{{ grade_distribution|get_item:sex|get_item:"B" }}</td>
                            <td class="text-center bg-primary text-white">{{ grade_distribution|get_item:sex|get_item:"C" }}</td>
                            <td class="text-center bg-warning">{{ grade_distribution|get_item:sex|get_item:"D" }}</td>
                            <td class="text-center bg-danger text-white">{{ grade_distribution|get_item:sex|get_item:"E" }}</td>
                            <td class="text-center"><strong>{{ grade_distribution|get_item:sex|get_item:"total" }}</strong></td>
                            <td class="text-center"><strong>{{ grade_distribution|get_item:sex|get_item:"pass" }}</strong></td>
                            <td class="text-center">{{ grade_distribution|get_item:sex|get_item:"pass_pct" }}%</td>
                            <td class="text-center">{{ grade_distribution|get_item:sex|get_item:"fail" }}</td>
                            <td class="text-center">{{ grade_distribution|get_item:sex|get_item:"fail_pct" }}%</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <!-- Best Schools Tables -->
    <div class="row">
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-primary text-white">
                    <h6 class="m-0 font-weight-bold">🏆 TOP 10 OVERALL</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr><th>#</th><th>SCHOOL</th><th>AVG</th><th>GRADE</th></tr>
                            </thead>
                            <tbody>
                                {% for s in best_10_all %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>{{ s.school.name_short|truncatechars:25 }}</td>
                                    <td class="text-center">{{ s.sch_avg|floatformat:2 }}</td>
                                    <td class="text-center">{{ s.sch_avg_grd }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">🏆 TOP 10 GOVERNMENT</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr><th>#</th><th>SCHOOL</th><th>AVG</th><th>GRADE</th></tr>
                            </thead>
                            <tbody>
                                {% for s in best_10_gvt %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>{{ s.school.name_short|truncatechars:25 }}</td>
                                    <td class="text-center">{{ s.sch_avg|floatformat:2 }}</td>
                                    <td class="text-center">{{ s.sch_avg_grd }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-4">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-warning text-dark">
                    <h6 class="m-0 font-weight-bold">🏆 TOP 10 NON-GOVERNMENT</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr><th>#</th><th>SCHOOL</th><th>AVG</th><th>GRADE</th></tr>
                            </thead>
                            <tbody>
                                {% for s in best_10_nongvt %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>{{ s.school.name_short|truncatechars:25 }}</td>
                                    <td class="text-center">{{ s.sch_avg|floatformat:2 }}</td>
                                    <td class="text-center">{{ s.sch_avg_grd }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Best Students Section -->
    <div class="row">
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-info text-white">
                    <h6 class="m-0 font-weight-bold">👨‍🎓 BEST 10 STUDENTS OVERALL</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr><th>#</th><th>NAME</th><th>SCHOOL</th><th>AVERAGE</th><th>GRADE</th></tr>
                            </thead>
                            <tbody>
                                {% for s in best_students %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>{{ s.student.full_name|truncatechars:20 }}</td>
                                    <td>{{ s.student.school.name_short|truncatechars:20 }}</td>
                                    <td class="text-center">{{ s.std_average|floatformat:2 }}</td>
                                    <td class="text-center">{{ s.std_averagegrade }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card shadow mb-4">
                <div class="card-header py-3 bg-success text-white">
                    <h6 class="m-0 font-weight-bold">👧 BEST 10 GIRLS</h6>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-sm table-bordered mb-0">
                            <thead>
                                <tr><th>#</th><th>NAME</th><th>SCHOOL</th><th>AVERAGE</th><th>GRADE</th></tr>
                            </thead>
                            <tbody>
                                {% for s in best_girls %}
                                <tr>
                                    <td class="text-center">{{ forloop.counter }}</td>
                                    <td>{{ s.student.full_name|truncatechars:20 }}</td>
                                    <td>{{ s.student.school.name_short|truncatechars:20 }}</td>
                                    <td class="text-center">{{ s.std_average|floatformat:2 }}</td>
                                    <td class="text-center">{{ s.std_averagegrade }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Subject Performance 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-book me-2"></i>Subject Performance Summary (A-E)
            </h6>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered" width="100%" cellspacing="0">
                    <thead>
                        <tr style="background-color: #1a3e6f; color: white;">
                            <th>CODE</th>
                            <th>SUBJECT</th>
                            <th>SAT</th>
                            <th>A</th>
                            <th>B</th>
                            <th>C</th>
                            <th>D</th>
                            <th>E</th>
                            <th>PASS (A-C)</th>
                            <th>%</th>
                            <th>GPA</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for subject in processed_subject_summary %}
                        <tr>
                            <td><strong>{{ subject.subject_code }}</strong></td>
                            <td>{{ subject.subject_name }}</td>
                            <td class="text-center">{{ subject.sat }}</td>
                            <td class="text-center bg-success text-white">{{ subject.A }}</td>
                            <td class="text-center bg-info text-white">{{ subject.B }}</td>
                            <td class="text-center bg-primary text-white">{{ subject.C }}</td>
                            <td class="text-center bg-warning">{{ subject.D }}</td>
                            <td class="text-center bg-danger text-white">{{ subject.E }}</td>
                            <td class="text-center"><strong>{{ subject.pass_total }}</strong></td>
                            <td class="text-center">{{ subject.pass_percent }}%</td>
                            <td class="text-center"><strong>{{ subject.gpa_display }}</strong></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                    <tfoot style="background-color: #f0f0f0; font-weight: bold;">
                        <tr>
                            <td colspan="2" class="text-right">TOTAL:</td>
                            <td class="text-center">{{ subject_totals.sat }}</td>
                            <td class="text-center">{{ subject_totals.A }}</td>
                            <td class="text-center">{{ subject_totals.B }}</td>
                            <td class="text-center">{{ subject_totals.C }}</td>
                            <td class="text-center">{{ subject_totals.D }}</td>
                            <td class="text-center">{{ subject_totals.E }}</td>
                            <td class="text-center">{{ subject_totals.A|add:subject_totals.B|add:subject_totals.C }}</td>
                            <td class="text-center">{{ subject_totals.overall_pass_percent }}%</td>
                            <td class="text-center">-</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>

</div>

<style>
    @media print {
        .btn, .card-header .btn, .no-print {
            display: none !important;
        }
        .card {
            break-inside: avoid;
            page-break-inside: avoid;
        }
        .table {
            font-size: 10pt;
        }
        .bg-success, .bg-info, .bg-primary, .bg-warning, .bg-danger {
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }
    }
    
    .border-left-primary { border-left: 4px solid #4e73df; }
    .border-left-success { border-left: 4px solid #1cc88a; }
    .border-left-warning { border-left: 4px solid #f6c23e; }
    .border-left-info { border-left: 4px solid #36b9cc; }
    .card { border-radius: 12px; overflow: hidden; }
</style>

{% endblock %}