<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">Kelola Peserta</h1>
      <p class="text-sm text-slate-500 mt-0.5">Data peserta dan QR Code identitas.</p>
    </div>
    <div class="flex flex-wrap gap-2">
      <a id="btnZipAll" href="/participants/qr/bulk-zip?<%= new URLSearchParams({q, class_unit: filterClass, status: filterStatus}).toString() %>" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium hover:bg-slate-200">Download QR (ZIP)</a>
      <a href="/participants/qr/bulk-pdf?<%= new URLSearchParams({q, class_unit: filterClass, status: filterStatus}).toString() %>" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium hover:bg-slate-200">Cetak QR Massal (PDF)</a>
      <button onclick="document.getElementById('modalImport').classList.remove('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium hover:bg-slate-200">Import Excel/CSV</button>
      <button onclick="document.getElementById('modalAdd').classList.remove('hidden')" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700">+ Tambah Peserta</button>
    </div>
  </div>

  <p class="text-xs text-slate-400 -mt-2">
    "Download QR (ZIP)" dan "Cetak QR Massal (PDF)" mengikuti filter pencarian di bawah ini
    (kosongkan filter untuk mengunduh seluruh peserta aktif), atau centang peserta tertentu di tabel
    lalu klik tombol yang muncul untuk mengunduh hanya yang dipilih.
  </p>

  <form method="GET" class="bg-white border border-slate-200 rounded-2xl shadow-sm p-4 flex flex-wrap gap-3 items-end">
    <div class="flex-1 min-w-[180px]">
      <label class="block text-xs font-medium text-slate-600 mb-1">Cari</label>
      <input name="q" value="<%= q %>" placeholder="Nama atau NIM/NIP" 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">Kelas/Unit</label>
      <select name="class_unit" class="px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <% classes.forEach(function(c) { %>
          <option value="<%= c %>" <%= filterClass===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="px-3 py-2 rounded-lg border border-slate-200 text-sm">
        <option value="">Semua</option>
        <option value="active" <%= filterStatus==='active'?'selected':'' %>>Aktif</option>
        <option value="inactive" <%= filterStatus==='inactive'?'selected':'' %>>Nonaktif</option>
      </select>
    </div>
    <button class="px-4 py-2 rounded-lg bg-slate-800 text-white text-sm font-medium">Filter</button>
  </form>

  <div id="selectionBar" class="hidden sticky top-0 z-10 bg-slate-900 text-white rounded-xl px-4 py-2.5 flex items-center justify-between text-sm">
    <span><span id="selectedCount">0</span> peserta dipilih</span>
    <div class="flex gap-2">
      <a id="btnZipSelected" href="#" class="px-3 py-1.5 rounded-lg bg-white text-slate-900 text-xs font-medium">Download ZIP Terpilih</a>
      <a id="btnPdfSelected" href="#" class="px-3 py-1.5 rounded-lg bg-white text-slate-900 text-xs font-medium">Cetak PDF Terpilih</a>
      <button type="button" onclick="clearSelection()" class="px-3 py-1.5 rounded-lg bg-slate-700 text-xs font-medium">Batal</button>
    </div>
  </div>

  <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 class="w-8"><input type="checkbox" id="checkAll" onclick="toggleAll(this)" /></th>
          <th>NIM/NIP</th><th>Nama</th><th>Kelas/Unit</th><th>Status</th><th>QR</th><th></th>
        </tr></thead>
        <tbody>
          <% participants.forEach(function(p) { %>
            <tr>
              <td><input type="checkbox" class="rowCheck" value="<%= p.id %>" onclick="updateSelection()" /></td>
              <td class="text-slate-500"><%= p.identity_number %></td>
              <td class="font-medium text-slate-800"><%= p.full_name %></td>
              <td><%= p.class_unit || '-' %></td>
              <td>
                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium <%= p.is_active ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700' %>">
                  <%= p.is_active ? 'Aktif' : 'Nonaktif' %>
                </span>
              </td>
              <td>
                <a href="/participants/<%= p.id %>/qr.png" target="_blank" class="text-xs text-blue-600 hover:underline">Lihat QR</a>
              </td>
              <td class="text-right whitespace-nowrap">
                <button onclick="document.getElementById('edit<%= p.id %>').classList.remove('hidden')" class="text-xs text-slate-500 hover:text-blue-600 mr-3">Edit</button>
                <form method="POST" action="/participants/<%= p.id %>/regenerate-qr" class="inline" onsubmit="return confirm('QR lama akan tidak berlaku. Lanjutkan?')">
                  <button class="text-xs text-slate-500 hover:text-amber-600 mr-3">Regenerate QR</button>
                </form>
                <form method="POST" action="/participants/<%= p.id %>/toggle" class="inline">
                  <button class="text-xs <%= p.is_active ? 'text-red-600' : 'text-emerald-600' %>"><%= p.is_active ? 'Nonaktifkan' : 'Aktifkan' %></button>
                </form>
              </td>
            </tr>
            <tr id="edit<%= p.id %>" class="hidden bg-slate-50">
              <td colspan="7" class="px-3 py-3">
                <form method="POST" action="/participants/<%= p.id %>/edit" class="flex flex-wrap gap-2 items-end">
                  <div><label class="block text-[11px] text-slate-500">NIM/NIP</label><input name="identity_number" value="<%= p.identity_number %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
                  <div><label class="block text-[11px] text-slate-500">Nama</label><input name="full_name" value="<%= p.full_name %>" required class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
                  <div><label class="block text-[11px] text-slate-500">Kelas/Unit</label><input name="class_unit" value="<%= p.class_unit || '' %>" class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm w-28" /></div>
                  <div><label class="block text-[11px] text-slate-500">Email</label><input name="email" value="<%= p.email || '' %>" class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm" /></div>
                  <div><label class="block text-[11px] text-slate-500">Telepon</label><input name="phone" value="<%= p.phone || '' %>" class="px-2 py-1.5 rounded-lg border border-slate-200 text-sm w-32" /></div>
                  <button class="px-3 py-1.5 rounded-lg bg-blue-600 text-white text-xs font-medium">Simpan</button>
                </form>
              </td>
            </tr>
          <% }) %>
          <% if (participants.length === 0) { %>
            <tr><td colspan="7" class="text-center text-slate-400 py-8">Belum ada peserta yang cocok dengan filter.</td></tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
</div>

<script>
  function updateSelection() {
    const checks = Array.from(document.querySelectorAll('.rowCheck:checked'));
    const bar = document.getElementById('selectionBar');
    if (checks.length === 0) {
      bar.classList.add('hidden');
      return;
    }
    const ids = checks.map(c => c.value).join(',');
    document.getElementById('selectedCount').textContent = checks.length;
    document.getElementById('btnZipSelected').href = '/participants/qr/bulk-zip?ids=' + ids;
    document.getElementById('btnPdfSelected').href = '/participants/qr/bulk-pdf?ids=' + ids;
    bar.classList.remove('hidden');
  }
  function toggleAll(box) {
    document.querySelectorAll('.rowCheck').forEach(c => { c.checked = box.checked; });
    updateSelection();
  }
  function clearSelection() {
    document.querySelectorAll('.rowCheck').forEach(c => { c.checked = false; });
    document.getElementById('checkAll').checked = false;
    document.getElementById('selectionBar').classList.add('hidden');
  }
</script>

<div id="modalAdd" class="hidden fixed inset-0 bg-slate-900/40 flex items-center justify-center z-40 px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Tambah Peserta</h3>
      <button onclick="document.getElementById('modalAdd').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">&times;</button>
    </div>
    <form method="POST" action="/participants" class="space-y-3">
      <div><label class="block text-xs font-medium text-slate-600 mb-1">NIM/NIP</label><input name="identity_number" required 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">Nama Lengkap</label><input name="full_name" required 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">Kelas/Unit/Prodi</label><input name="class_unit" 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">Email (opsional)</label><input name="email" type="email" 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">No. Telepon (opsional)</label><input name="phone" class="w-full px-3 py-2 rounded-lg border border-slate-200 text-sm" /></div>
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="document.getElementById('modalAdd').classList.add('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium">Batal</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Simpan &amp; Buat QR</button>
      </div>
    </form>
  </div>
</div>

<div id="modalImport" class="hidden fixed inset-0 bg-slate-900/40 flex items-center justify-center z-40 px-4">
  <div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-sm font-semibold text-slate-900">Import Peserta</h3>
      <button onclick="document.getElementById('modalImport').classList.add('hidden')" class="text-slate-400 hover:text-slate-600">&times;</button>
    </div>
    <p class="text-xs text-slate-500 mb-3">File Excel (.xlsx) atau CSV dengan kolom: <code class="bg-slate-100 px-1 rounded">nim/nip</code>, <code class="bg-slate-100 px-1 rounded">nama</code>, <code class="bg-slate-100 px-1 rounded">kelas</code>, <code class="bg-slate-100 px-1 rounded">email</code>, <code class="bg-slate-100 px-1 rounded">telepon</code>. Peserta dengan NIM/NIP yang sama akan diperbarui.</p>
    <form method="POST" action="/participants/import" enctype="multipart/form-data" class="space-y-3">
      <input type="file" name="file" accept=".xlsx,.csv" required class="w-full text-sm" />
      <div class="flex justify-end gap-2 pt-2">
        <button type="button" onclick="document.getElementById('modalImport').classList.add('hidden')" class="px-4 py-2 rounded-lg bg-slate-100 text-slate-700 text-sm font-medium">Batal</button>
        <button type="submit" class="px-4 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium">Import</button>
      </div>
    </form>
  </div>
</div>
