@if ($reportRows->isNotEmpty())
    @php
        $chartRows = $reportRows->map(fn ($row) => [
            'name' => $row['name'],
            'project_count' => (int) $row['project_count'],
            'total' => (float) $row['total'],
            'total_percent' => (float) $row['total_percent'],
            'balance' => (float) $row['balance'],
            'total_project' => (float) $row['total_project'],
            'requested' => (float) $row['requested'],
            'requested_percent' => (float) $row['requested_percent'],
            'usage_percent' => (float) $row['usage_percent'],
        ])->values();
        $chartRows->prepend([
            'name' => 'รวมทั้งหมด',
            'project_count' => (int) $reportTotals['project_count'],
            'total' => (float) $reportTotals['total'],
            'total_percent' => 0,
            'balance' => (float) $reportTotals['balance'],
            'total_project' => (float) $reportTotals['total_project'],
            'requested' => (float) $reportTotals['requested'],
            'requested_percent' => 0,
            'usage_percent' => (float) $reportTotals['usage_percent'],
        ]);
        $chartHeight = max(360, $chartRows->count() * 72);
    @endphp
    <section class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
        <h3 class="text-lg font-semibold text-slate-900">กราฟเปรียบเทียบยอดเงิน</h3>
        <p class="mt-1 text-sm text-slate-500">หน่วย: บาท</p>
        <div id="report-chart" class="mt-2 w-full" style="height: {{ $chartHeight }}px"></div>
    </section>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const rows = @json($chartRows);
            const names = rows.map((row) => row.name);
            const money = new Intl.NumberFormat('th-TH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
            const count = new Intl.NumberFormat('th-TH');
            const textStyle = { fontFamily: 'Noto Sans Thai, sans-serif', color: '#334155' };
            const categoryAxis = {
                type: 'category',
                data: names,
                inverse: true,
                axisTick: { show: false },
                axisLine: { show: false },
                axisLabel: { width: 220, overflow: 'break', color: '#0f172a' },
            };
            const bar = (name, key, extra = {}) => ({
                name,
                type: 'bar',
                barMaxWidth: 14,
                data: rows.map((row) => row[key]),
                itemStyle: { borderRadius: [0, 4, 4, 0] },
                ...extra,
            });

            const chart = window.echarts.init(document.getElementById('report-chart'));
            chart.setOption({
                color: ['#1e3a5f', '#334155', '#64748b', '#0f766e'],
                textStyle,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { type: 'shadow' },
                    valueFormatter: (value) => money.format(value) + ' บาท',
                },
                legend: { top: 0, right: 0, itemWidth: 12, itemHeight: 12, textStyle: { color: '#334155' } },
                grid: { left: 8, right: 24, top: 48, bottom: 8, containLabel: true },
                xAxis: {
                    type: 'value',
                    axisLabel: { formatter: (value) => count.format(value) },
                    splitLine: { lineStyle: { color: '#e2e8f0' } },
                },
                yAxis: categoryAxis,
                series: [
                    bar('ยอดเงิน', 'total'),
                    bar('คงเหลือ', 'balance'),
                    bar('ยอดเหลือจริง', 'total_project'),
                    bar('ยอดขอใช้เงิน', 'requested'),
                ],
            });

            window.addEventListener('resize', () => chart.resize());
        });
    </script>
@endif