{{--
    Universal reusable chart component. Uses Chart.js and the global createChart(canvasId, config).

    Config shape (Chart.js):
      - type: 'line' | 'bar' | 'pie' | 'doughnut' | 'radar' | 'polarArea' | ...
      - data: { labels: string[], datasets: Array<{ label?, data, backgroundColor?, borderColor?, ... }> }
      - options: (optional) Chart.js options: title, subtitle, legend, scales (xAxes, yAxes), tooltips, etc.

    Usage:
      <x-chart id="salesChart" :config="$salesChartConfig" style="height: 280px;" />
      <x-chart id="pieChart" :config="$pieChartConfig" class="my-chart" />

    Client-side: createChart('myChart', { type: 'bar', data: {...}, options: {...} });
--}}
@props([
    'id',
    'config' => [],
])

@php
    $config = is_array($config) ? $config : [];
@endphp

<div {{ $attributes->merge(['class' => 'chart-wrapper'])->except(['id', 'config']) }}>
    <canvas id="{{ $id }}"></canvas>
</div>

@push('scripts')
<script>
(function() {
    var id = @json($id);
    var config = @json($config);
    function init() {
        var el = document.getElementById(id);
        if (el && typeof window.createChart === 'function') {
            window.createChart(id, config);
        }
    }
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        init();
    }
})();
</script>
@endpush