{% extends 'base.html' %}
{% load static %}
{% block content %}
<div class="container my-4">

  <h2 class="mb-4">Results Center</h2>

  <!-- Filter Form -->
  <form method="get" class="row g-3 mb-4">
    <div class="col-md-3">
      <label class="form-label">Class</label>
      <select name="class_id" class="form-control" required>
        <option value="">-- Select Class --</option>
        {% for cls in classes %}
        <option value="{{ cls.id }}" {% if cls.id|stringformat:"s" == selected_class_id %}selected{% endif %}>{{ cls.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3">
      <label class="form-label">Term</label>
      <select name="term_id" class="form-control" required>
        <option value="">-- Select Term --</option>
        {% for term in terms %}
        <option value="{{ term.id }}" {% if term.id|stringformat:"s" == selected_term_id %}selected{% endif %}>{{ term.term }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3">
      <label class="form-label">Academic Year</label>
      <select name="academic_year_id" class="form-control" required>
        <option value="">-- Select Year --</option>
        {% for year in academic_years %}
        <option value="{{ year.id }}" {% if year.id|stringformat:"s" == selected_academic_year_id %}selected{% endif %}>{{ year.academic_year }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-md-3 align-self-end">
      <button type="submit" class="btn btn-primary w-100">Filter</button>
    </div>
  </form>

  {% if student_results_page %}
  <!-- Results Table -->
  <div class="table-responsive">
    <table class="table table-striped table-bordered">
      <thead class="table-dark">
        <tr>
          <th>#</th>
          <th>Student Name</th>
          <th>Total Score</th>
          <th>Total Points</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        {% for student_name, result_data in student_results_page %}
        <tr>
          <td>{{ forloop.counter }}</td>
          <td>{{ student_name }}</td>
          <td>{{ result_data.total_final_score }}</td>
          <td>{{ result_data.total_points }}</td>
          <td>
            <a href="{% url 'student_performance_detail' result_data.student_id %}?term_id={{ selected_term_id }}&academic_year_id={{ selected_academic_year_id }}" class="btn btn-sm btn-info">View</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  <nav aria-label="Page navigation">
    <ul class="pagination">
      {% if student_results_page.has_previous %}
        <li class="page-item">
          <a class="page-link" href="?page={{ student_results_page.previous_page_number }}&class_id={{ selected_class_id }}&term_id={{ selected_term_id }}&academic_year_id={{ selected_academic_year_id }}">Previous</a>
        </li>
      {% endif %}
      <li class="page-item active"><span class="page-link">{{ student_results_page.number }}</span></li>
      {% if student_results_page.has_next %}
        <li class="page-item">
          <a class="page-link" href="?page={{ student_results_page.next_page_number }}&class_id={{ selected_class_id }}&term_id={{ selected_term_id }}&academic_year_id={{ selected_academic_year_id }}">Next</a>
        </li>
      {% endif %}
    </ul>
  </nav>

  {% else %}
  <div class="alert alert-info">
    Please select class, term, and academic year to view results.
  </div>
  {% endif %}

</div>
{% endblock %}