{{--
  <x-form-stepper
      :steps="[
          ['title' => 'Prospect', 'icon' => 'bi-person'],
          ['title' => 'Producto', 'icon' => 'bi-box'],
          ['title' => 'Revisión', 'icon' => 'bi-check-circle'],
      ]"
      :current="1"
  />

  Steps display visual (Metronic-style). El control de qué step está visible
  se hace via JS en la blade que lo consume (data-step attribute en cada
  fieldset). Este componente sólo renderiza la barra de progreso.

  Props:
    - steps:    array de ['title' => 'X', 'icon' => 'bi-y'] (3-5 items)
    - current:  int (1-indexed) — step activo
--}}
@props([
    'steps' => [],
    'current' => 1,
])

<div class="form-stepper-wrapper mb-6">
    <div class="d-flex align-items-center justify-content-between position-relative">
        {{-- Línea de fondo (total) --}}
        <div class="position-absolute top-50 start-0 end-0 translate-middle-y bg-light"
             style="height: 3px; border-radius: 3px; z-index: 0; left: 30px !important; right: 30px !important;"></div>

        {{-- Línea progreso --}}
        @php
            $progressPct = count($steps) > 1 ? (($current - 1) / (count($steps) - 1)) * 100 : 0;
        @endphp
        <div class="position-absolute top-50 start-0 translate-middle-y bg-primary"
             style="height: 3px; border-radius: 3px; z-index: 1; width: calc({{ $progressPct }}% - 30px); left: 30px !important; transition: width 0.3s ease;"></div>

        {{-- Steps --}}
        @foreach($steps as $idx => $step)
            @php
                $stepNum = $idx + 1;
                $isDone = $stepNum < $current;
                $isActive = $stepNum === $current;
                $isFuture = $stepNum > $current;
            @endphp
            <div class="form-stepper-item position-relative z-index-2 d-flex flex-column align-items-center"
                 style="z-index: 2;"
                 data-step-num="{{ $stepNum }}">
                {{-- Bullet --}}
                <div class="symbol symbol-50px symbol-circle border border-3 {{ $isActive ? 'border-primary' : 'border-white' }} shadow-sm"
                     style="background: {{ $isDone ? 'var(--bs-primary)' : ($isActive ? 'var(--bs-primary)' : 'white') }}; transition: all 0.2s ease;">
                    <div class="symbol-label fs-3 fw-bolder {{ $isDone || $isActive ? 'text-white' : 'text-gray-500' }}">
                        @if($isDone)
                            <i class="bi bi-check-lg fs-2"></i>
                        @else
                            <i class="{{ $step['icon'] ?? 'bi-circle' }}"></i>
                        @endif
                    </div>
                </div>
                {{-- Label --}}
                <div class="text-center mt-2" style="min-width: 110px;">
                    <div class="text-gray-600 fs-9 fw-bold text-uppercase">Paso {{ $stepNum }}</div>
                    <div class="fw-bolder fs-7 {{ $isActive ? 'text-primary' : ($isDone ? 'text-dark' : 'text-gray-500') }}">
                        {{ $step['title'] }}
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>