{% extends "base.html" %}
{% block title %}Students{% 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" class="active">👤 Students</a>
    {% if role == 'admin' %}
      <a href="/teachers">👩‍🏫 Teachers</a>
      <a href="/no_class">❓ No-Class</a>
      <a href="/logs">📋 Logs</a>
    {% elif role == 'principal' %}
      <a href="/no_class">❓ 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 %}

  {# Excel Import – ADMIN ONLY #}
  {% if role == 'admin' %}
  <div class="card" style="border:2px dashed #1a3c6e;">
    <h2>📥 Excel Import — Multi-file / Multi-sheet</h2>
    <form method="POST" action="/students/import" enctype="multipart/form-data">
      <div class="flex-gap" style="margin-bottom:10px;">
        <input type="file" name="excel_files" multiple accept=".xlsx" style="font-size:13px;padding:7px;">
        <button class="btn btn-navy" type="submit">⬆ Import</button>
      </div>
    </form>
    <p style="font-size:12px;color:#64748b;line-height:1.8;">
      ✅ Accepted columns: <code>uid/id/rfid</code> &nbsp; <code>roll/roll_no</code> &nbsp;
      <code>name</code> &nbsp; <code>class/grade</code> &nbsp; <code>section</code><br>
      📌 Missing class column → detected from sheet name or file name.<br>
      🔄 Same UID → updated (no duplicate entry).
    </p>
  </div>
  {% endif %}

  {# Add Student Form #}
  <div class="card">
    <h2>➕ Add Student{% if role == 'principal' %} (Single Entry Only){% endif %}</h2>
    <form method="POST" action="/students/add">
      <div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:12px;">
        <div><label>RFID / UID *</label><input name="uid" placeholder="e.g. A1B2C3D4" required style="width:100%;"></div>
        <div><label>Roll No.</label><input name="roll_no" placeholder="01" style="width:100%;"></div>
        <div><label>Full Name *</label><input name="name" placeholder="Student Name" required style="width:100%;"></div>
        <div><label>Class *</label><input name="class" placeholder="e.g. 5" required style="width:100%;"></div>
        <div><label>Section</label><input name="section" placeholder="A" style="width:100%;"></div>
      </div>
      <button class="btn btn-navy" type="submit">Add Student</button>
    </form>
  </div>

  {# Student Table #}
  <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;">👤 All Students ({{ students|length }})</h2>
      <div class="flex-gap">
        <input type="text" id="srch" placeholder="🔍 Search name / class / UID…"
               oninput="filterTable()" style="width:240px;padding:7px 12px;font-size:13px;">
        {% if role == 'admin' %}
        <button class="btn btn-red btn-sm" id="bulkDeleteBtn"
                onclick="submitBulkDelete()" style="display:none;">
          🗑 Delete Selected (<span id="selCount">0</span>)
        </button>
        {% endif %}
      </div>
    </div>

    {% if role == 'admin' %}
    <form id="bulkForm" method="POST" action="/students/delete_bulk"
          onsubmit="return confirmBulkDelete()">
    {% endif %}

    <table id="stbl">
      <thead>
        <tr>
          {% if role == 'admin' %}
          <th style="width:38px;text-align:center;">
            <input type="checkbox" id="selectAll" title="Select All"
                   onchange="toggleAll(this)" style="width:16px;height:16px;cursor:pointer;">
          </th>
          {% endif %}
          <th>#</th><th>UID</th><th>Roll</th><th>Name</th><th>Class</th><th>Section</th>
          {% if role == 'admin' %}<th>Action</th>{% endif %}
        </tr>
      </thead>
      <tbody>
        {% for i, s in enumerate(students, 1) %}
        <tr data-search="{{ (s['uid']|string ~ ' ' ~ (s['roll_no']|string if s['roll_no'] else '') ~ ' ' ~ s['name'] ~ ' ' ~ s['class']|string ~ ' ' ~ (s['section'] if s['section'] else ''))|lower }}">
          {% if role == 'admin' %}
          <td style="text-align:center;">
            <input type="checkbox" name="selected_uids" value="{{ s['uid'] }}"
                   class="row-cb" onchange="updateBulkBtn()"
                   style="width:16px;height:16px;cursor:pointer;">
          </td>
          {% endif %}
          <td>{{ i }}</td>
          <td><code>{{ s["uid"] }}</code></td>
          <td>{{ s["roll_no"] or "–" }}</td>
          <td><strong>{{ s["name"] }}</strong></td>
          <td>{{ s["class"] }}</td>
          <td>{{ s["section"] or "–" }}</td>
          {% if role == 'admin' %}
          <td>
            <button type="button" class="btn btn-red btn-sm"
                    onclick="deleteSingle('{{ s['uid'] }}','{{ s['name']|replace("'","\\'")|replace('"','&quot;') }}')">
              🗑 Delete
            </button>
          </td>
          {% endif %}
        </tr>
        {% else %}
        <tr>
          <td colspan="{% if role == 'admin' %}8{% else %}6{% endif %}"
              style="text-align:center;padding:24px;color:var(--muted);">
            No students found. Add one above or import Excel.
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    {% if role == 'admin' %}
    </form>
    <form id="singleDeleteForm" method="POST" action="" style="display:none;"></form>
    {% endif %}
  </div>
</div>

<script>
// ── Fast Search (override-style) ────────────────────────────────────────────
// data-search attribute is pre-built by server (Jinja) — zero DOM reads at
// search time, no layout reflow.  Same technique as Manual Override page.
const _sRows = [];
document.addEventListener("DOMContentLoaded", () => {
  document.querySelectorAll("#stbl tbody tr[data-search]").forEach(r => _sRows.push(r));
});

let _sTimer = null;
function filterTable(){
  clearTimeout(_sTimer);
  _sTimer = setTimeout(() => {
    const q = document.getElementById("srch").value.toLowerCase().trim();
    requestAnimationFrame(() => {
      _sRows.forEach(r => {
        r.style.display = (!q || r.dataset.search.includes(q)) ? "" : "none";
      });
    });
  }, 200);
}
{% if role == 'admin' %}
function toggleAll(master){
  document.querySelectorAll(".row-cb").forEach(cb=>{
    if(cb.closest("tr").style.display !== "none") cb.checked = master.checked;
  });
  updateBulkBtn();
}
function updateBulkBtn(){
  const checked = document.querySelectorAll(".row-cb:checked").length;
  document.getElementById("selCount").textContent = checked;
  document.getElementById("bulkDeleteBtn").style.display = checked > 0 ? "inline-block" : "none";
  const all = document.querySelectorAll(".row-cb").length;
  const sa  = document.getElementById("selectAll");
  sa.indeterminate = checked > 0 && checked < all;
  sa.checked = checked === all && all > 0;
}
function confirmBulkDelete(){
  const n = document.querySelectorAll(".row-cb:checked").length;
  return n > 0 && confirm("⚠️ Delete " + n + " student(s)?\nThis cannot be undone.");
}
function submitBulkDelete(){
  document.getElementById("bulkForm").submit();
}
function deleteSingle(uid, name){
  if(!confirm("Delete " + name + "?\nThis cannot be undone.")) return;
  const f = document.getElementById("singleDeleteForm");
  f.action = "/students/delete/" + uid;
  f.submit();
}
{% endif %}
</script>
{% endblock %}