@props([
    'id' => 'chart-' . uniqid(),
    'value' => 0,
    'label' => '',
    'color' => '#1f2e65',
    'size' => 250
])

<div class="kmc-chart-wrapper">
    <div id="{{ $id }}" class="kmc-radial-chart"></div>
    @if($label)
        <p class="kmc-chart-label text-center mt-3 text-sm text-secondary">{{ $label }}</p>
    @endif
</div>

@push('scripts')
<script>
(function() {
    // Wait for DOMContentLoaded and ApexCharts to be available
    const initChart = () => {
        if (typeof ApexCharts === 'undefined' || typeof window.ChartTheme === 'undefined') {
            setTimeout(initChart, 100);
            return;
        }

        try {
            const chartElement = document.querySelector("#{{ $id }}");
            if (!chartElement) {
                console.error('[RadialChart] Chart element not found: #{{ $id }}');
                return;
            }

            // Get configuration from ChartTheme
            const config = window.ChartTheme.getRadialBarConfig(
                {{ $value }},
                '{{ $color }}'
            );

            // Update chart height
            config.chart.height = {{ $size }};

            // Add label if provided
            @if($label)
            config.labels = ['{{ $label }}'];
            config.plotOptions.radialBar.dataLabels.name.show = true;
            @endif

            // Create and render chart
            const chart = new ApexCharts(chartElement, config);
            chart.render();

            console.log('[RadialChart] Chart #{{ $id }} rendered successfully');
        } catch (error) {
            console.error('[RadialChart] Error rendering chart #{{ $id }}:', error);
        }
    };

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initChart);
    } else {
        initChart();
    }
})();
</script>
@endpush