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

{% block content %}
<div class="container mt-3">
  <div class="d-flex justify-content-between mb-3">
    <h3><i class="fas fa-chart-bar"></i> Summary – {{ district.name }} – {{ year }}</h3>
 


    <button class="btn btn-primary btn-sm openRegionModal"
            data-district="{{ district.id }}"
            data-district-name="{{ district.name }}">
      CHANGE YEAR
    </button>
  </div>

  {% include "exams/reports/district_summary_block.html" %}
</div>



<div class="modal fade" id="districtGeneralModal" 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">District Report Options</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="districtNameDisplay" class="text-center fw-bold mb-3">
          {{ request.user.profile.district.name }}
        </h5>

        <!-- EXAM TYPE -->
        <label class="fw-bold">Select Exam Type</label>
        <select id="districtExamTypeSelect" 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="districtYearSelect" class="form-select mb-3">
          {% for y in years %}
            {% if y != "-" %}
              <option value="{{ y }}">{{ y }}</option>
            {% endif %}
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="districtSummaryHtml" 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>
$('.openRegionModal').on('click', function(){

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

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

  function update(){
    const y = $('#districtYearSelect').val();
    const exam = $('#districtExamTypeSelect').val();

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

    $('#districtSummaryPdf').attr(
      'href',
      `/reports/district-summary-pdf/?district=${district}&year=${y}&exam_type_id=${exam}`
    );

    $('#districtSummaryExcel').attr(
      'href',
      `/reports/district-summary-excel/?district=${district}&year=${y}&exam_type_id=${exam}`
    );
  }

  $('#districtYearSelect, #districtExamTypeSelect').off().on('change', update);

  update();

  new bootstrap.Modal(document.getElementById('districtGeneralModal')).show();
});
</script>


{% endblock %}