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

{% block page_title %}
Rank Summary – {{ project.name }} {{ project.year }}
{% endblock %}

{% block content %}
<div class="container-fluid mt-4">
  
  <div class="row mb-3">
    <div class="col">
      <h4 class="fw-bold text-primary">
        <i class="fas fa-layer-group"></i>
        Rank & Reports – {{ project.name }}-{{ project.year }}
      </h4>
    </div>
  </div>

  <div class="row g-4">

{% if user.is_superuser or user.profile.role == "super" or user.profile.role == "district"  or user.profile.role == "school" %}

    <!-- ================= SCHOOL RANKING ================= -->
    <div class="col-md-4">
      <div class="card shadow text-white"
           style="background:linear-gradient(135deg,#0072ff,#00c6ff)">
        <div class="card-body text-center">
          <i class="fas fa-sort-amount-up fa-3x mb-3"></i>
          <h5 class="fw-bold">School Ranking</h5>
          <p class="small">Overall · Region · District</p>
          <button class="btn btn-light btn-sm fw-bold"
                  data-bs-toggle="modal"
                  data-bs-target="#schoolRankModal">
            OPEN/CONFIGURE
          </button>
        </div>
      </div>
    </div>


<!-- Update the existing card in rank_summary_page.html -->
<div class="col-md-4">
    <div class="card shadow text-white" style="background: linear-gradient(135deg, #667eea, #764ba2);">
        <div class="card-body text-center">
            <i class="fas fa-chart-line fa-3x mb-3"></i>
            <h5 class="fw-bold">Subject-School Ranking</h5>
            <p class="small">View schools ranked by subject GPA</p>
            <a href="{% url 'exams:subject_school_ranking_page' project.project_code %}" 
               class="btn btn-light btn-sm fw-bold">
                <i class="fas fa-eye"></i> VIEW SUBJECTS
            </a>
        </div>
    </div>
</div>





<!-- ================= GENERAL SUMMARY ================= -->
<div class="col-md-4">
    <div class="card shadow text-white"
         style="background:linear-gradient(135deg,#1d976c,#93f9b9)">
        <div class="card-body text-center">
            <i class="fas fa-chart-pie fa-3x mb-3"></i>
            <h5 class="fw-bold">G.Sumry/Tables/Bests</h5>
            <p class="small">
                {% if project.academic_level.code == "A-LEVEL" %}
                    A-Level Report (Form Six)
                {% elif project.academic_level.code == "O-LEVEL" %}
                    O-Level Report (Form Four)
                {% elif project.academic_level.code == "PRIMARY" %}
                    Primary Level Report
                {% else %}
                    Exam Report
                {% endif %}
            </p>
            
            {% if project.academic_level.id == 1 %}
                <a href="{% url 'exams:combined_report_olevel' project.project_code %}"
                   class="btn btn-light btn-sm fw-bold">
                    <i class="fas fa-chart-line me-1"></i> OPEN O-LEVEL
                </a>
            {% if project.academic_level.id == 2 %}
                <a href="{% url 'exams:combined_report' project.project_code %}"
                   class="btn btn-light btn-sm fw-bold" target="_blank">
                    <i class="fas fa-print me-1"></i> OPEN A-LEVEL
                </a>
            {% if project.academic_level.id == 3 %}
                <a href="{% url 'exams:combined_report_primary' project.project_code %}"
                   class="btn btn-light btn-sm fw-bold" target="_blank">
                    <i class="fas fa-print me-1"></i> OPEN PRIMARY
                </a>
            {% else %}
                <a href="{% url 'exams:combined_report_olevel' project.project_code %}"
                   class="btn btn-light btn-sm fw-bold">
                    <i class="fas fa-chart-line me-1"></i> OPEN REPORT
                </a>
            {% endif %}
            {% endif %}
            {% endif %}
        </div>
    </div>
</div>

    <!-- ================= SCHOOL RESULTS ================= -->
    <div class="col-md-4">
      <div class="card shadow text-white"
           style="background:linear-gradient(135deg,#f7971e,#ffd200)">
        <div class="card-body text-center">
          <i class="fas fa-school fa-3x mb-3"></i>
          <h5 class="fw-bold">School Results</h5>
          <p class="small">Per-school downloads & performance</p>
          <a href="{% url 'exams:school_results_list' project.project_code  %}"
             class="btn btn-light btn-sm fw-bold">
            OPEN
          </a>
        </div>
      </div>
    </div>




{% endif %}






 
{% if user.is_superuser or user.profile.role == "super" %}

    <div class="col-md-4">
      <div class="card shadow text-white"
           style="background: linear-gradient(135deg, #ff512f, #f09819);">
        <div class="card-body text-center">
          <i class="fas fa-sort-amount-up fa-3x mb-3"></i>
          <h5 class="fw-bold">RESERVER #1</h5>
          <p class="small">Link to Be Used</p>
          <a href="#"
             class="btn btn-light btn-sm fw-bold">
            OPEN
          </a>
        </div>
      </div>
    </div>



    <div class="col-md-4">
      <div class="card shadow text-white"
           style="background: linear-gradient(135deg, #2193b0, #6dd5ed);">
        <div class="card-body text-center">
          <i class="fas fa-sort-amount-up fa-3x mb-3"></i>
          <h5 class="fw-bold">RESERVER #2</h5>
          <p class="small">Link to Be Used</p>
          <a href="#"
             class="btn btn-light btn-sm fw-bold">
            OPEN
          </a>
        </div>
      </div>
    </div>


{% endif %}









  </div>
</div>

<!-- =====================================================
     SCHOOL RANKING MODAL
===================================================== -->
<div class="modal fade" id="schoolRankModal">
  <div class="modal-dialog modal-lg">
    <form method="get"
          action="{% url 'exams:project_school_rank_router' project.project_code %}">
      <div class="modal-content">

        <div class="modal-header bg-success text-white">
          <h5>School Ranking Options</h5>
        </div>

        <div class="modal-body row g-3">

          <!-- CATEGORY -->
          <div class="col-md-6">
            <label>Category</label>
            <select name="category" class="form-select">
              <option value="all">All Schools</option>
              <option value="above_40">≥ 40 Candidates</option>
              <option value="below_40">&lt; 40 Candidates</option>
            </select>
          </div>

          <!-- SCOPE -->
          <div class="col-md-6">
            <label>Ranking Scope</label>
            <select name="scope" id="scopeSelect" class="form-select">
              <option value="overall">Overall</option>
              <option value="region">Region-wise</option>
              <option value="district">District-wise</option>
            </select>
          </div>

          <!-- REGION (HIDDEN BY DEFAULT) -->
          <!-- REGION FIELD -->
          <div class="col-md-6 d-none" id="regionField">
            <label class="form-label fw-bold">Region</label>
            <select name="region_id" class="form-select">
              <option value="">-- Select Region --</option>
              {% for r in regions %}
                <option value="{{ r.id }}">{{ r.name }}</option>
              {% endfor %}
            </select>
          </div>

          <!-- DISTRICT FIELD -->
          <div class="col-md-6 d-none" id="districtField">
            <label class="form-label fw-bold">District</label>
            <select name="district_id" class="form-select">
              <option value="">-- Select District --</option>
              {% for d in districts %}
                <option value="{{ d.id }}">{{ d.name }}</option>
              {% endfor %}
            </select>
          </div>
          <!-- LAYOUT -->
          <div class="col-md-6">
            <label>Layout</label>
            <select name="layout" class="form-select">
              <option value="normal">Normal</option>
              <option value="extended">Extended</option>
            </select>
          </div>

          <!-- FORMAT -->
          <div class="col-md-6">
            <label>Download</label>
            <select name="format" class="form-select">
              <option value="html">View</option>
              <option value="pdf">PDF</option>
              <option value="excel">Excel</option>
            </select>
          </div>

        </div>

        <div class="modal-footer">
          <button class="btn btn-success">Generate</button>
        </div>

      </div>
    </form>
  </div>
</div>






<script>
document.addEventListener("DOMContentLoaded", function() {
  const scopeSelect = document.getElementById("scopeSelect");
  const regionField = document.getElementById("regionField");
  const districtField = document.getElementById("districtField");
  
  // Function to toggle fields based on selected scope
  function toggleFields() {
    // Hide both fields first
    regionField.classList.add("d-none");
    districtField.classList.add("d-none");
    
    // Show the appropriate field based on scope
    if (scopeSelect.value === "region") {
      regionField.classList.remove("d-none");
    } else if (scopeSelect.value === "district") {
      districtField.classList.remove("d-none");
    }
  }
  
  // Run on change
  scopeSelect.addEventListener("change", toggleFields);
  
  // Run on page load to set initial state
  toggleFields();
});
</script>

{% endblock %}