@extends('layouts.app')

@section('subtitle', 'Dashboard')

@push('css')
    <link rel="stylesheet" href="{{ asset('assets/css/dashboard.css') }}">
    <style>
        /* Override float-card top colored border for a clean design matching reference image */
        .float-card {
            border-top: none !important;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
            border-radius: 16px !important;
        }

        /* Status box stylings */
        .status-box {
            border-radius: 8px;
            transition: all 0.2s ease-in-out;
            text-decoration: none !important;
        }

        .status-box:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

        /* Recent submissions list */
        .submission-item {
            border-bottom: 1px solid #f1f5f9;
            transition: background-color 0.2s ease;
        }

        .submission-item:last-child {
            border-bottom: none;
        }

        .submission-item:hover {
            background-color: #f8fafc;
        }
    </style>
@endpush

@section('content_body')
    <!-- Global Hero Section -->
    <x-hero-section title="Ya'ahowu, {{ Auth::user()->name ?? 'Admin' }} 👋"
        subtitle="Sistem Informasi Administrasi Desa Siofa Banua">
        <x-slot name="actions">
            <div class="d-flex align-items-center flex-wrap" style="gap: 12px;">
                <!-- Date Widget Card -->
                <div class="hero-widget-card">
                    <i class="far fa-calendar-alt fa-lg mr-3 text-success"
                        style="color: #0F766E !important; font-size: 1.2rem;"></i>
                    <div style="line-height: 1.2;">
                        <div class="font-weight-bold text-dark text-sm" style="font-size: 0.85rem;">
                            {{ \Carbon\Carbon::now()->translatedFormat('d F Y') }}</div>
                        <small class="text-muted text-xs d-block"
                            style="margin-top: 1px;">{{ \Carbon\Carbon::now()->translatedFormat('l') }}</small>
                    </div>
                </div>
                <!-- Time Widget Card -->
                <div class="hero-widget-card">
                    <i class="far fa-clock fa-lg mr-3 text-success"
                        style="color: #0F766E !important; font-size: 1.2rem;"></i>
                    <div style="line-height: 1.2;">
                        <div class="font-weight-bold text-dark text-sm" id="realtime-clock" style="font-size: 0.85rem;">
                            00:00</div>
                        <small class="text-muted text-xs d-block" style="margin-top: 1px;">WIB</small>
                    </div>
                </div>
            </div>
        </x-slot>
    </x-hero-section>

    <!-- Floating Statistics Cards Container -->
    <div class="px-3" style="margin-top: -65px; position: relative; z-index: 10;">
        <div class="row mb-4">
            <!-- Total Penduduk -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card title="Total Penduduk" value="{{ number_format($totalPenduduk, 0, ',', '.') }} Jiwa"
                    icon="fas fa-users" color="primary" description="Total warga terdaftar" />
            </div>
            <!-- Total KK -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card title="Total KK" value="{{ number_format($totalKK, 0, ',', '.') }} KK" icon="fas fa-home"
                    color="info" description="Total kartu keluarga" />
            </div>
            <!-- Total Pengajuan -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card title="Total Pengajuan" value="{{ number_format($totalPengajuan, 0, ',', '.') }} Surat"
                    icon="fas fa-file-invoice" color="warning" description="Total pengajuan surat" />
            </div>
            <!-- Total Arsip -->
            <div class="col-xl-3 col-lg-6 col-md-6 mb-4">
                <x-statistic-card title="Total Arsip" value="{{ number_format($totalSelesai, 0, ',', '.') }} Arsip"
                    icon="fas fa-archive" color="success" description="Total surat selesai" />
            </div>
        </div>

        <!-- Row 2: Chart & Informasi Desa -->
        <div class="row mb-4 d-flex align-items-stretch">
            <!-- Left: Chart Card Component -->
            <div class="col-lg-8 mb-4 mb-lg-0 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 px-4">
                        <div class="d-flex justify-content-between align-items-center w-100">
                            <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem; float: none;">
                                <i class="fas fa-chart-line mr-2 text-primary" style="color: #0F766E !important;"></i>Grafik
                                Pengajuan Surat Per Bulan
                            </h5>
                            <!-- Custom styled Dropdown Select with calendar icon on its left, pushed to the far right -->
                            <div class="position-relative" style="width: 145px;">
                                <i class="far fa-calendar-alt position-absolute"
                                    style="left: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.85rem; color: #64748b; z-index: 10;"></i>
                                <select
                                    class="form-control form-control-sm font-weight-bold text-secondary border-0 bg-light"
                                    style="width: 100%; border-radius: 8px; height: 32px; padding-left: 32px; padding-right: 24px; font-size: 0.85rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; color: #475569 !important;">
                                    <option>Tahun 2026</option>
                                    <option>Tahun 2025</option>
                                </select>
                                <i class="fas fa-chevron-down position-absolute"
                                    style="right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; font-size: 0.7rem; color: #64748b; z-index: 10;"></i>
                            </div>
                        </div>
                    </div>
                    <div class="card-body px-4 pb-4">
                        <div style="height: 290px; position: relative;">
                            <canvas id="pengajuanChart" style="height: 100%; width: 100%;"></canvas>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Right: Informasi Desa (Ringkas) -->
            <div class="col-lg-4 mb-4 mb-lg-0 d-flex flex-column">
                @php
                    $profile = \Schema::hasTable('village_profiles') ? \DB::table('village_profiles')->first() : null;
                    $logoPath =
                        $profile && isset($profile->logo) && \Storage::disk('public')->exists($profile->logo)
                            ? asset('storage/' . $profile->logo)
                            : asset('images/logo-nias-utara.jpg');
                    $namaDesa = $profile && isset($profile->village_name) ? $profile->village_name : 'Desa Siofa Banua';
                    $kecamatan = $profile && isset($profile->district_name) ? $profile->district_name : 'Hiliserangkai';
                    $kabupaten = $profile && isset($profile->regency_name) ? $profile->regency_name : 'Nias Utara';
                    $provinsi = $profile && isset($profile->province_name) ? $profile->province_name : 'Sumatera Utara';

                    $kadesName = $profile && isset($profile->signer_name) ? $profile->signer_name : 'Ama Gea';
                    $periodeJabatan = '2024 - 2030';
                    $kodeDesa = '1275042002';
                @endphp
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 px-4">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            <i class="fas fa-info-circle mr-2 text-primary" style="color: #3b82f6 !important;"></i>Informasi
                            Desa
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4 pt-1 d-flex flex-column justify-content-between">
                        <div class="d-flex align-items-center mb-3">
                            <img src="{{ $logoPath }}" alt="Logo Kabupaten" class="img-fluid"
                                style="max-height: 52px; max-width: 52px; object-fit: contain;">
                            <div class="ml-3">
                                <h6 class="font-weight-bold text-dark mb-0" style="font-size: 1.05rem;">{{ $namaDesa }}
                                </h6>
                                <div class="text-muted text-xs font-weight-medium"
                                    style="line-height: 1.3; margin-top: 2px;">
                                    Kec. {{ $kecamatan }}, Kab. {{ $kabupaten }}<br>
                                    Prov. {{ $provinsi }}
                                </div>
                            </div>
                        </div>

                        <table class="table table-sm table-borderless mb-0 text-sm" style="color: #334155;">
                            <tr style="border-top: 1px solid #f1f5f9;">
                                <td class="text-muted font-weight-medium pl-0 py-2">Kepala Desa</td>
                                <td class="text-dark font-weight-bold text-right pr-0 py-2">{{ $kadesName }}</td>
                            </tr>
                            <tr style="border-top: 1px solid #f1f5f9;">
                                <td class="text-muted font-weight-medium pl-0 py-2">Periode Jabatan</td>
                                <td class="text-dark font-weight-bold text-right pr-0 py-2">{{ $periodeJabatan }}</td>
                            </tr>
                            <tr style="border-top: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9;">
                                <td class="text-muted font-weight-medium pl-0 py-2">Kode Desa</td>
                                <td class="text-right pr-0 py-2" style="color: #16a34a; font-weight: 800 !important;">
                                    {{ $kodeDesa }}</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Row 3: Demographics, Statuses & Recent Submissions -->
        <div class="row mb-4 d-flex align-items-stretch">
            <!-- 1. Status Pengajuan Surat -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-4 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 px-4">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            Status Pengajuan Surat
                        </h5>
                    </div>
                    <div class="card-body px-3 pb-4 pt-1 d-flex align-items-center">
                        <div class="d-flex w-100" style="gap: 8px;">
                            <!-- Menunggu -->
                            <div class="flex-fill text-center p-2 d-flex flex-column align-items-center justify-content-center"
                                style="background-color: #FFFBEB; border-radius: 8px; min-width: 0; min-height: 120px;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center text-warning mb-2"
                                    style="width: 32px; height: 32px; background-color: rgba(245, 158, 11, 0.15);">
                                    <i class="fas fa-hourglass-half" style="font-size: 0.85rem;"></i>
                                </div>
                                <small class="text-muted d-block text-xs" style="font-size: 0.72rem;">Menunggu</small>
                                <div class="font-weight-bold text-dark my-1" style="font-size: 1.3rem; line-height: 1;">
                                    {{ $totalDiajukan }}</div>
                                <small class="text-muted text-xs"
                                    style="font-size: 0.65rem;">({{ $totalPengajuan > 0 ? round(($totalDiajukan / $totalPengajuan) * 100, 1) : 0 }}%)</small>
                            </div>
                            <!-- Disetujui -->
                            <div class="flex-fill text-center p-2 d-flex flex-column align-items-center justify-content-center"
                                style="background-color: #ECFDF5; border-radius: 8px; min-width: 0; min-height: 120px;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center text-success mb-2"
                                    style="width: 32px; height: 32px; background-color: rgba(16, 185, 129, 0.15);">
                                    <i class="fas fa-check" style="font-size: 0.85rem;"></i>
                                </div>
                                <small class="text-muted d-block text-xs" style="font-size: 0.72rem;">Disetujui</small>
                                <div class="font-weight-bold text-dark my-1" style="font-size: 1.3rem; line-height: 1;">
                                    {{ $totalDisetujui + $totalSelesai }}</div>
                                <small class="text-muted text-xs"
                                    style="font-size: 0.65rem;">({{ $totalPengajuan > 0 ? round((($totalDisetujui + $totalSelesai) / $totalPengajuan) * 100, 1) : 0 }}%)</small>
                            </div>
                            <!-- Ditolak -->
                            <div class="flex-fill text-center p-2 d-flex flex-column align-items-center justify-content-center"
                                style="background-color: #FEF2F2; border-radius: 8px; min-width: 0; min-height: 120px;">
                                <div class="rounded-circle d-flex align-items-center justify-content-center text-danger mb-2"
                                    style="width: 32px; height: 32px; background-color: rgba(239, 68, 68, 0.15);">
                                    <i class="fas fa-times" style="font-size: 0.85rem;"></i>
                                </div>
                                <small class="text-muted d-block text-xs" style="font-size: 0.72rem;">Ditolak</small>
                                <div class="font-weight-bold text-dark my-1" style="font-size: 1.3rem; line-height: 1;">
                                    {{ $totalDitolak }}</div>
                                <small class="text-muted text-xs"
                                    style="font-size: 0.65rem;">({{ $totalPengajuan > 0 ? round(($totalDitolak / $totalPengajuan) * 100, 1) : 0 }}%)</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 2. Demografi Jenis Kelamin -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-4 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 px-4">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            Demografi Jenis Kelamin
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4 pt-1 d-flex align-items-center justify-content-between">
                        <div style="width: 90px; height: 90px; position: relative; flex-shrink: 0;">
                            <canvas id="genderChart"></canvas>
                        </div>
                        <div class="flex-grow-1 ml-3" style="font-size: 0.78rem;">
                            <div class="d-flex flex-column" style="gap: 10px;">
                                <div>
                                    <div class="d-flex align-items-center mb-1">
                                        <span class="rounded-circle mr-2"
                                            style="width: 8px; height: 8px; background-color: #3B82F6; display: inline-block;"></span>
                                        <span class="text-secondary font-weight-medium">Laki-laki</span>
                                    </div>
                                    <div class="font-weight-bold text-dark" style="padding-left: 14px;">
                                        {{ number_format($totalLakiLaki, 0, ',', '.') }} Jiwa <small
                                            class="text-muted">({{ $totalPenduduk > 0 ? round(($totalLakiLaki / $totalPenduduk) * 100, 1) : 0 }}%)</small>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex align-items-center mb-1">
                                        <span class="rounded-circle mr-2"
                                            style="width: 8px; height: 8px; background-color: #EC4899; display: inline-block;"></span>
                                        <span class="text-secondary font-weight-medium">Perempuan</span>
                                    </div>
                                    <div class="font-weight-bold text-dark" style="padding-left: 14px;">
                                        {{ number_format($totalPerempuan, 0, ',', '.') }} Jiwa <small
                                            class="text-muted">({{ $totalPenduduk > 0 ? round(($totalPerempuan / $totalPenduduk) * 100, 1) : 0 }}%)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 3. Demografi Agama -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-4 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 px-4">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            Demografi Agama
                        </h5>
                    </div>
                    <div class="card-body px-4 pb-4 pt-1 d-flex align-items-center justify-content-between">
                        <div style="width: 90px; height: 90px; position: relative; flex-shrink: 0;">
                            <canvas id="religionChart"></canvas>
                        </div>
                        <div class="flex-grow-1 ml-3" style="font-size: 0.78rem;">
                            <div class="d-flex flex-column" style="gap: 8px;">
                                <div>
                                    <div class="d-flex align-items-center mb-0.5">
                                        <span class="rounded-circle mr-2"
                                            style="width: 8px; height: 8px; background-color: #10B981; display: inline-block;"></span>
                                        <span class="text-secondary font-weight-medium">Kristen</span>
                                    </div>
                                    <div class="font-weight-bold text-dark" style="padding-left: 14px;">
                                        {{ $agamaList['Kristen'] }} Jiwa <small
                                            class="text-muted">({{ $totalPenduduk > 0 ? round(($agamaList['Kristen'] / $totalPenduduk) * 100, 1) : 0 }}%)</small>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex align-items-center mb-0.5">
                                        <span class="rounded-circle mr-2"
                                            style="width: 8px; height: 8px; background-color: #3B82F6; display: inline-block;"></span>
                                        <span class="text-secondary font-weight-medium">Katolik</span>
                                    </div>
                                    <div class="font-weight-bold text-dark" style="padding-left: 14px;">
                                        {{ $agamaList['Katolik'] }} Jiwa <small
                                            class="text-muted">({{ $totalPenduduk > 0 ? round(($agamaList['Katolik'] / $totalPenduduk) * 100, 1) : 0 }}%)</small>
                                    </div>
                                </div>
                                <div>
                                    <div class="d-flex align-items-center mb-0.5">
                                        <span class="rounded-circle mr-2"
                                            style="width: 8px; height: 8px; background-color: #F59E0B; display: inline-block;"></span>
                                        <span class="text-secondary font-weight-medium">Islam</span>
                                    </div>
                                    <div class="font-weight-bold text-dark" style="padding-left: 14px;">
                                        {{ $agamaList['Islam'] }} Jiwa <small
                                            class="text-muted">({{ $totalPenduduk > 0 ? round(($agamaList['Islam'] / $totalPenduduk) * 100, 1) : 0 }}%)</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 4. Pengajuan Terbaru -->
            <div class="col-xl-3 col-lg-6 col-md-6 col-12 mb-4 d-flex flex-column">
                <div class="card border-0 shadow-sm h-100" style="border-radius: 12px; overflow: hidden;">
                    <div class="card-header bg-white py-3 border-0 d-flex justify-content-between align-items-center px-4">
                        <h5 class="card-title font-weight-bold text-dark mb-0" style="font-size: 1.1rem;">
                            Pengajuan Terbaru
                        </h5>
                        <a href="{{ route('pengajuan-surat.index') }}"
                            class="font-weight-bold d-flex align-items-center text-xs"
                            style="text-decoration: none; color: #0F766E !important; font-size: 0.78rem;">
                            Lihat Semua <i class="fas fa-arrow-right ml-1" style="font-size: 0.7rem;"></i>
                        </a>
                    </div>
                    <div class="card-body px-3 pb-3 pt-0" style="overflow-y: auto; max-height: 290px;">
                        <div class="d-flex flex-column" style="gap: 4px;">
                            @forelse($pengajuanTerbaru->take(5) as $item)
                                @php
                                    $isApproved = in_array($item->status, ['disetujui', 'selesai']);
                                    $isRejected = $item->status === 'ditolak';
                                    $statusLabel = 'Menunggu';
                                    $badgeColor = '#F59E0B'; // orange
                                    $badgeBg = 'rgba(245, 158, 11, 0.1)';
                                    $iconBg = 'rgba(245, 158, 11, 0.15)';
                                    $iconColor = '#F59E0B';

                                    if ($isApproved) {
                                        $statusLabel = 'Disetujui';
                                        $badgeColor = '#10B981'; // green
                                        $badgeBg = 'rgba(16, 185, 129, 0.1)';
                                        $iconBg = 'rgba(16, 185, 129, 0.15)';
                                        $iconColor = '#10B981';
                                    } elseif ($isRejected) {
                                        $statusLabel = 'Ditolak';
                                        $badgeColor = '#EF4444'; // red
                                        $badgeBg = 'rgba(239, 68, 68, 0.1)';
                                        $iconBg = 'rgba(239, 68, 68, 0.15)';
                                        $iconColor = '#EF4444';
                                    }
                                @endphp
                                <div class="d-flex align-items-center justify-content-between p-2 submission-item"
                                    style="gap: 8px;">
                                    <div class="d-flex align-items-center min-width-0">
                                        <div class="rounded-circle d-flex align-items-center justify-content-center flex-shrink-0"
                                            style="width: 36px; height: 36px; background-color: {{ $iconBg }}; color: {{ $iconColor }};">
                                            <i class="fas fa-file-alt" style="font-size: 0.95rem;"></i>
                                        </div>
                                        <div class="ml-2.5 min-width-0" style="margin-left: 10px;">
                                            <div class="font-weight-bold text-dark text-truncate"
                                                style="font-size: 0.78rem; line-height: 1.2;">
                                                {{ $item->jenisSurat->nama_surat ?? 'Pengajuan Surat' }}
                                            </div>
                                            <div class="text-muted text-truncate"
                                                style="font-size: 0.68rem; line-height: 1.2; margin-top: 2px;">
                                                {{ $item->suratCetak->nomor_surat ?? $item->nomor_pengajuan }}
                                            </div>
                                            <div class="text-muted text-truncate"
                                                style="font-size: 0.68rem; line-height: 1.2;">
                                                {{ $item->penduduk->nama_lengkap ?? 'Warga' }}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="text-right flex-shrink-0">
                                        <span class="badge border-0 font-weight-bold"
                                            style="font-size: 0.65rem; padding: 4px 8px; border-radius: 4px; color: {{ $badgeColor }}; background-color: {{ $badgeBg }};">
                                            {{ $statusLabel }}
                                        </span>
                                        <small class="text-muted d-block mt-1" style="font-size: 0.65rem;">
                                            {{ $item->created_at->diffForHumans() }}
                                        </small>
                                    </div>
                                </div>
                            @empty
                                <div class="text-center py-4 text-muted text-xs">Tidak ada pengajuan terbaru</div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
@stop

@section('css')
    @parent
    <style>
        .timeline-item::after {
            content: '';
            display: table;
            clear: both;
        }
    </style>
@stop

@section('js')
    @parent
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

    <script>
        $(function() {
            // Real-time Clock
            function updateClock() {
                const now = new Date();
                const hours = String(now.getHours()).padStart(2, '0');
                const minutes = String(now.getMinutes()).padStart(2, '0');
                $('#realtime-clock').text(hours + ':' + minutes);
            }
            setInterval(updateClock, 1000);
            updateClock();

            // 1. Line Chart: Grafik Pengajuan Surat Bulanan
            const pengajuanCtx = document.getElementById('pengajuanChart').getContext('2d');

            const tealGradient = pengajuanCtx.createLinearGradient(0, 0, 0, 240);
            tealGradient.addColorStop(0, 'rgba(15, 118, 110, 0.35)');
            tealGradient.addColorStop(1, 'rgba(15, 118, 110, 0.01)');

            new Chart(pengajuanCtx, {
                type: 'line',
                data: {
                    labels: @json($bulan),
                    datasets: [{
                        label: 'Pengajuan Surat',
                        data: @json($jumlahPengajuan),
                        borderColor: '#0F766E',
                        borderWidth: 3,
                        backgroundColor: tealGradient,
                        fill: true,
                        tension: 0.4,
                        pointBackgroundColor: '#0F766E',
                        pointBorderColor: '#ffffff',
                        pointBorderWidth: 2,
                        pointRadius: 5,
                        pointHoverRadius: 7
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#f3f4f6'
                            },
                            ticks: {
                                color: '#9ca3af'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                color: '#9ca3af'
                            }
                        }
                    },
                    plugins: {
                        legend: {
                            display: false
                        }
                    }
                }
            });

            // 2. Donut Chart: Jenis Kelamin
            const genderCtx = document.getElementById('genderChart').getContext('2d');
            new Chart(genderCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Laki-laki', 'Perempuan'],
                    datasets: [{
                        data: [{{ $totalLakiLaki }}, {{ $totalPerempuan }}],
                        backgroundColor: ['#3B82F6', '#EC4899'],
                        borderWidth: 2,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    cutout: '70%'
                }
            });

            // 3. Donut Chart: Agama (Simplified to Kristen, Katolik, Islam)
            const religionCtx = document.getElementById('religionChart').getContext('2d');
            new Chart(religionCtx, {
                type: 'doughnut',
                data: {
                    labels: ['Kristen', 'Katolik', 'Islam'],
                    datasets: [{
                        data: [
                            {{ $agamaList['Kristen'] }},
                            {{ $agamaList['Katolik'] }},
                            {{ $agamaList['Islam'] }}
                        ],
                        backgroundColor: ['#10B981', '#3B82F6', '#F59E0B'],
                        borderWidth: 2,
                        hoverOffset: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    cutout: '70%'
                }
            });
        });
    </script>
@stop