@use('App\Services\ApexChartService')
@props([
    'id' => 'chart-' . uniqid(),
    'title' => '',
    'subtitle' => '',
    'chart' => [
        ...ApexChartService::$chart,
        'type' => 'bar',
        ],
    'colors' => ApexChartService::$colors,
    'series' => [],
    'categories' => [],
    'plotOptions' => [
        'bar' => [
            'horizontal' => false,
            'columnWidth' => '55%',
            'endingShape' => 'rounded',
        ],
    ],
    'dataLabels' => [
        'enabled' => false,
    ],
])
<div id="{{ $id }}"></div>
@once
    @vite('resources/js/plugins/apexcharts.js')
@endonce

@push('scripts')
    <script type="module">
        const options = {
            chart: @json($chart),
            plotOptions: @json($plotOptions),
            dataLabels: @json($dataLabels),
            stroke: {
                width: 2,
            },
            markers: {
                size: 4,
                hover: {
                    size: 5,
                }
            },
            colors: @json($colors),
            series: @json($series),
            title: {
                text: '{{ $title }}',
                style: {
                    fontSize: '14px',
                    fontWeight: 500,
                },
            },
            subtitle: {
                text: '{{ $subtitle }}',
            },
            xaxis: {
                categories: @json($categories)
            },
            yaxis: {
                labels: {
                    formatter: function (value) {
                        return rupiah(value);
                    }
                },
            },
        }

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

    </script>
@endpush