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

<style>
/* ─── DESIGN TOKENS ── */
:root {
  --teal-800: #0b5a52;
  --teal-700: #0b7a6e;
  --teal-600: #0d9488;
  --teal-500: #14b8a6;
  --teal-50:  #f0fdfa;
  --slate-50: #f8fafc;
  --slate-100:#f1f5f9;
  --slate-200:#e2e8f0;
  --slate-400:#94a3b8;
  --slate-500:#64748b;
  --slate-900:#0f172a;
  --shadow: 0 1px 5px rgba(0,0,0,.07);
}

/* ─── PAGE HEADER ── */
.ar-page-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-wrap: wrap; gap: 14px; margin-bottom: 24px;
}
.ar-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;
}
.ar-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;
}
.ar-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.77rem; color: var(--slate-400); padding-left: 51px;
}
.ar-breadcrumb a { color: var(--teal-600); text-decoration: none; font-weight: 600; }
.ar-breadcrumb a:hover { text-decoration: underline; }
.ar-breadcrumb .sep { color: var(--slate-200); }

.btn-back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 50px;
  border: 2px solid var(--teal-600); background: transparent;
  color: var(--teal-600); font-size: 0.85rem; font-weight: 700;
  text-decoration: none; transition: all .2s; white-space: nowrap;
}
.btn-back:hover { background: var(--teal-600); color: #fff; transform: translateY(-1px); }

/* ─── STAT SUMMARY ROW ── */
.stat-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 14px;
}
.stat-summary-2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px; margin-bottom: 24px;
}

/* ─── STAT MINI — BASE ── */
.stat-mini {
  background: linear-gradient(135deg, #0d9488, #14b8a6);
  border-radius: 12px; padding: 16px 18px;
  display: flex; justify-content: space-between; align-items: center;
  box-shadow: 0 4px 16px rgba(13,148,136,0.22);
  transition: transform .15s, box-shadow .2s, filter .15s;
  /* ── Clickable ── */
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.stat-mini:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(13,148,136,0.35);
  filter: brightness(1.06);
}
.stat-mini:active {
  transform: translateY(0px);
  filter: brightness(0.95);
}

/* Tooltip hint — muncul saat hover */
.stat-mini::after {
  content: attr(data-hint);
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.82);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 10;
}
.stat-mini:hover::after { opacity: 1; }

/* Wrapper agar posisi relatif */
.stat-summary,
.stat-summary-2 { position: relative; }
.stat-mini { position: relative; }

.stat-mini.orange { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 4px 16px rgba(245,158,11,0.22); }
.stat-mini.orange:hover { box-shadow: 0 8px 24px rgba(245,158,11,0.4); }
.stat-mini.purple { background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 4px 16px rgba(124,58,237,0.22); }
.stat-mini.purple:hover { box-shadow: 0 8px 24px rgba(124,58,237,0.4); }
.stat-mini.rose   { background: linear-gradient(135deg, #e11d48, #fb7185); box-shadow: 0 4px 16px rgba(225,29,72,0.22); }
.stat-mini.rose:hover   { box-shadow: 0 8px 24px rgba(225,29,72,0.4); }
.stat-mini.blue   { background: linear-gradient(135deg, #1d4ed8, #60a5fa); box-shadow: 0 4px 16px rgba(29,78,216,0.22); }
.stat-mini.blue:hover   { box-shadow: 0 8px 24px rgba(29,78,216,0.4); }
.stat-mini.slate  { background: linear-gradient(135deg, #475569, #94a3b8); box-shadow: 0 4px 16px rgba(71,85,105,0.22); }
.stat-mini.indigo { background: linear-gradient(135deg, #4f46e5, #818cf8); box-shadow: 0 4px 16px rgba(79,70,229,0.22); }

.stat-mini-label { font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.82); margin-bottom: 4px; }
.stat-mini-value { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.stat-mini-icon { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.stat-mini-icon i { font-size: 1.1rem; color: #fff; }

/* Arrow kecil di pojok — tanda bisa diklik */
.stat-mini-arrow {
  position: absolute;
  top: 8px; right: 10px;
  font-size: .65rem;
  color: rgba(255,255,255,.5);
  transition: color .2s, transform .2s;
}
.stat-mini:hover .stat-mini-arrow {
  color: rgba(255,255,255,.9);
  transform: translateX(2px);
}

/* ─── SECTION LABEL ── */
.section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate-400);
  margin-bottom: 10px; padding-left: 2px;
}

/* ─── CHART CARD ── */
.chart-card {
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--slate-100);
}
.chart-card-header {
  padding: 12px 18px; display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #f1f3f5; background: #fff;
  font-size: .84rem; font-weight: 700; color: #374151;
}
.chart-card-header i { color: #1abc9c; }
.chart-card-body { padding: 16px; }

/* ─── MOBILE ── */
@media (max-width: 767.98px) {
  .stat-summary,
  .stat-summary-2 { grid-template-columns: 1fr 1fr; }
  .chart-row > [class*='col-'] { flex: 0 0 100% !important; max-width: 100% !important; }
  .ar-page-header { flex-direction: column; align-items: flex-start; }
  .btn-back { width: 100%; justify-content: center; }
  .stat-mini::after { display: none; } /* sembunyikan tooltip di mobile */
}
</style>

<script src="<?php echo base_url('assets/js/chart.js'); ?>"></script>
<?php
/* ── Hitung data dari $warga ── */
$usia_grup       = ['0–5'=>0,'6–12'=>0,'13–17'=>0,'18–30'=>0,'31–50'=>0,'51+'=>0];
$perkawinan_data = [];
$agama_data      = [];
$pekerjaan_data  = [];

$total_balita = 0;
$total_lansia = 0;
$total_janda  = 0;
$total_duda   = 0;

$now = new DateTime();
$cerai_keywords = ['cerai', 'cerai hidup', 'cerai mati', 'duda', 'janda'];

foreach($warga as $w) {
    if (!empty($w->tanggal_lahir)) {
        $lahir = new DateTime($w->tanggal_lahir);
        $umur  = (int)$now->diff($lahir)->y;

        if ($umur <= 4)  $total_balita++;
        if ($umur >= 60) $total_lansia++;

        if     ($umur <= 5)  $usia_grup['0–5']++;
        elseif ($umur <= 12) $usia_grup['6–12']++;
        elseif ($umur <= 17) $usia_grup['13–17']++;
        elseif ($umur <= 30) $usia_grup['18–30']++;
        elseif ($umur <= 50) $usia_grup['31–50']++;
        else                 $usia_grup['51+']++;
    }

    if (!empty($w->status_perkawinan)) {
        $sp     = $w->status_perkawinan;
        $sp_low = strtolower(trim($sp));

        $is_cerai = false;
        foreach ($cerai_keywords as $kw) {
            if (strpos($sp_low, $kw) !== false) { $is_cerai = true; break; }
        }

        if ($is_cerai) {
            $jk = strtolower(trim($w->jenis_kelamin ?? ''));
            if (in_array($jk, ['perempuan','p'])) {
                $total_janda++;
                $perkawinan_data['Janda'] = ($perkawinan_data['Janda'] ?? 0) + 1;
            } elseif (in_array($jk, ['laki-laki','laki','l'])) {
                $total_duda++;
                $perkawinan_data['Duda'] = ($perkawinan_data['Duda'] ?? 0) + 1;
            } else {
                $perkawinan_data[$sp] = ($perkawinan_data[$sp] ?? 0) + 1;
            }
        } else {
            $perkawinan_data[$sp] = ($perkawinan_data[$sp] ?? 0) + 1;
        }
    }

    if (!empty($w->agama)) {
        $ag = ucfirst(strtolower($w->agama));
        $agama_data[$ag] = ($agama_data[$ag] ?? 0) + 1;
    }

    if (!empty($w->pekerjaan)) {
        $pk = ucwords(strtolower($w->pekerjaan));
        $pekerjaan_data[$pk] = ($pekerjaan_data[$pk] ?? 0) + 1;
    }
}

arsort($pekerjaan_data);
$top_pekerjaan  = array_slice($pekerjaan_data, 0, 8, true);
$label_domisili = ['tetap'=>'Tetap','kost'=>'Kost','kontrak'=>'Kontrak','pendatang'=>'Pendatang','sementara'=>'Sementara'];

/* ── URL helper ── */
$url_semua    = base_url('warga');
$url_laki     = base_url('warga?filter=laki');
$url_perempuan= base_url('warga?filter=perempuan');
$url_balita   = base_url('warga?filter=balita');
$url_lansia   = base_url('warga?filter=lansia');
$url_janda    = base_url('warga?filter=janda');
$url_duda     = base_url('warga?filter=duda');
$url_kk       = base_url('kartu-keluarga');
?>

<!-- ── Header ── -->
<div class="ar-page-header">
    <div class="ar-header-left">
        <h4>
            <span class="hi"><i class="bi bi-bar-chart-line-fill"></i></span>
            Statistik & Grafik Kependudukan
        </h4>
        <div class="ar-breadcrumb">
            <a href="<?php echo base_url('dashboard'); ?>">Dashboard</a>
            <span class="sep">/</span>
            <a href="<?php echo base_url('warga'); ?>">Kependudukan</a>
            <span class="sep">/</span>
            <span>Statistik</span>
        </div>
    </div>
    <a href="<?php echo base_url('warga'); ?>" class="btn-back">
        <i class="bi bi-arrow-left"></i> Kembali
    </a>
</div>

<!-- ── Stat Summary Baris 1: Ringkasan Utama ── -->
<div class="section-label">Ringkasan Utama <small style="font-weight:400; text-transform:none; letter-spacing:0; color:#cbd5e1;">— klik card untuk lihat daftar</small></div>
<div class="stat-summary mb-3">

    <!-- Total Jiwa → semua warga -->
    <a href="<?php echo $url_semua; ?>" class="stat-mini" data-hint="Lihat semua warga →">
        <div>
            <div class="stat-mini-label">Total Jiwa</div>
            <div class="stat-mini-value"><?php echo number_format($statistik['total_jiwa'],0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-people-fill"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Total KK → halaman kartu keluarga -->
    <a href="<?php echo $url_kk; ?>" class="stat-mini" data-hint="Kelola Kartu Keluarga →">
        <div>
            <div class="stat-mini-label">Total KK</div>
            <div class="stat-mini-value"><?php echo number_format($statistik['total_kk'],0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-house-door-fill"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Laki-laki -->
    <a href="<?php echo $url_laki; ?>" class="stat-mini" data-hint="Filter warga laki-laki →">
        <div>
            <div class="stat-mini-label">Laki-laki</div>
            <div class="stat-mini-value"><?php echo number_format($statistik['total_pria'],0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-gender-male"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Perempuan -->
    <a href="<?php echo $url_perempuan; ?>" class="stat-mini" data-hint="Filter warga perempuan →">
        <div>
            <div class="stat-mini-label">Perempuan</div>
            <div class="stat-mini-value"><?php echo number_format($statistik['total_wanita'],0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-gender-female"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

</div>

<!-- ── Stat Summary Baris 2: Kelompok Rentan & Status Cerai ── -->
<div class="section-label">Kelompok Rentan & Status Cerai <small style="font-weight:400; text-transform:none; letter-spacing:0; color:#cbd5e1;">— klik card untuk lihat daftar</small></div>
<div class="stat-summary-2 mb-4">

    <!-- Balita -->
    <a href="<?php echo $url_balita; ?>" class="stat-mini orange" data-hint="Lihat daftar balita →">
        <div>
            <div class="stat-mini-label">Balita (0–4 th)</div>
            <div class="stat-mini-value"><?php echo number_format($total_balita,0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-emoji-smile-fill"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Lansia -->
    <a href="<?php echo $url_lansia; ?>" class="stat-mini purple" data-hint="Lihat daftar lansia →">
        <div>
            <div class="stat-mini-label">Lansia (≥60 th)</div>
            <div class="stat-mini-value"><?php echo number_format($total_lansia,0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-person-walking"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Janda -->
    <a href="<?php echo $url_janda; ?>" class="stat-mini rose" data-hint="Lihat daftar janda →">
        <div>
            <div class="stat-mini-label">Janda (Cerai–P)</div>
            <div class="stat-mini-value"><?php echo number_format($total_janda,0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-person-heart"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

    <!-- Duda -->
    <a href="<?php echo $url_duda; ?>" class="stat-mini blue" data-hint="Lihat daftar duda →">
        <div>
            <div class="stat-mini-label">Duda (Cerai–L)</div>
            <div class="stat-mini-value"><?php echo number_format($total_duda,0,',','.'); ?></div>
        </div>
        <div class="stat-mini-icon"><i class="bi bi-person-heart"></i></div>
        <span class="stat-mini-arrow"><i class="bi bi-arrow-right-circle-fill"></i></span>
    </a>

</div>

<!-- ── GRAFIK ROW 1: Gender + Domisili ── -->
<div class="row g-3 mb-3 chart-row">
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-pie-chart-fill"></i> Komposisi Gender</div>
            <div class="chart-card-body"><canvas id="genderChart" height="260"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-bar-chart-fill"></i> Status Domisili</div>
            <div class="chart-card-body"><canvas id="domisiliChart" height="260"></canvas></div>
        </div>
    </div>
</div>

<!-- ── GRAFIK ROW 2: Kelompok Usia + Status Perkawinan ── -->
<div class="row g-3 mb-3 chart-row">
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-bar-chart-steps"></i> Kelompok Usia</div>
            <div class="chart-card-body"><canvas id="usiaChart" height="260"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-heart-fill"></i> Status Perkawinan <small class="text-muted fw-normal ms-1">(Cerai L=Duda, P=Janda)</small></div>
            <div class="chart-card-body"><canvas id="perkawinanChart" height="260"></canvas></div>
        </div>
    </div>
</div>

<!-- ── GRAFIK ROW 3: Balita & Lansia + Janda & Duda ── -->
<div class="row g-3 mb-3 chart-row">
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-people-fill"></i> Balita &amp; Lansia</div>
            <div class="chart-card-body"><canvas id="lansiaBalitaChart" height="260"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-person-heart"></i> Janda &amp; Duda</div>
            <div class="chart-card-body"><canvas id="jandaDudaChart" height="260"></canvas></div>
        </div>
    </div>
</div>

<!-- ── GRAFIK ROW 4: Agama + Pekerjaan ── -->
<div class="row g-3 mb-4 chart-row">
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-moon-stars-fill"></i> Komposisi Agama</div>
            <div class="chart-card-body"><canvas id="agamaChart" height="260"></canvas></div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="chart-card">
            <div class="chart-card-header"><i class="bi bi-briefcase-fill"></i> Top 8 Pekerjaan</div>
            <div class="chart-card-body"><canvas id="pekerjaanChart" height="260"></canvas></div>
        </div>
    </div>
</div>

<script>
(function() {
    var COLORS = ['#1abc9c','#3b82f6','#f59e0b','#ef4444','#8b5cf6','#ec4899','#14b8a6','#64748b'];
    var opts_donut = {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, padding: 14, font: { size: 11 } } } },
        cutout: '58%'
    };
    var opts_bar_v = {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            y: { beginAtZero: true, ticks: { precision: 0, font: { size: 11 } } },
            x: { ticks: { font: { size: 11 } } }
        }
    };
    var opts_bar_h = {
        indexAxis: 'y',
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
            x: { beginAtZero: true, ticks: { precision: 0, font: { size: 11 } } },
            y: { ticks: { font: { size: 11 } } }
        }
    };

    // 1. Gender — klik slice navigasi ke filter
    var genderChart = new Chart(document.getElementById('genderChart').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: ['Laki-laki', 'Perempuan'],
            datasets: [{ data: [<?php echo (int)$statistik['total_pria']; ?>, <?php echo (int)$statistik['total_wanita']; ?>], backgroundColor: ['#1abc9c','#e74c3c'], borderColor: ['#16a085','#c0392b'], borderWidth: 2 }]
        },
        options: {
            ...opts_donut,
            onClick: function(e, elements) {
                if (!elements.length) return;
                var urls = ['<?php echo $url_laki; ?>', '<?php echo $url_perempuan; ?>'];
                window.location.href = urls[elements[0].index];
            }
        }
    });

    // 2. Domisili
    new Chart(document.getElementById('domisiliChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: <?php echo json_encode(array_values($label_domisili)); ?>,
            datasets: [{ label: 'Jumlah', data: <?php
                $dd = [];
                foreach($label_domisili as $k => $l) $dd[] = $statistik['domisili'][$k] ?? 0;
                echo json_encode($dd);
            ?>, backgroundColor: ['#1abc9c','#f39c12','#3498db','#e74c3c','#95a5a6'], borderRadius: 5 }]
        },
        options: opts_bar_v
    });

    // 3. Kelompok Usia
    new Chart(document.getElementById('usiaChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: <?php echo json_encode(array_keys($usia_grup)); ?>,
            datasets: [{ label: 'Jumlah', data: <?php echo json_encode(array_values($usia_grup)); ?>, backgroundColor: ['#a78bfa','#60a5fa','#34d399','#1abc9c','#f59e0b','#f87171'], borderRadius: 5 }]
        },
        options: opts_bar_v
    });

    // 4. Status Perkawinan
    new Chart(document.getElementById('perkawinanChart').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: <?php echo json_encode(array_keys($perkawinan_data)); ?>,
            datasets: [{ data: <?php echo json_encode(array_values($perkawinan_data)); ?>, backgroundColor: COLORS, borderWidth: 2 }]
        },
        options: opts_donut
    });

    // 5. Balita & Lansia — klik bar navigasi ke filter
    new Chart(document.getElementById('lansiaBalitaChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['Balita (0–4 th)', 'Lansia (≥60 th)'],
            datasets: [{
                label: 'Jumlah',
                data: [<?php echo (int)$total_balita; ?>, <?php echo (int)$total_lansia; ?>],
                backgroundColor: ['#f59e0b', '#7c3aed'],
                borderRadius: 6
            }]
        },
        options: {
            ...opts_bar_v,
            onClick: function(e, elements) {
                if (!elements.length) return;
                var urls = ['<?php echo $url_balita; ?>', '<?php echo $url_lansia; ?>'];
                window.location.href = urls[elements[0].index];
            }
        }
    });

    // 6. Janda & Duda — klik bar navigasi ke filter
    new Chart(document.getElementById('jandaDudaChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: ['Janda (Cerai–P)', 'Duda (Cerai–L)'],
            datasets: [{
                label: 'Jumlah',
                data: [<?php echo (int)$total_janda; ?>, <?php echo (int)$total_duda; ?>],
                backgroundColor: ['#e11d48', '#1d4ed8'],
                borderRadius: 6
            }]
        },
        options: {
            ...opts_bar_v,
            onClick: function(e, elements) {
                if (!elements.length) return;
                var urls = ['<?php echo $url_janda; ?>', '<?php echo $url_duda; ?>'];
                window.location.href = urls[elements[0].index];
            }
        }
    });

    // 7. Agama
    new Chart(document.getElementById('agamaChart').getContext('2d'), {
        type: 'doughnut',
        data: {
            labels: <?php echo json_encode(array_keys($agama_data)); ?>,
            datasets: [{ data: <?php echo json_encode(array_values($agama_data)); ?>, backgroundColor: COLORS, borderWidth: 2 }]
        },
        options: opts_donut
    });

    // 8. Pekerjaan (horizontal bar)
    new Chart(document.getElementById('pekerjaanChart').getContext('2d'), {
        type: 'bar',
        data: {
            labels: <?php echo json_encode(array_keys($top_pekerjaan)); ?>,
            datasets: [{ label: 'Jumlah', data: <?php echo json_encode(array_values($top_pekerjaan)); ?>, backgroundColor: '#1abc9c', borderRadius: 4 }]
        },
        options: opts_bar_h
    });
})();
</script>