{{-- resources/views/filament/widgets/monthly-financial-goal.blade.php --}}
<div
  class="bg-white dark:bg-gray-800 rounded-lg shadow p-4 md:p-6
         h-[300px] flex flex-col justify-between"
>
  {{-- Header --}}
  <div class="flex justify-between items-center">
    <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
      Monthly Financial Goal-
    </span>
    <a href="#" class="text-sm font-medium text-blue-600 dark:text-blue-500 hover:underline">
      Manage Goal
    </a>
  </div>

  {{-- Main value --}}
  <div class="text-2xl font-bold text-gray-900 dark:text-white text-center">
    {{ number_format($achieved) }} / {{ number_format($goal) }} ZAR
  </div>

  {{-- Animated Circular Gradient Gauge + Counting % --}}
  <div
    x-data="{ percentVal: 0 }"
    x-init="
      // 1) Animate the circle
      $refs.progress.style.transition = 'stroke-dasharray 1s ease-out';
      setTimeout(() => {
        $refs.progress.setAttribute('stroke-dasharray', '{{ $percent }},100');
      }, 50);

      // 2) Count percent from 0 → target
      let start = null,
          duration = 1000,
          target = {{ $percent }};
      const step = (timestamp) => {
        if (!start) start = timestamp;
        let progress = (timestamp - start) / duration;
        if (progress > 1) progress = 1;
        percentVal = Math.floor(progress * target);
        if (progress < 1) {
          requestAnimationFrame(step);
        }
      };
      requestAnimationFrame(step);
    "
    class="flex justify-center"
  >
    <div class="relative w-32 h-32">
      <svg viewBox="0 0 36 36" class="-rotate-90 w-full h-full">
        <defs>
          <linearGradient id="goalGradient" x1="1" y1="0" x2="0" y2="1">
            <stop offset="0%" stop-color="#34d399" />
            <stop offset="100%" stop-color="#3b82f6" />
          </linearGradient>
        </defs>

        <!-- Grey track -->
        <circle
          cx="18" cy="18" r="15.9155"
          stroke-width="3"
          class="text-gray-200 dark:text-gray-700"
          stroke="currentColor"
          fill="none"
        />

        <!-- Animated arc: starts at 0, animates to percent -->
        <circle
          x-ref="progress"
          cx="18" cy="18" r="15.9155"
          stroke-width="3"
          stroke-linecap="round"
          stroke="url(#goalGradient)"
          stroke-dasharray="0,100"
          fill="none"
        />
      </svg>

      <!-- Centered percent text (animated) -->
      <div class="absolute inset-0 flex items-center justify-center">
        <span class="text-xl font-bold text-gray-900 dark:text-white"
              x-text="percentVal + '%'">
        </span>
      </div>
    </div>
  </div>

  {{-- Horizontal Progress Bar + Footer --}}
  <div>
    <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-1">
      <span>{{ $percent }}%</span>
      <span>Spending Target</span>
    </div>
    <div class="w-full bg-gray-200 dark:bg-gray-700 h-2 rounded-full overflow-hidden">
      <div
        class="h-full bg-linear-to-r from-yellow-400 to-orange-500 transition-all duration-300"
        style="width: {{ $percent }}%;"
      ></div>
    </div>
    <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-1">
      <span>{{ number_format($achieved) }} ZAR used</span>
      <span>{{ number_format($goal - $achieved) }} ZAR remaining</span>
    </div>
  </div>
</div>