<% const persen = total > 0 ? Math.round((terkirim/total)*100) : 0; %>
<div class="flex justify-between items-start mb-6">
  <div>
    <h1><%= kelas.nama %>.</h1>
    <p class="mono-label mt-1">Angkatan <%= angkatan.nomor %> · <%= kelas.jenjang %></p>
  </div>
  <div class="flex gap-2">
    <% if (user.role === 'admin') { %>
      <a href="/santri/new" class="btn-primary btn-sm">+ Santri</a>
      <a href="/santri/import/<%= angkatan.id %>" class="btn-secondary btn-sm">Import</a>
    <% } %>
  </div>
</div>

<div class="card-soft mb-4 flex items-center gap-3 py-3 px-4">
  <svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" class="text-mute flex-shrink-0"><circle cx="8" cy="8" r="7"/><path d="M8 5v3M8 11h.01"/></svg>
  <p class="text-sm text-body">Gunakan HP saat mengirim undangan via WhatsApp untuk pengalaman lebih lancar.</p>
</div>

<div class="card mb-6">
  <div class="flex items-center justify-between mb-2">
    <span class="text-sm text-body">Progress pengiriman</span>
    <span class="text-sm font-medium"><%= terkirim %>/<%= total %> <span class="text-mute">(<%= persen %>%)</span></span>
  </div>
  <div class="progress-bar">
    <div class="progress-bar-fill" style="width:<%= persen %>%"></div>
  </div>
</div>

<div class="card p-0 overflow-hidden" x-data="{ testNumber: '', showTestFor: null }">
<table class="table-base">
  <thead>
    <tr>
      <th>nis</th>
      <th>nama</th>
      <th>nomor wa</th>
      <th>status</th>
      <th>aksi</th>
    </tr>
  </thead>
  <tbody>
    <% if (santriList.length === 0) { %>
      <tr><td colspan="5" class="text-center text-mute py-8">Belum ada santri di kelas ini.</td></tr>
    <% } %>
    <% santriList.forEach(s => { %>
      <tr>
        <td class="mono-label"><%= s.nis %></td>
        <td>
          <span class="font-medium"><%= s.nama %></span>
          <div class="mono-label mt-0.5">/<%= angkatan.nomor %>/<%= s.slug %></div>
        </td>
        <td class="mono-label"><%= s.nomorWa %></td>
        <td>
          <% if (s.statusTerkirim) { %>
            <span class="badge-success">Terkirim</span>
            <% if (s.terkirimAt) { %>
              <div class="mono-label mt-1"><%= new Date(s.terkirimAt).toLocaleString('id-ID') %></div>
            <% } %>
          <% } else { %>
            <span class="badge-pending">Belum</span>
          <% } %>
        </td>
        <td>
          <div class="flex flex-wrap gap-1.5">
            <a href="/undangan/preview/santri/<%= s.id %>" target="_blank" class="btn-secondary btn-xs">Preview</a>
            <% if (s.statusTerkirim) { %>
              <button class="btn-primary btn-xs" onclick="handleSend(<%= s.id %>, '<%= s.nama.replace(/'/g, "\\'") %>', 'resend')">Kirim Ulang</button>
              <button class="btn-secondary btn-xs" onclick="handleReset(<%= s.id %>)">Reset</button>
            <% } else { %>
              <button class="btn-primary btn-xs" onclick="handleSend(<%= s.id %>, '<%= s.nama.replace(/'/g, "\\'") %>', 'send')">Kirim WA</button>
            <% } %>
            <button class="btn-secondary btn-xs" @click="showTestFor = showTestFor === <%= s.id %> ? null : <%= s.id %>">Test</button>
            <a href="/santri/<%= s.id %>/edit" class="btn-secondary btn-xs">Edit</a>
            <% if (user.role === 'admin') { %>
              <form action="/santri/<%= s.id %>?_method=DELETE" method="POST" onsubmit="return confirm('Hapus santri ini?')">
                <button class="btn-danger btn-xs">Hapus</button>
              </form>
            <% } %>
          </div>
          <div x-show="showTestFor === <%= s.id %>" x-cloak class="mt-2 flex gap-1.5">
            <input type="tel" placeholder="08xx" class="input input-sm flex-1" x-model="testNumber" />
            <button class="btn-primary btn-xs" type="button" @click="handleTest(<%= s.id %>, testNumber)">Kirim Test</button>
          </div>
        </td>
      </tr>
    <% }) %>
  </tbody>
</table>
</div>

<script>
async function handleSend(id, nama, mode) {
  const isResend = mode === 'resend';
  const msg = isResend
    ? `Kirim ULANG undangan ke ${nama}?\n\nGunakan HP untuk pengalaman lebih mudah.`
    : `Kirim undangan ke ${nama}?\n\nGunakan HP untuk pengalaman lebih mudah.`;
  if (!confirm(msg)) return;
  const url = isResend ? `/send/resend/${id}` : `/send/santri/${id}`;
  const r = await fetch(url, { method: 'POST' });
  const data = await r.json();
  if (data.ok) { window.open(data.waUrl, '_blank'); if (!isResend) location.reload(); }
  else alert(data.error || 'Gagal.');
}
async function handleReset(id) {
  if (!confirm('Reset status terkirim?')) return;
  const r = await fetch(`/send/reset/${id}`, { method: 'POST' });
  const data = await r.json();
  if (data.ok) location.reload(); else alert(data.error || 'Gagal.');
}
async function handleTest(id, nomor) {
  if (!nomor) return alert('Isi nomor HP test.');
  const r = await fetch(`/send/test/${id}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ nomor }) });
  const data = await r.json();
  if (data.ok) window.open(data.waUrl, '_blank'); else alert(data.error || 'Gagal.');
}
</script>
