<div class="aura-card" wire:key="chart" @if (!$isCached) wire:init="loadWidget" @endif>
  @if($loaded)
  <div class="p-2">
    <div class="flex items-start justify-between mb-4">
      <span class="text-sm font-semibold">{{ $widget['name'] }}</span>

      <div class="">
        {{-- <div class="flex items-baseline text-4xl font-medium">
          {{ collect($this->values['current'])->last() ?? 'N/A' }}
        </div> --}}
      </div>
    </div>

    <div class="w-full">
      <div x-data="{
        values: {{ json_encode(array_values($this->values['current'])) }},
        labels: {{ json_encode(array_keys($this->values['current'])) }},

        init() {
          let chart = new window.ApexCharts(this.$refs.chart, this.options)
          chart.render()
          this.$watch('values', () => {
            chart.updateOptions(this.options)
          })
          window.dispatchEvent(new Event('resize'));
        },
        get options() {
          return {
            labels: this.labels,
            series: this.values,
            chart: {
              type: 'donut',
              width: '100%',
              height: '300',

              animations: {
                enabled: true,
                easing: 'easeinout',
                speed: 1200,
                animateGradually: {
                  enabled: true,
                  delay: 150
                },
                dynamicAnimation: {
                  enabled: true,
                  speed: 350
                }
              }
            },

            colors: [getCssVariableValue('--primary-400'), getCssVariableValue('--primary-200'), getCssVariableValue('--primary-600'), getCssVariableValue('--primary-800')],

            dataLabels: {
              enabled: true,
              formatter: function(val) {
                return parseFloat(val).toFixed(0) + '%';
              }
            },

            tooltip: {
              enabled: true,
              y: {
                formatter: function(val) {
                  // return parseFloat(val).toFixed(2) + '%';
                  return parseFloat(val).toFixed(0);
                }
              }
            },

            legend: {
              show: true,
              position: 'bottom'
            },
          }
        }
      }" class="w-full">
          <div x-ref="chart" class="bg-white rounded-lg dark:bg-gray-800"></div>
      </div>
    </div>
  </div>
  @else
  <div class="p-2 animate-pulse">
    <div class="flex items-baseline justify-between mt-2 mb-6">
      <div class="w-32 h-4 bg-gray-200 rounded"></div>
      <div class="w-8 h-4 bg-gray-200 rounded"></div>
    </div>

    <svg viewBox="0 0 36 36" class="w-64 h-64 mx-auto text-gray-200 bg-gray-200 rounded-full">
      <circle class="donut-hole" cx="18" cy="18" r="15.91549430918954" fill="#fff"></circle>
      <circle class="donut-ring" cx="18" cy="18" r="15.91549430918954" fill="transparent" stroke="currentColor"
        stroke-width="3"></circle>
    </svg>
  </div>
  @endif
</div>
