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

{% block page_title %}Ward-wise Reports{% endblock %}

{% block content %}
<div class="container mt-4">
  <div class="card">
    <div class="card-header">
      <h3 class="mb-4 fw-bold text-primary">
        <i class="fas fa-map-marked-alt"></i> Ward-wise Reports
      </h3>
    </div>

    <div class="card-body">

      <table id="wardTable" class="table table-bordered table-striped">
        <thead class="table-dark">
          <tr>
            <th>Ward</th>
            <th>District</th>
            <th>Region</th>
            <th>Actions</th>
          </tr>
        </thead>

        <tbody id="wardBody">
          {% for w in wards %}
          <tr>
            <td>{{ w.name }}</td>
            <td>{{ w.district.name }}</td>
            <td>{{ w.district.region.name }}</td>
            <td>
              <button class="btn btn-primary btn-sm openWardModal"
                      data-ward="{{ w.id }}"
                      data-ward-name="{{ w.name }}">
                General
              </button>

<button
  class="btn btn-warning btn-sm openWardSubjectModal"
  data-ward="{{ w.id }}"
  data-ward-name="{{ w.name }}">
  Subject Summary
</button>



<button
  class="btn btn-success btn-sm openWardTrendModal"
  data-ward="{{ w.id }}"
  data-ward-name="{{ w.name }}">
  Trend
</button>



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

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

<!-- =========================
     WARD GENERAL MODAL
========================== -->
<div class="modal fade" id="wardGeneralModal" 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">Ward Report Options</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">

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

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

        <div class="d-grid gap-2">
          <a class="btn btn-secondary">MASTER SUMMARY ➜</a>
          <a id="wardSummaryHtml" class="btn btn-primary">VIEW</a>
          <a id="wardSummaryPdf" class="btn btn-danger">PDF</a>
          <a id="wardSummaryExcel" class="btn btn-success">EXCEL</a>
        </div>
 
        <hr>
        <div class="d-grid gap-2">
          <a class="btn btn-secondary">SCHOOL RANKING ➜</a>
          <a id="wardSchoolRankHtml" class="btn btn-primary">VIEW</a>
          <a id="wardSchoolRankPdf" class="btn btn-danger">PDF</a>
          <a id="wardSchoolRankExcel" class="btn btn-success">EXCEL</a>
        </div>
      </div>
    </div>
  </div>
</div>






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

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

      <div class="modal-body">

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

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

        <label class="fw-bold">Subject</label>
        <select id="wardSubjectSelect" class="form-select mb-3">
          <option value="ALL">ALL SUBJECTS</option>
          {% for s in subjects %}
          <option value="{{ s.subject_code }}">{{ s.subject_name_sw }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="wardGeneralSubjectHtml" class="btn btn-primary">
            General Subject Summary
          </a>

          <a id="wardSubjectSchoolRankHtml" class="btn btn-success">
            School Subject Ranking
          </a>
        </div>

      </div>

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




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

      <div class="modal-body">

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

        <label class="fw-bold">Start Year</label>
        <select id="trendStartYear" 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="trendEndYear" class="form-select mb-3">
          {% for y in years %}
          <option value="{{ y }}">{{ y }}</option>
          {% endfor %}
        </select>

        <div class="d-grid gap-2">
          <a id="trendWardHtml" class="btn btn-primary">HTML</a>
          <a id="trendWardPdf" class="btn btn-danger">PDF</a>
          <a id="trendWardExcel" class="btn btn-success">Excel</a>
        </div>

      </div>

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






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

<!-- ✅ REQUIRED -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.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 () {

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

    /* ===============================
       GENERAL MODAL
    =============================== */
    function rebindWardEvents() {
        $('.openWardModal').off('click').on('click', function () {

            const wardId = $(this).data('ward');
            const wardName = $(this).data('ward-name');

            $('#wardNameDisplay').text(wardName);

            function updateLinks() {
                const year = $('#wardYearSelect').val();

                // WARD SUMMARY
                $('#wardSummaryHtml').attr(
                    'href', `/reports/ward-summary-html/?ward=${wardId}&year=${year}`
                );
                $('#wardSummaryPdf').attr(
                    'href', `/reports/ward-summary-pdf/?ward=${wardId}&year=${year}`
                );
                $('#wardSummaryExcel').attr(
                    'href', `/reports/ward-summary-excel/?ward=${wardId}&year=${year}`
                );

                // SCHOOL RANKING (WARD)
                $('#wardSchoolRankHtml').attr(
                    'href', `/reports/ward-school-rank-html/?ward=${wardId}&year=${year}`
                );
                $('#wardSchoolRankPdf').attr(
                    'href', `/reports/ward-school-rank-pdf/?ward=${wardId}&year=${year}`
                );
                $('#wardSchoolRankExcel').attr(
                    'href', `/reports/ward-school-rank-excel/?ward=${wardId}&year=${year}`
                );
            }

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

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

    rebindWardEvents();

    /* ===============================
       AJAX SEARCH (PARITY WITH REGIONWISE)
    =============================== */
    $('#searchBox').on('keyup', function () {
        let q = $(this).val();

        fetch(`/reports/wardwise/?q=${q}`, {
            headers: {"X-Requested-With": "XMLHttpRequest"}
        })
        .then(res => res.json())
        .then(data => {

            table.clear().destroy();

            let tbody = $('#wardBody');
            tbody.empty();

            data.wards.forEach(w => {
                tbody.append(`
                    <tr>
                        <td>${w.name}</td>
                        <td>${w.district}</td>
                        <td>${w.region}</td>
                        <td>
                            <button class="btn btn-primary btn-sm openWardModal"
                                    data-ward="${w.id}"
                                    data-ward-name="${w.name}">
                                General
                            </button>

                            <button class="btn btn-warning btn-sm openWardSubjectModal"
                                    data-ward="${w.id}"
                                    data-ward-name="${w.name}">
                                Subject Summary
                            </button>

                            <button class="btn btn-success btn-sm openWardTrendModal"
                                    data-ward="${w.id}"
                                    data-ward-name="${w.name}">
                                Trend
                            </button>
                        </td>
                    </tr>
                `);
            });

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

            rebindWardEvents();
            rebindWardSubjectEvents();
            rebindWardTrendEvents();
        });
    });

    /* ===============================
       SUBJECT MODAL (WARD)
    =============================== */
    function rebindWardSubjectEvents() {
        $('.openWardSubjectModal').off('click').on('click', function () {

            const wardId = $(this).data('ward');
            const wardName = $(this).data('ward-name');

            $('#subWardName').text(wardName);

            function updateLinks() {
                const year = $('#wardSubjectYear').val();
                const subject = $('#wardSubjectSelect').val();

                $('#wardGeneralSubjectHtml').attr(
                    'href',
                    `/reports/ward-subject-summary/?ward=${wardId}&year=${year}&subject=${subject}`
                );

                if (subject === 'ALL') {
                    $('#wardSubjectSchoolRankHtml')
                        .addClass('disabled')
                        .attr('href', '#');
                } else {
                    $('#wardSubjectSchoolRankHtml')
                        .removeClass('disabled')
                        .attr(
                            'href',
                            `/reports/ward-subject-school-rank/?ward=${wardId}&year=${year}&subject=${subject}`
                        );
                }
            }

            $('#wardSubjectYear, #wardSubjectSelect')
                .off('change')
                .on('change', updateLinks);

            updateLinks();

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

    /* ===============================
       TREND MODAL (WARD)
    =============================== */
    function rebindWardTrendEvents() {
        $('.openWardTrendModal').off('click').on('click', function () {

            const wardId = $(this).data('ward');
            const wardName = $(this).data('ward-name');

            $('#trendWardName').text(wardName);

            function updateLinks() {
                const s = $('#trendStartYear').val();
                const e = $('#trendEndYear').val();

                $('#trendWardHtml').attr(
                    'href',
                    `/reports/ward-trend-html/?ward=${wardId}&start=${s}&end=${e}`
                );
                $('#trendWardPdf').attr(
                    'href',
                    `/reports/ward-trend-pdf/?ward=${wardId}&start=${s}&end=${e}`
                );
                $('#trendWardExcel').attr(
                    'href',
                    `/reports/ward-trend-excel/?ward=${wardId}&start=${s}&end=${e}`
                );
            }

            $('#trendStartYear, #trendEndYear')
                .off('change')
                .on('change', updateLinks);

            updateLinks();

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

});
</script>



{% endblock %}