{% 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 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.id  %}"
             class="btn btn-light btn-sm fw-bold">
            OPEN
          </a>
        </div>
      </div>
    </div>

    <!-- ================= 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>

    <!-- ================= 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">General Summary</h5>
          <p class="small">Cover-Bests-School,Comb</p>
          <a href="{% url 'exams:combined_form_six_report' project.id %}"
             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, #654ea3, #eaafc8);">
        <div class="card-body text-center">
          <i class="fas fa-chart-pie fa-3x mb-3"></i>
          <h5 class="fw-bold">Extended Report Tables</h5>
          <p class="small">Everything ref. 4 Reports</p>
          <a href="{% url 'exams:table_for_reports_writing' project.id %}"
             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, #ff512f, #f09819);">
        <div class="card-body text-center">
          <i class="fas fa-sort-amount-up fa-3x mb-3"></i>
          <h5 class="fw-bold">DISTRICTS-REPORTS</h5>
          <p class="small">Districts Perfomance</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">SUBJECT RANKING</h5>
          <p class="small">Everything subj. Rank</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, #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>
            <div class="mt-3">
                <a href="{% url 'exams:subject_school_ranking_optimized' project.id %}" 
                   class="btn btn-light btn-sm fw-bold me-2">
                    <i class="fas fa-eye"></i> VIEW
                </a>
                <a href="{% url 'exams:subject_school_ranking_excel' project.id %}" 
                   class="btn btn-warning btn-sm fw-bold">
                    <i class="fas fa-file-excel"></i> EXCEL
                </a>
            </div>
        </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.id %}">
      <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 %}