@php
    use Filament\Widgets\View\Components\ChartWidgetComponent;
    use Illuminate\View\ComponentAttributeBag;

    $color = $this->getColor();
    $heading = $this->getHeading();
    $description = $this->getDescription();
    $type = $this->getType();
    $maxHeight = $this->getMaxHeight();
    $hasMaxHeight = filled($maxHeight) && $maxHeight !== '100%';
    $hasChartData = $this->hasChartData();
@endphp

<x-filament-widgets::widget class="fi-wi-chart">
    <x-filament::section
        :description="$description"
        :heading="$heading"
    >
        @if ($hasChartData)
            <div>
                <div
                    x-load
                    x-load-src="{{ \Filament\Support\Facades\FilamentAsset::getAlpineComponentSrc('chart', 'filament/widgets') }}"
                    wire:ignore
                    data-chart-type="{{ $type }}"
                    x-data="chart({
                                cachedData: @js($this->getCachedData()),
                                options: @js($this->getOptions()),
                                type: @js($type),
                            })"
                    {{
                        (new ComponentAttributeBag)
                            ->color(ChartWidgetComponent::class, $color)
                            ->class([
                                'fi-wi-chart-canvas-ctn',
                                'fi-wi-chart-canvas-ctn-no-aspect-ratio' => $hasMaxHeight,
                            ])
                    }}
                >
                    <canvas
                        x-ref="canvas"
                        @style([
                            'width: 100%',
                            'height: 100%; max-height: 100%' => ! $hasMaxHeight,
                            "max-height: {$maxHeight}" => $hasMaxHeight,
                        ])
                    ></canvas>

                    <span x-ref="backgroundColorElement" class="fi-wi-chart-bg-color"></span>
                    <span x-ref="borderColorElement" class="fi-wi-chart-border-color"></span>
                    <span x-ref="gridColorElement" class="fi-wi-chart-grid-color"></span>
                    <span x-ref="textColorElement" class="fi-wi-chart-text-color"></span>
                </div>
            </div>
        @else
            <div
                class="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 px-4 py-10 text-center dark:border-white/10 dark:bg-white/5"
                style="min-height: {{ $maxHeight ?? '280px' }}"
            >
                <p class="text-sm font-medium text-gray-700 dark:text-gray-200">
                    {{ __('dberp.widgets.business_overview_workbench.chart_inventory_distribution_empty') }}
                </p>

                <ul class="mt-4 space-y-1 text-xs text-gray-500 dark:text-gray-400">
                    <li>{{ __('dberp.widgets.business_overview_workbench.chart_inventory_low_stock') }}：0</li>
                    <li>{{ __('dberp.widgets.business_overview_workbench.chart_inventory_exception') }}：0</li>
                    <li>{{ __('dberp.widgets.business_overview_workbench.chart_inventory_replenishment') }}：0</li>
                </ul>
            </div>
        @endif
    </x-filament::section>
</x-filament-widgets::widget>
