@use('App\Services\ApexChartService')
@props([
    'id' => 'chart-' . uniqid(),
    'title' => '',
    'subtitle' => '',
    'chart' => [
        ...ApexChartService::$chart,
        'type' => 'pie',
        'height' => 300,
        ],
    'colors' => ApexChartService::$colors,
    'series' => [],
    'labels' => [],
])
<div id="{{ $id }}"></div>
@once
    @vite('resources/js/plugins/apexcharts.js')
@endonce

@push('scripts')
    <script type="module">
        const options = {
            chart: @json($chart),
            colors: @json($colors),
            series: @json($series),
            labels: @json($labels),
            title: {
                text: '{{ $title }}',
                style: {
                    fontSize:  '14px',
                    fontWeight:  500,
                },
            },
            subtitle: {
                text: '{{ $subtitle }}',
            },
        }

        const chart = new ApexCharts(document.querySelector("#{{ $id }}"), options);
        chart.render();

    </script>
@endpush