{% load math_tags %}


<style>
.pdf-page-break {
  page-break-before: always;
  break-before: page;
}
</style>


<div class="pdf-page-break" id="subjectSection">

{% if division_performance %}
<table class="table table-bordered division-table" style="margin-top:10px;">
  <thead>

<tr class="center"><th colspan="23" class="permision">SUBJECT PERFOMANCE</th>

    <tr class="center">
      <th>DIVISION</th>
      <th>POINT</th>
      <th>TOTAL</th>
      <th>%</th>
    </tr>
  </thead>
  <tbody>
    {% for r in division_performance %}
    <tr class="center">
      <td>{{ r.division }}</td>
      <td>{{ r.point }}</td>
      <td>{{ r.total }}</td>
      <td>{{ r.pct }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}



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


{% if division_perf_summary %}
<div class="card mt-3">
  <div class="card-header text-center fw-bold">
    DIVISION PERFORMANCE (I–II–III–IV–0)
    <button id="exportDivisionPiePNG"
            class="btn btn-sm btn-outline-primary float-end">
      PNG
    </button>
  </div>

  <div class="card-body">
    <div id="divisionPie3D"
         style="width:100%; height:380px;"></div>
  </div>
</div>
{% endif %}






















{% if division_perf_summary %}
<script>
document.addEventListener("DOMContentLoaded", function(){

  const chartEl = document.getElementById("divisionPie3D");
  const chart = echarts.init(chartEl);

  const data = [
    {% for r in division_perf_summary %}
      {
        name: "{{ r.division }}",
        value: {{ r.total }}
      },
    {% endfor %}
  ];

  const colors = {
    "I":   ["#2ecc71", "#27ae60"],
    "II":  ["#3498db", "#2980b9"],
    "III": ["#f1c40f", "#d4ac0d"],
    "IV":  ["#e67e22", "#ca6f1e"],
    "0":   ["#e74c3c", "#c0392b"]
  };

  chart.setOption({
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>Candidates: {c}<br/>({d}%)"
    },

    legend: {
      bottom: 5,
      textStyle: { fontWeight: "bold" }
    },

    series: [{
      name: "Division Performance",
      type: "pie",
      radius: ["35%", "70%"],   // gives depth illusion
      center: ["50%", "50%"],
      roseType: false,

      label: {
        show: true,
        fontWeight: "bold",
        formatter: "{b}\n{d}%"
      },

      labelLine: {
        length: 15,
        length2: 10
      },

      itemStyle: {
        shadowBlur: 25,
        shadowOffsetY: 12,
        shadowColor: "rgba(0,0,0,0.35)"
      },

      data: data.map(d => ({
        ...d,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: colors[d.name][0] },
            { offset: 1, color: colors[d.name][1] }
          ])
        }
      }))
    }]
  });

  // ---------- EXPORT PNG ----------
  document
    .getElementById("exportDivisionPiePNG")
    .addEventListener("click", function(){

      const url = chart.getDataURL({
        type: "png",
        pixelRatio: 2,
        backgroundColor: "#ffffff"
      });

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


</script>
{% endif %}



















</body>
</html>