{{--
    A panel holding one Chart.js chart, fed entirely by server-rendered data.

        <x-dashboard.chart-panel
            id="assets-by-category"
            title="Assets by Category"
            :config="$categoryChartConfig"
            :labels="$charts['assetsByCategory']['labels']"
            :values="$charts['assetsByCategory']['values']" />

    `config` is a complete Chart.js constructor argument ({type, data, options}),
    built server-side in DashboardService — this component only encodes it. The
    JSON travels in a type="application/json" <script>, which the browser never
    executes, so no inline-script CSP exception is needed for it; resources/js/
    modules/charts.js reads it and instantiates the chart on DOMContentLoaded.

    `labels`/`values` back a plain <table> inside a <noscript>, so the numbers
    are still readable with JavaScript disabled — a chart is the one place in
    this app that renders client-side, and this is what keeps that from being a
    dead end.

    An all-zero dataset renders the shared empty state instead of an empty
    canvas — a chart with nothing on it looks broken, not empty.
--}}
@props([
    'id',
    'title',
    'subtitle' => null,
    'config',
    'labels' => [],
    'values' => [],
    'emptyIcon' => 'bar-chart',
    'emptyTitle' => 'No data yet',
    'emptyMessage' => null,
    'height' => 260,
])

@php
    $hasData = collect($values)->sum() > 0;
@endphp

<x-panel :title="$title" :subtitle="$subtitle" class="h-100" flush>
    <div class="ams-dashboard-chart-body">
        @if ($hasData)
            <div class="ams-dashboard-chart-canvas" style="height: {{ $height }}px;">
                <canvas data-chart="{{ $id }}" role="img" aria-label="{{ $title }}"></canvas>
            </div>
            <script type="application/json" data-chart-config="{{ $id }}">{!! json_encode($config) !!}</script>

            <noscript>
                <table class="table table-sm mb-0">
                    <tbody>
                        @foreach ($labels as $index => $label)
                            <tr>
                                <td>{{ $label }}</td>
                                <td class="text-end ams-mono">{{ $values[$index] }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </noscript>
        @else
            <x-table.empty-state :icon="$emptyIcon" :title="$emptyTitle" :message="$emptyMessage" />
        @endif
    </div>
</x-panel>
