@php
    $needsCharts = Auth::user()->can('hc_dash.view')
        || Auth::user()->can('sponsorship_per_cluster.view')
        || Auth::user()->can('country_specifics.view')
        || Auth::user()->can('children_sponsorship_trend.view')
        || Auth::user()->can('children_graduation_trend.view')
        || Auth::user()->can('farmers_registration_trend.view');
@endphp

@if ($needsCharts)
@push('vendor-scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
@endpush

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    const navy = '#1e3a5f';
    const gold = '#c8a951';
    const maleColor = 'rgba(45, 90, 135, 1)';
    const femaleColor = 'rgba(200, 169, 81, 1)';

    @if (Auth::user()->can('hc_dash.view') && isset($labelsChart) && !empty($financialChartHasData))
    (function () {
        const el = document.getElementById('revExpChart');
        if (!el) return;

        const formatUgx = (value) => 'UGX ' + Number(value || 0).toLocaleString();

        new Chart(el.getContext('2d'), {
            type: 'bar',
            data: {
                labels: @json($labelsChart),
                datasets: [
                    {
                        label: 'Revenue',
                        data: @json($revenueChart),
                        backgroundColor: 'rgba(62, 207, 142, 0.85)',
                        borderColor: '#3ecf8e',
                        borderWidth: 1,
                        borderRadius: 4,
                        order: 2,
                    },
                    {
                        label: 'Expenses',
                        data: @json($expensesChart),
                        backgroundColor: 'rgba(255, 107, 107, 0.85)',
                        borderColor: '#ff6b6b',
                        borderWidth: 1,
                        borderRadius: 4,
                        order: 3,
                    },
                    {
                        label: 'Net profit',
                        data: @json($profitChart ?? []),
                        type: 'line',
                        borderColor: navy,
                        backgroundColor: 'transparent',
                        borderWidth: 2,
                        pointRadius: 4,
                        pointBackgroundColor: navy,
                        tension: 0.25,
                        fill: false,
                        order: 1,
                    },
                ]
            },
            options: {
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'top' },
                    tooltip: {
                        callbacks: {
                            label: (ctx) => `${ctx.dataset.label}: ${formatUgx(ctx.raw)}`,
                        },
                    },
                },
                scales: {
                    x: {
                        grid: { display: false },
                    },
                    y: {
                        beginAtZero: true,
                        ticks: {
                            callback: (value) => formatUgx(value),
                        },
                    },
                },
            }
        });
    })();
    @endif

    @if (Auth::user()->can('sponsorship_per_cluster.view') && isset($clusterNames))
    (function () {
        const el = document.getElementById('sponsorshipChart');
        if (!el) return;
        new Chart(el.getContext('2d'), {
            type: 'bar',
            data: {
                labels: @json($clusterNames),
                datasets: [
                    { label: 'Boys', data: @json($maleCounts), backgroundColor: maleColor },
                    { label: 'Girls', data: @json($femaleCounts), backgroundColor: femaleColor },
                    { label: 'Total', data: @json($totalCounts), backgroundColor: navy },
                ]
            },
            options: {
                maintainAspectRatio: false,
                plugins: { legend: { position: 'top' } },
                scales: { x: { stacked: false }, y: { beginAtZero: true } }
            }
        });
    })();
    @endif

    @if (Auth::user()->can('country_specifics.view') && isset($countries) && count($countries))
    (function () {
        const el = document.getElementById('sponsorshipPieChart');
        if (!el) return;
        new Chart(el.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: @json($countries),
                datasets: [{
                    data: @json($childCounts),
                    backgroundColor: [navy, gold, '#2d5a87', '#198754', '#fd7e14']
                }]
            },
            options: {
                maintainAspectRatio: false,
                plugins: { legend: { display: false } }
            }
        });
    })();
    @endif

    @if (Auth::user()->can('children_sponsorship_trend.view') && isset($sponsorshipPeriods))
    (function () {
        const el = document.getElementById('newSponsorshipChart');
        if (!el) return;
        new Chart(el.getContext('2d'), {
            type: 'line',
            data: {
                labels: @json($sponsorshipPeriods),
                datasets: [
                    { label: 'Male', data: @json($maleSponsorships), borderColor: maleColor, tension: 0.3 },
                    { label: 'Female', data: @json($femaleSponsorships), borderColor: femaleColor, tension: 0.3 },
                    { label: 'Cumulative', data: @json($cumulativeTotal), borderColor: navy, borderDash: [5, 5], tension: 0.3 },
                ]
            },
            options: { maintainAspectRatio: false, plugins: { legend: { position: 'top' } } }
        });
    })();
    @endif

    @if (Auth::user()->can('children_graduation_trend.view') && isset($graduationPeriods))
    (function () {
        const el = document.getElementById('graduationTrendChart');
        if (!el) return;
        new Chart(el.getContext('2d'), {
            type: 'line',
            data: {
                labels: @json($graduationPeriods),
                datasets: [
                    { label: 'Male', data: @json($maleGraduates), borderColor: maleColor, tension: 0.3 },
                    { label: 'Female', data: @json($femaleGraduates), borderColor: femaleColor, tension: 0.3 },
                    { label: 'Cumulative', data: @json($cumulativeGraduates), borderColor: navy, borderDash: [5, 5], tension: 0.3 },
                ]
            },
            options: { maintainAspectRatio: false, plugins: { legend: { position: 'top' } } }
        });
    })();
    @endif

    @if (Auth::user()->can('farmers_registration_trend.view') && isset($farmersData))
    (function () {
        const el = document.getElementById('farmersTrendChart');
        if (!el) return;
        const months = @json($farmersData->pluck('month'));
        new Chart(el.getContext('2d'), {
            type: 'line',
            data: {
                labels: months,
                datasets: [
                    { label: 'Male', data: @json($farmersData->pluck('male_count')), borderColor: maleColor, tension: 0.3 },
                    { label: 'Female', data: @json($farmersData->pluck('female_count')), borderColor: femaleColor, tension: 0.3 },
                    { label: 'Cumulative', data: @json($cumulativeCount), borderColor: navy, borderDash: [5, 5], tension: 0.3 },
                ]
            },
            options: { maintainAspectRatio: false, plugins: { legend: { position: 'top' } } }
        });
    })();
    @endif
});
</script>
@endpush
@endif