@php
    $colors = [
        '#f87171', '#fbbf24', '#34d399', '#60a5fa', '#a78bfa', '#f472b6', '#fb923c', '#4ade80'
    ];

    $segments = $summary['segments'] ?? [];
    $percentages = $summary['percentages'] ?? [];

    $currentStart = 0;
    $gradients = [];

    $i = 0;
    foreach ($segments as $label => $value) {
        $color = $colors[$i % count($colors)];
        $percent = $percentages[$label] ?? 0;
        $end = $currentStart + $percent;
        $gradients[] = "{$color} {$currentStart}% {$end}%";
        $currentStart = $end;
        $i++;
    }

    $gradientCss = implode(', ', $gradients);
@endphp

<style>
    .pie-chart {
        width: 300px;
        height: 300px;
        background: conic-gradient({{ $gradientCss }});
        border-radius: 50%;
        margin: auto;
    }
</style>

<div class="pie-chart my-4"></div>

<ul class="text-l space-y-1 flex justify-center items-center flex-col my-4">
    @php $i = 0; @endphp
    @foreach ($segments as $label => $amount)
        @php $color = $colors[$i % count($colors)]; @endphp
        <li>
            <span class="inline-block w-3 h-3 rounded-sm mr-2 space-y-2" style="background-color: {{ $color }}"></span>
            {{ $label }} — {{config('globalSettings.currency.ZAR') . ' ' . number_format($amount, 2) }}
        </li>
        @php $i++; @endphp
    @endforeach
</ul>