<div class="space-y-6">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-xl font-semibold text-slate-900">Rekap Absensi</h1>
      <p class="text-sm text-slate-500 mt-0.5">Menampilkan maksimal 1000 baris terbaru sesuai filter.</p>
    </div>
    <div class="flex gap-2">
      <a href="/attendance/export/excel?<%= new URLSearchParams(query).toString() %>" class="px-4 py-2 rounded-lg bg-emerald-50 text-emerald-700 text-sm font-medium hover:bg-emerald-100">Export Excel</a>
      <a href="/attendance/export/pdf?<%= new URLSearchParams(query).toString() %>" class="px-4 py-2 rounded-lg bg-red-50 text-red-700 text-sm font-medium hover:bg-red-100">Export PDF</a>
    </div>
  </div>

  <form method="GET" class="bg-white border border-slate-200 rounded-2xl shadow-sm p-4 grid sm:grid-cols-2 lg:grid-cols-4 gap-3">
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Cari Peserta</label><input name="q" value="<%= query.q || '' %>" placeholder="Nama / NIM" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
    <div>
      <label class="block text-xs font-medium text-slate-600 mb-1">Kegiatan</label>
      <select name="event_id" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <% events.forEach(function(e) { %><option value="<%= e.id %>" <%= String(query.event_id)===String(e.id)?'selected':'' %>><%= e.name %></option><% }) %>
      </select>
    </div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Kelas/Unit</label>
      <select name="class_unit" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <% classes.forEach(function(c) { %><option value="<%= c %>" <%= query.class_unit===c?'selected':'' %>><%= c %></option><% }) %>
      </select>
    </div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Status</label>
      <select name="status" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <option value="hadir" <%= query.status==='hadir'?'selected':'' %>>Hadir</option>
        <option value="koreksi" <%= query.status==='koreksi'?'selected':'' %>>Koreksi</option>
      </select>
    </div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Dari Tanggal</label><input type="date" name="date_from" value="<%= query.date_from || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
    <div><label class="block text-xs font-medium text-slate-600 mb-1">Sampai Tanggal</label><input type="date" name="date_to" value="<%= query.date_to || '' %>" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
    <div class="flex items-end"><button class="w-full px-4 py-2 rounded-lg bg-slate-800 text-white text-sm font-medium">Terapkan Filter</button></div>
  </form>

  <div class="bg-white border border-slate-200 rounded-2xl shadow-sm overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full data-table">
        <thead><tr>
          <th>No</th><th>NIM/NIP</th><th>Nama</th><th>Kelas</th><th>Kegiatan</th><th>Sesi</th><th>Tanggal</th><th>Waktu Absen</th><th>Status</th><th>Panitia</th>
          <% if (currentUser.role === 'super_admin') { %><th></th><% } %>
        </tr></thead>
        <tbody>
          <% rows.forEach(function(r, i) { %>
            <tr>
              <td><%= i + 1 %></td>
              <td class="text-slate-500"><%= r.identity_number %></td>
              <td class="font-medium text-slate-800"><%= r.full_name %></td>
              <td><%= r.class_unit || '-' %></td>
              <td><%= r.event_name %></td>
              <td><%= r.session_name %></td>
              <td><%= r.session_date %></td>
              <td><%= r.scanned_at %></td>
              <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium <%= r.status === 'koreksi' ? 'bg-amber-50 text-amber-700' : 'bg-emerald-50 text-emerald-700' %>"><%= r.status %></span>
                <% if (r.note) { %><div class="text-[11px] text-slate-400 mt-0.5"><%= r.note %></div><% } %>
              </td>
              <td><%= r.panitia_name || '-' %></td>
              <% if (currentUser.role === 'super_admin') { %>
                <td class="text-right whitespace-nowrap">
                  <button onclick="document.getElementById('correct<%= r.id %>').classList.toggle('hidden')" class="text-xs text-slate-500 hover:text-amber-600 mr-2">Koreksi</button>
                  <form method="POST" action="/attendance/<%= r.id %>/delete" class="inline" onsubmit="return confirm('Hapus data absensi ini? Peserta akan bisa discan ulang pada sesi ini.')">
                    <button class="text-xs text-red-500 hover:text-red-700">Hapus</button>
                  </form>
                </td>
              <% } %>
            </tr>
            <% if (currentUser.role === 'super_admin') { %>
              <tr id="correct<%= r.id %>" class="hidden bg-slate-50">
                <td colspan="11" class="px-3 py-3">
                  <form method="POST" action="/attendance/<%= r.id %>/correct" class="flex items-center gap-2">
                    <input name="note" placeholder="Catatan koreksi (opsional)" value="<%= r.note || '' %>" class="flex-1 max-w-md px-3 py-1.5 rounded-lg border border-slate-200 text-sm" />
                    <button class="px-3 py-1.5 rounded-lg bg-amber-500 text-white text-xs font-medium">Tandai sebagai Koreksi</button>
                  </form>
                </td>
              </tr>
            <% } %>
          <% }) %>
          <% if (rows.length === 0) { %>
            <tr><td colspan="11" class="text-center text-slate-400 py-8">Tidak ada data yang cocok dengan filter.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
</div>
