@props([
    'id' => 'chart-' . uniqid(),
    'type' => 'bar',
    'title' => '',
    'data' => [],
    'options' => [],
    'height' => '300px',
    'width' => '100%'
])

<div class="chart-container" style="position: relative; height: {{ $height }}; width: {{ $width }};">
    <canvas id="{{ $id }}"></canvas>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const ctx = document.getElementById('{{ $id }}').getContext('2d');
      
    // Register center text plugin for doughnut charts only
    // if ('{{ $type }}' === 'doughnut') {
    //     Chart.register({
    //         id: 'centerText',
    //         afterDraw: function(chart) {
    //             // Only apply to doughnut charts
    //             if (chart.config.type === 'doughnut') {
    //                 const {ctx, chartArea: {left, top, width, height}} = chart;
    //                 const totalRevenue = chart.options.totalRevenue || 0;
                    
    //                 ctx.save();
    //                 ctx.textAlign = 'center';
    //                 ctx.textBaseline = 'middle';
                    
    //                 // Total Revenue text
    //                 ctx.font = '12px Arial';
    //                 ctx.fillStyle = '#666';
    //                 ctx.fillText('Total Revenue', left + width / 2, top + height / 2 - 20);
                    
    //                 // This Week text
    //                 ctx.font = '12px Arial';
    //                 ctx.fillStyle = '#666';
    //                 ctx.fillText('This Week', left + width / 2, top + height / 2);
                    
    //                 // Format revenue for display
    //                 let formattedRevenue = '';
    //                 if (totalRevenue >= 100000) {
    //                     // Convert to lakhs
    //                     formattedRevenue = (totalRevenue / 100000).toFixed(0) + 'L';
    //                 } else if (totalRevenue >= 1000) {
    //                     // Convert to thousands
    //                     formattedRevenue = (totalRevenue / 1000).toFixed(0) + 'K';
    //                 } else {
    //                     // Show as is for smaller amounts
    //                     formattedRevenue = totalRevenue.toString();
    //                 }
                    
    //                 // Amount text - dynamic total revenue
    //                 ctx.font = 'bold 24px Arial';
    //                 ctx.fillStyle = '#000';
    //                 ctx.fillText(formattedRevenue, left + width / 2, top + height / 2 + 25);
                    
    //                 ctx.restore();
    //             }
    //         }
    //     });
    // }
      
    // Default options for different chart types
    const defaultOptions = {
        responsive: true,
        maintainAspectRatio: false,
        plugins: {
            legend: {
                display: true,
                position: 'top',
            },
            title: {
                display: {{ $title ? 'true' : 'false' }},
                text: '{{ $title }}',
                font: {
                    size: 16,
                    weight: 'bold'
                }
            }
        },
        scales: {
            y: {
                beginAtZero: true,
                grid: {
                    color: 'rgba(0, 0, 0, 0.1)',
                    drawBorder: false
                },
                ticks: {
                    font: {
                        size: 12
                    }
                }
            },
            x: {
                grid: {
                    display: false
                },
                ticks: {
                    font: {
                        size: 12
                    }
                }
            }
        }
    };

    // Merge default options with custom options
    const chartOptions = { ...defaultOptions, ...@json($options) };

    // Create the chart
    const chart = new Chart(ctx, {
        type: '{{ $type }}',
        data: @json($data),
        options: chartOptions
    });
});
</script>