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

<style>
/* ─── DESIGN TOKENS ──────────────────────────────────────── */
: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;
  --amber-50:  #fffbeb;
  --amber-100: #fef3c7;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --red-500:  #ef4444;
  --green-500: #10b981;
  --green-50:  #f0fdf4;
  --green-100: #dcfce7;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-700:#334155;
  --slate-900:#0f172a;
  --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);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06), 0 4px 20px rgba(0,0,0,.06);
}

/* ─── PAGE HEADER ────────────────────────────────────────── */
.pl-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 24px;
}
.pl-header-left h4 {
  font-size: 1.25rem;
  font-weight: 800;
  color: #0b5a52;
  margin: 0 0 5px;
  display: flex;
  align-items: center;
  gap: 11px;
  letter-spacing: -.3px;
  flex-wrap: wrap;
}
.pl-header-left h4 .hi {
  width: 40px; height: 40px;
  border-radius: 11px;
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  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;
}
.pl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.77rem;
  color: #94a3b8;
  padding-left: 51px;
}
.pl-breadcrumb a { color: #0d9488; text-decoration: none; font-weight: 600; }
.pl-breadcrumb a:hover { text-decoration: underline; }
.pl-breadcrumb .sep { color: #e2e8f0; }

.btn-tambah {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: 50px;
  border: none;
  background: #0d9488;
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 3px 12px rgba(13,148,136,0.28);
  transition: all .2s;
  white-space: nowrap;
}
.btn-tambah:hover {
  background: #0b7a6e;
  box-shadow: 0 5px 16px rgba(13,148,136,0.38);
  transform: translateY(-1px);
  color: #fff;
}

/* ─── TAB FILTER ─────────────────────────────────────────── */
.pl-tab-bar {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.pl-tab {
  padding: 7px 18px;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  border: 1.5px solid var(--slate-200);
  background: #fff;
  color: var(--slate-500);
  cursor: pointer;
  text-decoration: none;
  transition: all .18s;
}
.pl-tab:hover { border-color: var(--teal-400); color: var(--teal-700); }
.pl-tab.active { background: var(--teal-600); border-color: var(--teal-600); color: #fff; }

/* ─── POLL GRID ──────────────────────────────────────────── */
.pl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

/* ─── POLL CARD ──────────────────────────────────────────── */
.pl-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  border: 1.5px solid var(--slate-200);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.pl-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.pl-card.aktif { border-color: var(--teal-100); border-top: 3px solid var(--teal-500); }
.pl-card.selesai { border-top: 3px solid var(--slate-300); }
.pl-card.ditutup { border-top: 3px solid var(--amber-400); }

.pl-card-top { padding: 18px 20px 14px; flex: 1; }

.pl-card-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 50px;
  padding: 3px 11px;
  font-size: 0.70rem;
  font-weight: 700;
}
.status-badge.aktif   { background: var(--teal-50);  color: var(--teal-700);  border: 1px solid var(--teal-100); }
.status-badge.selesai { background: var(--slate-100); color: var(--slate-500); border: 1px solid var(--slate-200); }
.status-badge.ditutup { background: var(--amber-50);  color: var(--amber-600); border: 1px solid var(--amber-100); }

.total-suara-badge {
  font-size: 0.73rem;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  gap: 4px;
}

.pl-card-judul {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--slate-900);
  margin-bottom: 6px;
  line-height: 1.35;
}
.pl-card-deskripsi {
  font-size: 0.82rem;
  color: var(--slate-500);
  line-height: 1.55;
  margin-bottom: 12px;
}

/* Mini hasil bar */
.mini-hasil { margin-bottom: 10px; }
.mini-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.mini-bar-label {
  font-size: 0.73rem;
  color: var(--slate-600);
  font-weight: 600;
  min-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-bar-track {
  flex: 1;
  height: 7px;
  background: var(--slate-100);
  border-radius: 50px;
  overflow: hidden;
}
.mini-bar-fill {
  height: 100%;
  border-radius: 50px;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-400));
  transition: width .6s ease;
}
.mini-bar-pct {
  font-size: 0.70rem;
  font-weight: 700;
  color: var(--teal-700);
  min-width: 32px;
  text-align: right;
}

.pl-card-date {
  font-size: 0.74rem;
  color: var(--slate-400);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
}
.sudah-vote-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.71rem;
  font-weight: 700;
  color: var(--green-500);
  background: var(--green-50);
  border: 1px solid var(--green-100);
  border-radius: 50px;
  padding: 2px 9px;
  margin-top: 6px;
}

.pl-card-footer { padding: 0 20px 16px; }
.pl-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(13,148,136,0.28);
  transition: all .18s;
}
.pl-cta:hover { background: linear-gradient(135deg, var(--teal-800), var(--teal-600)); color: #fff; }
.pl-cta.selesai { background: linear-gradient(135deg, #475569, var(--slate-500)); }
.pl-cta.sudah   { background: linear-gradient(135deg, #059669, var(--green-500)); }

/* Admin action buttons */
.pl-admin-actions {
  display: flex;
  gap: 6px;
  padding: 0 20px 14px;
  flex-wrap: wrap;
}
.btn-action-sm {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--slate-200);
  background: #fff;
  color: var(--slate-600);
  font-size: 0.76rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
  cursor: pointer;
}
.btn-action-sm:hover { background: var(--slate-50); border-color: var(--slate-400); }
.btn-action-sm.danger { border-color: #fecaca; color: var(--red-500); }
.btn-action-sm.danger:hover { background: #fef2f2; }
.btn-action-sm.close-poll { border-color: var(--amber-100); color: var(--amber-600); }
.btn-action-sm.close-poll:hover { background: var(--amber-50); }

/* Empty state */
.empty-state { text-align: center; padding: 64px 24px; }
.empty-state-icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--teal-50);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.empty-state h6 { font-weight: 700; color: var(--slate-700); margin-bottom: 5px; }
.empty-state p  { font-size: 0.84rem; color: var(--slate-400); margin: 0; }

/* 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;
}
.flash-alert.success { background: var(--teal-50); border-left: 4px solid var(--teal-600); color: var(--teal-800); }
.flash-alert.danger  { 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;
}

/* FAB */
.btn-fab {
  display: none;
  position: fixed;
  bottom: 24px; right: 20px;
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-500));
  color: #fff;
  align-items: center; justify-content: center;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(13,148,136,0.45);
  z-index: 200;
  transition: all .2s;
}
.btn-fab:hover { transform: scale(1.08); color: #fff; }

@media (max-width: 767px) {
  .pl-page-header { flex-direction: column; align-items: flex-start; }
  .btn-tambah { display: none; }
  .btn-fab    { display: flex !important; }
  .pl-grid    { grid-template-columns: 1fr; gap: 12px; }
}
@media (min-width: 768px) { .btn-fab { display: none !important; } }
</style>

<div class="pg-wrapper">

  <!-- ── Page Header ────────────────────────────────────────── -->
  <div class="pl-page-header">
    <div class="pl-header-left">
      <h4>
        <span class="hi"><i class="bi bi-bar-chart-fill"></i></span>
        Polling Warga
        <?php if($is_admin && isset($count_aktif) && $count_aktif > 0): ?>
          <span style="display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;border-radius:50px;background:var(--teal-500);color:#fff;font-size:0.72rem;font-weight:800;padding:0 7px;"><?php echo $count_aktif; ?></span>
        <?php endif; ?>
      </h4>
      <div class="pl-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <span>Polling</span>
      </div>
    </div>
    <?php if($is_admin): ?>
    <a href="<?php echo base_url('polling/tambah'); ?>" class="btn-tambah">
      <i class="bi bi-plus-circle"></i> Buat Polling
    </a>
    <?php endif; ?>
  </div>

  <!-- ── Flash ──────────────────────────────────────────────── -->
  <?php if($this->session->flashdata('success')): ?>
  <div class="flash-alert success" id="flashMsg">
    <i class="bi bi-check-circle-fill"></i>
    <span><?php echo $this->session->flashdata('success'); ?></span>
    <button class="fa-close" onclick="this.parentElement.remove()">✕</button>
  </div>
  <?php endif; ?>
  <?php if($this->session->flashdata('error')): ?>
  <div class="flash-alert danger" id="flashMsg">
    <i class="bi bi-x-circle-fill"></i>
    <span><?php echo $this->session->flashdata('error'); ?></span>
    <button class="fa-close" onclick="this.parentElement.remove()">✕</button>
  </div>
  <?php endif; ?>

  <!-- ── Tab Filter ─────────────────────────────────────────── -->
  <div class="pl-tab-bar">
    <a href="<?php echo base_url('polling'); ?>" class="pl-tab <?php echo (!isset($_GET['status'])) ? 'active' : ''; ?>">
      <i class="bi bi-ui-checks-grid"></i> Semua
    </a>
    <a href="<?php echo base_url('polling?status=aktif'); ?>" class="pl-tab <?php echo (isset($_GET['status']) && $_GET['status']=='aktif') ? 'active' : ''; ?>">
      <i class="bi bi-play-circle-fill"></i> Aktif
    </a>
    <a href="<?php echo base_url('polling?status=selesai'); ?>" class="pl-tab <?php echo (isset($_GET['status']) && $_GET['status']=='selesai') ? 'active' : ''; ?>">
      <i class="bi bi-check-circle-fill"></i> Selesai
    </a>
    <a href="<?php echo base_url('polling?status=ditutup'); ?>" class="pl-tab <?php echo (isset($_GET['status']) && $_GET['status']=='ditutup') ? 'active' : ''; ?>">
      <i class="bi bi-lock-fill"></i> Ditutup
    </a>
  </div>

  <!-- ── Poll Grid ──────────────────────────────────────────── -->
  <?php if(empty($polling)): ?>
    <div class="empty-state">
      <div class="empty-state-icon">
        <i class="bi bi-bar-chart-fill" style="color:var(--teal-500);font-size:2rem;"></i>
      </div>
      <h6>Belum Ada Polling</h6>
      <p><?php echo $is_admin ? 'Buat polling pertama untuk warga.' : 'Belum ada polling aktif dari RT.'; ?></p>
    </div>
  <?php else: ?>
  <div class="pl-grid">
    <?php foreach($polling as $p):
      $total_suara = $p->total_suara ?? 0;

      // Tentukan label CTA & class
      $cta_class = $p->status;
      $cta_label = 'Lihat Detail';
      $cta_icon  = 'bi-eye';
      if($p->status == 'aktif') {
        if(!$is_admin && isset($p->sudah_vote) && $p->sudah_vote) {
          $cta_class = 'sudah'; $cta_label = 'Lihat Hasil'; $cta_icon = 'bi-bar-chart';
        } else if(!$is_admin) {
          $cta_label = 'Ikut Polling'; $cta_icon = 'bi-hand-index-thumb';
        }
      } else if($p->status == 'selesai') {
        $cta_label = 'Lihat Hasil';  $cta_icon = 'bi-bar-chart';
      } else if($p->status == 'ditutup') {
        $cta_label = 'Lihat Detail'; $cta_icon = 'bi-eye';
      }
    ?>
    <div class="pl-card <?php echo $p->status; ?>">
      <div class="pl-card-top">

        <div class="pl-card-meta">
          <span class="status-badge <?php echo $p->status; ?>">
            <?php
            $bi_icons = [
              'aktif'   => '<i class="bi bi-play-circle-fill"></i>',
              'selesai' => '<i class="bi bi-check-circle-fill"></i>',
              'ditutup' => '<i class="bi bi-lock-fill"></i>',
            ];
            echo ($bi_icons[$p->status] ?? '<i class="bi bi-circle"></i>').' '.ucfirst($p->status);
            ?>
          </span>
          <span class="total-suara-badge">
            <i class="bi bi-people-fill"></i> <?php echo $total_suara; ?> suara
          </span>
        </div>

        <div class="pl-card-judul"><?php echo htmlspecialchars($p->judul); ?></div>

        <?php if(!empty($p->deskripsi)): ?>
        <div class="pl-card-deskripsi"><?php echo htmlspecialchars(mb_substr($p->deskripsi, 0, 100)); ?>...</div>
        <?php endif; ?>

        <!-- Mini hasil bar (tampil jika ada opsi & total > 0) -->
        <?php if(!empty($p->opsi_preview) && $total_suara > 0): ?>
        <div class="mini-hasil">
          <?php
          $opsi_list = json_decode($p->opsi_preview, true);
          $shown = 0;
          foreach((array)$opsi_list as $op):
            if($shown >= 3) break; $shown++;
            $pct = $total_suara > 0 ? round(($op['suara'] / $total_suara) * 100) : 0;
          ?>
          <div class="mini-bar-row">
            <span class="mini-bar-label"><?php echo htmlspecialchars($op['teks']); ?></span>
            <div class="mini-bar-track">
              <div class="mini-bar-fill" style="width:<?php echo $pct; ?>%"></div>
            </div>
            <span class="mini-bar-pct"><?php echo $pct; ?>%</span>
          </div>
          <?php endforeach; ?>
        </div>
        <?php endif; ?>

        <div class="pl-card-date">
          <i class="bi bi-calendar3"></i>
          <?php echo date('d M Y', strtotime($p->tanggal_mulai)); ?>
          <?php if($p->tanggal_selesai): ?>
            – <?php echo date('d M Y', strtotime($p->tanggal_selesai)); ?>
          <?php endif; ?>
        </div>

        <?php if(!$is_admin && isset($p->sudah_vote) && $p->sudah_vote): ?>
        <div class="sudah-vote-tag"><i class="bi bi-check-circle-fill"></i> Anda sudah memberikan suara</div>
        <?php endif; ?>

      </div>

      <!-- CTA -->
      <div class="pl-card-footer">
        <a href="<?php echo base_url('polling/detail/'.$p->id); ?>" class="pl-cta <?php echo $cta_class; ?>">
          <i class="bi <?php echo $cta_icon; ?>"></i> <?php echo $cta_label; ?>
        </a>
      </div>

      <!-- Admin actions -->
     <!-- Admin actions -->
<?php if($is_admin): ?>
<div class="pl-admin-actions">
  <a href="<?php echo base_url('polling/edit/'.$p->id); ?>" class="btn-action-sm">
    <i class="bi bi-pencil"></i> Edit
  </a>
  <?php if($p->status == 'aktif'): ?>
  <button class="btn-action-sm close-poll"
     onclick="konfirmasiPolling('tutup','<?php echo base_url('polling/tutup/'.$p->id); ?>','<?php echo addslashes($p->judul); ?>')">
    <i class="bi bi-lock"></i> Tutup
  </button>
  <button class="btn-action-sm"
     onclick="konfirmasiPolling('selesai','<?php echo base_url('polling/selesai/'.$p->id); ?>','<?php echo addslashes($p->judul); ?>')">
    <i class="bi bi-check-circle"></i> Selesai
  </button>
  <?php endif; ?>
  <button class="btn-action-sm danger"
     onclick="konfirmasiPolling('hapus','<?php echo base_url('polling/hapus/'.$p->id); ?>','<?php echo addslashes($p->judul); ?>')">
    <i class="bi bi-trash"></i> Hapus
  </button>
</div>
<?php endif; ?>

    </div>
    <?php endforeach; ?>
  </div>
  <?php endif; ?>

</div><!-- /pg-wrapper -->

<!-- FAB Mobile (admin only) -->
<?php if($is_admin): ?>
<a href="<?php echo base_url('polling/tambah'); ?>" class="btn-fab" title="Buat Polling">
  <i class="bi bi-plus-lg"></i>
</a>
<?php endif; ?>

<!-- Modal Konfirmasi Polling -->
<div class="modal fade" id="modalKonfirmasiPolling" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" style="max-width:400px;">
    <div class="modal-content" style="border-radius:16px;border:none;overflow:hidden;">
      <div class="modal-header" id="modalPollingHeader" style="padding:18px 20px;">
        <div class="d-flex align-items-center gap-2">
          <div id="modalPollingIconWrap" style="width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;">
            <i id="modalPollingIcon" class="bi" style="font-size:1rem;"></i>
          </div>
          <h6 class="modal-title mb-0 fw-bold" id="modalPollingTitle" style="font-size:.95rem;"></h6>
        </div>
        <button type="button" class="btn-close" id="modalPollingBtnClose" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <p style="font-size:.85rem;color:#334155;margin-bottom:10px;" id="modalPollingDesc">-</p>
        <div id="modalPollingNamaBox" style="border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:10px;">
          <div id="modalPollingNamaIcon" style="width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;flex-shrink:0;"></div>
          <div style="font-weight:700;font-size:.88rem;" id="modalPollingNama">-</div>
        </div>
        <div id="modalPollingWarning" style="border-radius:8px;padding:9px 14px;margin-top:12px;font-size:.78rem;"></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>
        <a href="#" id="btnKonfirmasiPolling"
          style="border-radius:8px;border:none;font-size:.82rem;font-weight:700;color:#fff;padding:7px 18px;flex:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;">
          <i id="btnPollingIcon" class="bi"></i>
          <span id="btnPollingLabel">Ya</span>
        </a>
      </div>
    </div>
  </div>
</div>

<script>
var _bsModalPolling = null;

function konfirmasiPolling(aksi, url, judul) {
  var cfg = {
    tutup: {
      title:    'Tutup Polling',
      titleColor: '#92400e',
      headerBg: '#fffbeb',
      headerBorder: '#fde68a',
      iconBg:   '#fef3c7',
      iconColor:'#d97706',
      icon:     'bi-lock-fill',
      desc:     'Anda akan menutup polling:',
      namaBg:   '#fffbeb',
      namaBorder:'#fde68a',
      namaColor:'#92400e',
      namaIconBg:'#fef3c7',
      namaIconColor:'#d97706',
      namaIcon: 'bi-lock',
      warnBg:   '#f0f9ff',
      warnBorder:'#bae6fd',
      warnColor:'#075985',
      warn:     '<i class="bi bi-info-circle-fill me-1"></i>Polling tidak dapat menerima suara baru setelah ditutup.',
      btnBg:    'linear-gradient(135deg,#d97706,#f59e0b)',
      btnShadow:'rgba(245,158,11,.28)',
      btnIcon:  'bi-lock-fill',
      btnLabel: 'Ya, Tutup',
    },
    selesai: {
      title:    'Tandai Selesai',
      titleColor: '#166534',
      headerBg: '#f0fdf4',
      headerBorder: '#bbf7d0',
      iconBg:   '#dcfce7',
      iconColor:'#16a34a',
      icon:     'bi-check-circle-fill',
      desc:     'Anda akan menandai polling selesai:',
      namaBg:   '#f0fdf4',
      namaBorder:'#bbf7d0',
      namaColor:'#166534',
      namaIconBg:'#dcfce7',
      namaIconColor:'#16a34a',
      namaIcon: 'bi-bar-chart',
      warnBg:   '#f0f9ff',
      warnBorder:'#bae6fd',
      warnColor:'#075985',
      warn:     '<i class="bi bi-info-circle-fill me-1"></i>Status polling akan berubah menjadi selesai.',
      btnBg:    'linear-gradient(135deg,#059669,#10b981)',
      btnShadow:'rgba(16,185,129,.28)',
      btnIcon:  'bi-check-circle-fill',
      btnLabel: 'Ya, Selesai',
    },
    hapus: {
      title:    'Hapus Polling',
      titleColor: '#991b1b',
      headerBg: '#fef2f2',
      headerBorder: '#fecaca',
      iconBg:   '#fee2e2',
      iconColor:'#dc2626',
      icon:     'bi-trash-fill',
      desc:     'Anda akan menghapus polling:',
      namaBg:   '#fef2f2',
      namaBorder:'#fecaca',
      namaColor:'#991b1b',
      namaIconBg:'#fee2e2',
      namaIconColor:'#dc2626',
      namaIcon: 'bi-bar-chart-fill',
      warnBg:   '#fffbeb',
      warnBorder:'#fde68a',
      warnColor:'#92400e',
      warn:     '<i class="bi bi-exclamation-triangle-fill me-1"></i>Data akan <strong>terhapus permanen</strong> beserta semua suara.',
      btnBg:    'linear-gradient(135deg,#dc2626,#ef4444)',
      btnShadow:'rgba(220,38,38,.28)',
      btnIcon:  'bi-trash-fill',
      btnLabel: 'Ya, Hapus',
    },
  };

  var c = cfg[aksi];
  if(!c) return;

  // Header
  var header = document.getElementById('modalPollingHeader');
  if(header) { header.style.background = c.headerBg; header.style.borderBottom = '1.5px solid ' + c.headerBorder; }
  var btnClose = document.getElementById('modalPollingBtnClose');
  if(btnClose) btnClose.className = 'btn-close';

  // Icon wrap
  var iconWrap = document.getElementById('modalPollingIconWrap');
  if(iconWrap) { iconWrap.style.background = c.iconBg; }
  var icon = document.getElementById('modalPollingIcon');
  if(icon) { icon.className = 'bi ' + c.icon; icon.style.color = c.iconColor; }

  // Title
  var title = document.getElementById('modalPollingTitle');
  if(title) { title.textContent = c.title; title.style.color = c.titleColor; }

  // Desc
  document.getElementById('modalPollingDesc').textContent = c.desc;

  // Nama box
  var namaBox = document.getElementById('modalPollingNamaBox');
  if(namaBox) { namaBox.style.background = c.namaBg; namaBox.style.border = '1.5px solid ' + c.namaBorder; }
  var namaIconEl = document.getElementById('modalPollingNamaIcon');
  if(namaIconEl) { namaIconEl.style.background = c.namaIconBg; namaIconEl.innerHTML = '<i class="bi ' + c.namaIcon + '" style="color:' + c.namaIconColor + '"></i>'; }
  var namaEl = document.getElementById('modalPollingNama');
  if(namaEl) { namaEl.textContent = judul; namaEl.style.color = c.namaColor; }

  // Warning
  var warn = document.getElementById('modalPollingWarning');
  if(warn) { warn.style.background = c.warnBg; warn.style.border = '1.5px solid ' + c.warnBorder; warn.style.color = c.warnColor; warn.innerHTML = c.warn; }

  // Button
  var btn = document.getElementById('btnKonfirmasiPolling');
  if(btn) { btn.href = url; btn.style.background = c.btnBg; btn.style.boxShadow = '0 4px 12px ' + c.btnShadow; }
  var btnIcon = document.getElementById('btnPollingIcon');
  if(btnIcon) btnIcon.className = 'bi ' + c.btnIcon;
  var btnLabel = document.getElementById('btnPollingLabel');
  if(btnLabel) btnLabel.textContent = c.btnLabel;

  // Show
  var modalEl = document.getElementById('modalKonfirmasiPolling');
  if(!modalEl) return;
  if(!_bsModalPolling) _bsModalPolling = new bootstrap.Modal(modalEl);
  _bsModalPolling.show();
}
</script>