{% extends 'exams/base.html' %}
{% load static %}
{% load math_tags %} 
{% block page_title %}{% endblock %}
{% block content %}

<div class="container mt-3">
  <div class="d-flex justify-content-between mb-3">
    <h3 style="text-align: center;">
      <i class="fas fa-chart-bar"></i> Project Summary – {{ school.name }} – {{ project.name }} ({{ project.year }})
    </h3>


    <a href="{% url 'exams:project_school_summary_print' project.id school.school_code %}"
       class="btn btn-warning">
      <i class="fas fa-print"></i> PRINT
    </a>

    <a href="#" onclick="exportPDF()" class="btn btn-danger">
      <i class="fas fa-file-pdf"></i> PDF
    </a>

<!--     <button class="btn btn-primary btn-sm openProjectSchoolModal"
            data-school="{{ school.school_code }}"
            data-school-name="{{ school.name }}"
            data-project="{{ project.id }}">
      CHANGE PROJECT
    </button> -->
  </div>
  
  {% include "exams/reports/project_school_summary_block.html" %}
</div>

<!-- =========================
     PROJECT SCHOOL MODAL
========================= -->
<div class="modal fade" id="projectSchoolModal" 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">Project School Summary</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>

      <div class="modal-body">
        <h5 id="projectSchoolNameDisplay" class="text-center fw-bold mb-3"></h5>
        
        <!-- PROJECT SELECT -->
        <label class="fw-bold">Select Project</label>
        <select id="projectSelect" class="form-select mb-3">
          {% for p in projects %}
            <option value="{{ p.id }}" {% if project.id == p.id %}selected{% endif %}>{{ p.name }} ({{ p.year }})</option>
          {% endfor %}
        </select>

        <div id="projectSchoolMsg" class="alert alert-warning d-none"></div>

        <div class="d-grid gap-2">
          <a id="projectSchoolSummaryLink" 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>

<!-- Bootstrap JS (if not already loaded in base) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<script>
$(document).ready(function() {

  function rebindEvents() {
    
    // PROJECT SCHOOL MODAL
    $('.openProjectSchoolModal').off().on('click', function () {

      const school = $(this).data('school');
      const name   = $(this).data('school-name');
      const currentProject = $(this).data('project');

      $('#projectSchoolNameDisplay').text(name);
      $('#projectSchoolMsg').addClass('d-none').text('');

      function updateLink() {
        const selectedProject = $('#projectSelect').val();
        const url = `/projects/${selectedProject}/school/${school}/project-summary/`;
        $('#projectSchoolSummaryLink').attr('href', url);
      }

      $('#projectSelect')
        .off('change')
        .on('change', updateLink);

      updateLink();

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

  rebindEvents();

});
</script>

{% endblock %}