{% 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 – {{ region.name }}-{{ exam.name }}–{{ year }}</h3>
  
    <a href="{% url 'exams:region_summary_print' %}?region={{ region.id }}&year={{ year }}&exam_type_id=1"
       class="btn btn-warning">PRINT</a>

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

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

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

 

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

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

        <!-- EXAM TYPE -->
        <label class="fw-bold">Select Exam Type</label>
        <select id="regionExamTypeSelect" 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="regionYearSelect" 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="regionSummaryHtml" 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 region = $(this).data('region');
  const name = $(this).data('region-name');

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

  function update(){
    const y = $('#regionYearSelect').val();
    const exam = $('#regionExamTypeSelect').val();

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

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

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

  $('#regionYearSelect, #regionExamTypeSelect').off().on('change', update);

  update();

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


{% endblock %}