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

{% block page_title %}School Detailed Results – {{ school.name }}{% endblock %}

{% block content %}
<style>
@media print {
  .no-print { display: none !important; }
  body { font-size: 9pt; }
  table { page-break-inside: avoid; }
  tr { page-break-inside: avoid; }
  th { background-color: #f2f2f2 !important; }
}

.school-header {
  background-color: #003366;
  color: white;
  padding: 15px;
  border-radius: 5px 5px 0 0;
  margin-bottom: 0;
}

.summary-card {
  border: 2px solid #003366;
  border-radius: 5px;
  margin-bottom: 20px;
}

.division-box {
  text-align: center;
  padding: 10px;
  border-right: 1px solid #dee2e6;
}

.division-box:last-child {
  border-right: none;
}

.division-number {
  font-size: 24px;
  font-weight: bold;
}

.division-label {
  font-size: 14px;
  color: #666;
}

.gpa-box {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  text-align: center;
}

.gpa-value {
  font-size: 28px;
  font-weight: bold;
  color: #003366;
}

.rank-box {
  background-color: #e9ecef;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
}

.student-table {
  font-size: 10pt;
  width: 100%;
  border-collapse: collapse;
}

.student-table th {
  background-color: #003366;
  color: white;
  padding: 8px 4px;
  font-size: 9pt;
  text-align: center;
  border: 1px solid #0055a5;
}

.student-table td {
  padding: 6px 4px;
  border: 1px solid #dee2e6;
  text-align: center;
}

.student-table tr:nth-child(even) {
  background-color: #f8f9fa;
}

.subject-score {
  font-family: monospace;
  font-size: 9pt;
}

.subject-header {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  height: 100px;
  white-space: nowrap;
  font-size: 8pt;
  font-weight: bold;
}

.combination-badge {
  background-color: #17a2b8;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 8pt;
  font-weight: bold;
}

.division-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-weight: bold;
  color: white;
}

.division-I { background-color: #28a745; }
.division-II { background-color: #17a2b8; }
.division-III { background-color: #ffc107; color: #212529; }
.division-IV { background-color: #fd7e14; }
.division-0 { background-color: #dc3545; }

.grade-A { color: #28a745; font-weight: bold; }
.grade-B { color: #17a2b8; font-weight: bold; }
.grade-C { color: #ffc107; font-weight: bold; }
.grade-D { color: #fd7e14; font-weight: bold; }
.grade-F { color: #dc3545; font-weight: bold; }
</style>

<div class="container-fluid mt-3">
  <div class="d-flex justify-content-between mb-3 no-print">
    <h4>
      <i class="fas fa-school"></i> School Results – {{ school.name }}
    </h4>
    <div>
      <a href="{% url 'exams:project_school_detailed_results_print' project.id school.school_code %}" 
         class="btn btn-warning" target="_blank">
        <i class="fas fa-print"></i> PRINT
      </a>

<!--       <a href="#" 
         class="btn btn-success" target="_blank">
        <i class="fas fa-print"></i> S. REPORTS
      </a> -->

      <a href="{% url 'exams:export_school_detailed_results_excel' project.id school.school_code %}" 
         class="btn btn-success" 
         style="margin-left: 10px;">
        <i class="fas fa-file-excel"></i> EXCEL
      </a>

      

      <a href="{% url 'exams:school_results_list' project.id %}" 
         class="btn btn-secondary">
        <i class="fas fa-arrow-left"></i> BACK
      </a>
    </div>
  </div>

  <!-- School Header -->
  <div class="school-header">
    <div class="row">
      <div class="col-md-12">
        <h5>PRIME MINISTERS OFFICE - REGIONAL ADMINISTRATION AND LOCAL GOVERNMENT (PMO-RALG)</h5>
        <h5>{{ project.name|upper }}</h5>
        <h5>{{ school.school_code }}-{{ school.name|upper }} - {{ school.district.name|upper }}, {{ school.district.region.name|upper }}</h5>
      </div>
    </div>
  </div>

  <!-- Division Summary -->
  <div class="summary-card">
    <div class="row g-0">
      <div class="col-md-6">
        <div class="row g-0">
          {% for div, count in division_counts.items %}
          <div class="col-2 division-box">
            <div class="division-number">{{ count }}</div>
            <div class="division-label">DIV {{ div }}</div>
          </div>
          {% endfor %}
        </div>
      </div>
      <div class="col-md-3">
        <div class="gpa-box">
          <div class="division-label">GPA</div>
          <div class="gpa-value">{{ school_result.sch_gpa|default:"-"|floatformat:4 }}</div>
        </div>
      </div>
      <div class="col-md-3">
        <div class="rank-box">
          <div class="division-label">RANK (OVERALL)</div>
          <div class="gpa-value">{{ school_rank|default:"-" }}/{{ overall_total }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Students Details Table -->
<div class="table-responsive">
  <table class="student-table">
    <thead>
      <tr>
        <th rowspan="2" style="vertical-align: middle;">C.NO</th>
        <th rowspan="2" style="vertical-align: middle;">NAMES</th>
        <th rowspan="2" style="vertical-align: middle;">SEX</th>
        <th rowspan="2" style="vertical-align: middle;">COMB</th>
        
        {% for subject in subjects %}
        <th colspan="2" style="text-align: center;">{{ subject.subject_name_eng }}</th>
        {% endfor %}
        
        <th rowspan="2" style="vertical-align: middle;">AVG</th>
        <th rowspan="2" style="vertical-align: middle;">GRD</th>
        <th rowspan="2" style="vertical-align: middle;">PTS</th>
        <th rowspan="2" style="vertical-align: middle;">DIV</th>
        <th rowspan="2" class="no-print">REP</th>
      </tr>
      <tr>
        {% for subject in subjects %}
        <th style="width: 40px;">S</th>
        <th style="width: 35px;">G</th>
        {% endfor %}
      </tr>
    </thead>
    <tbody>
      {% for student in students %}
      <tr>
        <td style="text-align: center;">{{ student.cand_no }}</td>
        <td style="text-align: left;">{{ student.name }}</td>
        <td style="text-align: center;">{{ student.sex }}</td>
        <td style="text-align: center;">{{ student.combination|default:"-" }}</td>
        
        {% for pair in student.subject_pairs %}
        <td style="text-align: right; font-family: monospace;">{{ pair.score|default:"" }}</td>
        <td style="text-align: center;">{{ pair.grade|default:"" }}</td>
        {% endfor %}
        
        <td style="text-align: right; font-family: monospace;">{{ student.average|default:""|floatformat:0 }}</td>
        <td style="text-align: center;">{{ student.avg_grade|default:"" }}</td>
        <td style="text-align: center;">{{ student.points|default:"" }}</td>
        <td style="text-align: center;">
          {% if student.division %}
          <span class="division-badge division-{{ student.division }}">{{ student.division }}</span>
          {% else %}
          -
          {% endif %}
        </td>
        <td class="no-print text-center">
          <a href="#" class="btn btn-success btn-sm">
            <i class="fas fa-print"></i> 
          </a>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="4" style="text-align: center; padding: 20px;">
          No student data available
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

</div>
{% endblock %}