@props([
    'id' => 'chart_' . uniqid(), 
    'type' => 'line',
    'labels' => [], 
    'datasets' => [], 
    'height' => 300,
    'options' => [],
])

<div {{ $attributes->merge(['class' => 'position-relative mb-4']) }}>
    <canvas id="{{ $id }}" height="{{ $height }}"></canvas>
</div>

@push('js')
<script>
    document.addEventListener("DOMContentLoaded", function() {
        const ctx = document.getElementById('{{ $id }}').getContext('2d');
        
        const defaultOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'bottom' }
            },
            interaction: {
                mode: 'index',
                intersect: false,
            },
            scales: {
                y: { 
                    beginAtZero: true, 
                    display: '{{ $type }}' !== 'pie' && '{{ $type }}' !== 'doughnut' 
                }
            }
        };

        const customOptions = @json($options);
        const mergedOptions = Object.assign({}, defaultOptions, customOptions);

        new Chart(ctx, {
            type: '{{ $type }}',
            data: {
                labels: @json($labels),
                datasets: @json($datasets)
            },
            options: mergedOptions
        });
    });
</script>
@endpush