{% extends 'base.html' %}

{% block content %}
<div class="container py-5">
  <div class="d-flex justify-content-between align-items-center mb-4">
    <div>
      <h1 class="h3">Proctoring Review Dashboard</h1>
      <p class="text-muted mb-0">Filter suspicious attempts, inspect camera events, and export results to CSV.</p>
    </div>
    <div class="d-flex gap-2">
      <a class="btn btn-outline-secondary" href="{% url 'cbt:admin_attempts_list' %}">Back to Attempts</a>
      <a class="btn btn-outline-success" href="?{% if request.GET %}{{ request.GET.urlencode }}&{% endif %}format=csv">Export CSV</a>
    </div>
  </div>

  <form method="get" class="row g-3 mb-4">
    <div class="col-md-3">
      <label class="form-label" for="id_q">Search</label>
      <input id="id_q" name="q" class="form-control" value="{{ search }}" placeholder="User, assessment, browser info">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_user">User</label>
      <input id="id_user" name="user" class="form-control" value="{{ user_filter }}" placeholder="Username">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_assessment">Assessment</label>
      <input id="id_assessment" name="assessment" class="form-control" value="{{ assessment_filter }}" placeholder="Assessment title">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_min_warnings">Min Warnings</label>
      <input id="id_min_warnings" name="min_warnings" class="form-control" value="{{ min_warnings }}" type="number" min="0">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_min_score">Min Suspicious Score</label>
      <input id="id_min_score" name="min_score" class="form-control" value="{{ min_score }}" type="number" step="0.1" min="0">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_min_events">Min Events</label>
      <input id="id_min_events" name="min_events" class="form-control" value="{{ min_events }}" type="number" min="0">
    </div>
    <div class="col-md-3">
      <label class="form-label" for="id_min_camera">Min Camera Flags</label>
      <input id="id_min_camera" name="min_camera" class="form-control" value="{{ min_camera }}" type="number" min="0">
    </div>
    <div class="col-md-3 d-flex align-items-end">
      <div class="form-check">
        <input class="form-check-input" type="checkbox" id="id_high_risk" name="high_risk" value="1" {% if high_risk == '1' %}checked{% endif %}>
        <label class="form-check-label" for="id_high_risk">High risk only</label>
      </div>
    </div>
    <div class="col-12 text-end">
      <button type="submit" class="btn btn-primary">Apply filters</button>
      <a href="{% url 'cbt:admin_proctor_reports' %}" class="btn btn-outline-secondary">Reset</a>
    </div>
  </form>

  <div class="card shadow-sm">
    <div class="card-body">
      <div class="table-responsive">
        <table id="proctor-table" class="table table-hover table-bordered align-middle">
          <thead>
            <tr>
              <th>Attempt</th>
              <th>User</th>
              <th>Assessment</th>
              <th>Warnings</th>
              <th>Suspicious Score</th>
              <th>Events</th>
              <th>Camera Flags</th>
              <th>Started</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for attempt in attempts %}
            <tr>
              <td>{{ attempt.pk }}</td>
              <td>{{ attempt.user }}</td>
              <td>{{ attempt.assessment.title }}</td>
              <td>{{ attempt.proctor_warnings }}</td>
              <td>{{ attempt.suspicious_score|floatformat:1 }}</td>
              <td>{{ attempt.event_count }}</td>
              <td>{{ attempt.camera_event_count }}</td>
              <td>{{ attempt.started_at }}</td>
              <td>
                <a class="btn btn-sm btn-outline-primary" href="#" hx-get="{% url 'cbt:admin_proctor_report_detail' attempt.pk %}" hx-target="#modal-body" hx-swap="innerHTML">Review</a>
              </td>
            </tr>
            {% empty %}
            <tr>
              <td colspan="9" class="text-center text-muted">No proctor events match the current filters.</td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="modal fade" id="htmxModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <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(){ $('#proctor-table').DataTable({ order:[[4, 'desc'], [5, 'desc']] }); });
</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 %}