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

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

        <div class="card-body">

            <table id="districtTable" class="table table-bordered table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>District</th>
                        <th>Total Wards</th>
                        <th>Actions</th>
                    </tr>
                </thead>

                <tbody id="districtBody">
                    {% for d in districts %}
                    <tr>
                        <td>{{ d.name }}</td>
                        <td class="text-center">{{ d.wards.count }}</td>
                        <td>
                            <button class="btn btn-primary btn-sm openDistrictGeneral"
                                    data-district="{{ d.id }}"
                                    data-district-name="{{ d.name }}">
                                Summary#Graph#Charts
                            </button>


<button class="btn btn-success btn-sm openDistrictTrendModal"
        data-district="{{ d.id }}"
        data-district-name="{{ d.name }}">
  ▲▼TREND.D
</button>

<button class="btn btn-warning btn-sm openDistrictSchoolRankModal"
        data-district="{{ d.id }}"
        data-district-name="{{ d.name }}">
  RANK.G
</button>

<button class="btn btn-primary btn-sm openSubjectDisPerfModal"
        data-district="{{ d.id }}"
        data-district-name="{{ d.name }}">
  SUBJ.PERF
</button>

              <button class="btn btn-danger btn-sm openDisSubjectTrendModal"
                      data-district="{{ d.id }}"
                      data-district-name="{{ d.name }}">
                ▲▼SUBJ.TREND
              </button>

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

            </table>

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


<!-- ==========================================================
      DISTRICT GENERAL MODAL
===========================================================-->
<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>

<!-- ==========================================================
      DISTRICT SUBJECT MODAL
===========================================================-->
<div class="modal fade" id="districtSubjectModal" tabindex="-1">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">

            <div class="modal-header bg-warning">
                <h5 class="modal-title">Subject Summary Options</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <h5 id="districtSubjectName" class="text-center fw-bold mb-3"></h5>

                <label class="fw-bold">Select Year</label>
                <select id="districtSubjectYear" class="form-select mb-3">
                    <option value="2024">2024</option>
                    <option value="2023">2023</option>
                    <option value="2022">2022</option>
                </select>

                <label class="fw-bold">Select Subject</label>
                <select id="districtSubjectSelect" 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="districtGeneralSubjectBtn" class="btn btn-primary">General Subject Summary</a>
                    <a id="districtSubjectRankBtn" class="btn btn-success">School Subject Ranking</a>
                </div>

            </div>

        </div>

    </div>
</div>



<!-- ==========================================================
      DISTRICT TREND / COMPARE MODAL
===========================================================-->
<div class="modal fade" id="districtTrendModal" 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">District Trend / Compare</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

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

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

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

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






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

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

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

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

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



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

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

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

        <label class="fw-bold">Subject</label>
        <select id="districtSubjectPerfSubject" 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="districtSubjectPerfBtn" class="btn btn-success">
              Subject Rank Normal
            </a>

            <a id="btnSubjectDisRankExtended" class="btn btn-danger">
              Subject Rank Extended
            </a>
        </div>
      </div>

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




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

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

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

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

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



<!-- ========== DATATABLE + JS HANDLERS =================================================== -->

<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 = $('#districtTable').DataTable({
    pageLength: 10,
    lengthMenu: [10, 20, 50, 100],
    ordering: true,
    responsive: true,
    autoWidth: false
  });

  /* =====================================================
     GENERAL SUMMART
  ===================================================== */
    $('#districtTable').on('click', '.openDistrictGeneral', function () {
        const district = $(this).data('district');
        const name = $(this).data('district-name');

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

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

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

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

        updateLinks();

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

  /* =====================================================
     ▲▼ TREND.D
  ===================================================== */
  $('#districtTable').on('click', '.openDistrictTrendModal', function () {

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

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

    function updateTrend() {
      const exam  = $('#districtTrendExam').val();
      const start = $('#districtTrendStart').val();
      const end   = $('#districtTrendEnd').val();

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

    }

    $('#districtTrendExam, #districtTrendStart, #districtTrendEnd')
      .off('change')
      .on('change', updateTrend);

    updateTrend();

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

  /* =====================================================
     RANK.G
  ===================================================== */
  $('#districtTable').on('click', '.openDistrictSchoolRankModal', function () {

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

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

    function updateRank() {
      const exam = $('#districtRankExam').val();
      const year = $('#districtRankYear').val();

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

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

    }

    $('#districtRankExam, #districtRankYear')
      .off('change')
      .on('change', updateRank);

    updateRank();

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

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

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

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

    // NORMAL SUBJECT RANK
    $('#districtSubjectPerfBtn')
      .off('click')
      .on('click', function () {

        const exam    = $('#districtSubjectPerfExam').val();
        const year    = $('#districtSubjectPerfYear').val();
        const subject = $('#districtSubjectPerfSubject').val();

        if (!exam || !year || !subject) {
          alert('Please select exam, year and subject');
          return;
        }

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


    // EXTENDED SUBJECT RANK
    $('#btnSubjectDisRankExtended')
      .off('click')
      .on('click', function () {

        const exam    = $('#districtSubjectPerfExam').val();
        const year    = $('#districtSubjectPerfYear').val();
        const subject = $('#districtSubjectPerfSubject').val();

        if (!exam || !year || !subject) {
          alert('Please select exam, year and subject');
          return;
        }

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

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

});
</script>





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

  let trendDistrict = "";

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

      trendDistrict = this.dataset.district;
      const name = this.dataset.districtName;

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

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

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

    const subject = document.getElementById("districtSubjectTrendSubject").value;
    const exam    = document.getElementById("districtSubjectTrendExam").value;
    const start   = document.getElementById("districtSubjectTrendStart").value;
    const end     = document.getElementById("districtSubjectTrendEnd").value;

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

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

});

</script>


{% endblock %}