{% extends "../base.html" %}

{% block page_title %}Result Verification Overview{% endblock page_title %}

{% block content %}
<div class="row">
  <div class="col-md-12 col-sm-12">
    <div class="x_panel">
      <div class="x_title">
        <h2>Verification Overview</h2>
        <ul class="nav navbar-right panel_toolbox">
          <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a></li>
        </ul>
        <div class="clearfix"></div>

        <nav aria-label="breadcrumb" class="mb-4">
          <ol class="breadcrumb" style="margin-bottom:6px;">
            <li class="breadcrumb-item"><a href="#">Results</a></li>
            <li class="breadcrumb-item active" aria-current="page">Verification Overview</li>
          </ol>
        </nav>
      </div>

      <div class="x_content">
        <div class="d-flex justify-content-between align-items-center mb-2">
          <div class="small text-muted">
            Review pending assessments ready for verification. Drafts are awaiting teacher submission.
          </div>
          <div class="d-flex">
            <span class="badge badge-warning p-2 mr-2">Pending: {{ pending_count|default:0 }}</span>
            <span class="badge badge-secondary p-2">Draft: {{ draft_count|default:0 }}</span>
          </div>
        </div>
<form method="get" class="form-horizontal form-label-left" id="verificationFiltersForm">
          <div class="row filter-toolbar sticky">
            <div class="col-md-3 col-sm-6 mb-10">
              <label for="year_id" class="small text-muted">Academic Year</label>
              <select id="year_id" name="year_id" class="form-control">
                <option value="">All Years</option>
                {% for y in academic_years %}
                  <option value="{{ y.id }}" {% if selected_year_id == y.id|stringformat:"s" %}selected{% endif %}>
                    {{ y.academic_year }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-3 col-sm-6 mb-10">
              <label for="term_id" class="small text-muted">Term</label>
              <select id="term_id" name="term_id" class="form-control">
                <option value="">All Terms</option>
                {% for t in terms %}
                  <option value="{{ t.id }}" {% if selected_term_id == t.id|stringformat:"s" %}selected{% endif %}>
                    {{ t.get_term_display }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-3 col-sm-6 mb-10">
              <label for="class_id" class="small text-muted">Class</label>
              <select id="class_id" name="class_id" class="form-control">
                <option value="">All Classes</option>
                {% for c in classes %}
                  <option value="{{ c.id }}" {% if selected_class_id == c.id|stringformat:"s" %}selected{% endif %}>
                    {{ c.name }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-3 col-sm-6 mb-10">
              <label for="assessment_type_id" class="small text-muted">Assessment Type</label>
              <select id="assessment_type_id" name="assessment_type_id" class="form-control">
                <option value="">All Types</option>
                {% for at in assessment_types %}
                  <option value="{{ at.id }}" {% if selected_assessment_type_id == at.id|stringformat:"s" %}selected{% endif %}>
                    {{ at.name }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-3 col-sm-6 mb-10">
              <label for="subject_id" class="small text-muted">Subject</label>
              <select id="subject_id" name="subject_id" class="form-control">
                <option value="">All Subjects</option>
                {% for s in subjects %}
                  <option value="{{ s.id }}" {% if selected_subject_id == s.id|stringformat:"s" %}selected{% endif %}>
                    {{ s.name }}
                  </option>
                {% endfor %}
              </select>
            </div>

            <div class="col-md-3 col-sm-6 mb-10">
              <label for="status" class="small text-muted">Status</label>
              <select id="status" name="status" class="form-control">
                <option value="ALL" {% if selected_status == "ALL" %}selected{% endif %}>All</option>
                <option value="PENDING" {% if selected_status == "PENDING" %}selected{% endif %}>Pending</option>
                <option value="DRAFT" {% if selected_status == "DRAFT" %}selected{% endif %}>Draft</option>
                <option value="VERIFIED" {% if selected_status == "VERIFIED" %}selected{% endif %}>Verified</option>
                <option value="FLAGGED" {% if selected_status == "FLAGGED" %}selected{% endif %}>Flagged</option>
              </select>
            </div>

            <div class="col-md-3 col-sm-12 mb-10 d-flex align-items-end">
              <button type="submit" class="btn btn-dark mr-2">
                <i class="fa fa-filter mr-1"></i> Apply
              </button>
              <a href="?" class="btn btn-default">Reset</a>
            </div>
          </div>
        </form>

        {% if assessments %}
          <table class="table table-striped table-bordered datatable" style="width:100%">
            <thead>
              <tr>
                <th>Class</th>
                <th>Type</th>
                <th>Subject</th>
                <th>Date</th>
                <th>Out Of</th>
                <th>Status</th>
                <th style="width:200px;">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for assessment in assessments %}
                <tr>
                  <td>{{ assessment.academic_class }}</td>
                  <td><span class="badge badge-info">{{ assessment.assessment_type.name }}</span></td>
                  <td><span class="badge badge-light">{{ assessment.subject.name }}</span></td>
                  <td>{{ assessment.date|date:"M j, Y" }}</td>
                  <td><span class="badge badge-dark">{{ assessment.out_of }}</span></td>
                  <td>
                    {% if assessment.result_batch.status == "VERIFIED" %}
                      <span class="badge badge-success">VERIFIED</span>
                    {% elif assessment.result_batch.status == "FLAGGED" %}
                      <span class="badge badge-danger">FLAGGED</span>
                    {% elif assessment.result_batch.status == "DRAFT" %}
                      <span class="badge badge-secondary">DRAFT</span>
                    {% else %}
                      <span class="badge badge-warning">PENDING</span>
                    {% endif %}
                  </td>
                  <td class="text-center">
                    <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
                      {% if assessment.result_batch.status != "VERIFIED" %}
                      <a href="{% url 'verification_queue' assessment.id %}" class="btn btn-info" title="Verify results">
                        <i class="fa fa-check-square"></i> Verify
                      </a>
                      {% endif %}
                      <a href="{% url 'verification_report' assessment.id %}" class="btn btn-success" title="Report">
                        <i class="fa fa-file-text-o"></i> Report
                      </a>
                    </div>
                  </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        {% else %}
          <div class="empty-state">
            <div class="icon-wrap">
              <i class="fa fa-folder-open"></i>
            </div>
            <h4>No assessments found</h4>
            <p class="text-muted">Try adjusting filters. Pending and draft assessments will appear here.</p>
            <a href="?" class="btn btn-outline-secondary btn-sm">Clear filters</a>
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<style>
  .filter-toolbar .mb-10 { margin-bottom: 10px; }
  .filter-toolbar.sticky {
    position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 8px; padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
  }
  .empty-state {
    background: #fff; border: 1px dashed #e5e7eb; border-radius: 12px;
    padding: 32px; text-align: center; color: #4b5563;
  }
  .empty-state .icon-wrap {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #6b7280; font-size: 20px; margin-bottom: 8px;
  }
</style>
{% endblock content %}