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






</div>









<div class="dashboard-header">
    <h2>JOINT EXAMINATIONS RESULTS - KIGOMA {{ request.user.username }} ({{ request.user.profile.role|upper }})</h2>
</div>



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

<!--   <div class="kpi-box kpi-primary">
    <div class="kpi-title">Total Projects</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">O-Level</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">A-Level</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">Primary - Level</div>
    <div class="kpi-value" id="kpi_i_iii">—</div>
    <i class="kpi-icon fas fa-chart-line"></i>
  </div> -->

</div>






<div class="container mt-4">

  <div class="d-flex justify-content-between align-items-center mb-3">
    <h4>
      <i class="fas fa-project-diagram"></i> Joint Exam Projects
    </h4>


  </div>

  <table class="table table-bordered table-striped">
    <thead class="table-info">
      <tr>
        <th>Name</th>
        <th>Level</th>
        <th>Actions</th>
      </tr>
    </thead>

    <tbody>
      {% for project in projects %}
      <tr>
        <td>{{ project.name }}</td>

        <td>
          {% if project.is_active %}
            <span class="badge bg-success">Active</span>
          {% else %}
            <span class="badge bg-secondary">Inactive</span>
          {% endif %}

<!-- <a href="{% url 'exams:scripts_by_combination_upload' project.id %}"
   class="btn btn-primary btn-sm">
   <i class="fas fa-upload"></i> Upload by Comb
</a> -->

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

<!-- <a href="{% url 'exams:project_students_upload' project.id %}"
   class="btn btn-warning btn-sm">
   <i class="fas fa-upload"></i> Upload Students/Scripts
</a>
 -->

<!-- Add at the top of the page -->
<a href="{% url 'exams:project_students_list' project.id %}" class="btn btn-secondary btn-sm">
    <i class="fas fa-list"></i> Student Management
</a>



<!-- In sidebar.html -->
<a href="{% url 'exams:project_papers_upload' project.id %}"
   class="btn btn-primary btn-sm">
   <i class="fas fa-upload"></i> Scripts Bulk-Upload
</a>


<a href="{% url 'exams:school_registration_list' project.id %}" 
   class="btn btn-success btn-sm">
    <i class="fas fa-user-edit"></i> Scripts Management
</a>





<a href="{% url 'exams:upload_final_processed_scores' project.id %}"
   class="btn btn-danger btn-sm">
   <i class="fas fa-upload"></i> Upload Final Mark
</a>

<a href="{% url 'exams:project_process_subjects' project.id %}"
   class="btn btn-success btn-sm">
   <i class="fas fa-cogs"></i> Process SubjectsFinalMark
</a>


<a href="{% url 'exams:process_student_results_page' project.id %}"
   class="btn btn-warning btn-sm">
   <i class="fas fa-cogs"></i> Process Results/Ranking
</a>


<a href="{% url 'exams:manage_school_results' project.id %}"
   class="btn btn-success btn-sm">
   <i class="fas fa-cogs"></i> Release Results
</a>


<a href="{% url 'exams:project_school_ranking' project.id %}"
   class="btn btn-info btn-sm">
   <i class="fas fa-cogs"></i> Quick Rank
</a>


<a href="{% url 'exams:rank_summary_page' project.id %}"
   class="btn btn-primary btn-sm">
   <i class="fas fa-cogs"></i> RANK-SUMMARY-page
</a>

<a href="{% url 'exams:export_exam_scores_csv' project.id %}"
   class="btn btn-outline-primary btn-sm">
   <i class="fas fa-file-csv"></i> BackUps-Exam Scores (CSV)
</a>

<a href="{% url 'exams:export_all_subject_scores_csv' project.id %}"
   class="btn btn-outline-success btn-sm">
   <i class="fas fa-file-csv"></i> BackUps-ProcessedSubject (CSV)
</a>

<a href="{% url 'exams:export_exam_scores_pivot_csv' project.id %}"
   class="btn btn-outline-danger btn-sm">
   <i class="fas fa-file-csv"></i> BackUps-PivotScores(CSV)
</a>

<a href="{% url 'exams:export_processed_scores_pivot_csv' project.id %}"
   class="btn btn-outline-info btn-sm">
   <i class="fas fa-file-csv"></i> BackUps-PivotProcessed(CSV)
</a>

<!-- Using calculator icon -->
<a href="{% url 'exams:subject_standardization_list' project.id %}" 
   class="btn btn-outline-warning btn-sm">
   <i class="fas fa-calculator"></i> STANDARDIZE Processed
</a>


<a href="{% url 'exams:examscore_standardization_list' project.id %}" class="btn btn-warning">
    <i class="fas fa-balance-scale"></i> STANDARDIZE Papers
</a>


<a href="{% url 'exams:examscore_standardization_list' project.id %}" class="btn btn-warning">
    <i class="fas fa-balance-scale"></i> SCHOOL-STANDARDIZE
</a>


{% endif %}


{% if user.is_superuser or user.profile.role == "data" %}
<a href="{% url 'exams:project_marks_subjects' project.id %}"
   class="btn btn-primary btn-sm">
   <i class="fas fa-keyboard"></i> Marks Capture
</a>

<a href="{% url 'exams:project_marks_subjects' project.id %}"
   class="btn btn-success btn-sm">
   <i class="fas fa-chart-line"></i> Progress
</a>


<a href="{% url 'exams:update_scores_page' project.id %}"
   class="btn btn-success btn-sm">
   <i class="fas fa-chart-line"></i> Score-Update
</a>

{% endif %}




        </td>

        <td>{{ project.academic_level.name }}</td>
        
      </tr>
      {% empty %}
      <tr>
        <td colspan="4" class="text-center text-muted">
          No projects found
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</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;

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




  // ---- 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');
    }
  }
</script>



{% endblock %}