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

{% block page_title %}School-wise Reports{% endblock %}

{% block content %}
<div class="container mt-4">
  <div class="card">

    <div class="card-header bg-primary text-white">
      <h3 class="fw-bold mb-0">
        <i class="fas fa-school"></i> School-wise Reports
      </h3>
    </div>

    <div class="card-body">
      <table id="schoolTable" class="table table-bordered table-striped">
        <thead class="table-dark">
          <tr>
            <th>School</th>
            <th>Ward</th>
            <th>District</th>
            <th>Region</th>
            <th>Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for s in schools %}
          <tr>
            <td>{{ s.name }}</td>
            <td>{{ s.ward.name }}</td>
            <td>{{ s.district.name }}</td>
            <td>{{ s.district.region.name }}</td>
            <td>
              <button class="btn btn-primary btn-sm openSchoolGeneral"
                      data-school="{{ s.school_code }}"
                      data-school-name="{{ s.name }}">
                Summary#Graph#Charts
              </button>

              <button class="btn btn-success btn-sm openSchoolTrendModal"
                      data-school="{{ s.school_code }}"
                      data-school-name="{{ s.name }}">
                ▲▼TREND.S
              </button>

<!--               <button class="btn btn-info btn-sm openSchoolSubjectPerfModal"
                      data-school="{{ s.school_code }}"
                      data-school-name="{{ s.name }}">
                SUBJ.PERF
              </button> -->

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

            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

  </div>
</div>




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

      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">School Report Options</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

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

        <label class="fw-bold">Exam Type</label>
        <select id="schoolExamTypeSelect" 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="schoolYearSelect" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

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

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


<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="schoolTrendName" class="text-center fw-bold mb-3"></h5>

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

        <label class="fw-bold">Start Year</label>
        <select id="schoolTrendStart" 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="schoolTrendEnd" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

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

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


<div class="modal fade" id="schoolSubjectPerfModal" 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 Performance</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

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

        <label class="fw-bold">Exam Type</label>
        <select id="schoolSubjectPerfExam" 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="schoolSubjectPerfYear" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <label class="fw-bold">Subject</label>
        <select id="schoolSubjectPerfSubject" 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="schoolSubjectPerfBtn" class="btn btn-info">VIEW</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>





<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.6/js/dataTables.bootstrap5.min.js"></script>

<script>
$(document).ready(function () {

  const table = $('#schoolTable').DataTable({
    pageLength: 10,
    responsive: true,
    autoWidth: false
  });

  /* ================= GENERAL ================= */
  $('#schoolTable').on('click', '.openSchoolGeneral', function () {

    const school = $(this).data('school');
    const name = $(this).data('school-name');

    $('#schoolNameDisplay').text(name);

    function update() {
      const year = $('#schoolYearSelect').val();
      const exam = $('#schoolExamTypeSelect').val();

      $('#schoolSummaryHtml').attr(
        'href',
        `/reports/school-summary-html/?school=${school}&year=${year}&exam_type_id=${exam}`
      );
    }

    $('#schoolYearSelect, #schoolExamTypeSelect')
      .off().on('change', update);

    update();
    new bootstrap.Modal('#schoolGeneralModal').show();
  });

  /* ================= ▲▼TREND.S ================= */
  $('#schoolTable').on('click', '.openSchoolTrendModal', function () {

    const school = $(this).data('school');
    const name = $(this).data('school-name');

    $('#schoolTrendName').text(name);

    function updateTrend() {
      const exam = $('#schoolTrendExam').val();
      const s = $('#schoolTrendStart').val();
      const e = $('#schoolTrendEnd').val();

      $('#schoolTrendHtmlBtn').attr(
        'href',
        `/reports/school-trend-html/?school=${school}&exam_type_id=${exam}&start=${s}&end=${e}`
      );
    }

    $('#schoolTrendExam, #schoolTrendStart, #schoolTrendEnd')
      .off().on('change', updateTrend);

    updateTrend();
    new bootstrap.Modal('#schoolTrendModal').show();
  });

  /* ================= SUBJ.PERF ================= */
  $('#schoolTable').on('click', '.openSchoolSubjectPerfModal', function () {

    const school = $(this).data('school');
    const name = $(this).data('school-name');

    $('#schoolSubjectPerfName').text(name);

    $('#schoolSubjectPerfBtn')
      .off().on('click', function () {

        const exam = $('#schoolSubjectPerfExam').val();
        const year = $('#schoolSubjectPerfYear').val();
        const subject = $('#schoolSubjectPerfSubject').val();

        window.location.href =
          `/reports/school-subject-performance/?school=${school}`
          + `&year=${year}&exam_type_id=${exam}&subject=${subject}`;
      });

    new bootstrap.Modal('#schoolSubjectPerfModal').show();
  });

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


{% endblock %}