{% 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; }

/* Vertical text for subject headers */
.vertical-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  height: 80px;
  white-space: nowrap;
  font-size: 7pt;
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  padding: 0 2px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Fixed column widths */
.col-cno { width: 60px; }
.col-name { width: 140px; }
.col-sex { width: 25px; }
.col-comb { width: 35px; }
.col-subject-score { width: 25px; }
.col-subject-grade { width: 25px; }
.col-average { width: 25px; }
.col-avg-grade { width: 25px; }
.col-points { width: 25px; }
.col-division { width: 25px; }
</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="{% 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 class="col-cno" rowspan="2" style="vertical-align: middle;">C.NO</th>
          <th class="col-name" rowspan="2" style="vertical-align: middle;">NAMES</th>
          <th class="col-sex" rowspan="2" style="vertical-align: middle;">SEX</th>
          <th class="col-comb" rowspan="2" style="vertical-align: middle;">COMB</th>
          
          {% for subject in subjects %}
          <th colspan="2" style="width: 40px; text-align: center; padding-left: 2px;">
            <div class="vertical-text">{{ subject.subject_name_eng }}</div>
          </th>
          {% endfor %}
          
          <th class="col-average" rowspan="2" style="vertical-align: middle;">
            <div class="vertical-text">AVERAGE</div>
          </th>
          <th class="col-avg-grade" rowspan="2" style="vertical-align: middle;">
            <div class="vertical-text">AV.<br>GRADES</div>
          </th>
          <th class="col-points" rowspan="2" style="vertical-align: middle;">
            <div class="vertical-text">POINTS</div>
          </th>
          <th class="col-division" rowspan="2" style="vertical-align: middle;">
            <div class="vertical-text">DIVISION</div>
          </th>
          <th rowspan="2" class="no-print">REP</th>
        </tr>
        <tr>
          {% for subject in subjects %}
          <th style="width: 25px;">S</th>
          <th style="width: 25px;">G</th>
          {% endfor %}
        </tr>
      </thead>
      <tbody>
        {% for student in students %}
        <tr>
          <td class="col-cno">{{ student.cand_no }}</td>
          <td class="col-name" style="text-align: left;">{{ student.name }}</td>
          <td class="col-sex">{{ student.sex }}</td>
          <td class="col-comb">
            {% if student.combination %}
            <span class="combination-badge">{{ student.combination }}</span>
            {% else %}
            -
            {% endif %}
          </td>
          
          {% for score in student.subject_scores %}
            {% with score_parts=score.split %}
              <td class="col-subject-score">
                {% if score_parts.0 and score_parts.0 != 'X' and score_parts.0 != '' %}
                  {{ score_parts.0 }}
                {% else %}
                  &nbsp;
                {% endif %}
              </td>
              <td class="col-subject-grade {% if score_parts.1 %}grade-{{ score_parts.1 }}{% endif %}">
                {% if score_parts.1 and score_parts.1 != 'X' and score_parts.1 != '' %}
                  {{ score_parts.1 }}
                {% else %}
                  &nbsp;
                {% endif %}
              </td>
            {% endwith %}
          {% endfor %}
          
          <td class="col-average">{{ student.average|default:"-" }}</td>
          <td class="col-avg-grade">{{ student.avg_grade|default:"-" }}</td>
          <td class="col-points">{{ student.points|default:"-" }}</td>
          <td class="col-division">
            {% 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="{{ subjects|length|add:9 }}" style="text-align: center; padding: 20px;">
            <i class="fas fa-info-circle"></i> No student data available
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Footer with pagination info if needed -->
  <div class="mt-3 text-muted small">
    Total Students: {{ students|length }} | 
    Total Subjects: {{ subjects|length }} |
    Generated: {% now "Y-m-d H:i:s" %}
  </div>
</div>
{% endblock %}