<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dashboard | Doorprize 70th PT Pioneer</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    body { background: #f1f4f8; }
    .navbar-brand { font-weight: 700; }
    .stat-card { border-left: 5px solid #0d6efd; }
    .table-actions form { display: inline; }
  </style>
</head>
<body>
  <nav class="navbar navbar-dark bg-dark">
    <div class="container">
      <span class="navbar-brand">Doorprize 70th PT Pioneer</span>
      <div>
        <a href="/" class="btn btn-sm btn-outline-light" target="_blank" rel="noopener">Check-in</a>
        <a href="/layar-undian" class="btn btn-sm btn-outline-info" target="_blank" rel="noopener">Layar Undian</a>
      </div>
    </div>
  </nav>

  <div class="container py-4">
    <% if (pesan) { %>
      <div class="alert alert-<%= pesan.tipe === 'sukses' ? 'success' : 'danger' %> alert-dismissible fade show" role="alert">
        <%= pesan.teks %>
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
      </div>
    <% } %>

    <div class="row g-3 mb-4">
      <div class="col-6 col-md-4 col-lg">
        <div class="card stat-card shadow-sm">
          <div class="card-body">
            <h6 class="text-muted mb-1">Total Karyawan</h6>
            <h3 class="mb-0" id="statTotal"><%= stat.total %></h3>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg">
        <div class="card stat-card shadow-sm" style="border-left-color:#198754">
          <div class="card-body">
            <h6 class="text-muted mb-1">Hadir</h6>
            <h3 class="mb-0" id="statHadir"><%= stat.hadir %></h3>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg">
        <div class="card stat-card shadow-sm" style="border-left-color:#ffc107">
          <div class="card-body">
            <h6 class="text-muted mb-1">Kupon Diundi</h6>
            <h3 class="mb-0" id="statMenang"><%= stat.menang %></h3>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg">
        <div class="card stat-card shadow-sm" style="border-left-color:#6f42c1">
          <div class="card-body">
            <h6 class="text-muted mb-1">Total Hadiah</h6>
            <h3 class="mb-0" id="statTotalHadiah"><%= statHadiah.total_kuota %></h3>
          </div>
        </div>
      </div>
      <div class="col-6 col-md-4 col-lg">
        <div class="card stat-card shadow-sm" style="border-left-color:#0dcaf0">
          <div class="card-body">
            <h6 class="text-muted mb-1">Sisa Hadiah</h6>
            <h3 class="mb-0" id="statSisaHadiah"><%= statHadiah.sisa_hadiah %></h3>
          </div>
        </div>
      </div>
    </div>

    <ul class="nav nav-tabs mb-3" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tabKaryawan" type="button" role="tab">Karyawan</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabHadiah" type="button" role="tab">Hadiah</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabPemenang" type="button" role="tab">Pemenang</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tabKupon" type="button" role="tab">Kupon Undian</button>
      </li>
    </ul>

    <div class="tab-content">
      <!-- ================= TAB KARYAWAN ================= -->
      <div class="tab-pane fade show active" id="tabKaryawan" role="tabpanel">
        <div class="card shadow-sm">
          <div class="card-header bg-white d-flex justify-content-between align-items-center">
            <span class="fw-semibold">Data Karyawan</span>
            <div>
              <form method="POST" action="/batal-kehadiran" class="d-inline" onsubmit="return confirm('Batalkan SEMUA kehadiran? Kode kupon yang sudah terpakai akan dikembalikan ke kolam.');">
                <button class="btn btn-sm btn-outline-danger">Batalkan Semua Kehadiran</button>
              </form>
              <a href="/template-karyawan" class="btn btn-sm btn-outline-secondary">Template CSV</a>
              <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalImport">Import CSV</button>
              <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#modalKaryawan" onclick="resetModalKaryawan()">+ Tambah Karyawan</button>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr>
                  <th>ID</th><th>Nama</th><th>Departemen</th><th>Hadir</th><th>Aksi</th>
                </tr>
              </thead>
              <tbody id="tbodyKaryawan">
                <% if (karyawan.length === 0) { %>
                  <tr><td colspan="5" class="text-center text-muted">Belum ada karyawan.</td></tr>
                <% } else { %>
                  <% karyawan.forEach(function(k) { %>
                    <tr>
                      <td><%= k.id %></td>
                      <td><%= k.nama %></td>
                      <td><%= k.departemen || '-' %></td>
                      <td>
                        <% if (k.status_hadir) { %>
                          <span class="badge text-bg-success">Hadir</span>
                        <% } else { %>
                          <span class="badge text-bg-secondary">Belum</span>
                        <% } %>
                      </td>
                      <td class="table-actions">
                        <form method="POST" action="/karyawan/<%= k.id %>/toggle-hadir">
                          <button class="btn btn-sm <%= k.status_hadir ? 'btn-outline-secondary' : 'btn-outline-success' %>">
                            <%= k.status_hadir ? 'Batalkan Hadir' : 'Tandai Hadir' %>
                          </button>
                        </form>
                        <button class="btn btn-sm btn-outline-primary btn-edit-karyawan"
                                data-bs-toggle="modal" data-bs-target="#modalKaryawan"
                                data-id="<%= k.id %>" data-nama="<%= k.nama %>" data-departemen="<%= k.departemen || '' %>">Edit</button>
                        <form method="POST" action="/karyawan/<%= k.id %>/delete" onsubmit="return confirm('Hapus karyawan ini?');">
                          <button class="btn btn-sm btn-outline-danger">Hapus</button>
                        </form>
                      </td>
                    </tr>
                  <% }); %>
                <% } %>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- ================= TAB HADIAH ================= -->
      <div class="tab-pane fade" id="tabHadiah" role="tabpanel">
        <div class="row g-4">
          <div class="col-lg-4">
            <div class="card shadow-sm">
              <div class="card-header bg-white fw-semibold">Tambah Hadiah</div>
              <div class="card-body">
                <form method="POST" action="/hadiah">
                  <div class="mb-3">
                    <label class="form-label">Nama Hadiah</label>
                    <input type="text" name="nama_hadiah" class="form-control" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Kategori</label>
                    <input type="text" name="kategori" class="form-control" list="daftarKategori" placeholder="Utama / Hiburan / ...">
                    <datalist id="daftarKategori">
                      <option value="Utama"><option value="Hiburan"><option value="Lainnya">
                    </datalist>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Jumlah / Kuota</label>
                    <input type="number" name="total_kuota" class="form-control" value="1" min="1" required>
                  </div>
                  <button type="submit" class="btn btn-primary w-100">Simpan Hadiah</button>
                </form>
              </div>
            </div>
          </div>
          <div class="col-lg-8">
            <div class="card shadow-sm">
              <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <span class="fw-semibold">Stok Hadiah</span>
                <div>
                  <a href="/template-hadiah" class="btn btn-sm btn-outline-secondary">Template CSV</a>
                  <button class="btn btn-sm btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalImportHadiah">Import CSV</button>
                </div>
              </div>
              <div class="table-responsive">
                <table class="table table-hover align-middle mb-0">
                  <thead class="table-light">
                    <tr><th>ID</th><th>Hadiah</th><th>Kategori</th><th>Kuota</th><th>Sisa</th><th>Aksi</th></tr>
                  </thead>
                  <tbody id="tbodyHadiah">
                    <% if (hadiah.length === 0) { %>
                      <tr><td colspan="6" class="text-center text-muted">Belum ada hadiah.</td></tr>
                    <% } else { %>
                      <% hadiah.forEach(function(h) { %>
                        <tr>
                          <td><%= h.id %></td>
                          <td><%= h.nama_hadiah %></td>
                          <td><%= h.kategori || '-' %></td>
                          <td><%= h.total_kuota %></td>
                          <td>
                            <% if (h.sisa_stok > 0) { %>
                              <span class="badge text-bg-success"><%= h.sisa_stok %></span>
                            <% } else { %>
                              <span class="badge text-bg-danger">Habis</span>
                            <% } %>
                          </td>
                          <td class="table-actions">
                            <button class="btn btn-sm btn-outline-primary btn-edit-hadiah"
                                    data-bs-toggle="modal" data-bs-target="#modalHadiah"
                                    data-id="<%= h.id %>" data-nama="<%= h.nama_hadiah %>" data-kategori="<%= h.kategori || '' %>"
                                    data-kuota="<%= h.total_kuota %>" data-stok="<%= h.sisa_stok %>">Edit</button>
                            <form method="POST" action="/hadiah/<%= h.id %>/delete" onsubmit="return confirm('Hapus hadiah ini?');">
                              <button class="btn btn-sm btn-outline-danger">Hapus</button>
                            </form>
                          </td>
                        </tr>
                      <% }); %>
                    <% } %>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- ================= TAB PEMENANG ================= -->
      <div class="tab-pane fade" id="tabPemenang" role="tabpanel">
        <div class="card shadow-sm">
          <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="fw-semibold">Log Pemenang</span>
            <div class="d-flex gap-2">
              <button class="btn btn-sm btn-outline-success" id="btnEksporCsv">⬇ Ekspor CSV</button>
              <form method="POST" action="/reset-undian" onsubmit="return confirm('Reset undian? Semua pemenang & stok hadiah akan dikembalikan.');">
                <button class="btn btn-sm btn-outline-danger">Reset Undian</button>
              </form>
            </div>
          </div>
          <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
              <thead class="table-light">
                <tr><th>Kode</th><th>Nama Pemenang</th><th>Hadiah</th><th>Waktu</th></tr>
              </thead>
              <tbody id="tbodyPemenang">
                <% if (pemenang.length === 0) { %>
                  <tr><td colspan="4" class="text-center text-muted">Belum ada pemenang.</td></tr>
                <% } else { %>
                  <% pemenang.forEach(function(p) { %>
                    <tr>
                      <td><span class="badge text-bg-warning fs-6"><%= p.kode || '-' %></span></td>
                      <td class="nama-pemenang">
                        <% if (p.nama_pemenang) { %>
                          <span class="badge text-bg-success"><%= p.nama_pemenang %></span>
                          <button class="btn btn-sm btn-link btn-ubah-nama" data-id="<%= p.id %>" data-nama="<%= p.nama_pemenang %>">Ubah</button>
                        <% } else { %>
                          <span class="text-muted small">—</span>
                        <% } %>
                      </td>
                      <td><%= p.nama_hadiah %></td>
                      <td class="text-muted"><%= p.waktu_menang.toLocaleString('id-ID') %></td>
                    </tr>
                  <% }); %>
                <% } %>
              </tbody>
            </table>
          </div>
          <div class="card-footer bg-white text-muted small">
            Klik <b>Simpan</b> pada baris pemenang untuk mengarsip nama. Ketik nama, pilih dari daftar buku tamu yang hadir.
          </div>
          <div id="pesanNama" class="px-3 pb-2 small"></div>
          <datalist id="datalistKaryawanHadir"></datalist>
        </div>
      </div>

      <!-- ================= TAB KUPON ================= -->
      <div class="tab-pane fade" id="tabKupon" role="tabpanel">
        <div class="row g-4">
          <div class="col-lg-4">
            <div class="card shadow-sm">
              <div class="card-header bg-white fw-semibold">Generate Kupon Fisik</div>
              <div class="card-body">
                <form method="POST" action="/kupon/generate" id="formGenerate">
                  <input type="hidden" name="overwrite" id="inpOverwrite" value="0">
                  <div class="row g-3 mb-3">
                    <div class="col-6">
                      <label class="form-label">Dari Kode</label>
                      <input type="number" name="dari" class="form-control" value="1" min="0" max="999" required>
                    </div>
                    <div class="col-6">
                      <label class="form-label">Sampai Kode</label>
                      <input type="number" name="sampai" class="form-control" value="100" min="1" max="999" required>
                    </div>
                  </div>
                  <button type="submit" class="btn btn-primary w-100">Generate Kupon (Range)</button>
                </form>
                <div class="small text-muted mt-3">
                  Alur undian: generate range kode di sini &rarr; cetak &amp; gunting &rarr; masukkan ke bowl &rarr;
                  tamu mengambil kupon manual saat check-in (sistem tidak mencatat kode milik siapa) &rarr;
                  setelah semua check-in, tandai kupon yang sisa/tidak terambil sebagai <strong>JANGAN DIUNDI</strong> &rarr;
                  semua kode lain di range ikut undian. Mesin undian hanya menampilkan kode.
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-8">
            <div class="card shadow-sm">
              <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                <span class="fw-semibold">Daftar Kupon</span>
                <div class="d-flex align-items-center gap-2 flex-wrap">
                  <form method="POST" action="/kupon/lepas-tak-terpakai" onsubmit="return confirm('Tandai SEMUA kupon sisa (belum diundi) sebagai JANGAN DIUNDI?');">
                    <button class="btn btn-sm btn-outline-warning">Tandai Semua Sisa (Jangan Diundi)</button>
                  </form>
                  <a href="/kupon" target="_blank" class="btn btn-sm btn-outline-primary">Cetak</a>
                  <form method="POST" action="/kupon/clear" class="d-inline" onsubmit="return confirm('Hapus semua kupon yang belum diundi?');">
                    <button class="btn btn-sm btn-outline-danger">Hapus Belum Diundi</button>
                  </form>
                </div>
              </div>
              <div class="table-responsive" style="max-height: 480px; overflow-y: auto;">
                <table class="table table-sm table-hover align-middle mb-0">
                  <thead class="table-light">
                    <tr><th>Kode</th><th>Status</th><th></th></tr>
                  </thead>
                  <tbody id="tbodyKupon">
                    <% if (kupon.length === 0) { %>
                      <tr><td colspan="3" class="text-center text-muted">Belum ada kupon. Generate dulu di samping.</td></tr>
                    <% } else { %>
                      <% kupon.forEach(function(kp) { %>
                        <tr>
                          <td><span class="badge <%= kp.dikeluarkan ? 'text-bg-secondary' : 'text-bg-warning' %> fs-6"><%= kp.kode %></span></td>
                          <td>
                            <% if (kp.terpakai) { %>
                              <span class="text-success">Sudah Diundi</span>
                            <% } else if (kp.dikeluarkan) { %>
                              <span class="text-muted">Jangan Diundi (sisa)</span>
                            <% } else { %>
                              <span class="text-muted">Ikut Undian</span>
                            <% } %>
                          </td>
                          <td>
                            <% if (!kp.terpakai) { %>
                              <form method="POST" action="/kupon/<%= kp.kode %>/toggle-keluarkan" class="d-inline"
                                    onsubmit="return confirm('<%= kp.dikeluarkan ? 'Batalkan tanda: kembali ikut undian?' : 'Tandai JANGAN DIUNDI (kupon sisa)?' %>');">
                                <button class="btn btn-sm <%= kp.dikeluarkan ? 'btn-outline-success' : 'btn-outline-danger' %>">
                                  <%= kp.dikeluarkan ? 'Kembalikan' : 'Jangan Diundi' %>
                                </button>
                              </form>
                            <% } %>
                          </td>
                        </tr>
                      <% }); %>
                    <% } %>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      </div>

      <!-- ================= MODAL WARNING OVERLAP KUPON ================= -->
      <div class="modal fade" id="modalOverlapKupon" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
          <div class="modal-content">
            <div class="modal-header">
              <h6 class="modal-title">⚠️ Kode Sudah Ada di Daftar Kupon</h6>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Tutup"></button>
            </div>
            <div class="modal-body">
              <p class="mb-2 fw-semibold" id="overlapRingkasan"></p>
              <div id="overlapDaftar" class="small text-muted mb-3"></div>
              <p class="small text-danger mb-0">
                <b>Timpa</b> = kode lama di-reset jadi kupon baru (status diundi/keluar dihapus, pemenang yang
                memakai kode tersebut ikut dihapus dari log).
                <b>Batal</b> = tidak jadi generate.
              </p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Batal</button>
              <button type="button" class="btn btn-danger" id="btnTimpaKupon">Timpa Kode Lama</button>
            </div>
          </div>
        </div>
      </div>

      <!-- ================= MODAL IMPORT CSV ================= -->
  <div class="modal fade" id="modalImport" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form method="POST" action="/karyawan/import" enctype="multipart/form-data">
          <div class="modal-header">
            <h5 class="modal-title">Import Karyawan dari CSV</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">File CSV</label>
              <input type="file" name="file" accept=".csv" class="form-control" required>
            </div>
            <div class="small text-muted">
              Format kolom: <code>id,nama,departemen</code> (id & departemen opsional).
              Nama yang sudah ada di database otomatis dilewati.
              Download <a href="/template-karyawan">template CSV</a> jika perlu.
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-success">Import</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- ================= MODAL IMPORT HADIAH ================= -->
  <div class="modal fade" id="modalImportHadiah" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form method="POST" action="/hadiah/import" enctype="multipart/form-data">
          <div class="modal-header">
            <h5 class="modal-title">Import Hadiah dari CSV</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">File CSV</label>
              <input type="file" name="file" accept=".csv" class="form-control" required>
            </div>
            <div class="small text-muted">
              Format kolom: <code>id,nama_hadiah,kategori,total_kuota</code> (id, kategori & total_kuota opsional,
              default kuota = 1). Nama hadiah yang sudah ada dilewati otomatis.
              Download <a href="/template-hadiah">template CSV</a> jika perlu.
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-success">Import</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- ================= MODAL KARYAWAN ================= -->
  <div class="modal fade" id="modalKaryawan" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="formKaryawan" method="POST" action="/karyawan">
          <div class="modal-header">
            <h5 class="modal-title" id="judulModalKaryawan">Tambah Karyawan</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <input type="hidden" id="k_id" value="">
            <div class="mb-3">
              <label class="form-label">Nama</label>
              <input type="text" id="k_nama" name="nama" class="form-control" required>
            </div>
            <div class="mb-3">
              <label class="form-label">Departemen</label>
              <input type="text" id="k_departemen" name="departemen" class="form-control" placeholder="Contoh: Produksi">
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary" id="tombolSimpanKaryawan">Simpan</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- ================= MODAL HADIAH ================= -->
  <div class="modal fade" id="modalHadiah" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <form id="formHadiah" method="POST" action="/hadiah">
          <div class="modal-header">
            <h5 class="modal-title">Edit Hadiah</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
          <div class="modal-body">
            <div class="mb-3">
              <label class="form-label">Nama Hadiah</label>
              <input type="text" id="h_nama" name="nama_hadiah" class="form-control" required>
            </div>
            <div class="mb-3">
              <label class="form-label">Kategori</label>
              <input type="text" id="h_kategori" name="kategori" class="form-control" list="daftarKategori2">
              <datalist id="daftarKategori2">
                <option value="Utama"><option value="Hiburan"><option value="Lainnya">
              </datalist>
            </div>
            <div class="row g-3">
              <div class="col-6">
                <label class="form-label">Total Kuota</label>
                <input type="number" id="h_kuota" name="total_kuota" class="form-control" min="1" required>
              </div>
              <div class="col-6">
                <label class="form-label">Sisa Stok</label>
                <input type="number" id="h_stok" name="sisa_stok" class="form-control" min="0" required>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
            <button type="submit" class="btn btn-primary">Simpan Perubahan</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    function isiModalKaryawan(id, nama, departemen) {
      document.getElementById('formKaryawan').action = '/karyawan/' + id + '/update';
      document.getElementById('k_id').value = id;
      document.getElementById('k_nama').value = nama;
      document.getElementById('k_departemen').value = departemen;
      document.getElementById('judulModalKaryawan').textContent = 'Edit Karyawan #' + id;
      document.getElementById('tombolSimpanKaryawan').textContent = 'Simpan Perubahan';
    }
    function resetModalKaryawan() {
      document.getElementById('formKaryawan').action = '/karyawan';
      document.getElementById('k_id').value = '';
      document.getElementById('k_nama').value = '';
      document.getElementById('k_departemen').value = '';
      document.getElementById('judulModalKaryawan').textContent = 'Tambah Karyawan';
      document.getElementById('tombolSimpanKaryawan').textContent = 'Simpan';
    }
    function isiModalHadiah(id, nama, kategori, kuota, stok) {
      document.getElementById('formHadiah').action = '/hadiah/' + id + '/update';
      document.getElementById('h_nama').value = nama;
      document.getElementById('h_kategori').value = kategori;
      document.getElementById('h_kuota').value = kuota;
      document.getElementById('h_stok').value = stok;
    }

    const alertEl = document.querySelector('.alert-dismissible');
    if (alertEl) {
      setTimeout(() => { alertEl.classList.remove('show'); alertEl.classList.add('fade'); }, 5000);
    }
    document.querySelectorAll('[data-bs-toggle="tab"]').forEach(function (btn) {
      btn.addEventListener('shown.bs.tab', function () {
        if (alertEl) { alertEl.classList.remove('show'); alertEl.classList.add('fade'); }
        // Ingat tab aktif agar tidak kembali ke Karyawan setelah POST/redirect
        try { localStorage.setItem('adminTabAktif', btn.getAttribute('data-bs-target')); } catch (e) {}
      });
    });
    // Pulihkan tab terakhir yang dibuka (Hadiah/Pemenang/Kupon) setelah redirect
    try {
      const tabTerakhir = localStorage.getItem('adminTabAktif');
      if (tabTerakhir) {
        const btn = document.querySelector('[data-bs-toggle="tab"][data-bs-target="' + tabTerakhir + '"]');
        if (btn) new bootstrap.Tab(btn).show();
      }
    } catch (e) {}

    // ===== Event delegation tombol Edit (aman utk baris hasil re-render) =====
    document.addEventListener('click', function (e) {
      const kb = e.target.closest('.btn-edit-karyawan');
      if (kb) {
        isiModalKaryawan(kb.dataset.id, kb.dataset.nama, kb.dataset.departemen || '');
        return;
      }
      const hb = e.target.closest('.btn-edit-hadiah');
      if (hb) {
        isiModalHadiah(hb.dataset.id, hb.dataset.nama, hb.dataset.kategori || '', hb.dataset.kuota, hb.dataset.stok);
        return;
      }
      const btnSimpanNama = e.target.closest('.btn-simpan-nama');
      if (btnSimpanNama) {
        const tr = btnSimpanNama.closest('tr');
        const input = tr ? tr.querySelector('.input-cari-nama') : null;
        simpanNamaPemenang(btnSimpanNama.dataset.id, input ? input.value.trim() : '');
        return;
      }
      const btnUbahNama = e.target.closest('.btn-ubah-nama');
      if (btnUbahNama) { ubahModePemenang(btnUbahNama); return; }
      const btnHapusNama = e.target.closest('.btn-hapus-nama');
      if (btnHapusNama) { hapusNamaPemenang(btnHapusNama.dataset.id); return; }
      const btnBatalUbah = e.target.closest('.btn-batal-ubah');
      if (btnBatalUbah) {
        editingPemenang = false;
        if (dataAdmin) renderPemenang(dataAdmin.pemenang);
      }
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Enter' && e.target.classList && e.target.classList.contains('input-cari-nama')) {
        e.preventDefault();
        const tr = e.target.closest('tr');
        const btn = tr ? tr.querySelector('.btn-simpan-nama') : null;
        if (btn) btn.click();
      }
    });

    // ===== Generate kupon: cek overlap dgn daftar yang sudah ada =====
    const formGenerate = document.getElementById('formGenerate');
    if (formGenerate) {
      const inpOverwrite = document.getElementById('inpOverwrite');
      const modalEl = document.getElementById('modalOverlapKupon');

      function daftarKuponSekarang() {
        if (dataAdmin && dataAdmin.kupon) return dataAdmin.kupon.map(k => k.kode);
        return [];
      }

      formGenerate.addEventListener('submit', async function (e) {
        // Sudah dikonfirmasi "Timpa" -> submit langsung
        if (inpOverwrite.value === '1') return;

        const dari = parseInt(formGenerate.elements.dari.value, 10);
        const sampai = parseInt(formGenerate.elements.sampai.value, 10);
        if (!Number.isInteger(dari) || !Number.isInteger(sampai) || sampai < dari) return;

        // Ambil daftar kupon terbaru; fallback ke hasil polling jika gagal
        let kodeAda = daftarKuponSekarang();
        try {
          const res = await fetch('/api/admin-data');
          if (res.ok) {
            const d = await res.json();
            kodeAda = (d.kupon || []).map(k => k.kode);
          }
        } catch (err) { /* pakai data polling */ }

        const overlap = [];
        for (let i = dari; i <= sampai; i++) {
          const kode = String(i).padStart(3, '0');
          if (kodeAda.indexOf(kode) !== -1) overlap.push(kode);
        }

        if (overlap.length === 0) return;

        e.preventDefault();
        document.getElementById('overlapRingkasan').textContent =
          'Range ' + String(dari).padStart(3, '0') + '–' + String(sampai).padStart(3, '0') +
          ' berisi ' + overlap.length + ' kode yang SUDAH ADA di daftar:';
        const tampil = overlap.slice(0, 20).join(', ') +
          (overlap.length > 20 ? ' ... (+' + (overlap.length - 20) + ' kode lain)' : '');
        document.getElementById('overlapDaftar').textContent = tampil;
        bootstrap.Modal.getOrCreateInstance(modalEl).show();
      });

      document.getElementById('btnTimpaKupon').addEventListener('click', function () {
        const modal = bootstrap.Modal.getInstance(modalEl);
        if (modal) modal.hide();
        inpOverwrite.value = '1';
        formGenerate.submit();
      });
    }

    // ===== Auto-refresh data dari halaman lain (tanpa reload penuh) =====
    function esc(s) {
      return String(s == null ? '' : s)
        .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
    }

    function renderStat(stat, sh) {
      document.getElementById('statTotal').textContent = stat.total;
      document.getElementById('statHadir').textContent = stat.hadir;
      document.getElementById('statMenang').textContent = stat.menang;
      document.getElementById('statTotalHadiah').textContent = sh.total_kuota;
      document.getElementById('statSisaHadiah').textContent = sh.sisa_hadiah;
    }

    function renderKaryawan(list) {
      const tb = document.getElementById('tbodyKaryawan');
      if (!list || list.length === 0) {
        tb.innerHTML = '<tr><td colspan="5" class="text-center text-muted">Belum ada karyawan.</td></tr>';
        return;
      }
      tb.innerHTML = list.map(k => `
        <tr>
          <td>${k.id}</td>
          <td>${esc(k.nama)}</td>
          <td>${esc(k.departemen || '-')}</td>
          <td>${k.status_hadir ? '<span class="badge text-bg-success">Hadir</span>' : '<span class="badge text-bg-secondary">Belum</span>'}</td>
          <td class="table-actions">
            <form method="POST" action="/karyawan/${k.id}/toggle-hadir">
              <button class="btn btn-sm ${k.status_hadir ? 'btn-outline-secondary' : 'btn-outline-success'}">${k.status_hadir ? 'Batalkan Hadir' : 'Tandai Hadir'}</button>
            </form>
            <button class="btn btn-sm btn-outline-primary btn-edit-karyawan" data-bs-toggle="modal" data-bs-target="#modalKaryawan"
                    data-id="${k.id}" data-nama="${esc(k.nama)}" data-departemen="${esc(k.departemen || '')}">Edit</button>
            <form method="POST" action="/karyawan/${k.id}/delete" onsubmit="return confirm('Hapus karyawan ini?');">
              <button class="btn btn-sm btn-outline-danger">Hapus</button>
            </form>
          </td>
        </tr>`).join('');
    }

    function renderHadiah(list) {
      const tb = document.getElementById('tbodyHadiah');
      if (!list || list.length === 0) {
        tb.innerHTML = '<tr><td colspan="6" class="text-center text-muted">Belum ada hadiah.</td></tr>';
        return;
      }
      tb.innerHTML = list.map(h => `
        <tr>
          <td>${h.id}</td>
          <td>${esc(h.nama_hadiah)}</td>
          <td>${esc(h.kategori || '-')}</td>
          <td>${h.total_kuota}</td>
          <td>${h.sisa_stok > 0 ? '<span class="badge text-bg-success">' + h.sisa_stok + '</span>' : '<span class="badge text-bg-danger">Habis</span>'}</td>
          <td class="table-actions">
            <button class="btn btn-sm btn-outline-primary btn-edit-hadiah" data-bs-toggle="modal" data-bs-target="#modalHadiah"
                    data-id="${h.id}" data-nama="${esc(h.nama_hadiah)}" data-kategori="${esc(h.kategori || '')}"
                    data-kuota="${h.total_kuota}" data-stok="${h.sisa_stok}">Edit</button>
            <form method="POST" action="/hadiah/${h.id}/delete" onsubmit="return confirm('Hapus hadiah ini?');">
              <button class="btn btn-sm btn-outline-danger">Hapus</button>
            </form>
          </td>
        </tr>`).join('');
    }

    let dataAdmin = null;
    let daftarKaryawanHadir = [];
    let editingPemenang = false;

    function statusPesan(teks, ok) {
      const el = document.getElementById('pesanNama');
      if (!el) return;
      el.textContent = teks;
      el.className = 'px-3 pb-2 small ' + (ok ? 'text-success' : 'text-danger');
      clearTimeout(el._t);
      el._t = setTimeout(() => { el.textContent = ''; }, 4000);
    }

    function isiDatalistKaryawan(list) {
      daftarKaryawanHadir = list.filter(k => k.status_hadir);
      document.getElementById('datalistKaryawanHadir').innerHTML = daftarKaryawanHadir.map(k =>
        '<option value="' + esc(k.nama) + '">' + esc(k.departemen || 'Hadir') + '</option>').join('');
    }

    function cariKaryawanId(nama) {
      const n = nama.trim().toLowerCase();
      const k = daftarKaryawanHadir.find(x => x.nama.toLowerCase() === n);
      return k ? k.id : null;
    }

    async function simpanNamaPemenang(id, nama) {
      if (!nama) {
        statusPesan('Ketik nama pemenang terlebih dahulu.', false);
        return;
      }
      const karyawanId = cariKaryawanId(nama);
      if (!karyawanId) {
        statusPesan('Nama tidak ditemukan di buku tamu yang hadir.', false);
        return;
      }
      try {
        const res = await fetch('/api/pemenang/' + id + '/nama', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ karyawan_id: karyawanId }),
        });
        const d = await res.json();
        if (!res.ok || !d.ok) throw new Error(d.message || 'Gagal menyimpan nama.');
        editingPemenang = false;
        if (document.activeElement && document.activeElement.blur) document.activeElement.blur();
        statusPesan('Nama pemenang tersimpan: ' + nama, true);
        muatAdmin();
      } catch (err) {
        statusPesan(err.message || 'Gagal menyimpan nama.', false);
      }
    }

    async function hapusNamaPemenang(id) {
      try {
        const res = await fetch('/api/pemenang/' + id + '/nama', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ karyawan_id: null }),
        });
        const d = await res.json();
        if (!res.ok || !d.ok) throw new Error(d.message || 'Gagal menghapus nama.');
        statusPesan('Nama pemenang dihapus.', true);
        muatAdmin();
      } catch (err) {
        statusPesan(err.message || 'Gagal menghapus nama.', false);
      }
    }

    function ubahModePemenang(btn) {
      const cell = btn.closest('.nama-pemenang');
      const id = btn.dataset.id;
      const nama = btn.dataset.nama || '';
      editingPemenang = true;
      cell.innerHTML = `
        <div class="input-group input-group-sm" style="max-width:320px;">
          <input type="text" class="form-control form-control-sm input-cari-nama" list="datalistKaryawanHadir" value="${esc(nama)}">
          <button class="btn btn-sm btn-outline-success btn-simpan-nama" data-id="${id}">Simpan</button>
          <button class="btn btn-sm btn-outline-secondary btn-batal-ubah" type="button">Batal</button>
        </div>`;
      const inp = cell.querySelector('.input-cari-nama');
      inp.focus();
      inp.select();
    }

    function renderPemenang(list) {
      const tb = document.getElementById('tbodyPemenang');
      if (editingPemenang) return;
      if (!list || list.length === 0) {
        tb.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Belum ada pemenang.</td></tr>';
        return;
      }
      tb.innerHTML = list.map(p => `
        <tr>
          <td><span class="badge text-bg-warning fs-6">${esc(p.kode || '-')}</span></td>
          <td class="nama-pemenang">
            ${p.karyawan_id && p.nama_pemenang ? `
              <span class="badge text-bg-success">${esc(p.nama_pemenang)}</span>
              <button class="btn btn-sm btn-link p-0 ms-1 btn-ubah-nama" data-id="${p.id}" data-nama="${esc(p.nama_pemenang)}">Ubah</button>
              <button class="btn btn-sm btn-link p-0 ms-1 text-danger btn-hapus-nama" data-id="${p.id}" data-nama="${esc(p.nama_pemenang)}">Hapus</button>`
              : `
              <div class="input-group input-group-sm" style="max-width:320px;">
                <input type="text" class="form-control form-control-sm input-cari-nama" list="datalistKaryawanHadir"
                       placeholder="Ketik nama (buku tamu hadir)...">
                <button class="btn btn-sm btn-outline-success btn-simpan-nama" data-id="${p.id}">Simpan</button>
              </div>`}
          </td>
          <td>${esc(p.nama_hadiah)}</td>
          <td class="text-muted">${p.waktu_menang ? new Date(p.waktu_menang).toLocaleString('id-ID') : '-'}</td>
        </tr>`).join('');
    }

    function renderKupon(list) {
      const tb = document.getElementById('tbodyKupon');
      if (!list || list.length === 0) {
        tb.innerHTML = '<tr><td colspan="3" class="text-center text-muted">Belum ada kupon. Generate dulu di samping.</td></tr>';
        return;
      }
      tb.innerHTML = list.map(kp => `
        <tr>
          <td><span class="badge ${kp.dikeluarkan ? 'text-bg-secondary' : 'text-bg-warning'} fs-6">${esc(kp.kode)}</span></td>
          <td>${kp.terpakai ? '<span class="text-success">Sudah Diundi</span>' : (kp.dikeluarkan ? '<span class="text-muted">Jangan Diundi (sisa)</span>' : '<span class="text-muted">Ikut Undian</span>')}</td>
          <td>${kp.terpakai ? '' : `
            <form method="POST" action="/kupon/${esc(kp.kode)}/toggle-keluarkan" class="d-inline"
                  onsubmit="return confirm('${kp.dikeluarkan ? 'Batalkan tanda: kembali ikut undian?' : 'Tandai JANGAN DIUNDI (kupon sisa)?'}');">
              <button class="btn btn-sm ${kp.dikeluarkan ? 'btn-outline-success' : 'btn-outline-danger'}">${kp.dikeluarkan ? 'Kembalikan' : 'Jangan Diundi'}</button>
            </form>`}</td>
        </tr>`).join('');
    }

    async function muatAdmin() {
      // Jeda polling sementara saat admin sedang mengetik nama pemenang
      // (agar refresh tidak menghapus ketikan); lanjut lagi saat Simpan/Batal diklik.
      if (document.activeElement && document.activeElement.classList &&
          document.activeElement.classList.contains('input-cari-nama')) return;
      try {
        const res = await fetch('/api/admin-data');
        if (!res.ok) return;
        const d = await res.json();
        dataAdmin = d;
        renderStat(d.stat, d.statHadiah);
        renderKaryawan(d.karyawan);
        renderHadiah(d.hadiah);
        isiDatalistKaryawan(d.karyawan);
        renderPemenang(d.pemenang);
        renderKupon(d.kupon);
      } catch (e) { /* biarkan; coba lagi di interval berikutnya */ }
    }
    setInterval(muatAdmin, 8000);
    muatAdmin();

    // ===== Ekspor CSV pemenang (client-side, aman utk Excel) =====
    function csvEscape(v) {
      const s = String(v == null ? '' : v);
      return '"' + s.replace(/"/g, '""') + '"';
    }

    async function eksporCsv() {
      try {
        const res = await fetch('/api/admin-data');
        if (!res.ok) throw new Error('Gagal mengambil data.');
        const d = await res.json();
        const baris = d.pemenang.map(p => [
          p.kode || '',
          p.nama_pemenang || '',
          p.nama_hadiah,
          p.waktu_menang ? new Date(p.waktu_menang).toLocaleString('id-ID') : '',
        ].map(csvEscape).join(','));
        const csv = '\ufeff' + 'Kode,Nama Pemenang,Hadiah,Waktu\n' + baris.join('\n');
        const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
        const a = document.createElement('a');
        a.href = URL.createObjectURL(blob);
        a.download = 'pemenang-' + new Date().toISOString().slice(0, 19).replace(/[:T]/g, '-') + '.csv';
        document.body.appendChild(a);
        a.click();
        a.remove();
        URL.revokeObjectURL(a.href);
      } catch (err) {
        statusPesan(err.message || 'Gagal mengekspor CSV.', false);
      }
    }
    document.getElementById('btnEksporCsv').addEventListener('click', eksporCsv);
  </script>
</body>
</html>
