<?php defined('BASEPATH') OR exit('No direct script access allowed'); ?>

<style>
:root {
  --teal-900: #0d3d38; --teal-800: #0b5a52; --teal-700: #0b7a6e;
  --teal-600: #0d9488; --teal-500: #14b8a6; --teal-400: #2dd4bf;
  --teal-100: #ccfbf1; --teal-50:  #f0fdfa;
  --green-500: #10b981; --green-600: #059669;
  --amber-400: #fbbf24; --amber-500: #f59e0b; --amber-600: #d97706;
  --amber-50:  #fffbeb; --amber-100: #fef3c7;
  --red-500: #ef4444; --red-600: #dc2626;
  --blue-500: #3b82f6; --blue-600: #2563eb;
  --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0;
  --slate-400: #94a3b8; --slate-500: #64748b; --slate-700: #334155; --slate-900: #0f172a;
  --card-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
  --radius: 14px; --radius-sm: 9px; --radius-xs: 6px;
  --shadow: 0 4px 24px rgba(13,148,136,0.10), 0 1px 4px rgba(0,0,0,0.05);
}

.ap-wrapper { width: 100%; }

/* ─── PAGE HEADER ─── */
.ap-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 28px; flex-wrap: wrap; gap: 14px;
}
.ap-header-left h4 {
  font-size: 1.25rem; font-weight: 800; color: var(--teal-800);
  margin: 0 0 5px; display: flex; align-items: center; gap: 11px; letter-spacing: -.3px;
}
.ap-header-left h4 .hi {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--teal-600), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(13,148,136,0.32); flex-shrink: 0;
}
.ap-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.77rem; color: var(--slate-400); padding-left: 51px;
}
.ap-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.ap-breadcrumb a:hover { text-decoration: underline; }
.ap-breadcrumb .sep { color: var(--slate-200); }

/* ─── FLASH ─── */
.flash-alert {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--radius-sm); padding: 13px 16px;
  margin-bottom: 20px; font-size: 0.85rem; position: relative;
}
.flash-alert.error { background: #fef2f2; border-left: 4px solid var(--red-500); color: #7f1d1d; }
.flash-alert .fa-close {
  margin-left: auto; cursor: pointer; font-size: 1rem; opacity: .55;
  background: none; border: none; color: inherit; padding: 0; line-height: 1;
}
.flash-alert .fa-close:hover { opacity: 1; }

/* ─── INFO CARD ─── */
.ap-info-card {
  background: linear-gradient(135deg, #0d5c55, #0fb8a9);
  border-radius: var(--radius); padding: 20px 24px;
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 24px; box-shadow: 0 4px 24px rgba(13,148,136,0.28);
  position: relative; overflow: hidden;
}
.ap-info-card::before {
  content: ''; position: absolute; right: -20px; top: -20px;
  width: 120px; height: 120px; border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.ap-info-card::after {
  content: ''; position: absolute; right: 40px; bottom: -30px;
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
}
.ap-info-icon {
  width: 48px; height: 48px; border-radius: 13px;
  background: rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: #fff; flex-shrink: 0; position: relative; z-index: 1;
}
.ap-info-text { position: relative; z-index: 1; }
.ap-info-text .ai-label {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: rgba(255,255,255,0.7); margin-bottom: 3px;
}
.ap-info-text .ai-name { font-size: 1.05rem; font-weight: 800; color: #fff; }
.ap-info-badge {
  margin-left: auto; position: relative; z-index: 1;
  background: rgba(255,255,255,0.18); border-radius: 50px;
  padding: 6px 16px; font-size: 0.78rem; font-weight: 700; color: #fff; white-space: nowrap;
}

/* ─── MAIN CARD ─── */
.ap-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: visible;
  border: 1.5px solid var(--slate-100); margin-bottom: 16px;
}
.ap-card-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px; border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50); flex-wrap: wrap; gap: 10px;
  border-radius: var(--radius) var(--radius) 0 0;
}
.ap-card-header h5 {
  font-size: 0.92rem; font-weight: 700; color: var(--teal-800);
  margin: 0; display: flex; align-items: center; gap: 8px;
}
.ap-card-header h5 i { color: var(--teal-500); }
.ap-card-body { padding: 22px 24px; }

/* ─── TABS ─── */
.ap-tabs {
  display: flex; gap: 4px; background: var(--slate-100);
  border-radius: 10px; padding: 4px; margin-bottom: 24px;
}
.ap-tab-btn {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 14px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 0.82rem; font-weight: 600; color: var(--slate-500);
  background: transparent; transition: all .2s; white-space: nowrap;
}
.ap-tab-btn.active {
  background: #fff; color: var(--teal-700); font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ap-tab-btn:hover:not(.active) { color: var(--teal-600); background: rgba(255,255,255,0.5); }
.ap-tab-btn i { font-size: 0.88rem; }

/* ─── TAB PANES ─── */
.ap-tab-pane { display: none; }
.ap-tab-pane.active { display: block; }

/* ─── STAT ROW ─── */
.ap-stat-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--teal-50); border: 1.5px solid var(--teal-100);
  border-radius: var(--radius-sm); padding: 11px 16px; margin-bottom: 18px;
  font-size: 0.84rem; color: var(--teal-800);
}
.ap-stat-row strong { font-weight: 800; color: var(--teal-600); }
.ap-stat-row.warning { background: var(--amber-50); border-color: var(--amber-100); color: #92400e; }
.ap-stat-row.warning strong { color: var(--amber-600); }
.ap-stat-row.success { background: #f0fdf4; border-color: #bbf7d0; color: #14532d; }
.ap-stat-row.success strong { color: var(--green-600); }

/* ─── TOOLBAR ─── */
.ap-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; flex-wrap: wrap; gap: 8px;
}
.ap-toolbar-title { font-size: 0.85rem; font-weight: 700; color: var(--slate-700); }
.ap-toolbar-actions { display: flex; gap: 6px; }

.btn-sm-outline {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 14px; border-radius: 7px; font-size: 0.78rem; font-weight: 600;
  cursor: pointer; transition: all .15s; text-decoration: none; border: 1.5px solid;
}
.btn-sm-outline.teal { border-color: #99f6e4; color: var(--teal-700); background: var(--teal-50); }
.btn-sm-outline.teal:hover { background: var(--teal-100); border-color: var(--teal-400); }
.btn-sm-outline.slate { border-color: var(--slate-200); color: var(--slate-500); background: #fff; }
.btn-sm-outline.slate:hover { background: var(--slate-100); }

/* ─── WARGA GRID ─── */
.warga-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 18px;
  position: relative; z-index: 1;
}
.warga-item {
  border: 1.5px solid var(--slate-200); border-radius: var(--radius-sm);
  padding: 12px 14px; cursor: pointer; transition: all .18s;
  display: flex; align-items: center; gap: 11px; background: #fff;
  position: relative; z-index: 2; user-select: none;
}
.warga-item > * { pointer-events: none; }
.warga-item:hover { border-color: var(--teal-400); background: var(--teal-50); }
.warga-item.selected {
  border-color: var(--teal-500); background: var(--teal-50);
  box-shadow: 0 0 0 3px rgba(13,148,136,0.10);
}
.warga-item.selected .wi-avatar { background: var(--teal-600); color: #fff; border-color: var(--teal-500); }
.warga-item.selected .wi-check  { background: var(--teal-600); border-color: var(--teal-600); }

.wi-check {
  width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--slate-300);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .15s; color: #fff; font-size: 0.75rem;
}
.wi-avatar {
  width: 34px; height: 34px; border-radius: 9px;
  background: var(--slate-100); color: var(--slate-500);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; flex-shrink: 0;
  border: 1.5px solid var(--slate-200); transition: all .15s;
}
.wi-info { flex: 1; min-width: 0; }
.wi-name {
  font-weight: 700; font-size: 0.84rem; color: var(--slate-900);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wi-nik  { font-size: 0.71rem; color: var(--slate-400); font-family: monospace; }
.wi-hp   { font-size: 0.71rem; color: var(--green-600); margin-top: 1px; }
.warga-item input[type=checkbox] { display: none; }

/* ─── GENERATE LIST ─── */
.gen-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin: 14px 0; }
.gen-item { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--slate-700); padding: 4px 0; }
.gen-item i { color: var(--green-600); font-size: 0.8rem; flex-shrink: 0; }
.gen-item .gi-name { font-weight: 600; }
.gen-item .gi-nik  { color: var(--slate-400); font-size: 0.71rem; font-family: monospace; }

/* ─── INFO LIST ─── */
.ap-info-list { list-style: none; padding: 0; margin: 0; }
.ap-info-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.83rem; color: var(--slate-600); padding: 6px 0;
  border-bottom: 1px solid var(--slate-100);
}
.ap-info-list li:last-child { border-bottom: none; }
.ap-info-list li i { color: var(--teal-500); margin-top: 2px; flex-shrink: 0; }

/* ─── WARN BOX ─── */
.ap-warn-box {
  background: var(--amber-50); border: 1.5px solid var(--amber-100);
  border-radius: var(--radius-sm); padding: 14px 16px; margin: 16px 0;
}
.ap-warn-box h6 { font-size: 0.84rem; font-weight: 700; color: var(--amber-600); margin: 0 0 8px; }
.ap-warn-box ul { margin: 0; padding-left: 18px; font-size: 0.81rem; color: #78350f; }
.ap-warn-box ul li { margin-bottom: 3px; }

/* ─── FOOTER ─── */
.ap-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 20px; border-top: 1.5px solid var(--slate-100); margin-top: 6px;
  flex-wrap: wrap; gap: 10px;
}
.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: 50px; font-size: 0.83rem; font-weight: 600;
  border: 1.5px solid var(--slate-200); background: #fff; color: var(--slate-600);
  text-decoration: none; transition: all .18s;
}
.btn-back:hover { background: var(--slate-100); color: var(--slate-800); }
.btn-submit {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 24px; border-radius: 50px; font-size: 0.84rem; font-weight: 700;
  border: none; background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff; box-shadow: 0 4px 14px rgba(13,148,136,0.28);
  cursor: pointer; transition: all .2s;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(13,148,136,0.38); }
.btn-submit:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-submit-green {
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  box-shadow: 0 4px 14px rgba(16,185,129,0.28);
}
.btn-submit-green:hover { box-shadow: 0 6px 18px rgba(16,185,129,0.38); }

/* ─── SELECT2 ─── */
.select2-container--default .select2-selection--single {
  border: 1.5px solid var(--slate-200) !important;
  border-radius: var(--radius-sm) !important;
  height: 42px !important; display: flex; align-items: center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 42px !important; font-size: 0.87rem; color: var(--slate-700);
}
.select2-container--default.select2-container--focus .select2-selection--single {
  border-color: var(--teal-500) !important;
  box-shadow: 0 0 0 3px rgba(13,148,136,0.12) !important;
}
.ap-field-label { font-size: 0.82rem; font-weight: 700; color: var(--slate-700); margin-bottom: 6px; }
.ap-field-hint  { font-size: 0.75rem; color: var(--slate-400); margin-top: 5px; }

/* ─── EMPTY WARN ─── */
.ap-empty-warn { text-align: center; padding: 48px 24px; }
.ap-empty-warn .aew-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: var(--amber-50); color: var(--amber-500);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; margin: 0 auto 16px;
}
.ap-empty-warn h6 { font-weight: 700; color: var(--slate-700); margin-bottom: 6px; }
.ap-empty-warn p  { font-size: 0.84rem; color: var(--slate-400); margin: 0 0 16px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 767px) {
  .warga-grid  { grid-template-columns: 1fr; }
  .gen-list    { grid-template-columns: 1fr; }
  .ap-tabs     { flex-direction: column; }
  .ap-tab-btn  { justify-content: flex-start; }
  .ap-page-header { flex-direction: column; }
  .ap-info-card   { flex-wrap: wrap; }
  .ap-info-badge  { margin-left: 0; }
}

/* ─── ANIM ─── */
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.ap-info-card { animation: fadeUp .28s ease both; }
.ap-card      { animation: fadeUp .32s .05s ease both; }
</style>

<div class="ap-wrapper">

  <!-- Page Header -->
  <div class="ap-page-header">
    <div class="ap-header-left">
      <h4>
        <span class="hi"><i class="bi bi-person-plus-fill"></i></span>
        Tambah Peserta Arisan
      </h4>
      <div class="ap-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <a href="<?php echo base_url('arisan'); ?>">Arisan</a>
        <span class="sep">/</span>
        <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>">Peserta</a>
        <span class="sep">/</span>
        <span>Tambah</span>
      </div>
    </div>
    <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>" class="btn-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
  </div>

  <!-- Flash -->
  <?php if($this->session->flashdata('error')): ?>
  <div class="flash-alert error" id="flashError">
    <i class="bi bi-exclamation-triangle-fill"></i>
    <span><?php echo $this->session->flashdata('error'); ?></span>
    <button class="fa-close" onclick="this.parentElement.remove()">✕</button>
  </div>
  <?php endif; ?>
  <?php echo validation_errors('<div class="flash-alert error"><i class="bi bi-exclamation-triangle-fill"></i><span>', '</span></div>'); ?>

  <!-- Info Card -->
  <div class="ap-info-card">
    <div class="ap-info-icon"><i class="bi bi-gift-fill"></i></div>
    <div class="ap-info-text">
      <div class="ai-label">Arisan</div>
      <div class="ai-name"><?php echo htmlspecialchars($arisan->nama_arisan); ?></div>
    </div>
    <div class="ap-info-badge">
      <i class="bi bi-people me-1"></i><?php echo $total_warga_tersedia; ?> warga tersedia
    </div>
  </div>

  <?php if($total_warga_tersedia == 0): ?>

  <div class="ap-card">
    <div class="ap-card-body">
      <div class="ap-empty-warn">
        <div class="aew-icon"><i class="bi bi-exclamation-triangle"></i></div>
        <h6>Semua Warga Sudah Terdaftar</h6>
        <p>Tidak ada warga yang tersedia untuk didaftarkan pada arisan ini.</p>
        <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>" class="btn-back">
          <i class="bi bi-arrow-left me-1"></i>Kembali ke Daftar Peserta
        </a>
      </div>
    </div>
  </div>

  <?php else: ?>

  <div class="ap-card">
    <div class="ap-card-header">
      <h5><i class="bi bi-person-plus"></i> Mode Pendaftaran</h5>
    </div>
    <div class="ap-card-body">

      <!-- Tabs -->
      <div class="ap-tabs" id="apTabs">
        <button class="ap-tab-btn active" data-tab="pilihan">
          <i class="bi bi-check-square"></i> Pilih Beberapa
        </button>
        <button class="ap-tab-btn" data-tab="semua">
          <i class="bi bi-people-fill"></i> Generate Semua
        </button>
        <button class="ap-tab-btn" data-tab="single">
          <i class="bi bi-person-plus"></i> Satu-satu
        </button>
      </div>

      <!-- TAB 1: PILIHAN -->
      <div class="ap-tab-pane active" id="tab-pilihan">
        <form action="" method="post" id="formPilihan">
          <input type="hidden" name="mode" value="pilihan">

          <div class="ap-stat-row">
            <i class="bi bi-info-circle-fill" style="color:var(--teal-500);flex-shrink:0;"></i>
            <span><strong><?php echo $total_warga_tersedia; ?> warga</strong> tersedia untuk didaftarkan</span>
          </div>

          <div class="ap-toolbar">
            <div class="ap-toolbar-title">Pilih warga yang akan didaftarkan</div>
            <div class="ap-toolbar-actions">
              <button type="button" class="btn-sm-outline teal" id="checkAll">
                <i class="bi bi-check-all"></i> Pilih Semua
              </button>
              <button type="button" class="btn-sm-outline slate" id="uncheckAll">
                <i class="bi bi-x-square"></i> Batal Semua
              </button>
            </div>
          </div>

          <div class="warga-grid" id="wargaGrid">
            <?php foreach($warga as $w): ?>
            <div class="warga-item" data-id="<?php echo $w->id; ?>">
              <div class="wi-check">
                <i class="bi bi-check" style="display:none;"></i>
              </div>
              <div class="wi-avatar"><?php echo strtoupper(substr($w->nama_lengkap, 0, 1)); ?></div>
              <div class="wi-info">
                <div class="wi-name"><?php echo htmlspecialchars($w->nama_lengkap); ?></div>
                <div class="wi-nik"><?php echo $w->nik; ?></div>
                <?php if(!empty($w->no_hp)): ?>
                <div class="wi-hp"><i class="bi bi-whatsapp me-1"></i><?php echo $w->no_hp; ?></div>
                <?php endif; ?>
              </div>
              <input class="warga-checkbox" type="checkbox"
                     name="warga_ids[]" value="<?php echo $w->id; ?>">
            </div>
            <?php endforeach; ?>
          </div>

          <div class="ap-stat-row warning" id="alertPilihan" style="display:none;">
            <i class="bi bi-people-fill" style="flex-shrink:0;"></i>
            <span><strong id="jumlahTerpilih">0</strong> warga terpilih dan siap didaftarkan</span>
          </div>

          <div class="ap-footer">
            <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>" class="btn-back">
              <i class="bi bi-arrow-left"></i> Kembali
            </a>
            <button type="submit" class="btn-submit" id="btnSubmitPilihan" disabled>
              <i class="bi bi-person-plus"></i>
              Tambah <span id="countPilihan">0</span> Peserta
            </button>
          </div>
        </form>
      </div>

      <!-- TAB 2: GENERATE SEMUA -->
      <div class="ap-tab-pane" id="tab-semua">
        <form action="" method="post" id="formSemua">
          <input type="hidden" name="mode" value="semua">

          <div class="ap-stat-row success">
            <i class="bi bi-people-fill" style="flex-shrink:0;"></i>
            <span>Sistem akan mendaftarkan <strong>SEMUA <?php echo $total_warga_tersedia; ?> warga</strong> sekaligus secara otomatis</span>
          </div>

          <div class="ap-card" style="border:1.5px solid #bbf7d0;box-shadow:none;margin-bottom:16px;">
            <div class="ap-card-header" style="background:#f0fdf4;border-bottom-color:#bbf7d0;">
              <h5 style="color:var(--green-600);">
                <i class="bi bi-list-check" style="color:var(--green-500);"></i>
                Warga yang akan didaftarkan
              </h5>
            </div>
            <div class="ap-card-body" style="padding:16px 20px;">
              <div class="gen-list">
                <?php $count = 1; foreach($warga as $w): ?>
                <div class="gen-item">
                  <i class="bi bi-check-circle-fill"></i>
                  <div>
                    <div class="gi-name"><?php echo $count++.'. '.htmlspecialchars($w->nama_lengkap); ?></div>
                    <div class="gi-nik"><?php echo $w->nik; ?></div>
                  </div>
                </div>
                <?php endforeach; ?>
              </div>
            </div>
          </div>

          <div class="ap-warn-box">
            <h6><i class="bi bi-exclamation-triangle me-2"></i>Perhatian!</h6>
            <ul>
              <li>Nomor urut akan diberikan otomatis berurutan</li>
              <li>Proses ini tidak dapat dibatalkan</li>
              <li>Total peserta arisan akan menjadi: <strong><?php echo $this->Arisan_model->count_peserta_by_arisan($arisan->id) + $total_warga_tersedia; ?> orang</strong></li>
            </ul>
          </div>

          <div class="ap-footer">
            <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>" class="btn-back">
              <i class="bi bi-arrow-left"></i> Kembali
            </a>
            <button type="button" class="btn-submit btn-submit-green" id="btnGenerate">
              <i class="bi bi-people-fill"></i>
              Generate <?php echo $total_warga_tersedia; ?> Peserta
            </button>
          </div>
        </form>
      </div>

      <!-- TAB 3: SINGLE -->
      <div class="ap-tab-pane" id="tab-single">
        <form action="" method="post">
          <input type="hidden" name="mode" value="single">

          <div class="ap-stat-row">
            <i class="bi bi-info-circle-fill" style="color:var(--teal-500);flex-shrink:0;"></i>
            <span>Pilih satu warga untuk didaftarkan sebagai peserta arisan</span>
          </div>

          <div class="mb-4">
            <div class="ap-field-label">Pilih Warga <span style="color:var(--red-500);">*</span></div>
            <select name="warga_id" class="form-select select-warga" required
              style="border-radius:var(--radius-sm);border:1.5px solid var(--slate-200);font-size:.87rem;padding:9px 13px;width:100%;">
              <option value="">-- Pilih Warga --</option>
              <?php foreach($warga as $w): ?>
              <option value="<?php echo $w->id; ?>">
                <?php echo htmlspecialchars($w->nama_lengkap); ?> (<?php echo $w->nik; ?>)
              </option>
              <?php endforeach; ?>
            </select>
            <div class="ap-field-hint">Hanya warga yang belum terdaftar yang ditampilkan</div>
          </div>

          <div class="ap-card" style="border-color:var(--teal-100);box-shadow:none;">
            <div class="ap-card-header" style="background:var(--teal-50);border-bottom-color:var(--teal-100);">
              <h5><i class="bi bi-info-circle"></i> Informasi</h5>
            </div>
            <div class="ap-card-body" style="padding:14px 20px;">
              <ul class="ap-info-list">
                <li><i class="bi bi-hash"></i> Nomor urut akan diberikan otomatis</li>
                <li><i class="bi bi-person-check"></i> Setiap warga hanya bisa mendaftar sekali</li>
                <li><i class="bi bi-cash-coin"></i> Iuran per pertemuan: <strong>Rp <?php echo number_format($arisan->nominal_iuran, 0, ',', '.'); ?></strong></li>
              </ul>
            </div>
          </div>

          <div class="ap-footer">
            <a href="<?php echo base_url('arisan/peserta/'.$arisan->id); ?>" class="btn-back">
              <i class="bi bi-arrow-left"></i> Kembali
            </a>
            <button type="submit" class="btn-submit">
              <i class="bi bi-person-plus"></i> Tambah Peserta
            </button>
          </div>
        </form>
      </div>

    </div><!-- /ap-card-body -->
  </div><!-- /ap-card -->


  <?php endif; ?>
<!-- Modal Konfirmasi Pilihan -->
<div class="modal fade" id="modalKonfirmasiPilihan" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" style="background:linear-gradient(135deg,#0b7a6e,#0d9488);border:none;padding:18px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-person-plus-fill" style="color:#fff;font-size:1rem;"></i>
          </div>
          <h6 class="modal-title mb-0" style="color:#fff;font-weight:700;font-size:.95rem;">Konfirmasi Pendaftaran</h6>
        </div>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <p style="font-size:.85rem;color:#334155;margin-bottom:10px;">Daftarkan warga berikut sebagai peserta arisan?</p>
        <div style="background:#f0fdfa;border:1.5px solid #ccfbf1;border-radius:10px;padding:11px 16px;">
          <div style="font-size:.82rem;color:#0b5a52;">
            <i class="bi bi-people-fill me-2" style="color:#0d9488;"></i>
            <strong id="modalJumlahPilihan">0</strong> warga terpilih akan didaftarkan
          </div>
        </div>
        <p style="font-size:.75rem;color:#94a3b8;margin-top:10px;margin-bottom:0;">
          <i class="bi bi-info-circle me-1"></i>Nomor urut akan diberikan otomatis.
        </p>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 18px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.82rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <button type="button" id="btnKonfirmasiPilihan"
          style="border-radius:8px;border:none;font-size:.82rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;background:linear-gradient(135deg,#0b7a6e,#0d9488);box-shadow:0 4px 12px rgba(13,148,136,.28);cursor:pointer;">
          <i class="bi bi-person-plus me-1"></i>Ya, Daftarkan
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Modal Konfirmasi Generate Semua -->
<div class="modal fade" id="modalKonfirmasiSemua" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:380px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" style="background:linear-gradient(135deg,#047857,#10b981);border:none;padding:18px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div style="width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:10px;display:flex;align-items:center;justify-content:center;">
            <i class="bi bi-people-fill" style="color:#fff;font-size:1rem;"></i>
          </div>
          <h6 class="modal-title mb-0" style="color:#fff;font-weight:700;font-size:.95rem;">Generate Semua Peserta</h6>
        </div>
        <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <p style="font-size:.85rem;color:#334155;margin-bottom:10px;">Daftarkan semua warga sekaligus?</p>
        <div style="background:#f0fdf4;border:1.5px solid #bbf7d0;border-radius:10px;padding:11px 16px;">
          <div style="font-size:.82rem;color:#14532d;">
            <i class="bi bi-people-fill me-2" style="color:#059669;"></i>
            <strong><?php echo $total_warga_tersedia; ?> warga</strong> akan didaftarkan sekaligus
          </div>
        </div>
        <div style="background:#fffbeb;border:1.5px solid #fde68a;border-radius:10px;padding:11px 16px;margin-top:10px;">
          <div style="font-size:.78rem;color:#92400e;">
            <i class="bi bi-exclamation-triangle-fill me-1"></i>Proses ini tidak dapat dibatalkan
          </div>
        </div>
      </div>
      <div class="modal-footer" style="border:none;padding:0 20px 18px;gap:8px;">
        <button type="button" class="btn" data-bs-dismiss="modal"
          style="border-radius:8px;border:1.5px solid #e5e7eb;font-size:.82rem;font-weight:600;color:#64748b;padding:7px 18px;flex:1;">
          <i class="bi bi-x-lg me-1"></i>Batal
        </button>
        <button type="button" id="btnKonfirmasiSemua"
          style="border-radius:8px;border:none;font-size:.82rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;background:linear-gradient(135deg,#047857,#10b981);box-shadow:0 4px 12px rgba(16,185,129,.28);cursor:pointer;">
          <i class="bi bi-people-fill me-1"></i>Ya, Generate
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Toast Notifikasi -->
<div class="toast-container position-fixed bottom-0 end-0 p-3" style="z-index:9999;">
  <div id="toastPeserta" class="toast align-items-center border-0" role="alert" aria-atomic="true"
       style="border-radius:12px;min-width:260px;">
    <div class="d-flex">
      <div class="toast-body d-flex align-items-center gap-2" style="font-size:.83rem;font-weight:600;padding:12px 14px;">
        <i id="toastPesertaIcon" class="bi"></i>
        <span id="toastPesertaMsg"></span>
      </div>
      <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" style="filter:invert(1);"></button>
    </div>
  </div>
</div>

</div><!-- /ap-wrapper -->

<script>
document.addEventListener('DOMContentLoaded', function() {

  // ── Bootstrap Modal & Toast instances ──
  var modalPilihanEl = document.getElementById('modalKonfirmasiPilihan');
  var modalSemuaEl   = document.getElementById('modalKonfirmasiSemua');
  var toastEl        = document.getElementById('toastPeserta');
  var bsModalPilihan = modalPilihanEl ? new bootstrap.Modal(modalPilihanEl) : null;
  var bsModalSemua   = modalSemuaEl   ? new bootstrap.Modal(modalSemuaEl)   : null;
  var bsToast        = toastEl        ? new bootstrap.Toast(toastEl, { delay: 3000 }) : null;

  function showToast(msg, type) {
    if(!toastEl || !bsToast) return;
    var icon = document.getElementById('toastPesertaIcon');
    var msgEl = document.getElementById('toastPesertaMsg');
    toastEl.style.color = '#fff';
    if(type === 'success') {
      toastEl.style.background = '#0d9488';
      if(icon) icon.className = 'bi bi-check-circle-fill';
    } else {
      toastEl.style.background = '#dc2626';
      if(icon) icon.className = 'bi bi-exclamation-circle-fill';
    }
    if(msgEl) msgEl.textContent = msg;
    bsToast.show();
  }

  // ── Tab switching ──
  var apTabs = document.getElementById('apTabs');
  if(apTabs) {
    apTabs.addEventListener('click', function(e) {
      var btn = e.target.closest('.ap-tab-btn');
      if(!btn) return;
      var tab = btn.dataset.tab;
      document.querySelectorAll('.ap-tab-btn').forEach(function(b){ b.classList.remove('active'); });
      btn.classList.add('active');
      document.querySelectorAll('.ap-tab-pane').forEach(function(p){ p.classList.remove('active'); });
      var pane = document.getElementById('tab-' + tab);
      if(pane) pane.classList.add('active');
    });
  }

  // ── Warga card toggle ──
  document.addEventListener('click', function(e) {
    var item = e.target.closest('.warga-item');
    if(!item) return;
    var cb   = item.querySelector('.warga-checkbox');
    var icon = item.querySelector('.wi-check i');
    if(!cb) return;
    cb.checked = !cb.checked;
    if(cb.checked) {
      item.classList.add('selected');
      if(icon) icon.style.display = '';
    } else {
      item.classList.remove('selected');
      if(icon) icon.style.display = 'none';
    }
    updateCount();
  });

  // ── Check All ──
  var btnCheckAll = document.getElementById('checkAll');
  if(btnCheckAll) {
    btnCheckAll.addEventListener('click', function() {
      document.querySelectorAll('.warga-item').forEach(function(item) {
        item.classList.add('selected');
        var cb   = item.querySelector('.warga-checkbox');
        var icon = item.querySelector('.wi-check i');
        if(cb)   cb.checked = true;
        if(icon) icon.style.display = '';
      });
      updateCount();
    });
  }

  // ── Uncheck All ──
  var btnUncheckAll = document.getElementById('uncheckAll');
  if(btnUncheckAll) {
    btnUncheckAll.addEventListener('click', function() {
      document.querySelectorAll('.warga-item').forEach(function(item) {
        item.classList.remove('selected');
        var cb   = item.querySelector('.warga-checkbox');
        var icon = item.querySelector('.wi-check i');
        if(cb)   cb.checked = false;
        if(icon) icon.style.display = 'none';
      });
      updateCount();
    });
  }

  // ── Update counter ──
  function updateCount() {
    var count   = document.querySelectorAll('.warga-checkbox:checked').length;
    var elJml   = document.getElementById('jumlahTerpilih');
    var elCount = document.getElementById('countPilihan');
    var elAlert = document.getElementById('alertPilihan');
    var elBtn   = document.getElementById('btnSubmitPilihan');
    var elModal = document.getElementById('modalJumlahPilihan');
    if(elJml)   elJml.textContent   = count;
    if(elCount) elCount.textContent = count;
    if(elModal) elModal.textContent = count;
    if(elAlert) elAlert.style.display = count > 0 ? '' : 'none';
    if(elBtn)   elBtn.disabled = count === 0;
  }

  // ── Submit pilihan → tampilkan modal ──
  var formPilihan = document.getElementById('formPilihan');
  if(formPilihan) {
    formPilihan.addEventListener('submit', function(e) {
      var count = document.querySelectorAll('.warga-checkbox:checked').length;
      if(count === 0) { e.preventDefault(); return; }
      e.preventDefault();
      updateCount();
      if(bsModalPilihan) bsModalPilihan.show();
    });
  }

  // ── Konfirmasi pilihan → submit form ──
  var btnKonfirmasiPilihan = document.getElementById('btnKonfirmasiPilihan');
  if(btnKonfirmasiPilihan) {
    btnKonfirmasiPilihan.addEventListener('click', function() {
      if(bsModalPilihan) bsModalPilihan.hide();
      if(formPilihan) formPilihan.submit();
    });
  }

  // ── Generate semua → tampilkan modal ──
  var btnGenerate = document.getElementById('btnGenerate');
  if(btnGenerate) {
    btnGenerate.addEventListener('click', function() {
      if(bsModalSemua) bsModalSemua.show();
    });
  }

  // ── Konfirmasi semua → submit form ──
  var btnKonfirmasiSemua = document.getElementById('btnKonfirmasiSemua');
  if(btnKonfirmasiSemua) {
    btnKonfirmasiSemua.addEventListener('click', function() {
      if(bsModalSemua) bsModalSemua.hide();
      var formSemua = document.getElementById('formSemua');
      if(formSemua) formSemua.submit();
    });
  }

  // ── Select2 ──
  function initSelect2() {
    if(typeof $ !== 'undefined' && $.fn && $.fn.select2) {
      $('.select-warga').select2({ placeholder: '-- Pilih Warga --', allowClear: true });
    }
  }
  if(typeof $ !== 'undefined') initSelect2();
  else window.addEventListener('load', initSelect2);

  // ── Auto hide flash ──
  setTimeout(function() {
    var el = document.getElementById('flashError');
    if(el) {
      el.style.transition = 'opacity .4s';
      el.style.opacity    = '0';
      setTimeout(function(){ if(el.parentNode) el.parentNode.removeChild(el); }, 420);
    }
  }, 5000);

  updateCount();
});
</script>