@props(['title', 'budgets'])

@php
    use Illuminate\Support\Number;
@endphp

<x-stack class="w-full border p-3 rounded-lg gap-2">
    <x-text class="w-full font-bold font-poppins text text-secondary-200 border-b pb-2">
        {{ $title }}
    </x-text>

    @foreach ($budgets as $budget)
        @php
            $formattedBudget = [
                'realization' => Number::currency((float) $budget['realization'], 'ID', 'id'),
            ];
        @endphp

        <x-stack
            class="w-full gap-[1px]"
            x-data="{
                realization: {{ json_encode($budget['realization']) }},
                max: {{ json_encode($budget['max']) }},
                usedPercentage: 0,
                view: {
                    realization: 0,
                    max: 0,
                }
            }"
            x-init="() => {
                usedPercentage = max === 0 ? 0 : ((realization / max) * 100).toFixed(2)
                view.max = max.toLocaleString('id-ID')
                view.realization = realization.toLocaleString('id-ID')
            }"
        >
            <x-text class="font-bold">
                {{ $budget['title'] }}
            </x-text>
            <x-group class="w-full justify-between mt-1">
                <x-stack>
                    <x-text class="text-sm text-gray-700">Anggaran</x-text>
                    <x-text
                        class="text-sm text-gray-800 font-semibold"
                        x-text="'Rp.' + view.max"
                    />
                </x-stack>
                <x-stack class="items-end">
                    <x-text class="text-sm text-gray-700">Realisasi</x-text>
                    <x-text
                        class="text-sm text-gray-800 font-semibold"
                        x-text="'Rp.' + view.realization"
                    />
                </x-stack>
            </x-group>

            @php
                $usedPercentage = 0;
                $division = (float) ($budget['max'] > 1 ? $budget['max'] : 1);

                $usedPercentage = ((float) $budget['realization'] / $division) * 100;
            @endphp

            <x-group class="w-full bg-tertiary-200 h-4 relative overflow-hidden rounded-full">
                <x-box
                    class="absolute bg-tertiary-100 top-0 left-0 h-4 w-0 transition-all"
                    x-bind:style="'width: ' + usedPercentage + '%;'"
                />
                <x-text
                    class="absolute text-white right-0 h-4 text-xs px-4 font-poppins font-semibold"
                    x-text="usedPercentage + '%'"
                />
            </x-group>
        </x-stack>
    @endforeach
</x-stack>