{% extends "exams/base.html" %}
{% block content %}

<div class="container mt-4">

<!-- HEADER -->
<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0">
    {{ project.name }} — School Results Management
  </h4>

  <form method="get" class="d-flex">
    <input type="text" name="q" value="{{ search_query }}"
           class="form-control form-control-sm me-2"
           placeholder="Search school...">
    <button class="btn btn-sm btn-primary">
      <i class="fas fa-search"></i>
    </button>
  </form>
</div>

<!-- 🔥 BIG PROJECT LIVE SWITCH -->
<div class="card mb-4">
  <div class="card-body text-center">
    <h5 class="mb-3">PROJECT RESULTS STATUS</h5>

    <button id="projectToggleBtn"
            class="btn btn-lg {% if project.is_live %}btn-success{% else %}btn-danger{% endif %}">
      {% if project.is_live %}
        <i class="fas fa-eye"></i> RESULTS ARE LIVE
      {% else %}
        <i class="fas fa-eye-slash"></i> RESULTS ARE OFF
      {% endif %}
    </button>
  </div>
</div>


    <form method="get" class="d-flex">
      <input type="text"
             name="q"
             value="{{ search_query }}"
             class="form-control form-control-sm me-2"
             placeholder="Search school...">
      <button class="btn btn-sm btn-primary">
        <i class="fas fa-search"></i>
      </button>
    </form>
    
<!-- TABLE -->
<table class="table table-bordered table-striped">
  <thead class="table-success">
    <tr>
      <th>Code</th>
      <th>School</th>
      <th>Region</th>
      <th>District</th>
      <th>I</th><th>II</th><th>III</th><th>IV</th><th>0</th>
      <th>GPA</th>
      <th>GRD</th>
      <th>GPA Status</th>
      <th width="140">Action</th>
    </tr>
  </thead>

  <tbody>
  {% for r in page_obj %}
    <tr>
      <td>{{ r.school.school_code }}</td>
      <td>{{ r.school.name }}</td>
      <td>{{ r.school.region.name }}</td>
      <td>{{ r.school.district.name }}</td>

      <td>{{ r.d1 }}</td>
      <td>{{ r.d2 }}</td>
      <td>{{ r.d3 }}</td>
      <td>{{ r.d4 }}</td>
      <td>{{ r.d0 }}</td>

      <td><strong>{{ r.sch_gpa|floatformat:4 }}</strong></td>
      <td>
        {{ r.sch_gpa_grade }}</span>
      </td>
      <td>
        {{ r.sch_gpa_status }}</span>
      </td>


      <td>
        <button class="btn btn-sm {% if r.sch_release_status %}btn-success{% else %}btn-secondary{% endif %}"
                data-bs-toggle="modal"
                data-bs-target="#toggleModal{{ r.school.id }}">
          {% if r.sch_release_status %}ENABLED{% else %}DISABLED{% endif %}
        </button>
      </td>
    </tr>

    <!-- MODAL -->
    <div class="modal fade" id="toggleModal{{ r.school.id }}">
      <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Confirm Action</h5>
            <button class="btn-close" data-bs-dismiss="modal"></button>
          </div>

          <div class="modal-body text-center">
            <p>
              School:<br>
              <strong>{{ r.school.school_code }} — {{ r.school.name }}</strong>
            </p>

            <p>
              Are you sure you want to
              <strong>
                {% if r.sch_results_status %}DISABLE{% else %}ENABLE{% endif %}
              </strong>
              results display?
            </p>
          </div>

          <div class="modal-footer">
            <button class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
            <button class="btn btn-danger school-toggle-btn"
                    data-project="{{ project.id }}"
                    data-school="{{ r.school.id }}">
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>

  {% empty %}
    <tr>
      <td colspan="13" class="text-center text-muted">
        No schools found
      </td>
    </tr>
  {% endfor %}
  </tbody>
</table>

<!-- PAGINATION -->
<div class="d-flex justify-content-between align-items-center mt-4">
  <div class="text-muted">
    Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
  </div>

  <div class="btn-group">
    {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}&q={{ search_query }}"
         class="btn btn-outline-primary btn-sm">Previous</a>
    {% else %}
      <button class="btn btn-outline-secondary btn-sm" disabled>Previous</button>
    {% endif %}

    {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}&q={{ search_query }}"
         class="btn btn-primary btn-sm">Next</a>
    {% else %}
      <button class="btn btn-secondary btn-sm" disabled>Next</button>
    {% endif %}
  </div>
</div>

</div>

<!-- AJAX -->
<script>
document.getElementById("projectToggleBtn").onclick = function(){
  fetch("{% url 'exams:toggle_project_live' project.id %}", {
    method: "POST",
    headers: {"X-CSRFToken": "{{ csrf_token }}"}
  }).then(()=>location.reload());
};

document.querySelectorAll(".school-toggle-btn").forEach(btn=>{
  btn.onclick = function(){
    fetch(`/projects/${btn.dataset.project}/school/${btn.dataset.school}/toggle/`,{
      method:"POST",
      headers:{"X-CSRFToken":"{{ csrf_token }}"}
    }).then(()=>location.reload());
  }
});
</script>

{% endblock %}