<?php $attributes ??= new \Illuminate\View\ComponentAttributeBag;

$__newAttributes = [];
$__propNames = \Illuminate\View\ComponentAttributeBag::extractPropNames(([
    'id'      => 'chart-'.uniqid(),
    'type'    => 'area',           // area | line | bar | donut | radialBar
    'series'  => [],
    'categories' => [],
    'colors'  => ['#6366f1', '#8b5cf6'],
    'height'  => 280,
    'options' => [],               // overrides arbitrarios
]));

foreach ($attributes->all() as $__key => $__value) {
    if (in_array($__key, $__propNames)) {
        $$__key = $$__key ?? $__value;
    } else {
        $__newAttributes[$__key] = $__value;
    }
}

$attributes = new \Illuminate\View\ComponentAttributeBag($__newAttributes);

unset($__propNames);
unset($__newAttributes);

foreach (array_filter(([
    'id'      => 'chart-'.uniqid(),
    'type'    => 'area',           // area | line | bar | donut | radialBar
    'series'  => [],
    'categories' => [],
    'colors'  => ['#6366f1', '#8b5cf6'],
    'height'  => 280,
    'options' => [],               // overrides arbitrarios
]), 'is_string', ARRAY_FILTER_USE_KEY) as $__key => $__value) {
    $$__key = $$__key ?? $__value;
}

$__defined_vars = get_defined_vars();

foreach ($attributes->all() as $__key => $__value) {
    if (array_key_exists($__key, $__defined_vars)) unset($$__key);
}

unset($__defined_vars); ?>

<?php
    $config = array_replace_recursive([
        'chart' => [
            'type' => $type,
            'height' => $height,
            'toolbar' => ['show' => false],
            'fontFamily' => 'Inter, sans-serif',
            'foreColor' => '#64748b',
            'background' => 'transparent',
            'animations' => ['easing' => 'easeinout', 'speed' => 600],
        ],
        'colors' => $colors,
        'series' => $series,
        'xaxis' => [
            'categories' => $categories,
            'axisBorder' => ['show' => false],
            'axisTicks'  => ['show' => false],
            'labels'     => ['style' => ['colors' => '#64748b', 'fontSize' => '11px']],
        ],
        'yaxis' => [
            'labels' => ['style' => ['colors' => '#64748b', 'fontSize' => '11px']],
        ],
        'grid' => [
            'borderColor' => '#e2e8f0',
            'strokeDashArray' => 4,
            'padding' => ['left' => 0, 'right' => 0],
        ],
        'stroke' => ['curve' => 'smooth', 'width' => 2.5],
        'fill'   => ['type' => 'gradient', 'gradient' => ['shadeIntensity' => 1, 'opacityFrom' => 0.35, 'opacityTo' => 0, 'stops' => [0, 100]]],
        'dataLabels' => ['enabled' => false],
        'legend' => ['show' => false],
        'tooltip' => ['theme' => 'light', 'style' => ['fontSize' => '12px']],
        'theme' => ['mode' => 'light'],
    ], $options);
?>

<div id="<?php echo e($id); ?>"></div>

<?php $__env->startPush('scripts'); ?>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const el = document.querySelector('#<?php echo e($id); ?>');
            if (!el || typeof ApexCharts === 'undefined') return;
            new ApexCharts(el, <?php echo json_encode($config, 15, 512) ?>).render();
        });
    </script>
<?php $__env->stopPush(); ?>
<?php /**PATH /Applications/XAMPP/xamppfiles/htdocs/CitasSoft/resources/views/components/chart.blade.php ENDPATH**/ ?>