@php
$steps = [
    '2a' => ['label' => 'Data Permohonan',   'icon' => 'bi-person-lines-fill'],
    '2b' => ['label' => 'Lahan & Produksi',  'icon' => 'bi-tree-fill'],
    '2c' => ['label' => 'Biaya & Pendapatan','icon' => 'bi-calculator-fill'],
    '2d' => ['label' => 'Dokumen & Submit',  'icon' => 'bi-upload'],
];
$stepOrder  = array_keys($steps);
$currentIdx = array_search($currentStep, $stepOrder);
if ($currentIdx === false) { $currentIdx = 0; }
@endphp

{{-- Desktop Stepper --}}
<div class="wizard-stepper d-none d-md-flex align-items-center justify-content-between mb-4">
    @foreach($steps as $key => $info)
    @php
        $idx   = array_search($key, $stepOrder);
        $state = $idx < $currentIdx ? 'completed' : ($key === $currentStep ? 'active' : 'pending');
    @endphp
    <div class="wizard-step flex-fill text-center" style="position:relative;">
        <div class="wizard-step-circle mx-auto
            @if($state === 'completed') bg-success text-white
            @elseif($state === 'active') bg-primary text-white
            @else bg-light text-muted border
            @endif"
            style="width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;font-weight:600;transition:all .2s;">
            @if($state === 'completed')
                <i class="bi bi-check2"></i>
            @else
                {{ $idx + 1 }}
            @endif
        </div>
        <div class="wizard-step-label mt-1" style="font-size:.72rem;font-weight:500;
            @if($state === 'active') color:var(--bpdlh-green);
            @elseif($state === 'completed') color:#198754;
            @else color:#adb5bd;
            @endif">
            {{ $info['label'] }}
        </div>
        @if(!$loop->last)
            <div style="position:absolute;top:19px;left:50%;right:-50%;height:2px;
                background:{{ $state === 'completed' ? '#198754' : '#dee2e6' }};z-index:-1;"></div>
        @endif
    </div>
    @endforeach
</div>

{{-- Mobile Stepper --}}
<div class="d-flex d-md-none align-items-center mb-3 gap-2">
    <span class="badge bg-primary rounded-pill px-3 py-2" style="font-size:.85rem;">
        Langkah {{ $currentIdx + 1 }} / {{ count($steps) }}
    </span>
    <span class="fw-semibold" style="color:var(--bpdlh-green);">
        <i class="{{ $steps[$currentStep]['icon'] ?? 'bi-circle' }} me-1"></i>{{ $steps[$currentStep]['label'] ?? '' }}
    </span>
    <div class="ms-auto">
        <div class="progress" style="width:80px;height:8px;border-radius:4px;">
            <div class="progress-bar bg-success" style="width:{{ round((($currentIdx + 1) / count($steps)) * 100) }}%"></div>
        </div>
    </div>
</div>