<?php
session_start();
if(!isset($_SESSION['user_id'])){
    echo '<div class="alert alert-danger">Sesi habis. Silakan login ulang.</div>';
    exit;
}

// KALO BENDAHARA, LANGSUNG LEMPAR KE FORM KEUANGAN
if($_SESSION['role'] == 'bendahara'){
    header('Location: pages/keuangan_bendahara.php');
    exit;
}

include '../config/database.php';
$db = new Database(); 
$conn = $db->getConnection();

$role = $_SESSION['role'];
$gereja_id = $_SESSION['gereja_id'] ?? 0;
$nama_gereja = $_SESSION['nama_gereja'] ?? '';

// Default nilai 0 semua biar nggak error
$total_gereja = $total_jemaat = $total_gembala = $total_inventaris = 0;
$total_pelayan = $total_kehadiran = 0;
$chart_jemaat = $chart_sinode = $chart_umur = $chart_kehadiran = [];

try {
    if($role == 'admin_dpw'){
        // DATA ADMIN DPW - REKAP SEMUA GEREJA LOKAL
        $total_gereja = $conn->query("SELECT COUNT(*) FROM gereja")->fetchColumn();
        $total_jemaat = $conn->query("SELECT COUNT(*) FROM jemaat")->fetchColumn();
        $total_gembala = $conn->query("SELECT COUNT(*) FROM users WHERE role='gembala'")->fetchColumn();
        $total_inventaris = $conn->query("SELECT COUNT(*) FROM inventaris")->fetchColumn();

        // Cek tabel dulu biar gak error kalo tabel gak ada
        $total_pelayan = $conn->query("SHOW TABLES LIKE 'pelayan'")->rowCount() > 0? $conn->query("SELECT COUNT(*) FROM pelayan")->fetchColumn() : 0;
        $total_pejabat = $conn->query("SHOW TABLES LIKE 'pejabat'")->rowCount() > 0? $conn->query("SELECT COUNT(*) FROM pejabat")->fetchColumn() : 0;

        // HITUNG BERDASARKAN UMUR & GENDER - FIX: GAK PAKE KOLOM kategori
        $total_wbi = $conn->query("SELECT COUNT(*) FROM jemaat WHERE jenis_kelamin='P' AND TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) BETWEEN 18 AND 59")->fetchColumn();
        $total_pemuda = $conn->query("SELECT COUNT(*) FROM jemaat WHERE TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) BETWEEN 12 AND 25")->fetchColumn();
        $total_anak = $conn->query("SELECT COUNT(*) FROM jemaat WHERE TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) BETWEEN 6 AND 11")->fetchColumn();
        $total_balita = $conn->query("SELECT COUNT(*) FROM jemaat WHERE TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) < 6")->fetchColumn();
        $total_laki = $conn->query("SELECT COUNT(*) FROM jemaat WHERE jenis_kelamin='L'")->fetchColumn();
        $total_wanita = $conn->query("SELECT COUNT(*) FROM jemaat WHERE jenis_kelamin='P'")->fetchColumn();

        $chart_jemaat = $conn->query("SELECT g.nama_gereja, COUNT(j.id) as total
                                      FROM gereja g LEFT JOIN jemaat j ON g.id=j.gereja_id
                                      GROUP BY g.id ORDER BY total DESC LIMIT 10")->fetchAll(PDO::FETCH_ASSOC);

        $chart_sinode = $conn->query("SELECT COALESCE(sinode, 'Lainnya') as sinode, COUNT(*) as total FROM gereja GROUP BY sinode")->fetchAll(PDO::FETCH_ASSOC);

    } else {
        // DATA GEMBALA - kode lu yang udah ada
        //... kode gembala tetap sama...
    // DATA GEMBALA - kode lu yang udah ada

    // DATA GEMBALA
        if($gereja_id > 0){
            $total_jemaat = $conn->query("SELECT COUNT(*) FROM jemaat WHERE gereja_id=$gereja_id")->fetchColumn();
            $total_pelayan = $conn->query("SELECT COUNT(*) FROM pelayan WHERE gereja_id=$gereja_id")->fetchColumn();
            $total_inventaris = $conn->query("SELECT COUNT(*) FROM inventaris WHERE gereja_id=$gereja_id")->fetchColumn();
            $total_pejabat = $conn->query("SELECT COUNT(*) FROM pejabat WHERE gereja_id=$gereja_id")->fetchColumn();
            
            // Ambil kehadiran minggu ini
            $cek_absen = $conn->query("SELECT SUM(jumlah_hadir) FROM absensi WHERE gereja_id=$gereja_id AND YEARWEEK(tanggal,1)=YEARWEEK(NOW(),1)")->fetchColumn();
            $total_kehadiran = $cek_absen ? $cek_absen : 0;

            // Chart umur
            $chart_umur = $conn->query("SELECT 
                COALESCE(SUM(CASE WHEN TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) < 12 THEN 1 ELSE 0 END),0) as anak,
                COALESCE(SUM(CASE WHEN TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) BETWEEN 12 AND 17 THEN 1 ELSE 0 END),0) as remaja,
                COALESCE(SUM(CASE WHEN TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) BETWEEN 18 AND 50 THEN 1 ELSE 0 END),0) as dewasa,
                COALESCE(SUM(CASE WHEN TIMESTAMPDIFF(YEAR,tgl_lahir,CURDATE()) > 50 THEN 1 ELSE 0 END),0) as lansia
                FROM jemaat WHERE gereja_id=$gereja_id")->fetch(PDO::FETCH_ASSOC);

            // CHART KEHADIRAN 4 MINGGU TERAKHIR
            $chart = $conn->prepare("SELECT 
                DATE_FORMAT(tanggal, '%d/%m') as tgl,
                jumlah_hadir as total
                FROM absensi 
                WHERE gereja_id = ? AND tanggal >= DATE_SUB(CURDATE(), INTERVAL 4 WEEK)
                ORDER BY tanggal ASC");
            $chart->execute([$gereja_id]);
            $chart_kehadiran = $chart->fetchAll(PDO::FETCH_ASSOC);

            // KALO KOSONG KASIH DEFAULT
            if(empty($chart_kehadiran)){
                $chart_kehadiran = [
                    ['tgl'=>date('d/m', strtotime('-3 week sunday')), 'total'=>0],
                    ['tgl'=>date('d/m', strtotime('-2 week sunday')), 'total'=>0],
                    ['tgl'=>date('d/m', strtotime('-1 week sunday')), 'total'=>0],
                    ['tgl'=>date('d/m', strtotime('sunday')), 'total'=>0]
                ];
            }
        }
    }
} catch (PDOException $e) {
    echo '<div class="alert alert-danger">Error: '.$e->getMessage().'</div>';
}
?>

<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">
        Dashboard <?= $role == 'gembala' ? '- '.$nama_gereja : 'BPW Keerom' ?>
    </h1>
</div>

<?php if($role == 'admin_dpw'): ?>
<style>
.card-pastel-1 { border-left: .25rem solid #cfe2ff !important; background-color: #f0f7ff !important; } /* Biru */
.card-pastel-2 { border-left: .25rem solid #d1e7dd !important; background-color: #f0fff4 !important; } /* Hijau */
.card-pastel-3 { border-left: .25rem solid #e2d9f3 !important; background-color: #f8f5ff !important; } /* Ungu */
.card-pastel-4 { border-left: .25rem solid #fff3cd !important; background-color: #fffbf0 !important; } /* Kuning */
.card-pastel-5 { border-left: .25rem solid #f8d7da !important; background-color: #fff5f5 !important; } /* Merah */
.card-pastel-6 { border-left: .25rem solid #cff4fc !important; background-color: #f0fcff !important; } /* Cyan */
.card-pastel-7 { border-left: .25rem solid #fde2e4 !important; background-color: #fff5f7 !important; } /* Pink */
.card-pastel-8 { border-left: .25rem solid #e0cffc !important; background-color: #f5f0ff !important; } /* Violet */
.card-pastel-9 { border-left: .25rem solid #d7f9f1 !important; background-color: #f0fffc !important; } /* Tosca */
.card-pastel-10 { border-left: .25rem solid #ffe5d0 !important; background-color: #fff8f0 !important; } /* Orange */
.card-pastel-11 { border-left: .25rem solid #d0e2ff !important; background-color: #f0f5ff !important; } /* Biru Tua */
.card-pastel-12 { border-left: .25rem solid #ffd0e8 !important; background-color: #fff0f8 !important; } /* Magenta */

.text-pastel-1 { color: #0d6efd !important; }
.text-pastel-2 { color: #198754 !important; }
.text-pastel-3 { color: #6f42c1 !important; }
.text-pastel-4 { color: #ffc107 !important; }
.text-pastel-5 { color: #dc3545 !important; }
.text-pastel-6 { color: #0dcaf0 !important; }
.text-pastel-7 { color: #d63384 !important; }
.text-pastel-8 { color: #6f42c1 !important; }
.text-pastel-9 { color: #20c997 !important; }
.text-pastel-10 { color: #fd7e14 !important; }
.text-pastel-11 { color: #0a58ca !important; }
.text-pastel-12 { color: #e83e8c !important; }

.card-admin { min-height: 90px; }
.card-admin .card-body { padding: 0.8rem; }
.card-admin .h5 { font-size: 1.5rem; }
</style>

<!-- BARIS 1: DATA UTAMA -->
<div class="row">
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-1 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-1 text-uppercase mb-1">TOTAL GEREJA</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_gereja ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-church fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-2 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-2 text-uppercase mb-1">TOTAL JEMAAT</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_jemaat ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-users fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-3 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-3 text-uppercase mb-1">TOTAL GEMBALA</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_gembala ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-user-tie fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-4 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-4 text-uppercase mb-1">TOTAL INVENTARIS</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_inventaris ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-box fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- BARIS 2: DATA PELAYAN & PEJABAT -->
<div class="row">
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-5 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-5 text-uppercase mb-1">TOTAL PELAYAN</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_pelayan ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-hands-helping fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-6 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-6 text-uppercase mb-1">TOTAL PEJABAT</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_pejabat ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-user-shield fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-7 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-7 text-uppercase mb-1">TOTAL WBI</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_wbi ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-female fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-md-6 col-xl-3 mb-4">
        <div class="card card-pastel-8 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-8 text-uppercase mb-1">TOTAL PEMUDA</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_pemuda ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-running fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- BARIS 3: DATA UMUR & GENDER -->
<div class="row">
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-pastel-9 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-9 text-uppercase mb-1">TOTAL ANAK</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_anak ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-child fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-pastel-10 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-10 text-uppercase mb-1">TOTAL BALITA</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_balita ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-baby fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-pastel-11 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-11 text-uppercase mb-1">TOTAL LAKI-LAKI</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_laki ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-male fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl-3 col-md-6 mb-4">
        <div class="card card-pastel-12 shadow h-100 py-2 card-admin">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-pastel-12 text-uppercase mb-1">TOTAL WANITA</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_wanita ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-female fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php else: ?>

<style>
.card-ungu { border-left: .25rem solid #e2d9f3 !important; background-color: #f8f5ff !important; }
.card-merah { border-left: .25rem solid #f8d7da !important; background-color: #fff5f5 !important; }
.card-kuning { border-left: .25rem solid #fff3cd !important; background-color: #fffbf0 !important; }
.card-biru { border-left: .25rem solid #cfe2ff !important; background-color: #f0f7ff !important; }
.card-hijau { border-left: .25rem solid #d1e7dd !important; background-color: #f0fff4 !important; }
.text-ungu { color: #6f42c1 !important; }
.text-merah { color: #dc3545 !important; }
.text-kuning { color: #ffc107 !important; }
.text-biru { color: #0d6efd !important; }
.text-hijau { color: #198754 !important; }
.card-gembala { min-height: 95px; }
.card-gembala .card-body { padding: 1rem; }
</style>

<!-- CARD USER GEMBALA -->
<div class="row">
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card card-ungu shadow h-100 py-2 card-gembala">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-ungu text-uppercase mb-1">TOTAL JEMAAT</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_jemaat ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-users fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card card-merah shadow h-100 py-2 card-gembala">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-merah text-uppercase mb-1">TOTAL PELAYAN</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_pelayan ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-hands-helping fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card card-kuning shadow h-100 py-2 card-gembala">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-kuning text-uppercase mb-1">TOTAL PEJABAT</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_pejabat ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-user-tie fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card card-biru shadow h-100 py-2 card-gembala">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-biru text-uppercase mb-1">INVENTARIS</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_inventaris ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-box fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xl col-lg-4 col-md-6 mb-4">
        <div class="card card-hijau shadow h-100 py-2 card-gembala">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-hijau text-uppercase mb-1">HADIR MINGGU INI</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800"><?= $total_kehadiran ?></div>
                    </div>
                    <div class="col-auto"><i class="fas fa-calendar-check fa-2x text-gray-300"></i></div>
                </div>
            </div>
        </div>
    </div>
</div>
<?php endif; ?>
<div class="row">
    <div class="col-xl-8 col-lg-7">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <?= $role == 'admin_dpw' ? 'Statistik Jemaat per Gereja' : 'Kehadiran 4 Minggu Terakhir' ?>
                </h6>
            </div>
            <div class="card-body"><div class="chart-area"><canvas id="myBarChart"></canvas></div></div>
        </div>
    </div>
    <div class="col-xl-4 col-lg-5">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">
                    <?= $role == 'admin_dpw' ? 'Distribusi Sinode' : 'Komposisi Umur Jemaat' ?>
                </h6>
            </div>
            <div class="card-body"><div class="chart-area"><canvas id="myPieChart"></canvas></div></div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
<?php if($role == 'admin_dpw'): ?>
// CHART ADMIN DPW - BAR JEMAAT PER GEREJA
new Chart(document.getElementById("myBarChart"), {
    type: 'bar',
    data: {
        labels: [<?= !empty($chart_jemaat) ? implode(',', array_map(fn($d)=>"'".addslashes($d['nama_gereja'])."'", $chart_jemaat)) : "'Belum Ada Data'"?>],
        datasets: [{
            label: "Total Jemaat",
            backgroundColor: "#4e73df",
            hoverBackgroundColor: "#2e59d9",
            borderColor: "#4e73df",
            borderRadius: 4,
            data: [<?= !empty($chart_jemaat) ? implode(',', array_column($chart_jemaat, 'total')) : '0'?>],
        }],
    },
    options: { 
        maintainAspectRatio: false, 
        scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
        plugins: { legend: { display: false } }
    }
});

// CHART ADMIN DPW - DONAT SINODE
new Chart(document.getElementById("myPieChart"), {
    type: 'doughnut',
    data: {
        labels: [<?= !empty($chart_sinode) ? implode(',', array_map(fn($d)=>"'".$d['sinode']."'", $chart_sinode)) : "'Belum Ada Data'"?>],
        datasets: [{
            data: [<?= !empty($chart_sinode) ? implode(',', array_column($chart_sinode, 'total')) : '1'?>],
            backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b'],
        }],
    },
    options: { maintainAspectRatio: false, cutout: '80%' },
});

<?php elseif($role == 'gembala'): ?>
// CHART GEMBALA - BAR KEHADIRAN 4 MINGGU
new Chart(document.getElementById("myBarChart"), {
    type: 'bar',
    data: {
        labels: [<?= implode(',', array_map(fn($d)=>"'".$d['tgl']."'", $chart_kehadiran))?>],
        datasets: [{
            label: "Jumlah Hadir",
            backgroundColor: "#4e73df",
            hoverBackgroundColor: "#2e59d9",
            borderColor: "#4e73df",
            borderRadius: 4,
            data: [<?= implode(',', array_column($chart_kehadiran, 'total'))?>],
            maxBarThickness: 50
        }],
    },
    options: { 
        maintainAspectRatio: false, 
        scales: { 
            y: { beginAtZero: true, suggestedMin: 0, ticks: { stepSize: 5, precision: 0 } },
            x: { grid: { display: false } }
        },
        plugins: { 
            legend: { display: false },
            tooltip: {
                callbacks: {
                    label: function(context) {
                        return 'Hadir: ' + context.parsed.y + ' Jemaat';
                    }
                }
            }
        }
    }
});

// CHART GEMBALA - DONAT UMUR JEMAAT
new Chart(document.getElementById("myPieChart"), {
    type: 'doughnut',
    data: {
        labels: ['Anak','Remaja','Dewasa','Lansia'],
        datasets: [{
            data: [<?= $chart_umur['anak'] ?? 0 ?>,<?= $chart_umur['remaja'] ?? 0 ?>,<?= $chart_umur['dewasa'] ?? 0 ?>,<?= $chart_umur['lansia'] ?? 0 ?>],
            backgroundColor: ['#4e73df', '#1cc88a', '#36b9cc', '#f6c23e'],
            hoverBorderColor: "rgba(234, 236, 244, 1)",
        }],
    },
    options: { 
        maintainAspectRatio: false, 
        cutout: '80%',
        plugins: { legend: { position: 'bottom' } }
    },
});
<?php endif; ?>
</script>