@extends('layouts.app')

@section('title', 'Dashboard')

@section('content')
<div class="nk-content nk-content-fluid">
    <div class="container-xl wide-lg">
        <div class="nk-content-body">

            <div class="nk-block-head nk-block-head-sm mb-4">
                <div class="nk-block-between">
                    <div class="nk-block-head-content">
                        <h3 class="nk-block-title page-title">Dashboard Overview</h3>
                        <div class="nk-block-des text-soft">
                            <p>Selamat datang, <strong>{{ Auth::user()->name }}</strong>. Berikut ringkasan keuangan tahun <strong>{{ $tahunLabel }}</strong>.</p>
                        </div>
                    </div>
                    <div class="nk-block-head-content">
                        <div class="toggle-wrap nk-block-tools-toggle">
                            <a href="#" class="btn btn-icon btn-trigger toggle-expand mr-n1" data-target="pageMenu"><em class="icon ni ni-menu-alt-r"></em></a>
                            <div class="toggle-expand-content" data-content="pageMenu">
                                <ul class="nk-block-tools g-3">
                                    <li>
                                        <div class="drodown">
                                            <a href="#" class="dropdown-toggle btn btn-white btn-dim btn-outline-light" data-toggle="dropdown">
                                                <em class="d-none d-sm-inline icon ni ni-calendar-date"></em>
                                                <span><span class="d-none d-md-inline">Tahun</span> {{ $tahunLabel }}</span>
                                                <em class="dd-indc icon ni ni-chevron-right"></em>
                                            </a>
                                            <div class="dropdown-menu dropdown-menu-right">
                                                <ul class="link-list-opt no-bdr">
                                                    @foreach ($tahunAjaranList as $ta)
                                                    <li><a href="{{ route('dashboard', ['tahun' => $ta]) }}"><span>Tahun {{ $ta }}</span></a></li>
                                                    @endforeach
                                                </ul>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Filter Tahun --}}
            <div class="nk-block">
                <div class="card card-bordered mb-4">
                    <div class="card-inner">
                        <form method="GET" action="{{ route('dashboard') }}">
                            <div class="row g-3 align-items-end">
                                <div class="col-md-4">
                                    <div class="form-group">
                                        <label class="form-label" for="tahun">Tahun</label>
                                        <div class="form-control-wrap">
                                            <select class="form-select js-select2" id="tahun" name="tahun">
                                                @foreach ($tahunAjaranList as $ta)
                                                    <option value="{{ $ta }}" {{ $tahunLabel == $ta ? 'selected' : '' }}>
                                                        {{ $ta }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2">
                                    <button type="submit" class="btn btn-primary">
                                        <em class="icon ni ni-search"></em>
                                        <span>Tampilkan</span>
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

              {{-- ROW 1: SUMMARY METRICS (Colorful Gradient Cards) --}}
            <div class="row g-gs mb-4">
                {{-- Metric 1: Saldo Kas Akhir (Blue Gradient) --}}
                <div class="col-md-6 col-xxl-3">
                    <div class="card card-gradient card-gradient-blue h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start justify-content-between mb-2">
                                <div class="card-title">
                                    <h6 class="subtitle text-white-50">Saldo Kas & Bank</h6>
                                </div>
                            </div>
                            <div class="card-amount mb-1">
                                <span class="amount text-white">
                                    {{ number_format($dashboardData['kas_akhir_tahun_ini'], 0, ',', '.') }}
                                </span>
                            </div>
                            <div class="text-white-50 small">
                                Per {{ $dashboardData['tanggal_cutoff_label'] ?? \Carbon\Carbon::now()->translatedFormat('d M Y') }}
                            </div>
                            @php
                                $saldoAwal = $dashboardData['saldo_awal_periode'] ?? 0;
                                $pergerakan = $dashboardData['kas_akhir_tahun_ini'] - $saldoAwal;
                            @endphp
                            @if($saldoAwal > 0)
                            <div class="mt-2 pt-2" style="border-top: 1px solid rgba(255,255,255,0.2); font-size: 0.72rem; line-height: 1.6;">
                                <div class="d-flex justify-content-between text-white-50">
                                    <span>Saldo Awal:</span>
                                    <span class="text-white-75">{{ number_format($saldoAwal, 0, ',', '.') }}</span>
                                </div>
                                <div class="d-flex justify-content-between text-white-50">
                                    <span>Pergerakan Tahun Ini:</span>
                                    <span class="{{ $pergerakan >= 0 ? 'text-success' : 'text-danger' }}">
                                        {{ $pergerakan >= 0 ? '+' : '' }}{{ number_format($pergerakan, 0, ',', '.') }}
                                    </span>
                                </div>
                            </div>
                            @endif
                            <div class="card-bg-icon">
                                <em class="icon ni ni-wallet-fill"></em>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Metric 2: Total Penerimaan (Green Gradient) --}}
                <div class="col-md-6 col-xxl-3">
                    <div class="card card-gradient card-gradient-green h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start justify-content-between mb-2">
                                <div class="card-title">
                                    <h6 class="subtitle text-white-50">Total Penerimaan</h6>
                                </div>
                            </div>
                            <div class="card-amount mb-1">
                                <span class="amount text-white">
                                    {{ number_format($dashboardData['total_penerimaan_tahun_ini'], 0, ',', '.') }}
                                </span>
                            </div>
                            <div class="text-white-50 small">
                                <span class="{{ $dashboardData['perubahan_penerimaan_tahun_lalu'] >= 0 ? 'text-white' : 'text-danger' }}">
                                    <em class="icon ni ni-arrow-long-{{ $dashboardData['perubahan_penerimaan_tahun_lalu'] >= 0 ? 'up' : 'down' }}"></em>
                                    {{ number_format(abs($dashboardData['prosentase_penerimaan_tahun_lalu']), 1, ',', '.') }}%
                                </span>
                                vs Tahun Lalu
                            </div>
                            <div class="card-bg-icon">
                                <em class="icon ni ni-trend-up"></em>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Metric 3: Total Pengeluaran (Red/Pink Gradient) --}}
                <div class="col-md-6 col-xxl-3">
                    <div class="card card-gradient card-gradient-red h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start justify-content-between mb-2">
                                <div class="card-title">
                                    <h6 class="subtitle text-white-50">Total Pengeluaran</h6>
                                </div>
                            </div>
                            <div class="card-amount mb-1">
                                <span class="amount text-white">
                                    {{ number_format($dashboardData['total_pengeluaran_tahun_ini'], 0, ',', '.') }}
                                </span>
                                <div class="text-white-50" style="font-size: 0.85rem; margin-top: 5px;">
                                    Diajukan: {{ number_format($dashboardData['total_pengeluaran_diajukan_tahun_ini'] ?? 0, 0, ',', '.') }}
                                </div>
                            </div>
                            <div class="text-white-50 small">
                                <span class="{{ $dashboardData['perubahan_pengeluaran_tahun_lalu'] >= 0 ? 'text-white' : 'text-success' }}">
                                    <em class="icon ni ni-arrow-long-{{ $dashboardData['perubahan_pengeluaran_tahun_lalu'] >= 0 ? 'up' : 'down' }}"></em>
                                    {{ number_format(abs($dashboardData['prosentase_pengeluaran_tahun_lalu']), 1, ',', '.') }}%
                                </span>
                                vs Tahun Lalu
                            </div>
                            <div class="card-bg-icon">
                                <em class="icon ni ni-trend-down"></em>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Metric 4: Kenaikan Bersih (Orange Gradient) --}}
                <div class="col-md-6 col-xxl-3">
                    <div class="card card-gradient card-gradient-orange h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start justify-content-between mb-2">
                                <div class="card-title">
                                    <h6 class="subtitle text-white-50">Surplus/Defisit</h6>
                                </div>
                            </div>
                            <div class="card-amount mb-1">
                                <span class="amount text-white">
                                    {{ number_format($dashboardData['kenaikan_bersih_kas_tahun_ini'], 0, ',', '.') }}
                                </span>
                            </div>
                            <div class="text-white-50 small">
                                <span class="{{ $dashboardData['perubahan_kas_bersih_tahun_lalu'] >= 0 ? 'text-white' : 'text-danger' }}">
                                    <em class="icon ni ni-arrow-long-{{ $dashboardData['perubahan_kas_bersih_tahun_lalu'] >= 0 ? 'up' : 'down' }}"></em>
                                    {{ number_format(abs($dashboardData['prosentase_kas_bersih_tahun_lalu']), 1, ',', '.') }}%
                                </span>
                                vs Tahun Lalu
                            </div>
                            <div class="card-bg-icon">
                                <em class="icon ni ni-activity"></em>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {{-- ROW 2: CHARTS & DETAILS --}}
            <div class="row g-gs">
                
                {{-- LEFT COLUMN: Charts --}}
                <div class="col-xxl-8">
                    {{-- Chart: Arus Kas Bulanan --}}
                    <div class="card card-bordered h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start mb-3">
                                <div class="card-title">
                                    <h6 class="title">Tren Arus Kas Bulanan</h6>
                                    <p class="text-soft mb-0">Perbandingan penerimaan dan pengeluaran per bulan.</p>
                                </div>
                                <div class="card-tools">
                                    <button class="btn btn-sm btn-outline-light export-chart-btn" data-chart="fundFlowMonthlyChart" data-name="tren_bulanan">
                                        <em class="icon ni ni-download-cloud"></em>
                                    </button>
                                </div>
                            </div>
                            <div class="nk-ck-sm" style="height: 300px;">
                                <canvas id="fundFlowMonthlyChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- RIGHT COLUMN: Breakdown --}}
                <div class="col-xxl-4">
                     {{-- Rincian Saldo Kas --}}
                    <div class="card card-bordered h-100">
                        <div class="card-inner">
                             <div class="card-title-group align-start mb-3">
                                <div class="card-title">
                                    <h6 class="title">Rincian Saldo Kas per Unit</h6>
                                </div>
                            </div>
                             <div class="list-group list-group-flush" style="max-height: 380px; overflow-y:auto;">
                                @php $grandTotal = 0; @endphp
                                @forelse($dashboardData['saldo_kas_per_unit_detail'] as $unit => $akunList)
                                    @php
                                        $subtotalUnit = array_sum($akunList);
                                        $grandTotal += $subtotalUnit;
                                    @endphp
                                    <div class="list-group-item bg-light fw-bold text-uppercase small text-muted">
                                        {{ $unit }}
                                    </div>
                                    @foreach($akunList as $akun => $saldo)
                                        <div class="list-group-item d-flex justify-content-between align-items-center ps-4 py-2">
                                            <span class="small">{{ $akun }}</span>
                                            <span class="fw-bold fs-12px">
                                                {{ number_format($saldo, 0, ',', '.') }}
                                            </span>
                                        </div>
                                    @endforeach
                                    <div class="list-group-item d-flex justify-content-between align-items-center ps-4 py-2 bg-lighter">
                                        <span class="small fw-bold">Total {{ $unit }}</span>
                                        <span class="fw-bold fs-12px text-dark">{{ number_format($subtotalUnit, 0, ',', '.') }}</span>
                                    </div>
                                @empty
                                    <div class="list-group-item text-center text-muted">Tidak ada data.</div>
                                @endforelse
                            </div>
                        </div>
                         <div class="card-inner border-top bg-light">
                            <div class="d-flex justify-content-between align-items-center">
                                <span class="fw-bold">Grand Total</span>
                                <span class="fw-bold text-primary amount">Rp {{ number_format($grandTotal, 0, ',', '.') }}</span>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- BOTTOM ROW: Additional Charts --}}
                <div class="col-md-6 col-xxl-6">
                    <div class="card card-bordered h-100">
                        <div class="card-inner">
                            <div class="card-title-group align-start mb-3">
                                <div class="card-title">
                                    <h6 class="title">Sumber Penerimaan Dana</h6>
                                </div>
                                <div class="card-tools">
                                     <button class="btn btn-sm btn-outline-light export-chart-btn" data-chart="incomeSourceChart" data-name="sumber_penerimaan">
                                        <em class="icon ni ni-download-cloud"></em>
                                    </button>
                                </div>
                            </div>
                             <div style="height: 250px;">
                                <canvas id="incomeSourceChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 col-xxl-6">
                    <div class="card card-bordered h-100">
                         <div class="card-inner">
                            <div class="card-title-group align-start mb-3">
                                <div class="card-title">
                                    <h6 class="title">Realisasi Anggaran per Unit</h6>
                                </div>
                                <div class="card-tools">
                                     <button class="btn btn-sm btn-outline-light export-chart-btn" data-chart="unitBudgetChart" data-name="realisasi_anggaran">
                                        <em class="icon ni ni-download-cloud"></em>
                                    </button>
                                </div>
                            </div>
                            <div style="height: 250px;">
                                <canvas id="unitBudgetChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Full-width: Penerimaan vs Pengeluaran per Unit --}}
                <div class="col-12">
                    <div class="card card-bordered">
                        <div class="card-inner">
                            <div class="card-title-group align-start mb-3">
                                <div class="card-title">
                                    <h6 class="title">Penerimaan vs Pengeluaran per Unit</h6>
                                    <p class="text-soft mb-0">Perbandingan total penerimaan dan pengeluaran (realisasi) tiap unit tahun <strong>{{ $tahunDashboard }}</strong>.</p>
                                </div>
                                <div class="card-tools">
                                    <button class="btn btn-sm btn-outline-light export-chart-btn" data-chart="incomeExpensePerUnitChart" data-name="penerimaan_vs_pengeluaran_unit">
                                        <em class="icon ni ni-download-cloud"></em>
                                    </button>
                                </div>
                            </div>
                            <div style="height: 320px;">
                                <canvas id="incomeExpensePerUnitChart"></canvas>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>

    function generateColors(count) {
        const baseColors = [
        '#4e73df', '#1cc88a', '#36b9cc', '#f6c23e', '#e74a3b', '#858796',
        '#9b59b6', '#2ecc71', '#3498db', '#f39c12', '#d35400', '#7f8c8d'
        ];
        const colors = [];
        for (let i = 0; i < count; i++) {
            colors.push(baseColors[i % baseColors.length]);
        }
        return colors;
    }

    (function($) {
        "use strict";

        const dashboardData = @json($dashboardData);
        const tahunDashboard = @json($tahunDashboard);

        console.log(dashboardData.fund_flow_monthly.expense);


        function formatRupiah(number) {
            number = Number(number) || 0;
            return new Intl.NumberFormat('id-ID', {
                style: 'currency',
                currency: 'IDR',
                minimumFractionDigits: 0,
                maximumFractionDigits: 0
            }).format(number);
        }


        const incomeCtx = document.getElementById('incomeSourceChart').getContext('2d');
        new Chart(incomeCtx, {
            type: 'doughnut',
            data: {
                labels: dashboardData.income_source_chart.labels,
                datasets: [{
                    data: dashboardData.income_source_chart.amounts,
                    backgroundColor: generateColors(dashboardData.income_source_chart.labels.length),
                    hoverOffset: 20,
                    radius: '85%',     
                    cutout: '65%',  
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                layout: { padding: { right: 40 } },
                plugins: {
                    legend: {
                        position: 'right',
                        align: 'center',
                        labels: { usePointStyle: true, padding: 15, boxWidth: 12 }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                let label = context.label || '';
                                let value = context.parsed || 0;
                                return `${label}: ${formatRupiah(value)}`;
                            }
                        }
                    }
                }
            }
        });


        // Chart 2: Grafik Status Anggaran per Unit (dengan persentase)
        const labels = dashboardData.unit_budget_chart.labels;
        const pagu = dashboardData.unit_budget_chart.pagu.map(Number);
        const realisasi = dashboardData.unit_budget_chart.realisasi.map(Number);
        const pengajuan = dashboardData.unit_budget_chart.pengajuan.map(Number);

        const realisasiPercent = realisasi.map((v, i) => (pagu[i] > 0 ? (v / pagu[i]) * 100 : 0));
        const pengajuanPercent = pengajuan.map((v, i) => (pagu[i] > 0 ? (v / pagu[i]) * 100 : 0));
        const maxPercentVal = Math.max(100, ...realisasiPercent, ...pengajuanPercent);
        const yMax = Math.ceil(maxPercentVal / 10) * 10;

        const budgetCtx = document.getElementById('unitBudgetChart').getContext('2d');
        new Chart(budgetCtx, {
            type: 'bar',
            data: {
                labels: labels,
                datasets: [
                {
                    label: 'Pagu Anggaran',
                    data: Array(pagu.length).fill(100),
                    backgroundColor: 'rgba(54, 162, 235, 0.8)',
                    borderColor: 'rgba(54, 162, 235, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Realisasi',
                    data: realisasiPercent,
                    backgroundColor: 'rgba(75, 192, 192, 0.8)',
                    borderColor: 'rgba(75, 192, 192, 1)',
                    borderWidth: 1
                },
                {
                    label: 'Pengajuan',
                    data: pengajuanPercent,
                    backgroundColor: 'rgba(255, 206, 86, 0.8)',
                    borderColor: 'rgba(255, 206, 86, 1)',
                    borderWidth: 1
                }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                scales: {
                    y: {
                        beginAtZero: true,
                        max: yMax,
                        ticks: {
                            callback: function(value) { return value + '%'; }
                        }
                    }
                },
                plugins: {
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                const index = context.dataIndex;
                                const label = context.dataset.label;

                                if (label === 'Pagu Anggaran') {
                                    return `Pagu Anggaran: ${formatRupiah(pagu[index])}`;
                                }
                                if (label === 'Realisasi') {
                                    const pct = pagu[index] > 0 ? ((realisasi[index] / pagu[index]) * 100).toFixed(1) : 0;
                                    return `Realisasi: ${formatRupiah(realisasi[index])} (${pct}% penyerapan)`;
                                }
                                if (label === 'Pengajuan') {
                                    const pct = pagu[index] > 0 ? ((pengajuan[index] / pagu[index]) * 100).toFixed(1) : 0;
                                    return `Pengajuan: ${formatRupiah(pengajuan[index])} (${pct}%)`;
                                }
                            },
                            afterBody: function(tooltipItems) {
                                if (!tooltipItems || !tooltipItems.length) return [];
                                const i = tooltipItems[0].dataIndex;
                                const sisa = pagu[i] - realisasi[i];
                                const pctSisa = pagu[i] > 0 ? ((sisa / pagu[i]) * 100).toFixed(1) : 0;
                                return ['Sisa Pagu: ' + formatRupiah(sisa) + ' (' + pctSisa + '%)'];
                            }
                        }
                    },
                    legend: { position: 'bottom' }
                }

            }
        });

        // Chart 3: Grafik Tren Penerimaan & Penggunaan Dana Bulanan
        const flowCtx = document.getElementById('fundFlowMonthlyChart').getContext('2d');
        new Chart(flowCtx, {
            type: 'line',
            data: {
                labels: dashboardData.fund_flow_monthly.labels,
                datasets: [
                {
                    label: 'Penerimaan',
                    data: dashboardData.fund_flow_monthly.income,
                    borderColor: '#4e73df',
                    backgroundColor: 'rgba(78, 115, 223, 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 3
                },
                {
                    label: 'Penggunaan',
                    data: dashboardData.fund_flow_monthly.expense,
                    borderColor: '#e74a3b',
                    backgroundColor: 'rgba(231, 74, 59, 0.1)',
                    fill: true,
                    tension: 0.3,
                    pointRadius: 3
                }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                if (context.parsed.y !== null) {
                                    label += new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(context.parsed.y);
                                }
                                return label;
                            }
                        }
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                return new Intl.NumberFormat('id-ID', { style: 'currency', currency: 'IDR', minimumFractionDigits: 0 }).format(value);
                            }
                        }
                    }
                }
            }
        });


        // Chart 4: Penerimaan vs Pengeluaran per Unit (Grouped Bar)
        const ieUnitData = dashboardData.income_expense_per_unit_chart;
        const ieLabels     = ieUnitData.labels;
        const iePenerimaan = ieUnitData.penerimaan.map(Number);
        const iePengeluaran = ieUnitData.pengeluaran.map(Number);

        const ieCtx = document.getElementById('incomeExpensePerUnitChart').getContext('2d');
        new Chart(ieCtx, {
            type: 'bar',
            data: {
                labels: ieLabels,
                datasets: [
                    {
                        label: 'Penerimaan',
                        data: iePenerimaan,
                        backgroundColor: 'rgba(28, 200, 138, 0.82)',
                        borderColor: 'rgba(28, 200, 138, 1)',
                        borderWidth: 1,
                        borderRadius: 4,
                    },
                    {
                        label: 'Pengeluaran',
                        data: iePengeluaran,
                        backgroundColor: 'rgba(231, 74, 59, 0.82)',
                        borderColor: 'rgba(231, 74, 59, 1)',
                        borderWidth: 1,
                        borderRadius: 4,
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: { position: 'top' },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        callbacks: {
                            label: function(context) {
                                let label = context.dataset.label || '';
                                if (label) label += ': ';
                                label += formatRupiah(context.parsed.y);
                                const penerIdx = context.dataIndex;
                                if (context.datasetIndex === 1 && iePenerimaan[penerIdx] > 0) {
                                    const pct = ((context.parsed.y / iePenerimaan[penerIdx]) * 100).toFixed(1);
                                    label += ' (' + pct + '% dari penerimaan)';
                                }
                                return label;
                            },
                            afterBody: function(tooltipItems) {
                                const i = tooltipItems[0].dataIndex;
                                const surplus = iePenerimaan[i] - iePengeluaran[i];
                                const sign = surplus >= 0 ? '+' : '';
                                return ['Surplus/Defisit: ' + sign + new Intl.NumberFormat('id-ID', {style:'currency', currency:'IDR', minimumFractionDigits:0}).format(surplus)];
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        ticks: { maxRotation: 35, minRotation: 0 }
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: function(value) {
                                if (value >= 1_000_000_000) return 'Rp ' + (value / 1_000_000_000).toFixed(1) + ' M';
                                if (value >= 1_000_000)     return 'Rp ' + (value / 1_000_000).toFixed(0) + ' jt';
                                return 'Rp ' + value.toLocaleString('id-ID');
                            }
                        }
                    }
                }
            }
        });


    })(jQuery);
</script>
<script>
document.querySelectorAll(".export-chart-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        console.log('aaa');

        const chartId = this.dataset.chart;
        const fileName = this.dataset.name;

        const canvas = document.getElementById(chartId);
        const image = canvas.toDataURL("image/png");

        const link = document.createElement("a");
        link.href = image;
        link.download = fileName + ".png";
        link.click();
    });
});
</script>

<style type="text/css">
    /* Gradient Cards */
    .card-gradient {
        border: none;
        border-radius: 15px;
        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        overflow: hidden;
        position: relative;
    }
    .card-gradient-blue {
        background: linear-gradient(135deg, #0AB3F3 0%, #00A3FF 100%);
    }
    .card-gradient-green {
        background: linear-gradient(135deg, #2AF598 0%, #009EFD 100%);
    }
    .card-gradient-red {
        background: linear-gradient(135deg, #FF6B6B 0%, #FF4560 100%);
    }
    .card-gradient-orange {
        background: linear-gradient(135deg, #FDD869 0%, #FFA848 100%);
    }
    
    .card-gradient .card-title .subtitle {
        font-size: 0.875rem;
        font-weight: 500;
        margin-bottom: 0;
    }
    .card-gradient .card-amount .amount {
        font-size: 1.75rem; /* Larger font */
        font-weight: 700;
        color: #fff;
    }
    .card-gradient .card-bg-icon {
        position: absolute;
        right: 15px; /* Adjusted position */
        bottom: -15px;
        font-size: 6rem; /* Large icon */
        opacity: 0.15;
        color: #fff;
        transform: rotate(-10deg);
        z-index: 0;
        pointer-events: none;
    }
    /* Ensure content is above background icon */
    .card-gradient .card-inner {
        position: relative;
        z-index: 1;
    }

    /* Custom scrollbar for list groups */
    .list-group-flush::-webkit-scrollbar {
        width: 6px;
    }
    .list-group-flush::-webkit-scrollbar-track {
        background: #f1f1f1; 
    }
    .list-group-flush::-webkit-scrollbar-thumb {
        background: #ddd; 
        border-radius: 4px;
    }
    .list-group-flush::-webkit-scrollbar-thumb:hover {
        background: #ccc; 
    }
</style>
@endpush