<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Data Pendaftar PPDB Online | CMS Admin SMK Teratai Putih 3</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>

  <div class="admin-wrapper">
    <%- include('partials/admin-sidebar') %>

    <div class="admin-content">
      <%- include('partials/admin-header', { title: 'Data Pendaftar PPDB Online' }) %>

      <main class="admin-main">
        <% if (locals.message) { %>
          <div class="alert alert-success" style="margin-bottom: 1.5rem;">
            <%= locals.message %>
          </div>
        <% } %>
        
        <div class="card" style="margin-bottom: 2rem;">
          <div class="card-header">
            <h3><i class="fa-solid fa-users text-primary"></i> Data Formulir Calon Siswa Terdaftar (<%= leads.length %> Pendaftar)</h3>
            <a href="/admin/ppdb-leads/export" class="btn btn-success">
              <i class="fa-solid fa-file-excel"></i> Export Semua Data CSV / Excel
            </a>
          </div>
          <div class="card-body p-0">
            <% if (leads && leads.length > 0) { %>
              <div class="table-responsive">
                <table class="admin-table">
                  <thead>
                    <tr>
                      <th>ID Registrasi</th>
                      <th>Waktu Registrasi</th>
                      <th>Nama Lengkap Siswa</th>
                      <th>SMP / MTs Asal</th>
                      <th>Jurusan Pilihan</th>
                      <th>Gender</th>
                      <th>No WhatsApp</th>
                      <th>Email</th>
                      <th>Alamat Rumah</th>
                      <th>Status Pendaftar</th>
                      <th>Aksi</th>
                    </tr>
                  </thead>
                  <tbody>
                    <% leads.forEach(lead => { 
                      const nama = lead.fullname || lead.nama || '-';
                      const sekolah = lead.school_origin || lead.asalSekolah || '-';
                      const jurusan = lead.major || lead.pilihanJurusan || '-';
                      const gender = lead.gender || lead.jenisKelamin || '-';
                      const alamat = lead.address || lead.alamat || '-';
                      const tanggal = lead.date || lead.registeredAt || '-';
                      const wa = lead.whatsapp || '';
                    %>
                      <tr>
                        <td><code><%= lead.id %></code></td>
                        <td><small><%= tanggal %></small></td>
                        <td><strong><%= nama %></strong></td>
                        <td><%= sekolah %></td>
                        <td><span class="badge badge-major"><%= jurusan %></span></td>
                        <td><%= gender %></td>
                        <td><strong><%= wa %></strong></td>
                        <td><%= lead.email || '-' %></td>
                        <td><small style="max-width: 180px; display: inline-block; word-break: break-word;"><%= alamat %></small></td>
                        <td>
                          <form action="/admin/ppdb-leads/status" method="POST" style="display: flex; gap: 0.5rem; align-items: center;">
                            <input type="hidden" name="leadId" value="<%= lead.id %>">
                            <select name="status" class="form-control" style="padding: 0.2rem 0.5rem; font-size: 0.85rem;" onchange="this.form.submit()">
                              <option value="Baru" <%= (!lead.status || lead.status === 'Baru') ? 'selected' : '' %>>Baru</option>
                              <option value="Sudah di Follow Up" <%= lead.status === 'Sudah di Follow Up' ? 'selected' : '' %>>Sudah di Follow Up</option>
                              <option value="Jadi Masuk" <%= lead.status === 'Jadi Masuk' ? 'selected' : '' %>>Jadi Masuk</option>
                              <option value="Tidak Jadi Masuk" <%= lead.status === 'Tidak Jadi Masuk' ? 'selected' : '' %>>Tidak Jadi Masuk</option>
                            </select>
                          </form>
                        </td>
                        <td>
                          <div style="display: flex; gap: 0.5rem;">
                            <a href="https://wa.me/<%= wa.replace(/^0/, '62') %>?text=Halo%20<%= encodeURIComponent(nama) %>,%20terima%20kasih%20telah%20mendaftar%20PPDB%20SMK%20Teratai%20Putih%20Global%203%20Bekasi..." target="_blank" class="btn-sm btn-success" title="Chat WhatsApp">
                              <i class="fa-brands fa-whatsapp"></i>
                            </a>
                            <form action="/admin/ppdb-leads/delete" method="POST" onsubmit="return confirm('Yakin ingin menghapus data pendaftar ini? Tindakan ini tidak dapat dibatalkan.');">
                              <input type="hidden" name="leadId" value="<%= lead.id %>">
                              <button type="submit" class="btn-sm btn-danger" title="Hapus Data">
                                <i class="fa-solid fa-trash"></i>
                              </button>
                            </form>
                          </div>
                        </td>
                      </tr>
                    <% }); %>
                  </tbody>
                </table>
              </div>
            <% } else { %>
              <div style="padding: 3rem; text-align: center; color: var(--text-muted);">
                <i class="fa-solid fa-folder-open" style="font-size: 3rem; color: #CBD5E1; margin-bottom: 1rem;"></i>
                <p>Belum ada data pendaftar PPDB Online yang masuk.</p>
              </div>
            <% } %>
          </div>
        </div>

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

</body>
</html>
