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

{% block page_title %}Region-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-map"></i> Region-wise Reports
      </h3>
    </div>

    <div class="card-body">
      <table id="regionTable" class="table table-bordered table-striped">
        <thead class="table-dark">
          <tr>
            <th>Region</th>
            <th>Total Districts</th>
            <th>Actions</th>
          </tr>
        </thead>

        <tbody>
          {% for r in regions %}
          <tr>
            <td>{{ r.name }}</td>
            <td class="text-center">{{ r.districts.count }}</td>
            <td>
              <button class="btn btn-primary btn-sm openRegionGeneral"
                      data-region="{{ r.id }}"
                      data-region-name="{{ r.name }}">
                Summary#Graph#Charts
              </button>

              <button class="btn btn-success btn-sm openRegionTrendModal"
                      data-region="{{ r.id }}"
                      data-region-name="{{ r.name }}">
                ▲▼TREND.R
              </button>

              <button class="btn btn-warning btn-sm openRegionSchoolRankModal"
                      data-region="{{ r.id }}"
                      data-region-name="{{ r.name }}">
                RANK.G
              </button>
 
              <button class="btn btn-info btn-sm openRegionSubjectPerfModal"
                      data-region="{{ r.id }}"
                      data-region-name="{{ r.name }}">
                SUBJ.PERF
              </button>

              <button class="btn btn-danger btn-sm openRegSubjectTrendModal"
                      data-region="{{ r.id }}"
                      data-region-name="{{ r.name }}">
                ▲▼SUBJ.TREND
              </button>


            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</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"></h5>

        <label class="fw-bold">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>

        <label class="fw-bold">Year</label>
        <select id="regionYearSelect" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

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

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




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

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

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

        <div class="d-grid gap-2">
          <a id="regionTrendHtmlBtn" class="btn btn-success">HTML</a>
        </div>
      </div>

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




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

      <div class="modal-header bg-warning">
        <h5 class="modal-title">Region School Ranking</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

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

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

        <div class="d-grid gap-2">
          <a id="regionRankHtmlBtn" class="btn btn-primary">VIEW RANKING</a>
          <a id="regionRankExtended" class="btn btn-warning">View Extended</a>
        </div>
      </div>

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



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

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

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


        <label class="fw-bold">Subject</label>
        <select id="regionSubjectPerfSubject" 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="regionSubjectPerfBtn" class="btn btn-info">📘Subject Rank Normal</a>

          <a id="btnSubjectRankExtended" class="btn btn-warning">
            📕Subject Rank Extended
          </a>

          <a id="btnSubjectRankDistrict" class="btn btn-primary">
            🏫District Subject Rank
          </a>

        </div>
      </div>

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













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

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

        <!-- SUBJECT -->
        <label class="fw-bold">Select Subject</label>
        <select id="regionSubjectTrendSubject" 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="regionSubjectTrendExam" 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="regionSubjectTrendStart" 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="regionSubjectTrendEnd" class="form-select mb-3">
          {% for y in years %}<option value="{{ y }}">{{ y }}</option>{% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="regionSubjectTrendView" 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 = $('#regionTable').DataTable({
    pageLength: 10,
    responsive: true,
    autoWidth: false
  });

  /* ================= GENERAL ================= */
  $('#regionTable').on('click', '.openRegionGeneral', 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}`
      );
    }

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

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

  /* ================= ▲▼ TREND.R ================= */
  $('#regionTable').on('click', '.openRegionTrendModal', function () {
    const region = $(this).data('region');
    const name = $(this).data('region-name');

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

    function upd() {
      const exam = $('#regionTrendExam').val();
      const s = $('#regionTrendStart').val();
      const e = $('#regionTrendEnd').val();

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

    $('#regionTrendExam, #regionTrendStart, #regionTrendEnd')
      .off().on('change', upd);

    upd();
    new bootstrap.Modal('#regionTrendModal').show();
  });

  /* ================= RANK.G ================= */
  $('#regionTable').on('click', '.openRegionSchoolRankModal', function () {
    const region = $(this).data('region');
    const name = $(this).data('region-name');

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

    function upd() {
      const exam = $('#regionRankExam').val();
      const year = $('#regionRankYear').val();

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

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

    }

    $('#regionRankExam, #regionRankYear').off().on('change', upd);
    upd();

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

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

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

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

    // ----------------------------
    // NORMAL SUBJECT PERFORMANCE
    // ----------------------------
    $('#regionSubjectPerfBtn').off().on('click', function () {
      const exam = $('#regionSubjectPerfExam').val();
      const year = $('#regionSubjectPerfYear').val();
      const subject = $('#regionSubjectPerfSubject').val();

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

    // ----------------------------
    // EXTENDED SUBJECT RANK
    // ----------------------------
    $('#btnSubjectRankExtended').off().on('click', function () {
      const exam = $('#regionSubjectPerfExam').val();
      const year = $('#regionSubjectPerfYear').val();
      const subject = $('#regionSubjectPerfSubject').val();

      window.location.href =
        `/reports/subject-reg-school-rank-ext-html/?region=${region}` +
        `&year=${year}&exam_type_id=${exam}&subject=${subject}`;
    });

    // ----------------------------
    // DISTRICT SUBJECT RANK
    // ----------------------------
    $('#btnSubjectRankDistrict').off().on('click', function () {
      const exam = $('#regionSubjectPerfExam').val();
      const year = $('#regionSubjectPerfYear').val();
      const subject = $('#regionSubjectPerfSubject').val();

      window.location.href =
        `/reports/subject-district-rank-html/?region=${region}` +
        `&year=${year}&exam_type_id=${exam}&subject=${subject}`;
    });

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



});
</script>







<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {

  let trendRegion = "";

  document.querySelectorAll(".openRegSubjectTrendModal").forEach(btn => {
    btn.addEventListener("click", function () {

      trendRegion = this.dataset.region;
      const name = this.dataset.regionName;

      document.getElementById("regionSubjectTrendName").innerText = name;

      new bootstrap.Modal(
        document.getElementById("regionSubjectTrendModal")
      ).show();
    });
  });

  document.getElementById("regionSubjectTrendView").addEventListener("click", function () {

    const subject = document.getElementById("regionSubjectTrendSubject").value;
    const exam    = document.getElementById("regionSubjectTrendExam").value;
    const start   = document.getElementById("regionSubjectTrendStart").value;
    const end     = document.getElementById("regionSubjectTrendEnd").value;

    const url =
      `/reports/region-subject-trend-html/`
      + `?region=${trendRegion}`
      + `&subject=${subject}`
      + `&exam_type_id=${exam}`
      + `&start=${start}`
      + `&end=${end}`;

    window.open(url, "_blank");
  });

});

</script>


{% endblock %}