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

{% block page_title %}
{{ title }} - EXTENDED
{% endblock %}

{% block content %}
<div class="container-fluid mt-3">
  
  <!-- Header Card -->
  <div class="card shadow-sm mb-3">
    <div class="card-header bg-success text-white py-2">
      <div class="d-flex justify-content-between align-items-center">
        <h5 class="mb-0 fw-bold">
          <i class="fas fa-chart-bar me-2"></i>
          {{ title }} - EXTENDED REPORT
        </h5>
        <div>
          <a href="javascript:window.print()" class="btn btn-sm btn-light me-1">
            <i class="fas fa-print"></i> PRINT
          </a>
          <a href="?{{ request.GET.urlencode }}&format=excel" class="btn btn-sm btn-warning">
            <i class="fas fa-file-excel"></i> EXCEL
          </a>
          <a href="?{{ request.GET.urlencode }}&layout=normal" class="btn btn-sm btn-info">
            <i class="fas fa-table"></i> SWITCH TO NORMAL
          </a>
        </div>
      </div>
    </div>
    
    <!-- Filter Info -->
    <div class="card-body py-2 bg-light">
      <div class="row small">
        <div class="col-md-4">
          <span class="fw-bold">Category:</span> 
          {% if category == 'above_40' %}
            ≥ 40 Candidates
          {% elif category == 'below_40' %}
            &lt; 40 Candidates
          {% else %}
            All Schools
          {% endif %}
        </div>
        <div class="col-md-4">
          <span class="fw-bold">Total Schools:</span> {{ rows|length }}
        </div>
        <div class="col-md-4 text-end">
          <span class="badge bg-success me-1">Pass I-III</span>
          <span class="badge bg-warning me-1">Pass I-IV</span>
          <span class="badge bg-danger">Fail</span>
        </div>
      </div>
    </div>
  </div>

  <!-- Extended Ranking Table -->
  <div class="card shadow-sm">
    <div class="card-body p-0">
      <div class="table-responsive" style="overflow-x: auto;">
        <table class="table table-bordered table-striped mb-0" style="font-size: 11px;">
          <thead>
            <!-- Main Headers - Row 1 -->
            <tr class="bg-dark text-white text-center align-middle">
              <th rowspan="3">#</th>
              <th rowspan="3">CODE</th>
              <th rowspan="3" class="text-start">SCHOOL NAME</th>
              <th rowspan="3">DISTRICT</th>
              <th rowspan="3">REGION</th>
              <th rowspan="3">OWN</th>
              <th colspan="3" class="bg-secondary">REGISTERED</th>
              <th colspan="3" class="bg-secondary">SAT</th>
              <th colspan="4" class="bg-success">DIV I</th>
              <th colspan="4" class="bg-success">DIV II</th>
              <th colspan="4" class="bg-success">DIV III</th>
              <th colspan="4" class="bg-success">PASS I–III</th>
              <th colspan="4" class="bg-warning">DIV IV</th>
              <th colspan="4" class="bg-danger">FAILED (0)</th>
              <th colspan="4" class="bg-warning">PASS I–IV</th>
              <th rowspan="3">GPA</th>
              <th rowspan="3">GRD</th>
              <th rowspan="3">STATUS</th>
              <th rowspan="3">POS</th>
            </tr>
            
            <!-- Sub Headers - Row 2 -->
            <tr class="bg-secondary text-white text-center">
              <th colspan="3">REGISTERED</th>
              <th colspan="3">SAT</th>
              <th colspan="4">DIV I</th>
              <th colspan="4">DIV II</th>
              <th colspan="4">DIV III</th>
              <th colspan="4">PASS I–III</th>
              <th colspan="4">DIV IV</th>
              <th colspan="4">FAILED</th>
              <th colspan="4">PASS I–IV</th>
            </tr>
            
            <!-- Gender Headers - Row 3 -->
            <tr class="bg-light text-center fw-bold">
              <th>F</th><th>M</th><th>T</th>
              <th>F</th><th>M</th><th>T</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
              <th>F</th><th>M</th><th>T</th><th>%</th>
            </tr>
          </thead>
          
          <tbody>
            {% for r in rows %}
            <tr class="text-center">
              <td class="fw-bold">{{ r.no }}</td>
              <td>{{ r.cno }}</td>
              <td class="text-start">{{ r.name }}</td>
              <td>{{ r.district }}</td>
              <td>{{ r.region }}</td>
              <td>{{ r.ownership }}</td>
              
              <!-- Registered -->
              <td>{{ r.reg_f }}</td>
              <td>{{ r.reg_m }}</td>
              <td class="fw-bold bg-light">{{ r.reg_t }}</td>
              
              <!-- Sat -->
              <td>{{ r.sat_f }}</td>
              <td>{{ r.sat_m }}</td>
              <td class="fw-bold bg-light">{{ r.sat_t }}</td>
              
              <!-- Division I -->
              <td>{{ r.i_f }}</td>
              <td>{{ r.i_m }}</td>
              <td class="fw-bold">{{ r.i_t }}</td>
              <td class="text-success fw-bold">{{ r.i_pct }}%</td>
              
              <!-- Division II -->
              <td>{{ r.ii_f }}</td>
              <td>{{ r.ii_m }}</td>
              <td class="fw-bold">{{ r.ii_t }}</td>
              <td class="text-primary fw-bold">{{ r.ii_pct }}%</td>
              
              <!-- Division III -->
              <td>{{ r.iii_f }}</td>
              <td>{{ r.iii_m }}</td>
              <td class="fw-bold">{{ r.iii_t }}</td>
              <td class="text-info fw-bold">{{ r.iii_pct }}%</td>
              
              <!-- Pass I-III -->
              <td class="fw-bold text-success">{{ r.pass_i_iii_f }}</td>
              <td class="fw-bold text-success">{{ r.pass_i_iii_m }}</td>
              <td class="fw-bold text-success bg-light">{{ r.pass_i_iii_t }}</td>
              <td class="fw-bold text-success">{{ r.pass_i_iii_pct }}%</td>
              
              <!-- Division IV -->
              <td>{{ r.iv_f }}</td>
              <td>{{ r.iv_m }}</td>
              <td class="fw-bold">{{ r.iv_t }}</td>
              <td class="text-warning fw-bold">{{ r.iv_pct }}%</td>
              
              <!-- Failed (Division 0) -->
              <td class="text-danger">{{ r.f_f }}</td>
              <td class="text-danger">{{ r.f_m }}</td>
              <td class="fw-bold text-danger bg-light">{{ r.f_t }}</td>
              <td class="fw-bold text-danger">{{ r.f_pct }}%</td>
              
              <!-- Pass I-IV -->
              <td class="fw-bold text-warning">{{ r.pass_i_iv_f }}</td>
              <td class="fw-bold text-warning">{{ r.pass_i_iv_m }}</td>
              <td class="fw-bold text-warning bg-light">{{ r.pass_i_iv_t }}</td>
              <td class="fw-bold text-warning">{{ r.pass_i_iv_pct }}%</td>
              
              <!-- GPA and Status -->
              <td class="fw-bold bg-light">{{ r.gpa }}</td>
              <td class="fw-bold">{{ r.grade }}</td>
              <td class="fw-bold {{ r.status_class }}">{{ r.status }}</td>
              <td class="fw-bold">{{ r.position }}</td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="44" class="text-center py-4 text-muted">
                <i class="fas fa-info-circle me-2"></i>No schools found for the selected criteria.
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <!-- Footer Notes -->
  <div class="mt-3 small text-muted">
    <div class="row">
      <div class="col-md-6">
        <i class="fas fa-calculator me-1"></i>
        <strong>GPA Formula:</strong> (I×1 + II×2 + III×3 + IV×4 + 0×5) ÷ Total Candidates
      </div>
      <div class="col-md-6 text-end">
        <span class="badge bg-success me-1">Excellent (≤2.5)</span>
        <span class="badge bg-primary me-1">Good (2.6-3.5)</span>
        <span class="badge bg-warning me-1">Average (3.6-4.5)</span>
        <span class="badge bg-danger">Needs Improvement (>4.5)</span>
      </div>
    </div>
    <div class="mt-1">
      <i class="fas fa-info-circle me-1"></i>
      <strong>with_results:</strong> {{ rows.0.with_results|default:0 }} total students with valid results
    </div>
  </div>
</div>

<style>
@media print {
  .btn, .card-header .btn, .no-print {
    display: none !important;
  }
  .card {
    border: none !important;
    box-shadow: none !important;
  }
  .table {
    font-size: 8pt;
  }
  .bg-dark { background-color: #000 !important; }
  .bg-success { background-color: #28a745 !important; }
  .bg-warning { background-color: #ffc107 !important; }
  .bg-danger { background-color: #dc3545 !important; }
  .bg-secondary { background-color: #6c757d !important; }
}
</style>
{% endblock %}