{% extends 'base.html' %}

{% block content %}
<div class="container py-4 py-lg-5">

  <!-- Page Header -->
  <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
    <div>
      <h1 class="h3 mb-1">Assessment Results by Year</h1>
      <p class="text-muted mb-0">Review submitted assessment results grouped by exam year.</p>
    </div>
    <div class="d-flex flex-wrap 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>

  <!-- Filter + Export Controls -->
  <div class="card shadow-sm mb-4">
    <div class="card-body">
      <div class="row g-3 align-items-end">

        <!-- Year Filter -->
        <div class="col-12 col-md-5 col-lg-4">
          <form method="get" class="row g-2 align-items-end">
            <div class="col">
              <label for="year" class="form-label mb-1">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>
        </div>

        <!-- Export Buttons -->
        <div class="col-12 col-md-7 col-lg-8">
          <div class="d-flex flex-column flex-sm-row align-items-sm-center justify-content-md-end gap-2 gap-sm-3">
            <div class="text-sm-end">
              <div class="fw-semibold small">Export results</div>
              <div class="text-muted small">Includes the currently selected year filter</div>
            </div>
            <div class="btn-group" role="group" aria-label="Export assessment results">
              <a class="btn btn-outline-success"
                 href="{% url 'cbt:admin_attempts_export' 'xlsx' %}{% if selected_year %}?year={{ selected_year }}{% endif %}"
                 title="Download Excel workbook">
                <i class="fas fa-file-excel me-1" aria-hidden="true"></i>
                <span class="d-none d-sm-inline">Excel</span>
              </a>
              <a class="btn btn-outline-primary"
                 href="{% url 'cbt:admin_attempts_export' 'csv' %}{% if selected_year %}?year={{ selected_year }}{% endif %}"
                 title="Download CSV file">
                <i class="fas fa-file-csv me-1" aria-hidden="true"></i>
                <span class="d-none d-sm-inline">CSV</span>
              </a>
              <a class="btn btn-outline-danger"
                 href="{% url 'cbt:admin_attempts_export' 'pdf' %}{% if selected_year %}?year={{ selected_year }}{% endif %}"
                 title="Download printable PDF report">
                <i class="fas fa-file-pdf me-1" aria-hidden="true"></i>
                <span class="d-none d-sm-inline">PDF</span>
              </a>
            </div>
          </div>
        </div>

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

  <!-- Results by Year -->
  {% for group in grouped_attempts %}
  <section class="mb-4">
    <h2 class="h5 border-bottom pb-2 mb-3">{{ group.year }} Results</h2>

    <div class="card shadow-sm">
      <div class="card-body p-0">
        <div class="table-responsive p-2">
          <table class="table table-striped table-hover table-bordered mb-0 attempts-table p-2">
            <thead class="table-light">
              <tr>
                <th>ID</th>
                <th>User</th>
                <th>Assessment</th>
                <th>Score</th>
                <th>Completed</th>
                <th>Started At</th>
                <th class="text-end">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>
                  {% if a.is_completed %}
                    <span class="badge bg-success">Yes</span>
                  {% else %}
                    <span class="badge bg-secondary">No</span>
                  {% endif %}
                </td>
                <td>{{ a.started_at }}</td>
                <td class="text-end">
                  <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>
    </div>
  </section>
  {% empty %}
  <div class="alert alert-info d-flex align-items-center" role="alert">
    <i class="fas fa-info-circle me-2"></i>
    No assessment results are available for the selected year.
  </div>
  {% endfor %}

</div>

<!-- HTMX Modal -->
<div class="modal fade" id="htmxModal" tabindex="-1" aria-labelledby="htmxModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="htmxModalLabel">Attempt Details</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="modal-body">
        <!-- Content loaded by HTMX -->
      </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 src="https://unpkg.com/htmx.org@1.10.0"></script>

<script>
  $(document).ready(function () {
    $('.attempts-table').DataTable({
      pageLength: 25,
      order: [[0, 'desc']],
      language: {
        emptyTable: "No results found"
      }
    });
  });

  document.body.addEventListener('htmx:afterSwap', function (evt) {
    if (evt.detail.target && evt.detail.target.id === 'modal-body') {
      const modalEl = document.getElementById('htmxModal');
      const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
      modal.show();
    }
  });
</script>
{% endblock %}