{% extends "base.html" %}
{% block title %}Manual Attendance Override{% endblock %}
{% block body %}

<style>
  .ov-card-title{
    font-size:18px;
    font-weight:800;
    color:var(--navy);
    letter-spacing:.2px;
  }
  .ov-help{
    font-size:13px;
    color:var(--muted);
    margin:8px 0 16px;
    line-height:1.6;
  }
  .ov-label{
    display:block;
    font-size:12px;
    font-weight:700;
    color:#334155;
    margin-bottom:6px;
    letter-spacing:.4px;
    text-transform:uppercase;
  }
  .ov-input, .ov-select{
    width:100%;
    border:1.5px solid #d6deea;
    border-radius:8px;
    padding:9px 11px;
    font-size:13.5px;
    color:#0f172a;
    background:#fff;
    outline:none;
    transition:border-color .15s, box-shadow .15s, transform .12s;
  }
  .ov-input:focus, .ov-select:focus{
    border-color:var(--navy);
    box-shadow:0 0 0 3px rgba(26,60,110,.10);
  }
  .ov-select{
    height:190px;
    font-weight:600;
    color:#1e3a8a;
    background:#f8fbff;
  }
  .ov-match{
    margin:8px 0 10px;
    padding:10px 12px;
    border-radius:8px;
    border:1px solid #dbe3ef;
    background:#f8fafc;
    font-size:13px;
    color:#334155;
  }
  .ov-match strong{
    color:#1a3c6e;
    font-weight:800;
  }
  .ov-match .count{
    color:#475569;
    font-weight:700;
  }
  .ov-match .hint{
    color:#64748b;
    font-style:italic;
  }
  .ov-record{
    display:none;
    background:#f1f5fb;
    border-radius:8px;
    padding:10px 14px;
    margin-bottom:14px;
    font-size:13px;
    border:1px solid #e2e8f0;
  }
  .ov-record.good{
    background:#e8f5e9;
    border-color:#c8e6c9;
  }
  .ov-record.warn{
    background:#fff8e1;
    border-color:#ffe082;
  }
  .ov-mini{
    font-size:12px;
    color:#64748b;
    line-height:1.6;
  }
  .ov-badge{
    display:inline-block;
    padding:2px 8px;
    border-radius:999px;
    font-size:11px;
    font-weight:700;
    background:#eef2ff;
    color:#1e3a8a;
    margin-left:6px;
  }
  .ov-table th{
    font-size:12px;
    color:#334155;
    text-transform:uppercase;
    letter-spacing:.35px;
    padding:10px 8px;
  }
  .ov-table td{
    font-size:12.5px;
    padding:10px 8px;
    vertical-align:top;
  }
  .ov-table strong{
    color:#0f172a;
  }
  .ov-fieldgrid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .ov-card-soft{
    border-left:4px solid #c62828;
  }
  .ov-topgap{
    margin-bottom:20px;
  }
  @media (max-width: 700px){
    .ov-fieldgrid{
      grid-template-columns:1fr;
    }
  }
</style>

<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" class="active">✏️ Override</a>
    <a href="/no_class">❓ No-Class</a>
    <a href="/audit">📝 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 %}

  <!-- ================= MAIN OVERRIDE ================= -->
  <div class="card ov-topgap">
    <div class="ov-card-title">✏️ Manual Attendance Override</div>
    <div class="ov-help">
      Manually set attendance for any student on any selected date. All changes are saved in the audit trail.
    </div>

    <form method="POST" action="/attendance/override">

      <div class="form-group">
        <label class="ov-label">🧑‍🎓 Student Select *</label>

        <input type="text" id="studentSearch"
               placeholder="🔎 Search by Name / UID / Class / Section..."
               oninput="filterStudents()"
               autocomplete="off"
               class="ov-input"
               style="margin-bottom:8px;">

        <div id="studentMatch" class="ov-match">
          <span class="hint">Type something to find a student quickly.</span>
        </div>

        <!-- Only matched results shown here — never all 2000+ at once -->
        <select name="uid" id="uidSelect" onchange="loadRecord(); syncSelectedPreview();"
                class="ov-select">
          <option value="">— Student choose karo —</option>
        </select>

        <!-- Full data stored in JS array — zero DOM nodes for hidden students -->
        <script>
          const _allStudents = [
            {% for s in students %}
            { uid: "{{ s['uid'] }}", text: "{{ s['name'] }} | Class {{ s['class'] }}{{ s['section'] }} | {{ s['uid'] }}", search: "{{ (s['name'] ~ ' ' ~ s['uid'] ~ ' ' ~ s['class']|string ~ ' ' ~ (s['section'] or ''))|lower }}" }{% if not loop.last %},{% endif %}
            {% endfor %}
          ];
        </script>
      </div>

      <div class="form-group">
        <label class="ov-label">📅 Date *</label>
        <input type="date" name="date" id="dateInput"
               value="{{ today }}" onchange="loadRecord()" class="ov-input">
      </div>

      <!-- Existing Record -->
      <div id="existingRecord" class="ov-record">
        <strong>📌 Current Record:</strong>
        <span id="existingInfo" class="ov-mini"></span>
      </div>

      <div class="ov-fieldgrid">
        <div class="form-group">
          <label class="ov-label">✅ Status *</label>
          <select name="status" id="statusSel" class="ov-select" style="height:auto;">
            <option value="Present">✅ Present</option>
            <option value="Late">⚠️ Late</option>
            <option value="Absent">❌ Absent</option>
            <option value="Half-Day">🕐 Half-Day</option>
          </select>
        </div>

        <div class="form-group">
          <label class="ov-label">📝 Remark</label>
          <input type="text" name="remark" id="remarkInput"
                 placeholder="Optional note" class="ov-input">
        </div>

        <div class="form-group">
          <label class="ov-label">⏰ Time In</label>
          <input type="time" name="time_in" id="timeInInput" class="ov-input">
        </div>

        <div class="form-group">
          <label class="ov-label">⏱️ Time Out</label>
          <input type="time" name="time_out" id="timeOutInput" class="ov-input">
        </div>
      </div>

      <button type="submit" class="btn btn-navy" style="width:100%;margin-top:10px;">
        💾 Save Override
      </button>
    </form>
  </div>

  <!-- ================= AUTO ABSENT ================= -->
  <div class="card ov-card-soft ov-topgap">
    <div class="ov-card-title">🚫 Auto-Mark Absent</div>
    <div class="ov-help">
      Mark all unscanned students as Absent for the selected date.
    </div>

    <form method="POST" action="/attendance/mark_absent"
          onsubmit="return confirm('Mark all unscanned students as Absent?')">

      <div class="form-group">
        <label class="ov-label">📅 Date</label>
        <input type="date" name="date" value="{{ today }}" class="ov-input">
      </div>

      <button type="submit" class="btn btn-red" style="width:100%;">
        🚫 Mark Absent
      </button>
    </form>
  </div>

  <!-- ================= RECENT ================= -->
  <div class="card">
    <div class="ov-card-title">📝 Recent Manual Changes</div>
    <div class="ov-help">
      Latest edits made from the manual override page.
    </div>

    <table class="ov-table" style="font-size:12px;width:100%;">
      <thead>
        <tr>
          <th>Time</th>
          <th>By</th>
          <th>Change</th>
        </tr>
      </thead>
      <tbody>
        {% for r in recent_overrides %}
        <tr>
          <td style="color:var(--muted);white-space:nowrap;">{{ r["time"][:16] }}</td>
          <td><strong>{{ r["user"] }}</strong></td>
          <td style="font-size:11px;word-break:break-word;">{{ r["action"] }}</td>
        </tr>
        {% else %}
        <tr>
          <td colspan="3" style="text-align:center;color:var(--muted);padding:16px;">
            No manual changes yet
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>

    <div style="text-align:right;margin-top:10px;">
      <a href="/audit" class="btn btn-sky btn-sm">View Audit →</a>
    </div>
  </div>

</div>

<script>
function filterStudents(){
  const input = document.getElementById("studentSearch").value.toLowerCase().trim();
  const select = document.getElementById("uidSelect");
  const matchBox = document.getElementById("studentMatch");

  if(!input){
    // Reset select to default only
    select.innerHTML = '<option value="">— Student choose karo —</option>';
    matchBox.innerHTML = '<span class="hint">Type something to find a student quickly.</span>';
    return;
  }

  // Search JS array — no DOM touch, no reflow
  const matched = _allStudents.filter(s => s.search.includes(input));

  // Build select options for matched only (max 30 shown)
  const shown = matched.slice(0, 30);
  let html = '<option value="">— Student choose karo —</option>';
  shown.forEach(s => {
    html += `<option value="${s.uid}">${s.text}</option>`;
  });
  select.innerHTML = html;

  if(matched.length === 0){
    matchBox.innerHTML = '<strong style="color:#c62828;">No student matched.</strong>';
  } else {
    select.selectedIndex = 1;
    matchBox.innerHTML = '<strong>Matched:</strong> <strong style="color:#1a3c6e;">' +
      shown[0].text + '</strong> ' +
      '<span class="count">(' + matched.length + ' result(s))</span>';
  }
}

function syncSelectedPreview(){
  const select = document.getElementById("uidSelect");
  const matchBox = document.getElementById("studentMatch");
  const selected = select.options[select.selectedIndex];

  if(selected && selected.value){
    matchBox.innerHTML = '<strong>Selected:</strong> <strong style="color:#1a3c6e;">' +
      selected.text + '</strong> <span class="ov-badge">Ready</span>';
  }
}

function loadRecord(){
  const uid  = document.getElementById("uidSelect").value;
  const date = document.getElementById("dateInput").value;
  if(!uid || !date) return;

  fetch(`/attendance/get_record?uid=${uid}&date=${date}`)
    .then(r => r.json())
    .then(d => {
      const box = document.getElementById("existingRecord");
      const inf = document.getElementById("existingInfo");

      box.style.display = "block";

      if(d.found){
        box.classList.remove("warn");
        box.classList.add("good");
        inf.innerHTML = ` Status: <strong>${d.status}</strong> | In: <strong>${d.time_in||"–"}</strong> | Out: <strong>${d.time_out||"–"}</strong> | Remark: <strong>${d.remark||"none"}</strong>`;
      } else {
        box.classList.remove("good");
        box.classList.add("warn");
        inf.innerHTML = ` No record found — <strong>new entry will be created</strong>`;
      }
    }).catch(()=>{});
}
</script>
{% endblock %}