@props(['chart'])

@php
    /** @var array{title: string, series: array<int, array{label: string, value: float|int}>} $chart */
    $series = collect($chart['series'] ?? []);
    $max = max(1, (float) $series->max('value'));
    $palette = ['primary', 'success', 'info', 'warning', 'danger', 'secondary'];
@endphp

<div class="card table-wrapper h-100">
    <div class="card-header bg-white"><strong>{{ $chart['title'] ?? 'Chart' }}</strong></div>
    <div class="card-body">
        @forelse ($series as $i => $point)
            @php $pct = round(((float) $point['value'] / $max) * 100, 1); @endphp
            <div class="mb-3">
                <div class="d-flex justify-content-between small mb-1">
                    <span class="text-truncate me-2" style="max-width: 70%;">{{ $point['label'] }}</span>
                    <span class="fw-semibold">{{ rtrim(rtrim(number_format((float) $point['value'], 1), '0'), '.') }}</span>
                </div>
                <div class="progress" role="progressbar" aria-valuenow="{{ $pct }}" aria-valuemin="0" aria-valuemax="100" style="height: 12px;">
                    <div class="progress-bar bg-{{ $palette[$i % count($palette)] }}" style="width: {{ $pct }}%;"></div>
                </div>
            </div>
        @empty
            <p class="text-muted mb-0">No data to chart.</p>
        @endforelse
    </div>
</div>