<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Admin — Attendance</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    :root{
      --bg:#F7F8FA; --surface:#ffffff; --text:#0f172a; --muted:#64748b; --primary:#2563eb;
      --ok:#10b981; --border:#e5e7eb; --chip:#f1f5f9; --danger:#ef4444;
      --sidebar:#111827; --sidefg:#e5e7eb; --sidehover:#1f2937;
    }
    *{box-sizing:border-box}
    body{font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial; color:var(--text); background:var(--bg); margin:0}
    a{color:var(--primary); text-decoration:none}
    a:hover{text-decoration:underline}

    /* Shell & Sidebar */
    .shell{display:flex; min-height:100vh}
    .sidebar{width:260px; background:var(--sidebar); color:var(--sidefg); padding:18px 16px; position:sticky; top:0; height:100dvh; display:flex; flex-direction:column; gap:16px; border-right:1px solid rgba(255,255,255,.06)}
    .brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
    .brand .dot{width:10px; height:10px; border-radius:50%; background:var(--ok)}
    .side-nav{display:flex; flex-direction:column; gap:6px; margin-top:6px}
    .side-link{display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; color:var(--sidefg); border:1px solid transparent}
    .side-link:hover{background:rgba(255,255,255,.06)}
    .side-link.active{background:var(--sidehover); border-color:#374151}
    .side-spacer{flex:1}
    .side-foot{font-size:12px; opacity:.75}
    .hamburger{display:none; position:fixed; top:12px; left:12px; z-index:50; background:var(--sidebar); color:var(--sidefg); border:1px solid #2b3440; border-radius:10px; padding:8px 10px; cursor:pointer}

    /* Content */
    .content{flex:1}
    .container{max-width:1200px; margin:24px auto; padding:0 16px}
    .topbar{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
    .page-title{font-size:26px; font-weight:800}
    .chips{display:flex; gap:8px; flex-wrap:wrap}
    .chip{background:var(--chip); padding:6px 10px; border-radius:999px; font-size:12px}

    .panel{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px}
    .panel h3{margin:0 0 10px 0; font-size:16px}

    /* Filters */
    .filters{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
    label{font-size:13px; color:var(--muted)}
    input[type="date"], input[type="text"]{padding:10px 12px; border:1px solid var(--border); border-radius:10px; outline:none; font-size:14px; background:#fff}
    input[type="date"]:focus, input[type="text"]:focus{border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(37,99,235,.15)}

    .button{padding:10px 14px; border:none; border-radius:10px; cursor:pointer; font-weight:600; font-size:14px; background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.15)}
    .button.ghost{background:#fff; color:#0f172a; border:1px solid var(--border)}
    .button.danger{background:var(--danger)}
    .button:disabled{opacity:.6; cursor:not-allowed}

    /* Table */
    .table-wrap{overflow:auto; border:1px solid var(--border); border-radius:12px}
    table{border-collapse:collapse; width:100%}
    thead th{position:sticky; top:0; background:#f8fafc; font-weight:700; font-size:13px; color:#0f172a; border-bottom:1px solid var(--border)}
    th, td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:left; font-size:14px; white-space:nowrap}
    tbody tr:hover{background:#fafafa}

    .meta{display:flex; align-items:center; justify-content:space-between; margin-top:8px; font-size:13px; color:var(--muted)}
    .spinner{width:18px; height:18px; border:3px solid #e5e7eb; border-top-color:var(--primary); border-radius:50%; display:inline-block; animation:spin 1s linear infinite}
    @keyframes spin{to{transform:rotate(360deg)}}

    /* Mobile sidebar */
    @media (max-width: 900px){ .sidebar{position:fixed; left:-280px; transition:left .18s ease} .sidebar.open{left:0} .hamburger{display:block} }
  </style>
</head>
<body>
  <button class="hamburger" id="hamburger">☰ Menu</button>
  <div class="shell">
<!-- sidebar.html -->
<aside class="sidebar" id="sidebar">
  <div class="brand">
    <span class="dot"></span> <span>FaceAttend</span>
  </div>

  <nav class="side-nav">
   <a class="side-link" href="/admin">Admin Panel</a>
    <a class="side-link" href="/register">Register (Users)</a>
    <a class="side-link" href="/attendance">Take Attendance</a>
     <a class="side-link" href="/logout">Logout</a>
  </nav>

  <div class="side-spacer"></div>
  <div class="side-foot">© <span id="yy"></span> • v1.1</div>
</aside>

<script>
  document.getElementById('yy').textContent = new Date().getFullYear();
</script>


    <!-- Content -->
    <main class="content">
      <div class="container">
        <div class="topbar">
          <div class="page-title">Admin — Attendance Records</div>
          <div class="chips" role="navigation" aria-label="Quick links">
            <a class="chip" href="/register">Register</a>
            <a class="chip" href="/attendance">Attendance</a>
            <a class="chip" href="/admin">Admin</a>
          </div>
        </div>

        <div class="panel">
          <h3>Filters</h3>
          <div class="filters" style="margin-top:6px">
            <label>Date:
              <input id="date" type="date" />
            </label>
            <input id="student_code" type="text" placeholder="Student Code (optional)" />
            <button id="btnSearch" class="button">Search</button>
            <a id="csvLink" class="button ghost" href="/api/attendance/export">Export CSV</a>
            <a class="button ghost" href="/attendance">Take Attendance</a>
          </div>
        </div>

        <div class="panel" style="margin-top:14px">
          <h3>Results</h3>
          <div class="table-wrap" style="margin-top:8px">
            <table id="tbl">
              <thead>
                <tr>
                  <th>Date</th>
                  <th>Time In</th>
                  <th>Source</th>
                  <th>Student Code</th>
                  <th>Name</th>
                  <th>Class</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
          <div class="meta">
            <div>
              <span id="count">0 record(s)</span>
            </div>
            <div id="loading" style="display:none"><span class="spinner"></span> Loading…</div>
          </div>
        </div>

      </div>
    </main>
  </div>

  <script>
    // Sidebar interactions
    const hamburger = document.getElementById('hamburger');
    const sidebar = document.getElementById('sidebar');
    hamburger.addEventListener('click', ()=> sidebar.classList.toggle('open'));
    document.getElementById('yy').textContent = new Date().getFullYear();

    // ==== Original functionality (kept intact) + small UX extras ====
    const dateEl = document.getElementById('date');
    const codeEl = document.getElementById('student_code');
    const btnSearch = document.getElementById('btnSearch');
    const tblBody = document.querySelector('#tbl tbody');
    const csvLink = document.getElementById('csvLink');
    const countEl = document.getElementById('count');
    const loading = document.getElementById('loading');

    function setToday(){
      const d = new Date();
      const m = String(d.getMonth()+1).padStart(2,'0');
      const day = String(d.getDate()).padStart(2,'0');
      dateEl.value = `${d.getFullYear()}-${m}-${day}`;
    }

    async function search(){
      const params = new URLSearchParams();
      if(dateEl.value) params.set('date', dateEl.value);
      if(codeEl.value.trim()) params.set('student_code', codeEl.value.trim());
      const url = '/api/attendance?' + params.toString();
      csvLink.href = '/api/attendance/export?' + params.toString();

      loading.style.display = 'inline-block';
      tblBody.innerHTML = '';
      countEl.textContent = '0 record(s)';

      try{
        const res = await fetch(url).then(r=>r.json());
        if(res.ok){
          for(const r of (res.rows||[])){
            const tr = document.createElement('tr');
            tr.innerHTML = `<td>${r.attend_date}</td><td>${r.time_in}</td><td>${r.source}</td>
              <td>${r.student_code}</td><td>${r.full_name}</td><td>${r.class_name||''}</td>`;
            tblBody.appendChild(tr);
          }
          countEl.textContent = `${(res.rows||[]).length} record(s)`;
        }else{
          const tr = document.createElement('tr');
          tr.innerHTML = `<td colspan="6" style="color:#b91c1c">${res.error || 'Failed to load records'}</td>`;
          tblBody.appendChild(tr);
        }
      }catch(e){
        const tr = document.createElement('tr');
        tr.innerHTML = `<td colspan="6" style="color:#b91c1c">Network error: ${e.message}</td>`;
        tblBody.appendChild(tr);
      }finally{
        loading.style.display = 'none';
      }
    }

    // Search on click or Enter key
    btnSearch.addEventListener('click', search);
    codeEl.addEventListener('keydown', (e)=>{ if(e.key==='Enter') search(); });
    dateEl.addEventListener('keydown', (e)=>{ if(e.key==='Enter') search(); });

    // Load today's by default
    setToday();
    search();
  </script>
</body>
</html>
