{% 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">

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

<div class="dashboard-header">
    <h2>SUBJECTS PERFOMANCE 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 200px">
  <label class="filter-label">
    <i class="fa fa-book"></i> Subject
  </label>

  <select id="filter_subject" class="form-control filter-select">
    <option value="">All Subjects</option>
    {% for s in subjects %}
      <option value="{{ s.subject_code }}">{{ s.subject_code }} - {{ s.subject_name_sw }}</option>
    {% endfor %}
  </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 %}
      </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 Grade</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</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</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">Average GPA</div>
    <div class="kpi-value" id="kpi_avg">—</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 Grade (A–F)</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>Subject Grade GPA per Year</strong>
  </div>

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

  </div>

<div class="chart-card" style="margin-top:18px">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
    <strong>GRADES BY SUBJECT</strong>
    <div style="display:flex;gap:8px">
      <button id="exportStackBarPNG" class="btn small">PNG</button>
    </div>
  </div>
  <div id="stackSubjectChart" style="height:360px"></div>
</div>




  <div id="genderYearChart" style="height:330px"></div>
</div>




  </div>


</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;

  const stackSubjectChart = has('stackSubjectChart') ? echarts.init(el('stackSubjectChart')) : 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'],
              ['#fb7185','#ef4444'],
              ['#a78bfa','#6d28d9']
            ];
            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 renderStackedSubjects(labels, grades, values){
    if(!stackSubjectChart) return;

    const colors = {
      "A":"#22c55e",
      "B":"#3b82f6",
      "C":"#facc15",
      "D":"#fb7185",
      "F":"#ef4444"
    };

    const series = grades.map(g => ({
      name: g,
      type: 'bar',
      stack: 'total',
      emphasis:{ focus:'series' },
      data: values[g],
      itemStyle:{ color: colors[g] },
      label:{ show:false }
    }));

    const opt = {
      tooltip:{ trigger:'axis', axisPointer:{ type:'shadow' }},
      legend:{ top:0 },
      grid:{ left:'3%', right:'3%', bottom:'12%', containLabel:true },
      xAxis:{ type:'category', data: labels },
      yAxis:{ type:'value' },
      series: series
    };

    stackSubjectChart.setOption(opt, 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();

      // ✅ MUST include subject
      const fields = [
        'region',
        'district',
        'ward',
        'school',
        'examtype',
        'ownership',
        'subject'
      ];

      fields.forEach(f => {
        if (has('filter_' + f)) {
          const v = el('filter_' + f).value;
          if (v) params.append(f, v);
        }
      });

      // ✅ Gender (already correct, keep it)
      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 = "/ajax/subject-dashboard-data/?" + params.toString();

      const url = "{% url 'exams:ajax_dashboard_subjectwise' %}?" + params.toString();
      
      const data = await getJSON(url);

      // =====================================================
      // ✅ KPI FIX (CORRECT CARD INDEXES)
      // cards = [total, pass, fail, avg]
      // =====================================================
      const total = data.cards?.[0]?.value || 0;
      const pass  = data.cards?.[1]?.value || 0;
      const fail  = data.cards?.[2]?.value || 0;
      const avg   = data.cards?.[3]?.value || '—';

      if (has('kpi_total')) el('kpi_total').innerText = total.toLocaleString();
      if (has('kpi_pass'))  el('kpi_pass').innerText  = pass.toLocaleString();
      if (has('kpi_fail'))  el('kpi_fail').innerText  = fail.toLocaleString();
      if (has('kpi_avg'))   el('kpi_avg').innerText   = avg;

      // =====================================================
      // Charts
      // =====================================================
      renderDonut(data.donut || [
        { name: 'Pass', value: 0 },
        { name: 'Fail', value: 0 }
      ]);

      renderGrades(
        data.grades?.labels || [],
        data.grades?.values || []
      );

      renderLine(
        data.line?.years || [],
        data.line?.avg_marks || []
      );

      if (data.top_schools) {
        renderTopSchools(data.top_schools);
      }

      if(data.stacked){
        renderStackedSubjects(
          data.stacked.subjects,
          data.stacked.grades,
          data.stacked.values
        );
      }

      // =====================================================
      // Gender / Year chart (only if provided)
      // =====================================================
      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);
    }
  }

  // ---- 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_subject')) el('filter_subject').value = '';
      if(has('filter_start')) el('filter_start').value = 2022;
      if(has('filter_end')) el('filter_end').value = 2025;
      // reload
      await loadDashboard();
  });

  // ---- Export buttons (safely bind if charts exist) ----
  try{
    if(donutChart && has('exportDonutPNG')) el('exportDonutPNG').addEventListener('click', ()=> donutChart.saveAsImage({type:'png',pixelRatio:2,name:'pass_fail'}));
    if(lineChart  && has('exportLinePNG'))  el('exportLinePNG').addEventListener('click', ()=> lineChart.saveAsImage({type:'png',pixelRatio:2,name:'avg_marks'}));
    if(topChart   && has('exportBarPNG'))   el('exportBarPNG').addEventListener('click', ()=> topChart.saveAsImage({type:'png',pixelRatio:2,name:'top_schools'}));
    if(gradeChart && has('exportGradeBarPNG')) el('exportGradeBarPNG').addEventListener('click', ()=> gradeChart.saveAsImage({type:'png',pixelRatio:2,name:'grade_distribution'}));
    if(genderYearChart && has('exportGenderPNG')) el('exportGenderPNG').addEventListener('click', ()=> genderYearChart.saveAsImage({type:'png',pixelRatio:2,name:'gender_yearly'}));
  }catch(e){ console.warn('export bind error', e); }

  // ---- 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>

{% endblock %}