<?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;
  --amber-50:#fffbeb; --amber-100:#fef3c7; --amber-400:#fbbf24; --amber-600:#d97706;
  --red-500: #ef4444; --red-600: #dc2626;
  --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);
}

/* ─── WRAPPER ────────────────────────────────────────────── */
.pd2-wrapper { max-width: 760px; margin: 0 auto; }

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

.btn-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 18px; border-radius: 50px;
  border: 1.5px solid var(--slate-200); background: #fff;
  color: var(--slate-700); font-size: 0.83rem; font-weight: 600;
  text-decoration: none; transition: all .2s;
}
.btn-back:hover { border-color: var(--teal-400); color: var(--teal-700); background: var(--teal-50); }

/* ─── 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;
}

/* ─── TIKET HEADER CARD ──────────────────────────────────── */
.pd2-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1.5px solid var(--slate-100);
  overflow: hidden; margin-bottom: 16px;
}
.pd2-card.aktif   { border-top: 3px solid var(--teal-500); }
.pd2-card.selesai { border-top: 3px solid #94a3b8; }
.pd2-card.ditutup { border-top: 3px solid var(--amber-400); }

.pd2-card-header {
  padding: 22px 26px 18px;
  border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50);
}
.pd2-card-header-top {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.pd2-judul {
  font-size: 1.15rem; font-weight: 800; color: var(--teal-800);
  margin: 0 0 8px; line-height: 1.3;
}
.pd2-deskripsi {
  font-size: 0.86rem; color: var(--slate-500); line-height: 1.6;
}
.pd2-meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: 0.79rem; color: var(--slate-500);
}
.pd2-meta span { display: flex; align-items: center; gap: 4px; }

.status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: 50px; padding: 6px 16px;
  font-size: 0.78rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.status-pill.aktif   { background: var(--teal-50);  color: var(--teal-700);  border: 1.5px solid var(--teal-100); }
.status-pill.selesai { background: var(--slate-100); color: var(--slate-500); border: 1.5px solid var(--slate-200); }
.status-pill.ditutup { background: var(--amber-50);  color: var(--amber-600); border: 1.5px solid var(--amber-100); }

/* Stats row */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px; padding: 16px 26px;
}
.stat-box {
  background: var(--slate-50); border: 1.5px solid var(--slate-100);
  border-radius: var(--radius-sm); padding: 12px 14px; text-align: center;
}
.stat-box .sb-val {
  font-size: 1.5rem; font-weight: 800; color: var(--teal-700); line-height: 1;
}
.stat-box .sb-label { font-size: 0.72rem; color: var(--slate-400); font-weight: 600; margin-top: 4px; }

/* ─── VOTING FORM ────────────────────────────────────────── */
.vote-card {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow); border: 1.5px solid var(--slate-100);
  overflow: hidden; margin-bottom: 16px;
}
.vote-card-header {
  padding: 16px 24px; border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50); font-size: 0.92rem; font-weight: 700;
  color: var(--teal-800); display: flex; align-items: center; gap: 8px;
}
.vote-card-header i { color: var(--teal-500); }
.vote-card-body { padding: 22px 24px; }

/* Radio opsi cards */
.opsi-vote-list { display: flex; flex-direction: column; gap: 10px; }
.opsi-vote-item {
  position: relative;
  border: 2px solid var(--slate-200);
  border-radius: var(--radius-sm);
  padding: 14px 16px 14px 48px;
  cursor: pointer;
  transition: all .18s;
  background: #fff;
}
.opsi-vote-item:hover { border-color: var(--teal-400); background: var(--teal-50); }
.opsi-vote-item.selected { border-color: var(--teal-600); background: var(--teal-50); }
.opsi-vote-item.winner { border-color: var(--amber-400); background: var(--amber-50); }

.opsi-vote-item input[type=radio] {
  position: absolute; left: 16px; top: 50%;
  transform: translateY(-50%);
  width: 20px; height: 20px; cursor: pointer;
  accent-color: var(--teal-600);
}
.opsi-vote-label { font-size: 0.9rem; font-weight: 700; color: var(--slate-900); }
.opsi-vote-count { font-size: 0.75rem; color: var(--slate-400); margin-top: 2px; }

/* Hasil bar */
.hasil-bar-wrap { margin-top: 8px; }
.hasil-bar-track {
  height: 8px; background: var(--slate-100); border-radius: 50px; overflow: hidden;
}
.hasil-bar-fill {
  height: 100%; border-radius: 50px; transition: width .8s ease;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-400));
}
.hasil-bar-fill.winner { background: linear-gradient(90deg, var(--amber-600), var(--amber-400)); }
.hasil-bar-pct {
  font-size: 0.78rem; font-weight: 800; color: var(--teal-700);
  float: right; margin-top: -1px;
}

/* Sudah vote notice */
.voted-notice {
  display: flex; align-items: center; gap: 10px;
  background: var(--green-50); border-left: 4px solid var(--green-500);
  border-radius: var(--radius-sm); padding: 12px 16px;
  margin-bottom: 18px; font-size: 0.85rem; color: #166534;
}
.voted-notice i { font-size: 1.1rem; color: var(--green-500); flex-shrink: 0; }

/* Submit btn */
.vote-footer { margin-top: 20px; }
.btn-vote {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 12px 32px; border-radius: var(--radius-sm); border: none;
  background: linear-gradient(135deg, var(--teal-800), var(--teal-600));
  color: #fff; font-size: 0.9rem; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 14px rgba(13,148,136,0.32); transition: all .2s;
  font-family: inherit; width: 100%;
}
.btn-vote:hover {
  background: linear-gradient(135deg, var(--teal-900), var(--teal-700));
  transform: translateY(-1px);
}
.btn-vote:disabled {
  background: var(--slate-300); box-shadow: none; cursor: not-allowed;
  transform: none;
}

/* ─── HASIL SECTION (Admin / selesai / realtime) ─────────── */
.hasil-section {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--slate-100);
  overflow: hidden; margin-bottom: 16px;
}
.hasil-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: 8px;
}
.hasil-header h5 {
  font-size: 0.92rem; font-weight: 700; color: var(--teal-800);
  margin: 0; display: flex; align-items: center; gap: 7px;
}
.hasil-header h5 i { color: var(--teal-500); }
.hasil-body { padding: 22px 24px; }

.hasil-opsi {
  margin-bottom: 16px;
}
.hasil-opsi:last-child { margin-bottom: 0; }
.hasil-opsi-top {
  display: flex; justify-content: space-between;
  align-items: baseline; margin-bottom: 6px; gap: 8px;
}
.hasil-opsi-label {
  font-size: 0.9rem; font-weight: 700; color: var(--slate-900);
  display: flex; align-items: center; gap: 6px;
}
.winner-crown { color: var(--amber-500); font-size: 0.9rem; }
.hasil-opsi-stat {
  font-size: 0.78rem; color: var(--slate-500); white-space: nowrap;
}
.hasil-big-track {
  height: 18px; background: var(--slate-100); border-radius: 50px;
  overflow: hidden; position: relative;
}
.hasil-big-fill {
  height: 100%; border-radius: 50px; transition: width 1s ease;
  background: linear-gradient(90deg, var(--teal-600), var(--teal-400));
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 8px;
}
.hasil-big-fill.winner { background: linear-gradient(90deg, var(--amber-600), var(--amber-400)); }
.hasil-big-fill-pct {
  font-size: 0.68rem; font-weight: 800; color: #fff;
  white-space: nowrap;
}

/* Admin – daftar pemilih */
.voters-section {
  background: #fff; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--slate-100);
  overflow: hidden; margin-bottom: 16px;
}
.voters-header {
  padding: 14px 22px; border-bottom: 1.5px solid var(--slate-100);
  background: var(--slate-50); font-size: 0.88rem; font-weight: 700;
  color: var(--teal-800); display: flex; align-items: center; gap: 7px;
}
.voters-list { padding: 0; }
.voter-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; border-bottom: 1px solid var(--slate-100);
  font-size: 0.84rem;
}
.voter-row:last-child { border-bottom: none; }
.voter-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-700), var(--teal-500));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.78rem; font-weight: 800; flex-shrink: 0;
}
.voter-name { font-weight: 600; color: var(--slate-900); }
.voter-pilihan {
  margin-left: auto; font-size: 0.75rem; font-weight: 700;
  background: var(--teal-50); color: var(--teal-700);
  border: 1px solid var(--teal-100); border-radius: 50px;
  padding: 3px 10px;
}
.voter-time { font-size: 0.73rem; color: var(--slate-400); white-space: nowrap; }

/* Mobile */
@media (max-width: 600px) {
  .pd2-wrapper   { padding: 0 0 60px; }
  .pd2-header    { flex-direction: column; align-items: flex-start; }
  .pd2-card-header { padding: 16px; }
  .pd2-card-header-top { flex-direction: column; }
  .stats-row     { padding: 14px 16px; }
  .vote-card-body, .hasil-body, .voters-list .voter-row { padding-left: 16px; padding-right: 16px; }
  .hasil-header, .voters-header { padding-left: 16px; padding-right: 16px; }
}
</style>

<div class="pd2-wrapper">

  <!-- ── Header ────────────────────────────────────────────── -->
  <div class="pd2-header">
    <div class="pd2-header-left">
      <h4>
        <span class="hi"><i class="bi bi-bar-chart-fill"></i></span>
        Detail Polling
      </h4>
      <div class="pd2-breadcrumb">
        <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
        <span class="sep">/</span>
        <a href="<?php echo base_url('polling'); ?>">Polling</a>
        <span class="sep">/</span>
        <span>Detail</span>
      </div>
    </div>
    <a href="<?php echo base_url('polling'); ?>" class="btn-back">
      <i class="bi bi-arrow-left"></i> Kembali
    </a>
  </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; ?>

  <?php
  // ── Decode data ──────────────────────────────────────────
  $opsi_list   = json_decode($item->opsi_json, true) ?? [];
  $total_suara = array_sum(array_column($opsi_list, 'suara'));
  $max_suara   = $total_suara > 0 ? max(array_column($opsi_list, 'suara')) : 0;

  $show_hasil  = $is_admin
               || $item->status != 'aktif'
               || ($item->hasil_realtime && $sudah_vote);
  ?>

  <!-- ── Info Card ──────────────────────────────────────────── -->
  <div class="pd2-card <?php echo $item->status; ?>">
    <div class="pd2-card-header">
      <div class="pd2-card-header-top">
        <div style="flex:1">
          <h2 class="pd2-judul"><?php echo htmlspecialchars($item->judul); ?></h2>
          <?php if(!empty($item->deskripsi)): ?>
          <div class="pd2-deskripsi"><?php echo nl2br(htmlspecialchars($item->deskripsi)); ?></div>
          <?php endif; ?>
        </div>
        <?php
        $sp_icon = ['aktif'=>'bi-play-circle-fill','selesai'=>'bi-check-circle-fill','ditutup'=>'bi-lock-fill'];
        $sp_lbl  = ['aktif'=>'🟢 Aktif','selesai'=>'✅ Selesai','ditutup'=>'🔒 Ditutup'];
        ?>
        <span class="status-pill <?php echo $item->status; ?>">
          <i class="bi <?php echo $sp_icon[$item->status] ?? 'bi-circle'; ?>" style="font-size:.65rem"></i>
          <?php echo $sp_lbl[$item->status] ?? ucfirst($item->status); ?>
        </span>
      </div>
      <div class="pd2-meta">
        <span><i class="bi bi-person-fill"></i> <?php echo $item->dibuat_oleh ?? 'Admin RT'; ?></span>
        <span><i class="bi bi-calendar3"></i> <?php echo date('d M Y', strtotime($item->tanggal_mulai)); ?>
          <?php if($item->tanggal_selesai): ?> – <?php echo date('d M Y', strtotime($item->tanggal_selesai)); ?><?php endif; ?>
        </span>
        <?php if($item->anonim): ?><span><i class="bi bi-eye-slash-fill"></i> Anonim</span><?php endif; ?>
      </div>
    </div>

    <!-- Stats -->
    <div class="stats-row">
      <div class="stat-box">
        <div class="sb-val"><?php echo $total_suara; ?></div>
        <div class="sb-label">Total Suara</div>
      </div>
      <div class="stat-box">
        <div class="sb-val"><?php echo count($opsi_list); ?></div>
        <div class="sb-label">Jumlah Opsi</div>
      </div>
      <?php if($item->tanggal_selesai): ?>
      <div class="stat-box">
        <div class="sb-val" style="font-size:1rem">
          <?php
          $sisa = ceil((strtotime($item->tanggal_selesai) - time()) / 86400);
          echo ($item->status == 'aktif' && $sisa > 0) ? $sisa.' hr' : '—';
          ?>
        </div>
        <div class="sb-label">Sisa Hari</div>
      </div>
      <?php endif; ?>
      <div class="stat-box">
        <div class="sb-val" style="font-size:1rem"><?php echo $item->izin_ganti ? '✓' : '✗'; ?></div>
        <div class="sb-label">Ubah Suara</div>
      </div>
    </div>
  </div>

  <!-- ════════════════════════════════════════════════════
       FORM VOTE (User, polling aktif, belum/bisa ganti vote)
  ════════════════════════════════════════════════════ -->
  <?php
  $can_vote = !$is_admin
           && $item->status == 'aktif'
           && (!$sudah_vote || $item->izin_ganti);
  ?>
  <?php if(!$is_admin && $item->status == 'aktif' && $sudah_vote && !$item->izin_ganti): ?>
  <div class="flash-alert success" style="margin-bottom:16px">
    <i class="bi bi-check-circle-fill"></i>
    <span>Anda sudah memberikan suara. Terima kasih atas partisipasi Anda!</span>
  </div>
  <?php endif; ?>

  <?php if($can_vote): ?>
  <div class="vote-card">
    <div class="vote-card-header">
      <i class="bi bi-hand-index-thumb-fill"></i>
      <?php echo $sudah_vote ? 'Ganti Pilihan Anda' : 'Berikan Suara Anda'; ?>
    </div>
    <div class="vote-card-body">

      <?php if($sudah_vote): ?>
      <div class="voted-notice">
        <i class="bi bi-info-circle-fill"></i>
        <span>Pilihan Anda saat ini: <strong><?php echo htmlspecialchars($pilihan_sebelumnya ?? '—'); ?></strong>. Anda bisa mengubahnya.</span>
      </div>
      <?php endif; ?>

      <form action="<?php echo base_url('polling/vote/'.$item->id); ?>" method="post" id="formVote">

        <div class="opsi-vote-list">
          <?php foreach($opsi_list as $idx => $op):
            $selected = ($pilihan_sebelumnya ?? '') == $op['teks'];
          ?>
          <label class="opsi-vote-item <?php echo $selected ? 'selected' : ''; ?>" id="opsiLabel<?php echo $idx; ?>">
            <input type="radio" name="pilihan" value="<?php echo htmlspecialchars($op['teks']); ?>"
                   <?php echo $selected ? 'checked' : ''; ?> required
                   onchange="highlightSelected(<?php echo $idx; ?>)">
            <div class="opsi-vote-label"><?php echo htmlspecialchars($op['teks']); ?></div>
            <?php if($show_hasil): ?>
            <?php
              $pct = $total_suara > 0 ? round(($op['suara'] / $total_suara) * 100) : 0;
            ?>
            <div class="hasil-bar-wrap">
              <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:3px">
                <span class="opsi-vote-count"><?php echo $op['suara']; ?> suara</span>
                <span style="font-size:.73rem;font-weight:800;color:var(--teal-700)"><?php echo $pct; ?>%</span>
              </div>
              <div class="hasil-bar-track">
                <div class="hasil-bar-fill <?php echo ($op['suara']==$max_suara && $max_suara>0) ? 'winner' : ''; ?>"
                     style="width:<?php echo $pct; ?>%"></div>
              </div>
            </div>
            <?php endif; ?>
          </label>
          <?php endforeach; ?>
        </div>

        <div class="vote-footer">
          <button type="submit" class="btn-vote" id="btnVote" disabled>
            <i class="bi bi-send-check-fill"></i>
            <?php echo $sudah_vote ? 'Ubah Pilihan' : 'Kirim Suara'; ?>
          </button>
        </div>

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

  <!-- ════════════════════════════════════════════════════
       HASIL (Admin, selesai/ditutup, atau realtime)
  ════════════════════════════════════════════════════ -->
  <?php if($show_hasil && !$can_vote): ?>
  <div class="hasil-section">
    <div class="hasil-header">
      <h5><i class="bi bi-bar-chart-fill"></i> Rekapitulasi Hasil</h5>
      <span style="font-size:0.78rem;color:var(--slate-400);font-weight:600">
        Total <?php echo $total_suara; ?> suara
      </span>
    </div>
    <div class="hasil-body">
      <?php foreach($opsi_list as $op):
        $pct = $total_suara > 0 ? round(($op['suara'] / $total_suara) * 100) : 0;
        $is_winner = $op['suara'] == $max_suara && $max_suara > 0;
      ?>
      <div class="hasil-opsi">
        <div class="hasil-opsi-top">
          <span class="hasil-opsi-label">
            <?php if($is_winner && $item->status != 'aktif'): ?>
            <span class="winner-crown">👑</span>
            <?php endif; ?>
            <?php echo htmlspecialchars($op['teks']); ?>
          </span>
          <span class="hasil-opsi-stat"><?php echo $op['suara']; ?> suara · <?php echo $pct; ?>%</span>
        </div>
        <div class="hasil-big-track">
          <div class="hasil-big-fill <?php echo $is_winner && $item->status != 'aktif' ? 'winner' : ''; ?>"
               style="width:<?php echo $pct; ?>%">
            <?php if($pct > 12): ?>
            <span class="hasil-big-fill-pct"><?php echo $pct; ?>%</span>
            <?php endif; ?>
          </div>
        </div>
      </div>
      <?php endforeach; ?>

      <?php if($total_suara == 0): ?>
      <div style="text-align:center;padding:32px 0;color:var(--slate-400);font-size:0.85rem;">
        <span style="font-size:2rem;display:block;margin-bottom:8px">🗳️</span>
        Belum ada suara masuk.
      </div>
      <?php endif; ?>
    </div>
  </div>
  <?php endif; ?>

  <!-- ════════════════════════════════════════════════════
       ADMIN: DAFTAR PEMILIH (jika tidak anonim)
  ════════════════════════════════════════════════════ -->
  <?php if($is_admin && !empty($voters) && !$item->anonim): ?>
  <div class="voters-section">
    <div class="voters-header">
      <i class="bi bi-people-fill" style="color:var(--teal-500)"></i>
      Daftar Pemilih (<?php echo count($voters); ?>)
    </div>
    <div class="voters-list">
      <?php foreach($voters as $v): ?>
      <div class="voter-row">
        <div class="voter-avatar">
          <?php echo strtoupper(mb_substr($v->nama, 0, 2)); ?>
        </div>
        <div>
          <div class="voter-name"><?php echo htmlspecialchars($v->nama); ?></div>
          <div class="voter-time"><i class="bi bi-clock" style="margin-right:3px"></i><?php echo date('d M Y H:i', strtotime($v->created_at)); ?></div>
        </div>
        <span class="voter-pilihan"><?php echo htmlspecialchars($v->pilihan); ?></span>
      </div>
      <?php endforeach; ?>
    </div>
  </div>
  <?php endif; ?>

  <!-- Admin: tutup / selesai -->
  <?php if($is_admin && $item->status == 'aktif'): ?>
  <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:4px">
    <a href="<?php echo base_url('polling/selesai/'.$item->id); ?>"
       onclick="return confirm('Tandai polling ini selesai?')"
       class="btn-back" style="border-color:var(--teal-100);color:var(--teal-700)">
      <i class="bi bi-check-circle"></i> Tandai Selesai
    </a>
    <a href="<?php echo base_url('polling/tutup/'.$item->id); ?>"
       onclick="return confirm('Tutup polling ini?')"
       class="btn-back" style="border-color:var(--amber-100);color:var(--amber-600)">
      <i class="bi bi-lock"></i> Tutup Polling
    </a>
  </div>
  <?php endif; ?>

</div><!-- /pd2-wrapper -->

<script>
// Highlight selected radio
function highlightSelected(idx) {
  document.querySelectorAll('.opsi-vote-item').forEach(function(el){ el.classList.remove('selected'); });
  var el = document.getElementById('opsiLabel' + idx);
  if(el) el.classList.add('selected');
  document.getElementById('btnVote').disabled = false;
}

// Enable vote button if already has selection (ganti vote)
window.addEventListener('DOMContentLoaded', function() {
  var checked = document.querySelector('.opsi-vote-item input[type=radio]:checked');
  if(checked) document.getElementById('btnVote') && (document.getElementById('btnVote').disabled = false);
});

// Flash auto-dismiss
$(document).ready(function() {
  setTimeout(function() {
    var el = document.getElementById('flashMsg');
    if(el){ el.style.transition='opacity .4s'; el.style.opacity='0'; setTimeout(function(){ el&&el.remove(); },420); }
  }, 4500);
});
</script>