{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-3">
    <div>
      <h1 class="h3 mb-0">Assessment Results by Year</h1>
      <p class="text-muted">Review submitted assessment results grouped by exam year.</p>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{% url 'cbt:admin_attempts_list' %}">All Years</a>
      <a class="btn btn-outline-primary" href="{% url 'cbt:admin_proctor_reports' %}">Proctor Reports</a>
    </div>
  </div>

  <form method="get" class="row g-2 align-items-end mb-4">
    <div class="col-sm-4 col-md-3">
      <label for="year" class="form-label">Exam year</label>
      <select id="year" name="year" class="form-select">
        <option value="">All years</option>
        {% for year in years %}
        <option value="{{ year }}" {% if selected_year == year %}selected{% endif %}>{{ year }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-auto">
      <button type="submit" class="btn btn-primary">View Results</button>
    </div>
  </form>

  {% for group in grouped_attempts %}
  <section class="mb-4">
    <h2 class="h5 border-bottom pb-2">{{ group.year }} Results</h2>
    <div class="card shadow-sm">
      <div class="card-body">
        <table class="table table-striped table-bordered attempts-table">
          <thead>
            <tr>
              <th>ID</th>
              <th>User</th>
              <th>Assessment</th>
              <th>Score</th>
              <th>Completed</th>
              <th>Started At</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for a in group.attempts %}
            <tr>
              <td>{{ a.pk }}</td>
              <td>{{ a.user }}</td>
              <td>{{ a.assessment.title }}</td>
              <td>{{ a.score }}</td>
              <td>{{ a.is_completed }}</td>
              <td>{{ a.started_at }}</td>
              <td><a class="btn btn-sm btn-outline-primary" href="#" hx-get="{% url 'cbt:admin_attempt_detail' a.pk %}" hx-target="#modal-body" hx-swap="innerHTML">View</a></td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </section>
  {% empty %}
  <div class="alert alert-info">No assessment results are available for the selected year.</div>
  {% endfor %}
</div>

<div class="modal fade" id="htmxModal" tabindex="-1">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div id="modal-body"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_body %}
{{ block.super }}
<link href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.min.css" rel="stylesheet">
<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>
  $(document).ready(function(){ $('.attempts-table').DataTable(); });
</script>
<script src="https://unpkg.com/htmx.org@1.10.0"></script>
<script>
  document.body.addEventListener('htmx:afterSwap', function(evt){
    if(evt.detail.target && evt.detail.target.id === 'modal-body'){
      var modalEl = document.getElementById('htmxModal');
      var modal = new bootstrap.Modal(modalEl);
      modal.show();
    }
  });
</script>
{% endblock %}