{% extends "base.html" %}
{% block title %}No-Class UIDs{% endblock %}
{% block body %}

<nav>
  <span class="brand">
  <img src="{{ url_for('static', filename='kvs.png') }}" 
       alt="kvs" style="height:40px; vertical-align:middle; margin-right:8px;">
  
  Digital Attendance
</span>
  <div class="links">
    <a href="/dashboard">📊 Dashboard</a>
    {% if role == 'admin' %}
      <a href="/students">👤 Students</a>
      <a href="/teachers">👩‍🏫 Teachers</a>
      <a href="/no_class" class="active">❓ No-Class</a>
      <a href="/logs">📋 Logs</a>
    {% elif role == 'principal' %}
      <a href="/students">👤 Students</a>
      <a href="/no_class" class="active">❓ No-Class</a>
      <a href="/report">📄 Reports</a>
    {% endif %}
    <span class="role-chip">{{ role }}</span>
    <a href="/logout">🚪 {{ username }}</a>
  </div>
</nav>

<div class="wrap">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}
      <div class="alert {{ cat }}">{{ msg }}</div>
    {% endfor %}
  {% endwith %}

  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:10px;">
      <h2 style="margin:0;">❓ Unknown UIDs — Without Assigned Class ({{ rows|length }} records)</h2>
      <input type="text" id="srch" placeholder="🔍 Search UID / Name / Gate…"
             oninput="filterTable()" style="width:240px;padding:7px 12px;font-size:13px;">
    </div>

    <p style="font-size:13px;color:var(--muted);margin-bottom:16px;line-height:1.6;">
      These are the QR UIDs that were scanned at the gate but were not found in the student database.<br>
      To resolve this issue, please visit the
      <a href="/students" style="color:var(--sky);text-decoration:underline;">Students page</a>
      and add the student with the correct UID & Class.
    </p>

    <table id="nctbl">
      <thead>
        <tr>
          <th>#</th>
          <th>UID</th>
          <th>Name</th>
          <th>Gate</th>
          <th>Date & Time</th>
          <th>Reason</th>
        </tr>
      </thead>

      <tbody>
        {% for i, row in enumerate(rows, 1) %}
        <tr data-search="{{ (row["uid"] ~ " " ~ (row["name"] or "") ~ " " ~ (row["gate"] or "") ~ " " ~ row["time"])|lower }}">
          <td>{{ i }}</td>

          <td><code>{{ row["uid"] }}</code></td>

          <td>
            <strong>{{ row["name"] or "-" }}</strong>
          </td>

          <td>
            {% set g = row["gate"] or "-" %}
            {% if g == "Gate-1" %}
              <span style="background:#e3f2fd;color:#0277bd;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;">{{ g }}</span>
            {% elif g == "Gate-2" %}
              <span style="background:#e8f5e9;color:#2e7d32;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;">{{ g }}</span>
            {% elif g == "Gate-3" %}
              <span style="background:#fff8e1;color:#e65100;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;">{{ g }}</span>
            {% else %}
              <span style="background:#f1f5fb;color:#64748b;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;">{{ g }}</span>
            {% endif %}
          </td>

          <td>{{ row["time"] }}</td>

          <td style="color:var(--red);font-size:12px;">
            {{ row["reason"] }}
          </td>
        </tr>

        {% else %}
        <tr>
          <td colspan="6" style="text-align:center;padding:28px;color:var(--muted);">
            ✅ No unknown UIDs found. All scanned students are registered.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

  </div>
</div>

<script>
// ── Fast Search ──────────────────────────────────────────────────────────────
const _ncRows = [];
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("#nctbl tbody tr[data-search]").forEach(r => _ncRows.push(r));
});

let _ncTimer = null;
function filterTable(){
  clearTimeout(_ncTimer);
  _ncTimer = setTimeout(() => {
    const q = document.getElementById("srch").value.toLowerCase().trim();
    requestAnimationFrame(() => {
      _ncRows.forEach(r => {
        r.style.display = (!q || r.dataset.search.includes(q)) ? "" : "none";
      });
    });
  }, 200);
}
</script>

{% endblock %}