{% extends "base.html" %}
{% block title %}Audit Trail{% 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>
    <a href="/students">👤 Students</a>
    <a href="/teachers">👩‍🏫 Teachers</a>
    <a href="/attendance/override">✏️ Override</a>
    <a href="/no_class">❓ No-Class</a>
    <a href="/audit" class="active">📝 Audit</a>
    <a href="/logs">📋 Logs</a>
    <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;">
        📝 Audit Trail
        <span style="font-size:13px;color:var(--muted);font-weight:500;">
          (Latest {{ logs|length }} records)
        </span>
      </h2>

      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;">
        <a href="/audit/export" class="btn btn-green btn-sm">
          ⬇ Excel
        </a>

        <input type="text" id="srch" placeholder="🔍 Search user / action / date…"
               oninput="filterTable()" style="width:260px;padding:7px 12px;font-size:13px;">
      </div>
    </div>

    <div style="
      font-size:12px;
      color:#334155;
      margin-bottom:10px;
    ">
      📄 <strong>Export:</strong> Downloads previous month audit data (1st–last day)
    </div>

    <div style="
      background:#f8fafc;
      border:1px solid #e2e8f0;
      padding:8px 12px;
      border-radius:8px;
      font-size:12px;
      color:#475569;
      margin-bottom:14px;
      display:flex;
      justify-content:space-between;
      flex-wrap:wrap;
      gap:8px;
    ">
      <span>📊 Showing latest logs for fast loading</span>
      <span>🧹 Old logs auto-clean every 60 days</span>
    </div>

    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;font-size:12px;">
      <span style="background:#e8f5e9;color:#2e7d32;padding:3px 10px;border-radius:20px;font-weight:600;">✏️ Manual Override</span>
      <span style="background:#fdecea;color:#c62828;padding:3px 10px;border-radius:20px;font-weight:600;">🚫 Auto Absent</span>
      <span style="background:#e3f2fd;color:#0277bd;padding:3px 10px;border-radius:20px;font-weight:600;">🚪 Gate Entry</span>
      <span style="background:#fff8e1;color:#e65100;padding:3px 10px;border-radius:20px;font-weight:600;">🗑 Delete</span>
    </div>

    <div style="overflow-x:auto;">
      <table id="ltbl">
        <thead>
          <tr>
            <th>#</th>
            <th>Time</th>
            <th>By (User)</th>
            <th>Action Type</th>
            <th>Details</th>
          </tr>
        </thead>
        <tbody>
          {% for i, log in enumerate(logs, 1) %}
          {% set action = log["action"] %}
          {% if "MANUAL_OVERRIDE" in action %}
            {% set row_color = "#e8f5e9" %}
            {% set badge_color = "#2e7d32" %}
            {% set type_label = "✏️ MANUAL OVERRIDE" %}
          {% elif "AUTO_ABSENT" in action or "MANUAL_ABSENT" in action %}
            {% set row_color = "#fdecea" %}
            {% set badge_color = "#c62828" %}
            {% set type_label = "🚫 AUTO ABSENT" %}
          {% elif "ENTRY" in action %}
            {% set row_color = "#f8faff" %}
            {% set badge_color = "#0277bd" %}
            {% set type_label = "🚪 GATE ENTRY" %}
          {% elif "EXIT" in action %}
            {% set row_color = "#e8f5e9" %}
            {% set badge_color = "#2e7d32" %}
            {% set type_label = "🚪 GATE EXIT" %}
          {% elif "DELETE" in action %}
            {% set row_color = "#fff8e1" %}
            {% set badge_color = "#e65100" %}
            {% set type_label = "🗑 DELETE" %}
          {% elif "ADD_STUDENT" in action or "EXCEL_IMPORT" in action %}
            {% set row_color = "#f3e5f5" %}
            {% set badge_color = "#7c3aed" %}
            {% set type_label = "➕ ADD STUDENT" %}
          {% else %}
            {% set row_color = "#f9fafb" %}
            {% set badge_color = "#64748b" %}
            {% set type_label = "ℹ️ SYSTEM" %}
          {% endif %}
          {% set _ds = (log["time"][:16] ~ " " ~ log["user"] ~ " " ~ action)|lower %}
          <tr style="background:{{ row_color }};" data-search="{{ _ds }}">
            <td style="color:var(--muted);font-size:12px;">{{ i }}</td>
            <td style="white-space:nowrap;font-size:12px;color:var(--muted);">{{ log["time"][:16] }}</td>
            <td><strong>{{ log["user"] }}</strong></td>
            <td>
              <span style="background:#fff;color:{{ badge_color }};padding:2px 8px;
                    border-radius:20px;font-size:11px;font-weight:700;border:1px solid {{ badge_color }};">
                {{ type_label }}
              </span>
            </td>
            <td style="font-size:12px;font-family:monospace;word-break:break-all;">{{ action }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="5" style="text-align:center;padding:28px;color:var(--muted);">
              No audit entries yet.
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

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

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