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

{% block content %}
<link rel="stylesheet" href="{% static 'assets/css/dashboard-modern.css' %}"> {# optional external CSS - below includes inline fallback #}

<style>
/* Minimal modern style (inline fallback) */
.dashboard-container {
    padding: 18px 12px;
    width: 100%;
    max-width: 100%; /* remove fixed limit */
    margin: 0 auto;
}


.filter-card{background:#fff;border-radius:8px;padding:14px;box-shadow:0 6px 18px rgba(20,24,40,0.06);margin-bottom:16px}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px}
.kpi { flex:1 1 220px; background:linear-gradient(180deg,#fff,#fbfdff); border-radius:8px; padding:14px; box-shadow:0 6px 20px rgba(13,18,35,0.04); display:flex;justify-content:space-between;align-items:center;min-height:78px }
.kpi .meta { font-size:13px;color:#65708a }
.kpi .value { font-size:24px; font-weight:700; color:#0b2545; margin-top:6px }
.kpi .spark { font-size:12px; color:#3b8ad9; }
.charts-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.chart-card{background:#fff;border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(20,24,40,0.05);flex:1 1 420px;min-height:240px}
.table-card{background:#fff;border-radius:8px;padding:12px;box-shadow:0 6px 18px rgba(20,24,40,0.05);margin-top:12px}
.controls { display:flex; gap:8px; align-items:end; flex-wrap:wrap }
.select { width:100%; }
@media (max-width:900px){
  .kpi { flex:1 1 48%; }
  .chart-card{flex:1 1 100%}
}
.btn { padding:6px 10px;border-radius:6px;border:0; cursor:pointer }
.btn-primary{ background:#1f7ed6;color:#fff }
.btn-ghost{ background:transparent;border:1px solid #e6eefc;color:#1f7ed6 }
.small{ font-size:12px;padding:6px 8px }

/* FILTER CARD */
.filter-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px 18px;
    margin-bottom: 25px;
    border: 1px solid #e2e8f0; /* soft border */
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* MAIN FILTER CARD */
.filter-card {
    background: linear-gradient(135deg, #f0f4ff, #e8faff);
    border: 1px solid #d0e2ff;
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 22px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* LABEL WITH ICON */
.filter-label {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #2a3f7d;
    margin-bottom: 4px;
}

/* SELECT BOXES */
.filter-select, .filter-input {
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    padding: 6px 10px;
    font-size: 14px;
    transition: 0.2s ease-in-out;
}

.filter-select:focus,
.filter-input:focus {
    border-color: #4f7cff;
    box-shadow: 0px 0px 0px 3px rgba(79,124,255,0.15);
}

/* BUTTON STYLES */
.btn-fancy {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
}

.btn-apply {
    background: linear-gradient(135deg, #4f7cff, #6a9bff);
    color: white;
    border: none;
}

.btn-apply:hover {
    background: linear-gradient(135deg, #3b63d8, #567de0);
}

.btn-reset {
    background: #ffffff;
    border: 1px solid #cfd8e6;
}

.btn-reset:hover {
    background: #f1f5ff;
    border-color: #9db2ff;
}




/* Header container with gradient + rounded border */
.dashboard-header {
    margin: 12px auto 18px;
    padding: 18px;
    max-width: 1320px;
    background: linear-gradient(135deg, #3b82f6, #9333ea, #ec4899);
    color: white;
    text-align: center;
    border-radius: 12px;
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow: 0 4px 14px rgba(0,0,0,0.2);
    position: relative;
}

/* Title */
.dashboard-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Export buttons container */
.export-buttons {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Base button */
.export-btn {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.25s ease;
}

/* PDF button */
.pdf-btn {
    background: #f43f5e;
    color: white;
}
.pdf-btn:hover {
    background: #be123c;
}

/* JPG button */
.jpg-btn {
    background: #0ea5e9;
    color: white;
}
.jpg-btn:hover {
    background: #0369a1;
}


</style>












<div class="dashboard-container">
<div class="d-flex justify-content-center gap-2 flex-wrap">

{% if request.user.profile.role == "school" %}
<a href="{% url 'exams:view_html_summary' %}?school={{ request.user.profile.school.school_code }}&year=2025&exam_type_id=2"
   class="btn btn-success btn-sm">
    <i class="fas fa-eye"></i>
    {{ request.user.username }} - CSEE-2025-SUMMARY
</a>
{% endif %}


{% if request.user.profile.role == "region" %}
<a href="{% url 'exams:region_summary_html' %}?region={{ request.user.profile.region.id }}&year=2025&exam_type_id=2"
   class="btn btn-primary btn-sm">
    <i class="fas fa-map"></i>
    {{ request.user.username }} - REGION CSEE-2025-SUMMARY
</a>
{% endif %}



{% if request.user.profile.role == "district" %}
<a href="{% url 'exams:district_summary_html' %}?district={{ request.user.profile.district.id }}&year=2025&exam_type_id=2"
   class="btn btn-success btn-sm">
    <i class="fas fa-map"></i>
    {{ request.user.username }} - DISTRICT CSEE-2025-SUMMARY
</a>
{% endif %}



<a href="{% url 'exams:dashboard_subjectwise' %}"
   class="btn btn-primary btn-sm">
    <i class="fas fa-eye"></i>
    >>GO SUBJECTWISE DASHBOARDS
</a>


{% if request.user.profile.role == "school" %}

<button class="btn btn-success btn-sm openSchoolTrendModal"
        data-school="{{ user.profile.school.school_code }}"
        data-school-name="{{ user.profile.school.name }}">
  ▲▼TREND.G
</button>
{% endif %}


{% if request.user.profile.role == "school" %}

<button class="btn btn-info btn-sm openSchoolSubjectTrendModal"
        data-school="{{ user.profile.school.school_code }}"
        data-school-name="{{ user.profile.school.name }}">
  ▲▼TREND.SUBJ
</button>
{% endif %}








{% if request.user.profile.role == "region" %}
<button class="btn btn-success btn-sm openRegionTrendModal"
        data-region="{{ user.profile.region.id }}"
        data-region-name="{{ user.profile.region.name }}">
  ▲▼TREND.R
</button>
{% endif %}


{% if request.user.profile.role == "region" %}
<button class="btn btn-warning btn-sm openRegionSchoolRankModal"
        data-region="{{ user.profile.region.id }}"
        data-region-name="{{ user.profile.region.name }}">
  RANK.G
</button>
{% endif %}


{% if request.user.profile.role == "region" %}
<button class="btn btn-primary btn-sm openSubjectPerfModal"
        data-region="{{ request.user.profile.region.id }}"
        data-region-name="{{ request.user.profile.region.name }}">
  SUBJ.PERF
</button>
{% endif %}

 
{% if request.user.profile.role == "region" %}
<button class="btn btn-danger btn-sm openRegSubjectTrendModal"
        data-region="{{ request.user.profile.region.id }}"
        data-region-name="{{ request.user.profile.region.name }}">
  ▲▼SUBJ.TREND
</button>
{% endif %}










{% if request.user.profile.role == "school" %}
<button class="btn btn-secondary btn-sm openSchoolResultsModal"
        data-school="{{ user.profile.school.school_code }}"
        data-school-name="{{ user.profile.school.name }}">
  STD RESULTS
</button>
{% endif %}




{% if request.user.profile.role == "district" %}
<button class="btn btn-success btn-sm openDistrictTrendModal"
        data-district="{{ user.profile.district.id }}"
        data-district-name="{{ user.profile.district.name }}">
  ▲▼TREND.D
</button>
{% endif %}


{% if request.user.profile.role == "district" %}
<button class="btn btn-warning btn-sm openDistrictSchoolRankModal"
        data-district="{{ user.profile.district.id }}"
        data-district-name="{{ user.profile.district.name }}">
  RANK.G
</button>
{% endif %}


{% if request.user.profile.role == "district" %}
<button class="btn btn-primary btn-sm openSubjectDisPerfModal"
        data-district="{{ request.user.profile.district.id }}"
        data-district-name="{{ request.user.profile.district.name }}">
  SUBJ.PERF
</button>


{% if request.user.profile.role == "district" %}
<button class="btn btn-danger btn-sm openDisSubjectTrendModal"
        data-district="{{ request.user.profile.district.id }}"
        data-district-name="{{ request.user.profile.district.name }}">
  ▲▼SUBJ.TREND
</button>


{% endif %}


{% endif %}



</div>



<div class="modal fade" id="schoolResultsModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-secondary text-white">
        <h5 class="modal-title">NECTA Results</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <h6 id="resultsSchoolName" class="text-center fw-bold mb-3"></h6>

        <label class="fw-bold">Exam Type</label>
        <select id="resultsExamType" class="form-select mb-3">
          <option value="ftna">FTNA</option>
          <option value="csee">CSEE</option>
          <option value="acsee">ACSEE</option>
        </select>

        <label class="fw-bold">Year</label>
        <select id="resultsYear" class="form-select mb-3">
            <option value="2025">2025</option>
            <option value="2024">2024</option>
            <option value="2023">2023</option>
            <option value="2022">2022</option>
        </select>

        <div class="d-grid">
          <button id="openResultsLink" class="btn btn-primary">
            Open Results
          </button>
        </div>
      </div>
    </div>
  </div>
</div>





<!-- =========================
     SCHOOL TREND MODAL
========================= -->
<div class="modal fade" id="schoolTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">School Performance Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="trendSchoolName" class="text-center fw-bold mb-3"></h5>

        <!-- EXAM TYPE -->
        <label class="fw-bold">Exam Type</label>
        <select id="schoolTrendExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- YEARS -->
        <label class="fw-bold">Start Year</label>
        <select id="schoolTrendStartYear" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">End Year</label>
        <select id="schoolTrendEndYear" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="schoolTrendHtml" class="btn btn-primary">VIEW TREND</a>
        </div>
      </div>

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







<!-- =========================
     Region TREND MODAL
========================= -->
<div class="modal fade" id="regionTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">Region Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <h6 id="trendRegionName" class="text-center fw-bold mb-3"></h6>

        <!-- EXAM TYPE -->
        <label>Exam Type</label>
        <select id="regionTrendExamType" class="form-select mb-2">
          {% for e in exam_types %}
            <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- START YEAR -->
        <label>Start Year</label>
        <select id="regionTrendStartYear" class="form-select mb-2">
          {% for y in years %}
            {% if y != "-" %}
              <option value="{{ y }}">{{ y }}</option>
            {% endif %}
          {% endfor %}
        </select>

        <!-- END YEAR -->
        <label>End Year</label>
        <select id="regionTrendEndYear" class="form-select mb-3">
          {% for y in years %}
            {% if y != "-" %}
              <option value="{{ y }}">{{ y }}</option>
            {% endif %}
          {% endfor %}
        </select>

        <div class="d-grid">
          <button id="openRegionTrendLink" class="btn btn-primary">
            View Trend
          </button>
        </div>

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







<!-- =========================
     district TREND MODAL
========================= -->
<div class="modal fade" id="districtTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-success text-white">
        <h5 class="modal-title">District Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <h6 id="trendDistrictName" class="text-center fw-bold mb-3"></h6>

        <!-- EXAM TYPE -->
        <label>Exam Type</label>
        <select id="districtTrendExamType" class="form-select mb-2">
          {% for e in exam_types %}
            <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- START YEAR -->
        <label>Start Year</label>
        <select id="districtTrendStartYear" class="form-select mb-2">
          {% for y in years %}
            {% if y != "-" %}
              <option value="{{ y }}">{{ y }}</option>
            {% endif %}
          {% endfor %}
        </select>

        <!-- END YEAR -->
        <label>End Year</label>
        <select id="districtTrendEndYear" class="form-select mb-3">
          {% for y in years %}
            {% if y != "-" %}
              <option value="{{ y }}">{{ y }}</option>
            {% endif %}
          {% endfor %}
        </select>

        <div class="d-grid">
          <button id="openDistrictTrendLink" class="btn btn-primary">
            View Trend
          </button>
        </div>

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





<div class="modal fade" id="regionSchoolRankModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title">Region School Ranking</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <h6 id="regionRankName" class="text-center fw-bold mb-3"></h6>

        <label class="fw-bold">Exam Type</label>
        <select id="regionRankExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">Year</label>
        <select id="regionRankYear" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="regionRankNormal" class="btn btn-primary">View Normal</a>
          <a id="regionRankExtended" class="btn btn-warning">View Extended</a>
        </div>

      </div>

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




<!-- =========================
     district School Rank
========================= -->
<div class="modal fade" id="districtSchoolRankModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-warning text-white">
        <h5 class="modal-title">District School Ranking</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <h6 id="districtRankName" class="text-center fw-bold mb-3"></h6>

        <label class="fw-bold">Exam Type</label>
        <select id="districtRankExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">Year</label>
        <select id="districtRankYear" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="districtRankNormal" class="btn btn-primary">View Normal</a>
          <a id="districtRankExtended" class="btn btn-warning">View Extended</a>
        </div>

      </div>

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





<div class="modal fade" id="subjectPerfModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-primary">
        <h5 class="modal-title fw-bold">
          Subject Performance – <span id="modalRegionName"></span>
        </h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <input type="hidden" id="modalRegionId">

        <label class="fw-bold">Exam Type</label>
        <select id="subjectExamType" class="form-select mb-2">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">Year</label>
        <select id="subjectYear" class="form-select mb-2">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>
 

        <label class="fw-bold">Subject</label>
        <select id="subjectSelect" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }} - {{ s.subject_name_sw }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
 
          <a id="btnSubjectRankNormal" class="btn btn-success">
            📘Subject Rank Normal
          </a>

          <a id="btnSubjectRankExtended" class="btn btn-warning">
            📕Subject Rank Extended
          </a>

          <a id="btnSubjectRankDistrict" class="btn btn-primary">
            🏫District Rank 
          </a>

        </div>

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







<div class="modal fade" id="subjectDisPerfModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-primary">
        <h5 class="modal-title fw-bold">
          Subject Performance – <span id="modalDistrictName"></span>
        </h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <input type="hidden" id="modalDistrictId">

        <label class="fw-bold">Exam Type</label>
        <select id="subjectDisExamType" class="form-select mb-2">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">Year</label>
        <select id="subjectDisYear" class="form-select mb-2">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>
 

        <label class="fw-bold">Subject</label>
        <select id="subjectDisSelect" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }} - {{ s.subject_name_sw }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">

          <a id="btnSubjectDisRankNormal" class="btn btn-success">
            Subject Rank Normal
          </a>

          <a id="btnSubjectDisRankExtended" class="btn btn-danger">
            Subject Rank Extended
          </a>

        </div>

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









<div class="modal fade" id="subjectRegPerfModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-primary">
        <h5 class="modal-title fw-bold">
          Subject Performance – <span id="modalRegionName"></span>
        </h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

        <input type="hidden" id="modalRegionId">

        <label class="fw-bold">Exam Type</label>
        <select id="subjectExamType" class="form-select mb-2">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <label class="fw-bold">Year</label>
        <select id="subjectYear" class="form-select mb-2">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>
 

        <label class="fw-bold">Subject</label>
        <select id="subjectSelect" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }} - {{ s.subject_name_sw }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">

          <a id="btnDistrictRank" class="btn btn-primary">District Rank</a>

          <a id="btnSubjectRankNormal" class="btn btn-success">
            Subject Rank Normal
          </a>

          <a id="btnSubjectRankExtended" class="btn btn-danger">
            Subject Rank Extended
          </a>

        </div>

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



<div class="modal fade" id="schoolSubjectTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-info text-white">
        <h5 class="modal-title">School Subject Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="schoolSubjectTrendName" class="text-center fw-bold mb-3"></h5>

        <!-- SUBJECT -->
        <label class="fw-bold">Select Subject</label>
        <select id="schoolSubjectTrendSubject" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }}-{{ s.subject_name_eng }}</option>
          {% endfor %}
        </select>

        <!-- EXAM TYPE -->
        <label class="fw-bold">Exam Type</label>
        <select id="schoolSubjectTrendExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- YEARS -->
        <label class="fw-bold">Start Year</label>
        <select id="schoolSubjectTrendStart" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <label class="fw-bold">End Year</label>
        <select id="schoolSubjectTrendEnd" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="schoolSubjectTrendView" class="btn btn-primary">VIEW TREND</a>
        </div>
      </div>

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





<div class="modal fade" id="regionSubjectTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-info text-white">
        <h5 class="modal-title">Region Subject Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="regionSubjectTrendName" class="text-center fw-bold mb-3"></h5>

        <!-- SUBJECT -->
        <label class="fw-bold">Select Subject</label>
        <select id="regionSubjectTrendSubject" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }}-{{ s.subject_name_eng }}</option>
          {% endfor %}
        </select>

        <!-- EXAM TYPE -->
        <label class="fw-bold">Exam Type</label>
        <select id="regionSubjectTrendExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- YEARS -->
        <label class="fw-bold">Start Year</label>
        <select id="regionSubjectTrendStart" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <label class="fw-bold">End Year</label>
        <select id="regionSubjectTrendEnd" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="regionSubjectTrendView" class="btn btn-primary">VIEW TREND</a>
        </div>
      </div>

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



<div class="modal fade" id="districtSubjectTrendModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">

      <div class="modal-header bg-info text-white">
        <h5 class="modal-title">District Subject Trend</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="districtSubjectTrendName" class="text-center fw-bold mb-3"></h5>

        <!-- SUBJECT -->
        <label class="fw-bold">Select Subject</label>
        <select id="districtSubjectTrendSubject" class="form-select mb-3">
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_code }}-{{ s.subject_name_eng }}</option>
          {% endfor %}
        </select>

        <!-- EXAM TYPE -->
        <label class="fw-bold">Exam Type</label>
        <select id="districtSubjectTrendExam" class="form-select mb-3">
          {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
          {% endfor %}
        </select>

        <!-- YEARS -->
        <label class="fw-bold">Start Year</label>
        <select id="districtSubjectTrendStart" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <label class="fw-bold">End Year</label>
        <select id="districtSubjectTrendEnd" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="districtSubjectTrendView" class="btn btn-primary">VIEW TREND</a>
        </div>
      </div>

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














<div class="dashboard-header">
    <h2>GENERAL RESULTS DASHBOARDS
        <button id="btnExportPDF" class="export-btn pdf-btn">📄 PDF</button>
        <button id="btnExportJPG" class="export-btn jpg-btn">🖼️ JPG</button>
</h2>
</div>

<!-- FILTER BAR -->
<div class="filter-card">

  <div style="display:flex;gap:12px;flex-wrap:wrap">

<!-- ================= REGION ================= -->
<div style="flex:1 1 220px">
  <label class="filter-label"><i class="fa fa-map-marker-alt"></i> Region</label>

  <select id="filter_region" class="form-control filter-select"
          {% if user.profile.role != 'super' %}disabled{% endif %}>
    <option value="">All regions</option>

    {% for r in regions %}
      <option value="{{ r.id }}"
              {% if user.profile.region and user.profile.region.id == r.id %}selected{% endif %}>
        {{ r.name }}
      </option>
    {% endfor %}
  </select>
</div>

<!-- ============= DISTRICT ============= -->
<div style="flex:1 1 220px">
  <label class="filter-label"><i class="fa fa-map-marker-alt"></i> District</label>

  <select id="filter_district" class="form-control filter-select"
          {% if user.profile.role != 'super' and user.profile.role != 'region' %}disabled{% endif %}>

    {% if user.profile.role in 'district ward school' %}
        <!-- SHOW ONLY ASSIGNED DISTRICT -->
        <option value="{{ user.profile.district.id }}" selected>
            {{ user.profile.district.name }}
        </option>

    {% else %}
        <option value="">All districts</option>
        {% for d in districts %}
            <option value="{{ d.id }}">{{ d.name }}</option>
        {% endfor %}
    {% endif %}

  </select>
</div>



<!-- ================= WARD ================= -->
<div style="flex:1 1 220px">
  <label class="filter-label"><i class="fa fa-map-marker-alt"></i> Ward</label>

<select id="filter_ward" class="form-control filter-select"
        {% if user.profile.role not in 'super region district' %}disabled{% endif %}>

    {% if user.profile.role == 'ward' or user.profile.role == 'school' %}
        <option value="{{ user.profile.ward.id }}" selected>{{ user.profile.ward.name }}</option>
    {% else %}
        <option value="">All wards</option>
        {% for w in wards %}
            <option value="{{ w.id }}">{{ w.name }}</option>
        {% endfor %}
    {% endif %}
</select>

</div>

<!-- ================= SCHOOL ================= -->
<div style="flex:1 1 220px">
  <label class="filter-label"><i class="fa fa-school"></i> School</label>

<select id="filter_school" class="form-control filter-select"
        {% if user.profile.role not in 'super region district ward' %}disabled{% endif %}>

    {% if user.profile.role == 'school' %}
        <option value="{{ user.profile.school.school_code }}" selected>
            {{ user.profile.school.name }}
        </option>
    {% else %}
        <option value="">All schools</option>
        {% for s in schools %}
            <option value="{{ s.school_code }}">{{ s.name }}</option>
        {% endfor %}
    {% endif %}
</select>

</div>


    <div style="flex:1 1 180px">
      <label class="filter-label"><i class="fa fa-clipboard-check"></i> Exam Type</label>
      <select id="filter_examtype" class="form-control filter-select">
        <!-- <option value="">All exam types</option> -->
        {% for e in exam_types %}
          <option value="{{ e.id }}">{{ e.name }}</option>
        {% endfor %}
        <option value="">All Exam Types</option>
      </select>
    </div>

<div style="flex:1 1 180px">
  <label class="filter-label"><i class="fa fa-university"></i> Ownership</label>
  <select id="filter_ownership" class="form-control filter-select">
    <option value="">All ownership</option>
    <option value="GVT">Government</option>
    <option value="NON-GVT">Private</option>
  </select>
</div>


<!-- ================= GENDER ================= -->
<div style="flex:1 1 180px">
  <label class="filter-label"><i class="fa fa-venus-mars"></i> Gender</label>

  <select id="filter_gender" class="form-control filter-select">
    <option value="">All Gender</option>
    <option value="M">Male</option>
    <option value="F">Female</option>
  </select>
</div>


    <div style="flex:0 0 110px">
      <label class="filter-label"><i class="fa fa-calendar"></i> From</label>
      <input type="number" id="filter_start" class="form-control filter-input" value="2022"/>
    </div>

    <div style="flex:0 0 110px">
      <label class="filter-label"><i class="fa fa-calendar-alt"></i> To</label>
      <input type="number" id="filter_end" class="form-control filter-input" value="2025"/>
    </div>

    <!-- Buttons -->
    <div style="margin-left:auto; display:flex; gap:8px; align-items:center">
      <button id="applyFilters" class="btn btn-fancy btn-apply">Apply</button>
      <button id="resetFilters" class="btn btn-fancy btn-reset" >Reset</button>
    </div>

  </div>
</div>
<!-- END FILTER BAR -->



<!-- KPI CARDS - Modern AdminLTE Small Box Style -->
<div class="kpi-grid">

  <div class="kpi-box kpi-primary">
    <div class="kpi-title">Total Candidates</div>
    <div class="kpi-value" id="kpi_total">—</div>
    <i class="kpi-icon fas fa-users"></i>
  </div>

  <div class="kpi-box kpi-success">
    <div class="kpi-title">Pass Rate</div>
    <div class="kpi-value" id="kpi_pass">—</div>
    <i class="kpi-icon fas fa-check-circle"></i>
  </div>

  <div class="kpi-box kpi-danger">
    <div class="kpi-title">Fail Rate</div>
    <div class="kpi-value" id="kpi_fail">—</div>
    <i class="kpi-icon fas fa-times-circle"></i>
  </div>


  <div class="kpi-box kpi-warning">
    <div class="kpi-title">Division I - III</div>
    <div class="kpi-value" id="kpi_i_iii">—</div>
    <i class="kpi-icon fas fa-chart-line"></i>
  </div>



</div>

  <!-- Charts Row -->
  <div class="charts-row">
    <div class="chart-card">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
        <strong>Pass vs Fail</strong>
        <div style="display:flex;gap:8px">
          <button id="exportDonutPNG" class="btn small">PNG</button>
        </div>
      </div>
      <div id="donutChart" style="height:300px"></div>
    </div>




<div class="chart-card">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
    <strong>Number of Students by Division (I–O)</strong>
    <div style="display:flex;gap:8px">
      <button id="exportGradeBarPNG" class="btn small">PNG</button>
    </div>
  </div>
  <div id="gradeBarChart" style="height:330px"></div>
</div>

  </div>




  <div class="row-charts" style="margin-top:12px;">
    <div class="card chart" id="lineCard">
      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:10px">

  <div style="flex:1;text-align:center;">
    <strong>Average GPA by Year</strong>
  </div>

 
        <div>
          <button id="exportLinePNG" class="small btn">PNG</button>
        </div>
      </div>
      <div id="lineChart" style="height:260px;"></div>
    </div>

  </div>

  <!-- top schools table -->


</div> <!-- /container -->

<!-- MUST BE INCLUDED -->


<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<!-- ECharts and utilities -->
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
(function(){
  // ---- Small helpers ----
  const el = id => document.getElementById(id);
  async function getJSON(url){
    const res = await fetch(url, { credentials: 'same-origin' });
    if(!res.ok) throw new Error('Network error');
    return await res.json();
  }
  function escapeHtml(s){ return String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }

  // ---- Template-provided user context (Django) ----
  const USER_ROLE = "{{ user.profile.role|default:'' }}";
  const USER_REGION = "{{ user.profile.region_id|default:'' }}";
  const USER_DISTRICT = "{{ user.profile.district_id|default:'' }}";
  const USER_WARD = "{{ user.profile.ward_id|default:'' }}";
  const USER_SCHOOL = "{{ user.profile.school.school_code|default:'' }}";

  // ---- Ensure elements exist before using them ----
  const has = id => !!el(id);

  // ---- Cascading loaders (use your ajax endpoints) ----
  async function loadDistricts(regionId){
    if(!has('filter_district')) return;
    const sel = el('filter_district');
    sel.innerHTML = '<option value="">All districts</option>';
    if(!regionId) return;
    const url = "{% url 'exams:ajax_get_districts' 0 %}".replace('/0/', '/' + regionId + '/');
    const items = await getJSON(url);
    items.forEach(i => sel.insertAdjacentHTML('beforeend', `<option value="${i.id}">${escapeHtml(i.name)}</option>`));
  }

  async function loadWards(districtId){
    if(!has('filter_ward')) return;
    const sel = el('filter_ward');
    sel.innerHTML = '<option value="">All wards</option>';
    if(!districtId) return;
    const url = "{% url 'exams:ajax_get_wards' 0 %}".replace('/0/', '/' + districtId + '/');
    const items = await getJSON(url);
    items.forEach(i => sel.insertAdjacentHTML('beforeend', `<option value="${i.id}">${escapeHtml(i.name)}</option>`));
  }

  async function loadSchools(wardId){
    if(!has('filter_school')) return;
    const sel = el('filter_school');
    sel.innerHTML = '<option value="">All schools</option>';
    if(!wardId) return;
    const url = "{% url 'exams:ajax_get_schools' 0 %}".replace('/0/', '/' + wardId + '/');
    const items = await getJSON(url);
    items.forEach(i => sel.insertAdjacentHTML('beforeend', `<option value="${i.school_code}">${escapeHtml(i.name)}</option>`));
  }

  // ---- Bind cascade events if selects exist ----
  if(has('filter_region')) {
    el('filter_region').addEventListener('change', async (e) => {
      await loadDistricts(e.target.value);
      if(has('filter_ward')) el('filter_ward').innerHTML = '<option value="">All wards</option>';
      if(has('filter_school')) el('filter_school').innerHTML = '<option value="">All schools</option>';
    });
  }
  if(has('filter_district')) {
    el('filter_district').addEventListener('change', async (e) => {
      await loadWards(e.target.value);
      if(has('filter_school')) el('filter_school').innerHTML = '<option value="">All schools</option>';
    });
  }
  if(has('filter_ward')) {
    el('filter_ward').addEventListener('change', async (e) => {
      await loadSchools(e.target.value);
    });
  }

  // ---- Initialize ECharts instances (if DOM nodes exist) ----
  const donutChart = has('donutChart') ? echarts.init(el('donutChart')) : null;
  const gradeChart = has('gradeBarChart') ? echarts.init(el('gradeBarChart')) : null;
  const lineChart  = has('lineChart') ? echarts.init(el('lineChart')) : null;
  const topChart   = has('topSchoolsBar') ? echarts.init(el('topSchoolsBar')) : null;
  const genderYearChart = has('genderYearChart') ? echarts.init(el('genderYearChart')) : null;

  // ---- Chart renderers (kept simple, mirror your previous options) ----

  function renderDonut(data){
    if(!donutChart) return;

    const opt = {
      tooltip:{ trigger:'item', formatter:'{b}: {c} ({d}%)'},
      legend:{ bottom:0 },
      series:[{
        type:'pie',
        radius:['40%','70%'],
        data: data,
        avoidLabelOverlap:true,
        label:{show:false},
        emphasis:{label:{show:true,fontSize:14}},
        itemStyle:{
          color: function(params){
            if(params.name === "Pass") return "#1f7ed6";   // primary blue #00A82A
            if(params.name === "Fail") return "#ef4444";   // red
            return "#94a3b8"; // fallback
          }
        }
      }]
    };

    donutChart.setOption(opt, true);
  }


  function renderGrades(labels, values){
    if(!gradeChart) return;
    const option = {
      tooltip:{ trigger:'axis' },
      xAxis:{ type:'category', data: labels },
      yAxis:{ type:'value' },
      series:[{
        type:'bar',
        data: values,
        barWidth:'48%',
        itemStyle:{ borderRadius:[8,8,0,0],
          color: function(params){
            const grads = [
              ['#34d399','#059669'],
              ['#3b82f6','#1d4ed8'],
              ['#fbbf24','#f59e0b'],
              ['#a78bfa','#6d28d9'],
              ['#fb7185','#ef4444']
            ];
            const idx = params.dataIndex % grads.length;
            return new echarts.graphic.LinearGradient(0,0,0,1,[{offset:0,color:grads[idx][0]},{offset:1,color:grads[idx][1]}]);
          }
        },
        label:{ show:true, position:'top', fontWeight:'700' }
      }]
    };
    gradeChart.setOption(option, true);
  }
 
  function renderLine(years, avgMarks){
    if(!lineChart) return;

    const opt = {
      tooltip:{ 
        trigger:'axis',
        valueFormatter: v => v.toFixed(4)
      },

      grid:{
        left:70,
        right:30,
        top:40,
        bottom:50
      },

      xAxis:{ type:'category', data: years },

      yAxis:{
        type:'value',
        inverse:true,
        min:1,
        max:5,
        splitNumber:8,
        axisLabel:{ formatter: v => v.toFixed(4), margin:15 },
        name:'GPA',
        nameLocation:'middle',
        nameGap:55
      },

      series:[{
        type:'line',
        data: avgMarks,
        smooth:true,
        symbolSize:6,

        label:{
          show:true,                    // 🔥 makes GPA visible
          position:'top',
          formatter: p => p.value.toFixed(4)
        },

        areaStyle:{opacity:0.06},
        lineStyle:{width:3}
      }]
    };

    lineChart.setOption(opt, true);
  }




  function renderTopSchools(list){
    if(!topChart){ // still populate table
      populateTopTable(list); return;
    }
    if(!list || !list.length){
      topChart.clear();
      populateTopTable([]);
      return;
    }
    const names = list.map(i => i.school);
    const avgs = list.map(i => parseFloat(i.avg));
    const opt = {
      tooltip:{ trigger:'axis', axisPointer:{ type:'shadow' } },
      grid:{ left:'3%', right:'3%', bottom:'5%', containLabel:true },
      xAxis:{ type:'value' },
      yAxis:{ type:'category', data:names, inverse:true },
      series:[{ type:'bar', data:avgs, itemStyle:{ color:'#1f7ed6', borderRadius:[6,6,6,6] }, label:{ show:true, position:'right' } }]
    };
    topChart.setOption(opt, true);
    populateTopTable(list);
  }

  function populateTopTable(list){
    if(!has('top_schools_table')) return;
    if(!list || !list.length){
      el('top_schools_table').innerHTML = '<p class="small">No data</p>'; return;
    }
    let html = '<table class="table" style="width:100%; border-collapse:collapse"><thead><tr><th style="text-align:left">School</th><th style="text-align:right">Average</th><th style="text-align:right">Candidates</th></tr></thead><tbody>';
    list.forEach(r => {
      html += `<tr><td>${escapeHtml(r.school)}</td><td style="text-align:right">${r.avg}</td><td style="text-align:right">${r.candidates}</td></tr>`;
    });
    html += '</tbody></table>';
    el('top_schools_table').innerHTML = html;
  }

  function renderGenderYearChart(years, datasetSource){
    if(!genderYearChart) return;
    const option = {
      legend: { top: 10 },
      tooltip: { trigger: 'axis' },
      dataset: { dimensions: ['gender', ...years], source: datasetSource },
      xAxis: { type: 'category' },
      yAxis: { type: 'value' },
      series: years.map((y, idx) => ({ type:'bar', itemStyle:{ borderRadius:[6,6,0,0] } })),
      grid: { left:'5%', right:'5%', bottom:'10%', containLabel:true }
    };
    genderYearChart.setOption(option, true);
  }

  // ---- Core: load dashboard data and render all ----
  async function loadDashboard(){
    try{
      const params = new URLSearchParams();
      const fields = ['region','district','ward','school','examtype','ownership'];
      fields.forEach(f => { if(has('filter_' + f)){ const v = el('filter_' + f).value; if(v) params.append(f, v); }});
      if (has('filter_gender')) {
          const g = el('filter_gender').value;
          if (g) params.append('gender', g);
      }
      if(has('filter_start')) params.append('start_year', el('filter_start').value);
      if(has('filter_end'))   params.append('end_year', el('filter_end').value);

      const url = "{% url 'exams:ajax_dashboard_data' %}?" + params.toString();
      const data = await getJSON(url);
 
      // KPIs
      if(has('kpi_total')) el('kpi_total').innerText = (data.cards && data.cards[1]) ? (data.cards[1].value||0).toLocaleString() : '—';
      if(has('kpi_avg'))   el('kpi_avg').innerText   = (data.cards && data.cards[2]) ? (data.cards[2].value||'—') : (data.line && data.line.avg_marks && data.line.avg_marks.length ? data.line.avg_marks.slice(-1)[0] : '—');

      // Charts
      renderDonut(data.donut || [{name:'Pass',value:0},{name:'Fail',value:0}]);
      renderLine((data.line && data.line.years) ? data.line.years : [], (data.line && data.line.avg_marks) ? data.line.avg_marks : []);
      renderTopSchools(data.top_schools || []);
      renderGrades((data.grades && data.grades.labels) ? data.grades.labels : [], (data.grades && data.grades.values) ? data.grades.values : []);

      // pass/fail kpi numbers

      const pass = (data.donut && data.donut.find(d => d.name=='Pass')) 
                   ? data.donut.find(d => d.name=='Pass').value : 0;

      const fail = (data.donut && data.donut.find(d => d.name=='Fail')) 
                   ? data.donut.find(d => d.name=='Fail').value : 0;

      const total = pass + fail || (data.cards && data.cards[1] ? data.cards[1].value : 0);

      const passRate = total ? ((pass / total) * 100).toFixed(1) : 0;
      const failRate = total ? ((fail / total) * 100).toFixed(1) : 0;

      el('kpi_pass').innerText = pass.toLocaleString() + ' = ' + passRate + '%';
      el('kpi_fail').innerText = fail.toLocaleString() + ' = ' + failRate + '%';
      el('kpi_total').innerText = total.toLocaleString();

      if(has('kpi_i_iii')){
          const v = data.gender_kpi?.pass_i_iii || 0;
          const pct = data.gender_kpi?.pass_i_iii_pct || 0;
          el('kpi_i_iii').innerText = v.toLocaleString() + " = " + pct + "%";
      }




      // gender/year chart
      if(data.gender_pass && Array.isArray(data.gender_pass.years)){
        const years = data.gender_pass.years;
        const male = data.gender_pass.male || [];
        const female = data.gender_pass.female || [];
        const dataset = [
          Object.assign({ gender: 'Male' }, years.reduce((o,y,i)=>{ o[y] = male[i]||0; return o; }, {})),
          Object.assign({ gender: 'Female' }, years.reduce((o,y,i)=>{ o[y] = female[i]||0; return o; }, {}))
        ];
        renderGenderYearChart(years, dataset);
      }

    }catch(err){
      console.error('loadDashboard error', err);
      // don't spam user but show a light alert
      // alert('Failed to load dashboard — check console');
    }
  }

  // ---- Reset / Apply handlers ----
  if(has('applyFilters')) el('applyFilters').addEventListener('click', loadDashboard);

  if(has('resetFilters')) el('resetFilters').addEventListener('click', async function(){
      // behaviour depends on role
      if(USER_ROLE === "super"){
        if(has('filter_region')) el('filter_region').value = '';
        if(has('filter_district')) el('filter_district').innerHTML = '<option value="">All districts</option>';
        if(has('filter_ward')) el('filter_ward').innerHTML = '<option value="">All wards</option>';
        if(has('filter_school')) el('filter_school').innerHTML = '<option value="">All schools</option>';
      }
      else if(USER_ROLE === "region"){
        if(has('filter_region')) el('filter_region').value = USER_REGION;
        await loadDistricts(USER_REGION);
        if(has('filter_district')) el('filter_district').value = '';
        if(has('filter_ward')) el('filter_ward').innerHTML = '<option value="">All wards</option>';
        if(has('filter_school')) el('filter_school').innerHTML = '<option value="">All schools</option>';
      }
      else if(USER_ROLE === "district"){
        if(has('filter_region')) el('filter_region').value = USER_REGION;
        await loadDistricts(USER_REGION);
        if(has('filter_district')) el('filter_district').value = USER_DISTRICT;
        await loadWards(USER_DISTRICT);
        if(has('filter_ward')) el('filter_ward').value = '';
        if(has('filter_school')) el('filter_school').innerHTML = '<option value="">All schools</option>';
      }
      else if(USER_ROLE === "ward"){
        if(has('filter_region')) el('filter_region').value = USER_REGION;
        await loadDistricts(USER_REGION);
        if(has('filter_district')) el('filter_district').value = USER_DISTRICT;
        await loadWards(USER_DISTRICT);
        if(has('filter_ward')) el('filter_ward').value = USER_WARD;
        await loadSchools(USER_WARD);
        if(has('filter_school')) el('filter_school').value = '';
      }
      else if(USER_ROLE === "school"){
        if(has('filter_region')) el('filter_region').value = USER_REGION;
        await loadDistricts(USER_REGION);
        if(has('filter_district')) el('filter_district').value = USER_DISTRICT;
        await loadWards(USER_DISTRICT);
        if(has('filter_ward')) el('filter_ward').value = USER_WARD;
        await loadSchools(USER_WARD);
        if(has('filter_school')) el('filter_school').value = USER_SCHOOL;
      }

      // reset common fields
      if(has('filter_gender')) el('filter_gender').value = '';
      if(has('filter_examtype')) el('filter_examtype').value = '';
      if(has('filter_ownership')) el('filter_ownership').value = '';
      if(has('filter_start')) el('filter_start').value = 2022;
      if(has('filter_end')) el('filter_end').value = 2025;

      // reload
      await loadDashboard();
  });

    if(lineChart && has('exportLinePNG')){
      el('exportLinePNG').addEventListener('click', () => {

        const url = lineChart.getDataURL({
          type: 'png',
          pixelRatio: 2,
          backgroundColor: '#fff'
        });

        const a = document.createElement('a');
        a.href = url;
        a.download = 'avg_marks.png';
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      });
    }

  // ---- Export buttons (correct & reliable) ----
  try{

    function exportPNG(chart, filename){
      const url = chart.getDataURL({
        type:'png',
        pixelRatio:2,
        backgroundColor:'#fff'
      });

      const a = document.createElement('a');
      a.href = url;
      a.download = filename + '.png';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    }

    if(donutChart && has('exportDonutPNG'))
      el('exportDonutPNG').addEventListener('click', ()=> exportPNG(donutChart,'pass_fail'));

    if(lineChart && has('exportLinePNG'))
      el('exportLinePNG').addEventListener('click', ()=> exportPNG(lineChart,'avg_marks'));

    if(topChart && has('exportBarPNG'))
      el('exportBarPNG').addEventListener('click', ()=> exportPNG(topChart,'top_schools'));

    if(gradeChart && has('exportGradeBarPNG'))
      el('exportGradeBarPNG').addEventListener('click', ()=> exportPNG(gradeChart,'grade_distribution'));

    if(genderYearChart && has('exportGenderPNG'))
      el('exportGenderPNG').addEventListener('click', ()=> exportPNG(genderYearChart,'gender_yearly'));

  }catch(e){
    console.warn('export bind error', e);
  }

  // ---- Export buttons (safely bind if charts exist) ----


  // ---- CSV download for top table ----
  if(has('downloadTableCSV')){
    el('downloadTableCSV').addEventListener('click', function(){
      const rows = [];
      const trs = document.querySelectorAll('#top_schools_table table tbody tr');
      if(!trs.length){ alert('No data to download'); return; }
      rows.push(['School','Average','Candidates']);
      trs.forEach(tr => {
        const tds = tr.querySelectorAll('td');
        rows.push([tds[0].innerText.trim(), tds[1].innerText.trim(), tds[2].innerText.trim()]);
      });
      const csv = rows.map(r => r.map(c => `"${(c||'').replace(/"/g,'""')}"`).join(',')).join('\n');
      const blob = new Blob([csv], {type:'text/csv;charset=utf-8;'});
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a'); a.href = url; a.download = 'top_schools.csv'; a.click(); URL.revokeObjectURL(url);
    });
  }

  // ---- INITIALIZER: intelligent boot (respect user role/pre-filled fields) ----
  (async function init(){
    try{
      // if lower-level user (district/ward/school) — keep backend pre-filled values,
      // but still load dependent selects so UI shows proper options.
      if(['district','ward','school'].includes(USER_ROLE)){
        if(USER_REGION) {
          if(has('filter_region')) el('filter_region').value = USER_REGION;
          await loadDistricts(USER_REGION);
        }
        if(USER_DISTRICT){
          if(has('filter_district')) el('filter_district').value = USER_DISTRICT;
          await loadWards(USER_DISTRICT);
        }
        if(USER_WARD){
          if(has('filter_ward')) el('filter_ward').value = USER_WARD;
          await loadSchools(USER_WARD);
        }
        // ensure school selected for school users
        if(USER_ROLE === 'school' && has('filter_school')) el('filter_school').value = USER_SCHOOL;

        // finally load the dashboard
        await loadDashboard();
        // wire resize once
        window.addEventListener('resize', ()=>{ if(donutChart) donutChart.resize(); if(gradeChart) gradeChart.resize(); if(lineChart) lineChart.resize(); if(topChart) topChart.resize(); if(genderYearChart) genderYearChart.resize(); });
        return;
      }

      // For super and region users: if a region is pre-selected (e.g. region admin),
      // load districts; otherwise show all.
      const regionVal = has('filter_region') ? el('filter_region').value : '';
      if(regionVal) await loadDistricts(regionVal);

      const districtVal = has('filter_district') ? el('filter_district').value : '';
      if(districtVal) await loadWards(districtVal);

      const wardVal = has('filter_ward') ? el('filter_ward').value : '';
      if(wardVal) await loadSchools(wardVal);

      await loadDashboard();

      // wire resize once
      window.addEventListener('resize', ()=>{ if(donutChart) donutChart.resize(); if(gradeChart) gradeChart.resize(); if(lineChart) lineChart.resize(); if(topChart) topChart.resize(); if(genderYearChart) genderYearChart.resize(); });

    }catch(err){
      console.error('init error', err);
    }
  })();

})();
</script>



<script>
document.getElementById("btnExportPDF").onclick = function () {
    const dashboard = document.querySelector(".dashboard-container");

    html2canvas(dashboard).then(canvas => {
        const imgData = canvas.toDataURL("image/png");
        const pdf = new jspdf.jsPDF("p", "mm", "a4");

        const width = pdf.internal.pageSize.getWidth();
        const height = (canvas.height * width) / canvas.width;

        pdf.addImage(imgData, "PNG", 0, 0, width, height);
        pdf.save("dashboard-report.pdf");
    });
};

document.getElementById("btnExportJPG").onclick = function () {
    const dashboard = document.querySelector(".dashboard-container");

    html2canvas(dashboard).then(canvas => {
        const link = document.createElement("a");
        link.download = "dashboard-report.jpg";
        link.href = canvas.toDataURL("image/jpeg", 0.9);
        link.click();
    });
};
</script>






<script>
document.addEventListener("DOMContentLoaded", function(){

  let currentSchool = "";

  document.querySelectorAll(".openSchoolResultsModal").forEach(btn => {
    btn.addEventListener("click", function(){

      currentSchool = this.dataset.school;
      const name = this.dataset.schoolName;

      document.getElementById("resultsSchoolName").innerText = name;

      const modal = new bootstrap.Modal(
        document.getElementById("schoolResultsModal")
      );
      modal.show();
    });
  });

  document.getElementById("openResultsLink").addEventListener("click", function(){

    const year = document.getElementById("resultsYear").value;
    const exam = document.getElementById("resultsExamType").value;

    const url = `https://onlinesys.necta.go.tz/results/${year}/${exam}/results/${currentSchool}.htm`;

    window.open(url, "_blank");
  });

});
</script>




<script>
document.addEventListener("DOMContentLoaded", function () {

  let trendSchool = "";

  // OPEN MODAL
  document.querySelectorAll(".openSchoolTrendModal").forEach(btn => {
    btn.addEventListener("click", function () {

      trendSchool = this.dataset.school;
      const name = this.dataset.schoolName;

      document.getElementById("trendSchoolName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("schoolTrendModal")
      ).show();
    });
  });

  // BUILD URL + OPEN
  document.getElementById("schoolTrendHtml").addEventListener("click", function () {

    const exam  = document.getElementById("schoolTrendExam").value;
    const start = document.getElementById("schoolTrendStartYear").value;
    const end   = document.getElementById("schoolTrendEndYear").value;

    if (!exam || !start || !end) {
      alert("Please select exam type and years");
      return;
    }

    const url =
      `/reports/school-trend-html/`
      + `?school=${trendSchool}`
      + `&exam_type_id=${exam}`
      + `&start=${start}`
      + `&end=${end}`;

    window.open(url, "_blank");
  });

});
</script>






<script>
document.addEventListener("DOMContentLoaded", function(){

  let trendRegion = "";

  document.querySelectorAll(".openRegionTrendModal").forEach(btn => {
    btn.addEventListener("click", function(){

      trendRegion = this.dataset.region;
      const name = this.dataset.regionName;

      document.getElementById("trendRegionName").innerText = name;

      const modal = new bootstrap.Modal(
        document.getElementById("regionTrendModal")
      );
      modal.show();
    });
  });

  document.getElementById("openRegionTrendLink").addEventListener("click", function(){

    const s = document.getElementById("regionTrendStartYear").value;
    const e = document.getElementById("regionTrendEndYear").value;
    const exam = document.getElementById("regionTrendExamType").value;

    const url =
      `/reports/region-trend-html/?region=${trendRegion}&start=${s}&end=${e}&exam_type_id=${exam}`;

    window.open(url);
  });

});
</script>







<script>
document.addEventListener("DOMContentLoaded", function(){

  let trendDistrict = "";

  document.querySelectorAll(".openDistrictTrendModal").forEach(btn => {
    btn.addEventListener("click", function(){

      trendDistrict = this.dataset.district;
      const name = this.dataset.districtName;

      document.getElementById("trendDistrictName").innerText = name;

      const modal = new bootstrap.Modal(
        document.getElementById("districtTrendModal")
      );
      modal.show();
    });
  });

  document.getElementById("openDistrictTrendLink").addEventListener("click", function(){

    const s = document.getElementById("districtTrendStartYear").value;
    const e = document.getElementById("districtTrendEndYear").value;
    const exam = document.getElementById("districtTrendExamType").value;

    const url =
      `/reports/district-trend-html/?district=${trendDistrict}&start=${s}&end=${e}&exam_type_id=${exam}`;

    window.open(url);
  });

});
</script>




<!-- SCHOOL RANK REGION-->
<script>
document.addEventListener("DOMContentLoaded", function(){

  let rankRegion = "";

  document.querySelectorAll(".openRegionSchoolRankModal").forEach(btn=>{
    btn.addEventListener("click", function(){

      rankRegion = this.dataset.region;
      const name = this.dataset.regionName;

      document.getElementById("regionRankName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("regionSchoolRankModal")
      ).show();

      updateLinks();
    });
  });

  function updateLinks(){

    const year = document.getElementById("regionRankYear").value;
    const exam = document.getElementById("regionRankExam").value;

    document.getElementById("regionRankNormal").href =
      `/reports/region-school-rank-html/?region=${rankRegion}&year=${year}&exam_type_id=${exam}`;

    document.getElementById("regionRankExtended").href =
      `/reports/region-school-rank-ext-html/?region=${rankRegion}&year=${year}&exam_type_id=${exam}`;
  }

  document.getElementById("regionRankYear").addEventListener("change", updateLinks);
  document.getElementById("regionRankExam").addEventListener("change", updateLinks);

});
</script>







<!-- SCHOOL RANK DISTRICT-->
<script>
document.addEventListener("DOMContentLoaded", function(){

  let rankDistrict = "";

  document.querySelectorAll(".openDistrictSchoolRankModal").forEach(btn=>{
    btn.addEventListener("click", function(){

      rankDistrict = this.dataset.district;
      const name = this.dataset.districtName;

      document.getElementById("districtRankName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("districtSchoolRankModal")
      ).show();

      updateLinks();
    });
  });

  function updateLinks(){

    const year = document.getElementById("districtRankYear").value;
    const exam = document.getElementById("districtRankExam").value;

    document.getElementById("districtRankNormal").href =
      `/reports/district-school-rank-html/?district=${rankDistrict}&year=${year}&exam_type_id=${exam}`;

    document.getElementById("districtRankExtended").href =
      `/reports/district-school-rank-ext-html/?district=${rankDistrict}&year=${year}&exam_type_id=${exam}`;
  }

  document.getElementById("districtRankYear").addEventListener("change", updateLinks);
  document.getElementById("districtRankExam").addEventListener("change", updateLinks);

});
</script>



<script>
document.addEventListener("DOMContentLoaded", function(){

  const modal = new bootstrap.Modal(
    document.getElementById("subjectPerfModal")
  );

  let regionId = "";
  let regionName = "";

  document.querySelector(".openSubjectPerfModal")
    .addEventListener("click", function(){

      regionId = this.dataset.region;
      regionName = this.dataset.regionName;

      document.getElementById("modalRegionId").value = regionId;
      document.getElementById("modalRegionName").innerText = regionName;

      modal.show();
      updateLinks();
    });

  function updateLinks(){

    const exam = document.getElementById("subjectExamType").value;
    const year = document.getElementById("subjectYear").value;
    const subject = document.getElementById("subjectSelect").value;

    document.getElementById("btnSubjectRankDistrict").href =
      `/reports/subject-district-rank-html/?region=${regionId}&exam_type_id=${exam}&year=${year}&subject=${subject}`;

    document.getElementById("btnSubjectRankNormal").href =
      `/reports/subject-reg-school-rank-html/?region=${regionId}&exam_type_id=${exam}&year=${year}&subject=${subject}`;

    document.getElementById("btnSubjectRankExtended").href =
      `/reports/subject-reg-school-rank-ext-html/?region=${regionId}&exam_type_id=${exam}&year=${year}&subject=${subject}`;
  }

  ["subjectExamType","subjectYear","subjectSelect"].forEach(id=>{
    document.getElementById(id).addEventListener("change", updateLinks);
  });

});
</script>








<!-- DISTRICTS -->
<script>
document.addEventListener("DOMContentLoaded", function(){

  const modal = new bootstrap.Modal(
    document.getElementById("subjectDisPerfModal")
  );

  let districtId = "";
  let districtName = "";

  document.querySelector(".openSubjectDisPerfModal")
    .addEventListener("click", function(){

      districtId = this.dataset.district;
      districtName = this.dataset.districtName;

      document.getElementById("modalDistrictId").value = districtId;
      document.getElementById("modalDistrictName").innerText = districtName;

      modal.show();
      updateLinks();
    });

  function updateLinks(){

    const exam = document.getElementById("subjectDisExamType").value;
    const year = document.getElementById("subjectDisYear").value;
    const subject = document.getElementById("subjectDisSelect").value;

    document.getElementById("btnSubjectDisRankNormal").href =
      `/reports/subject-dis-school-rank-html/?district=${districtId}&exam_type_id=${exam}&year=${year}&subject=${subject}`;

    document.getElementById("btnSubjectDisRankExtended").href =
      `/reports/subject-dis-school-rank-ext-html/?district=${districtId}&exam_type_id=${exam}&year=${year}&subject=${subject}`;
  }

  ["subjectDisExamType","subjectDisYear","subjectDisSelect"].forEach(id=>{
    document.getElementById(id).addEventListener("change", updateLinks);
  });

});
</script>



<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {

  let trendSchool = "";

  document.querySelectorAll(".openSchoolSubjectTrendModal").forEach(btn => {
    btn.addEventListener("click", function () {

      trendSchool = this.dataset.school;
      const name = this.dataset.schoolName;

      document.getElementById("schoolSubjectTrendName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("schoolSubjectTrendModal")
      ).show();
    });
  });

  document.getElementById("schoolSubjectTrendView").addEventListener("click", function () {

    const subject = document.getElementById("schoolSubjectTrendSubject").value;
    const exam    = document.getElementById("schoolSubjectTrendExam").value;
    const start   = document.getElementById("schoolSubjectTrendStart").value;
    const end     = document.getElementById("schoolSubjectTrendEnd").value;

    const url =
      `/reports/school-subject-trend-html/`
      + `?school=${trendSchool}`
      + `&subject=${subject}`
      + `&exam_type_id=${exam}`
      + `&start=${start}`
      + `&end=${end}`;

    window.open(url, "_blank");
  });

});

</script>









<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {

  let trendRegion = "";

  document.querySelectorAll(".openRegSubjectTrendModal").forEach(btn => {
    btn.addEventListener("click", function () {

      trendRegion = this.dataset.region;
      const name = this.dataset.regionName;

      document.getElementById("regionSubjectTrendName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("regionSubjectTrendModal")
      ).show();
    });
  });

  document.getElementById("regionSubjectTrendView").addEventListener("click", function () {

    const subject = document.getElementById("regionSubjectTrendSubject").value;
    const exam    = document.getElementById("regionSubjectTrendExam").value;
    const start   = document.getElementById("regionSubjectTrendStart").value;
    const end     = document.getElementById("regionSubjectTrendEnd").value;

    const url =
      `/reports/region-subject-trend-html/`
      + `?region=${trendRegion}`
      + `&subject=${subject}`
      + `&exam_type_id=${exam}`
      + `&start=${start}`
      + `&end=${end}`;

    window.open(url, "_blank");
  });

});

</script>









<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {

  let trendDistrict = "";

  document.querySelectorAll(".openDisSubjectTrendModal").forEach(btn => {
    btn.addEventListener("click", function () {

      trendDistrict = this.dataset.district;
      const name = this.dataset.districtName;

      document.getElementById("districtSubjectTrendName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("districtSubjectTrendModal")
      ).show();
    });
  });

  document.getElementById("districtSubjectTrendView").addEventListener("click", function () {

    const subject = document.getElementById("districtSubjectTrendSubject").value;
    const exam    = document.getElementById("districtSubjectTrendExam").value;
    const start   = document.getElementById("districtSubjectTrendStart").value;
    const end     = document.getElementById("districtSubjectTrendEnd").value;

    const url =
      `/reports/district-subject-trend-html/`
      + `?district=${trendDistrict}`
      + `&subject=${subject}`
      + `&exam_type_id=${exam}`
      + `&start=${start}`
      + `&end=${end}`;

    window.open(url, "_blank");
  });

});

</script>
{% endblock %}