{% extends 'exams/base.html' %}
{% load static %}
{% load math_tags %} 
{% block page_title %}{% endblock %}
{% block content %}


<div class="container mt-3">
  <div class="d-flex justify-content-between mb-3">
    <h3 style="text-align: center;"><i class="fas fa-chart-bar"></i> Summary – {{ school.name }} – {{ year }})</h3>
 
<a href="{% url 'exams:school_summary_print' %}
?school={{ school.school_code }}
&year={{ year }}
&exam_type_id={{ exam_type_id }}"
class="btn btn-warning">
  PRINT
</a>

<a href="{% url 'exams:school_summary_excel' %}
?school={{ school.school_code }}
&year={{ year }}
&exam_type_id={{ exam_type_id }}"
class="btn btn-secondary">
  <i class="fas fa-file-excel"></i> Excel
</a>





<button class="btn btn-primary btn-sm openSchoolModal"
        data-school="{{ school.school_code }}"
        data-school-name="{{ school.name }}">
  CHANGE YEAR
</button>


<!--     <a href="{% url 'exams:schoolwise' %}" class="btn btn-primary">
    <i class="fas fa-long-arrow-alt-left"></i> CHANGE YEAR
    </a> -->
  </div>
        {% include "exams/reports/school_summary_block.html" %}
</div>


<!-- =========================
     SCHOOL GENERAL MODAL
========================= -->
<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 Summary</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>
 
          <!-- EXAM TYPE -->
          <label class="fw-bold">Select 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>

          <!-- YEAR -->
          <label class="fw-bold">Select Year</label>
          <select id="schoolYearSelect" 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 id="schoolSummaryMsg" class="alert alert-warning d-none"></div>


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


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




<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>



<!-- DataTables -->
<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() {

  let table = $('#schoolTable').DataTable({
    pageLength: 10,
    lengthMenu: [10, 20, 50, 100],
    ordering: true,
    autoWidth: false,
    responsive: true
  });

  function rebindEvents() {
 
    // GENERAL
    $('.openSchoolModal').off().on('click', function () {

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

      $('#schoolNameDisplay').text(name);
      $('#schoolSummaryMsg').addClass('d-none').text('');

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

        $('#schoolSummaryHtml').off('click').on('click', function (e) {
          e.preventDefault();

          $('#schoolSummaryMsg')
            .removeClass('alert-danger alert-warning')
            .addClass('d-none')
            .text('');

          $.getJSON('/reports/check-school-summary/', {
            school: school,
            year: year,
            exam_type_id: exam
          })
          .done(function (res) {
            if (res.exists) {
              const url =
                `/reports/school-summary-html/?school=${school}`
                + `&year=${year}&exam_type_id=${exam}`;

              window.open(url, '_blank');
            } else {
              $('#schoolSummaryMsg')
                .removeClass('d-none')
                .addClass('alert-warning')
                .text(
                  'No results found for the selected exam type and year. ' +
                  'Please choose another combination.'
                ); 
            }
          })
          .fail(function () {
            $('#schoolSummaryMsg')
              .removeClass('d-none')
              .addClass('alert-danger')
              .text('Unable to verify data availability. Please try again.');
          });
        });
      }

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

      update();

      new bootstrap.Modal(
        document.getElementById('schoolGeneralModal')
      ).show();
    });



    // SUBJECT
    $('.openSchoolSubjectModal').off().on('click', function () {
      const school = $(this).data('school');
      const name = $(this).data('school-name');
      $('#subSchoolName').text(name);

      function update() {
        const y = $('#schoolSubjectYear').val();
        const s = $('#schoolSubjectSelect').val();
        $('#schoolSubjectHtml').attr(
          'href', `/reports/school-subject-summary-html/?school=${school}&year=${y}&subject=${s}`
        );
      }

      $('#schoolSubjectYear,#schoolSubjectSelect').off().on('change', update);
      update();

      new bootstrap.Modal(
          document.getElementById('schoolSubjectModal')
      ).show();

    });

    // TREND
    $('.openSchoolTrendModal').off().on('click', function () {
      const school = $(this).data('school');
      const name = $(this).data('school-name');
      $('#trendSchoolName').text(name);

      function update() {
        const s = $('#schoolTrendStartYear').val();
        const e = $('#schoolTrendEndYear').val();
        $('#schoolTrendHtml').attr('href', `/reports/school-trend-html/?school=${school}&start=${s}&end=${e}`);
        $('#schoolTrendPdf').attr('href', `/reports/school-trend-pdf/?school=${school}&start=${s}&end=${e}`);
        $('#schoolTrendExcel').attr('href', `/reports/school-trend-excel/?school=${school}&start=${s}&end=${e}`);
      }

      $('#schoolTrendStartYear,#schoolTrendEndYear').off().on('change', update);
      update();

      new bootstrap.Modal(
          document.getElementById('schoolTrendModal')
      ).show();

    });

  }

  rebindEvents();

  // AJAX SEARCH
  $('#searchBox').on('keyup', function () {
    fetch(`/reports/schoolwise/?q=${this.value}`, {
      headers: {"X-Requested-With": "XMLHttpRequest"}
    })
    .then(r => r.json())
    .then(data => {

      table.clear().destroy();
      $('#schoolBody').empty();

      data.schools.forEach(s => {
        $('#schoolBody').append(`
          <tr>
            <td>${s.name}</td>
            <td>${s.ward}</td>
            <td>${s.district}</td>
            <td>${s.region}</td>
            <td>
              <button class="btn btn-primary btn-sm openSchoolModal"
                data-school="${s.id}" data-school-name="${s.name}">General</button>
              <button class="btn btn-warning btn-sm openSchoolSubjectModal"
                data-school="${s.id}" data-school-name="${s.name}">Subject</button>
              <button class="btn btn-success btn-sm openSchoolTrendModal"
                data-school="${s.id}" data-school-name="${s.name}">Trend</button>
            </td>
          </tr>
        `);
      });

      table = $('#schoolTable').DataTable();
      rebindEvents();
    });
  });

});
</script>


{% endblock %}