@props(['data'])

@php
    $labels = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des'];
    $values = collect($data)->values();
    $max = max($values->max() ?: 1, 1);

    $width = 700;
    $height = 210;
    $paddingBottom = 26;
    $paddingTop = 10;
    $chartHeight = $height - $paddingBottom - $paddingTop;
    $gap = 10;
    $barWidth = ($width - $gap * 13) / 12;
@endphp

<svg class="chart-svg" viewBox="0 0 {{ $width }} {{ $height }}" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Grafik pendapatan 12 bulan terakhir">
    @foreach ([0.25, 0.5, 0.75, 1] as $line)
        <line class="grid-line" x1="0" x2="{{ $width }}" y1="{{ $paddingTop + $chartHeight * (1 - $line) }}" y2="{{ $paddingTop + $chartHeight * (1 - $line) }}" stroke-dasharray="3 4" />
    @endforeach

    @foreach ($values as $i => $value)
        @php
            $barHeight = $max > 0 ? ($value / $max) * $chartHeight : 0;
            $x = $gap + $i * ($barWidth + $gap);
            $y = $paddingTop + $chartHeight - $barHeight;
        @endphp
        <rect class="bar-track" x="{{ $x }}" y="{{ $paddingTop }}" width="{{ $barWidth }}" height="{{ $chartHeight }}" rx="3" />
        <rect class="bar" x="{{ $x }}" y="{{ $y }}" width="{{ $barWidth }}" height="{{ max($barHeight, 2) }}" rx="3">
            <title>{{ $labels[$i] ?? '' }}: {{ \App\Helpers\NumberHelper::formatRupiah($value) }}</title>
        </rect>
        <text class="axis-label" x="{{ $x + $barWidth / 2 }}" y="{{ $height - 6 }}" text-anchor="middle">{{ $labels[$i] ?? '' }}</text>
    @endforeach
</svg>