{% extends "base.html" %}
{% block title %}Dashboard{% 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" class="active">📊 Dashboard</a>
    <a href="/about">ℹ️ About</a>
    {% if role == 'admin' %}
      <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">📝 Audit</a>
      <a href="/logs">📋 Logs</a>
      <a href="/help">📄 Help</a>
    {% elif role == 'principal' %}
      <a href="/students">👤 Students</a>
      <a href="/no_class">❓ No-Class</a>
      <a href="/report">📄 Reports</a>
    {% elif role == 'teacher' %}
      <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 %}
  
  {# ── ADMIN DASHBOARD ──────────────────────────────────────────────────── #}
  {% if role == 'admin' %}
  <div class="topbar">
    <h2 style="font-size:20px;color:var(--navy);">⚙️ Admin Panel</h2>
  </div>

  <div class="stats">
    <div class="stat blue">
      <div class="n">{{ admin_cards.students }}</div><div class="l">Total Students</div>
      <a href="/students">Manage →</a>
    </div>
    <div class="stat green">
      <div class="n">{{ admin_cards.teachers }}</div><div class="l">Teachers</div>
      <a href="/teachers">Manage →</a>
    </div>
    <div class="stat red">
      <div class="n">{{ admin_cards.no_class }}</div><div class="l">No-Class UIDs</div>
      <a href="/no_class">View →</a>
    </div>
    <div class="stat amber">
      <div class="n">{{ admin_cards.logs }}</div><div class="l">System Logs</div>
      <a href="/logs">View →</a>
    </div>
  </div>

  <div class="card" style="display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:20px;">
    <a href="/attendance/override" style="background:#e8f5e9;border-radius:10px;padding:18px;display:block;border:1.5px solid #a5d6a7;">
      <div style="font-size:24px;">✏️</div>
      <div style="font-weight:700;color:#2e7d32;margin-top:6px;">Manual Attendance Override</div>
      <div style="font-size:12px;color:#64748b;margin-top:4px;">Manually set attendance for any student in case of damaged ID cards, QR code issues, or any other related circumstances.</div>
    </a>
    <a href="/audit" style="background:#e3f2fd;border-radius:10px;padding:18px;display:block;border:1.5px solid #90caf9;">
      <div style="font-size:24px;">📝</div>
      <div style="font-weight:700;color:#0277bd;margin-top:6px;">Audit Trail</div>
      <div style="font-size:12px;color:#64748b;margin-top:4px;">View all manually recorded changes made for any reason in this section.</div>
    </a>
  </div>

  {# ── PRINCIPAL + TEACHER DASHBOARD ───────────────────────────────────── #}
  {% else %}
<style>
  .notice-banner{
    position: relative;
    background: linear-gradient(90deg, #dc2626, #ef4444);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: "Segoe UI", Arial, sans-serif;
    border-left: 4px solid #7f1d1d;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: blinkSoft 1.8s infinite;
  }

  .notice-banner .icon{
    font-size: 14px;
    animation: pulse 1s infinite;
  }

  .notice-banner strong{
    font-weight: 800;
  }

  @keyframes blinkSoft{
    0%,100% { opacity: 1; }
    50% { opacity: 0.85; }
  }

  @keyframes pulse{
    0%,100% { transform: scale(1); }
    50% { transform: scale(1.2); }
  }
</style>

<div class="notice-banner">
  <span class="icon">⚠️</span>
  <span>
    <strong>Notice:</strong> Attendance records are retained on the server for a maximum period of 90 days only. Download reports before automatic deletion.
  </span>
</div>
  
  <div class="topbar">
    <form class="flex-gap" method="GET" id="filterForm">
      <label style="margin:0;text-transform:none;font-size:13px;color:var(--muted);">📅 Date:</label>
      <input type="date" name="date" value="{{ date }}" style="width:165px;"
             >

      {% if role == 'principal' %}
      <select name="class" style="width:160px;" >
        <option value="">All Classes</option>
        {% for c in classes %}
        <option value="{{ c }}" {% if selected_class == c %}selected{% endif %}>Class {{ c }}</option>
        {% endfor %}
      </select>

      <select name="section" style="width:160px;" >
        <option value="">All Sections</option>
        {% for s in sections %}
        <option value="{{ s }}" {% if selected_section == s %}selected{% endif %}>Section {{ s }}</option>
        {% endfor %}
      </select>
      {% endif %}

      <button class="btn btn-navy btn-sm" type="submit">View</button>
    </form>

    {% if role == 'principal' %}
    <div class="flex-gap">
      <a class="btn btn-green btn-sm"
         href="/report/export?date={{ date }}&type=daily{% if selected_class %}&class={{ selected_class }}{% endif %}{% if selected_section %}&section={{ selected_section }}{% endif %}">
        ⬇ Excel
      </a>
      <a class="btn btn-sky btn-sm"
         href="/report/export_pdf?date={{ date }}&type=daily{% if selected_class %}&class={{ selected_class }}{% endif %}{% if selected_section %}&section={{ selected_section }}{% endif %}">
        📄 PDF
      </a>
    </div>
    {% endif %}
  </div>

  <div class="stats">
    <div class="stat blue">
      <div class="n" >{{ total }}</div>
      <div class="l">Total Students</div>
    </div>

    <div class="stat green">
      <div class="n" >{{ present }}</div>
      <div class="l">Present</div>
    </div>

    <div class="stat red">
      <div class="n" >{{ absent }}</div>
      <div class="l">Absent</div>
    </div>

    <div class="stat amber">
      <div class="n" >{{ late }}</div>
      <div class="l">Late Entry</div>
    </div>
  </div>

  {# ── PRINCIPAL CLASS-WISE SUMMARY (RESTORED) ───────────────────────── #}
  {% if role == 'principal' and class_summary %}
  <div class="card">
    <h2>📚 Class-wise Summary — {{ date }}{% if selected_class %} (Class {{ selected_class }}){% endif %}{% if selected_section %} (Section {{ selected_section }}){% endif %}</h2>
    <table>
      <thead>
        <tr>
          <th>#</th>
          <th>Class</th>
          <th>Section</th>
          <th>Present</th>
        </tr>
      </thead>
      <tbody>
        {% for i, row in enumerate(class_summary, 1) %}
        <tr>
          <td>{{ i }}</td>
          <td>{{ row["class"] }}</td>
          <td>{{ row["section"] or "–" }}</td>
          <td><strong>{{ row["cnt"] }}</strong></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  <div class="card">
    <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;">
      <h2 style="margin:0;">
        📋 Attendance — {{ date }}
        (<span >{{ rows|length }}</span> records)
        {% if role == 'teacher' %} | Class {{ user_class }}{% endif %}
      </h2>
      <input type="text" id="srch" placeholder="🔍 Search…" oninput="debouncedSearch()"
             style="width:220px;padding:7px 12px;font-size:13px;" autocomplete="off">
    </div>

    <div style="overflow-x:auto;">
      <table id="atbl">
        <thead>
          <tr>
            <th>#</th>
            <th>Roll</th>
            <th>Name</th>
            <th>Class</th>
            <th>Sec</th>
            <th>Gate</th>
            <th>Time In</th>
            <th>Time Out</th>
            <th>Status</th>
            <th>Remark</th>
          </tr>
        </thead>

        <tbody id="atblBody">
          {% for i, row in enumerate(rows, 1) %}
          {% set st = row["status"] or "Absent" %}
          {% set _ds = ((row["roll_no"]|string if row["roll_no"] else "") ~ " " ~ (row["name"] or "") ~ " " ~ (row["class"]|string if row["class"] else "") ~ " " ~ (row["section"] or "") ~ " " ~ st ~ " " ~ (row["remark"] or ""))|lower %}
          <tr data-search="{{ _ds }}"{% if st == "Absent" %} style="opacity:0.6;"{% endif %}>
            <td>{{ i }}</td>
            <td>{{ row["roll_no"] or "–" }}</td>
            <td><strong>{{ row["name"] or "-" }}</strong></td>
            <td>{{ row["class"] }}</td>
            <td>{{ row["section"] or "–" }}</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>
              {% elif g %}
                <span style="background:#f1f5fb;color:#64748b;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;">{{ g }}</span>
              {% else %}
                <span style="color:#ccc;">–</span>
              {% endif %}
            </td>

            <td>{{ row["time_in"] or "–" }}</td>
            <td>{{ row["time_out"] or "–" }}</td>
            <td><span class="badge {{ st|replace(' ','-') }}">{{ st }}</span></td>
            <td style="color:var(--muted);font-size:12px;">{{ row["remark"] or "" }}</td>
          </tr>
          {% else %}
          <tr>
            <td colspan="10" style="text-align:center;padding:24px;color:var(--muted);">
              No students found for {{ date }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  {% if role == 'principal' %}
  <div class="card" style="background:#fff8e1;border-left:4px solid #e65100;">
    <h2>❓ No UID Match (No-Class) — {{ no_class_count }} total
      &nbsp;<a href="/no_class" class="btn btn-sky btn-sm">View All</a>
    </h2>
  </div>
  {% endif %}

  {% endif %}{# end admin/non-admin #}
</div>

<script>
// ── Fast Search (override-style) ────────────────────────────────────────────
// data-search attribute is pre-built by server (Jinja) at render time.
// Zero DOM reads during search — no layout reflow, no textContent scan.
// Same technique as Manual Override page — smooth even with 2000+ rows.
const _aRows = [];
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("#atbl tbody tr[data-search]").forEach(r => _aRows.push(r));
});

function filterTable() {
  const q = document.getElementById("srch").value.toLowerCase().trim();
  requestAnimationFrame(() => {
    if (q === "") {
      _aRows.forEach(r => { r.style.display = ""; });
    } else {
      _aRows.forEach(r => {
        r.style.display = r.dataset.search.includes(q) ? "" : "none";
      });
    }
  });
}

// Debounce: 200ms wait after user stops typing
let _searchTimer = null;
function debouncedSearch() {
  clearTimeout(_searchTimer);
  _searchTimer = setTimeout(filterTable, 200);
}
</script>

{% endblock %}