{{-- Step indicator for profile completion (clickable) --}}
@php
    $user = auth()->user();
    $steps = [
        ['label' => 'Data Diri', 'done' => $user->isStep1Complete(), 'route' => 'profile.edit'],
        ['label' => 'KTP & NIK', 'done' => $user->isStep2Complete(), 'route' => 'profile.dokumen-ktp'],
        ['label' => 'SIM', 'done' => $user->isStep3Complete(), 'route' => 'profile.dokumen-sim'],
    ];
@endphp

<style>
    .step-item {
        display: flex;
        align-items: center;
        gap: 6px;
        text-decoration: none;
        padding: 4px 8px;
        border-radius: 6px;
        transition: background .2s;
    }
    .step-item:hover {
        background: var(--bg-card);
    }
    .step-item.disabled {
        pointer-events: none;
        opacity: 0.4;
    }
</style>

<div style="display:flex;align-items:center;gap:8px;margin-bottom:20px;padding:12px 16px;background:var(--bg-secondary);border:1px solid var(--border);border-radius:var(--radius)">
    @foreach ($steps as $i => $step)
        @php
            $stepNum = $i + 1;
            $isActive = $currentStep == $stepNum;
            $isDone = $step['done'];
            // Step bisa diklik jika sudah selesai ATAU sedang aktif, atau step sebelumnya sudah done
            $prevDone = $i === 0 ? true : $steps[$i - 1]['done'];
            $clickable = $isDone || $isActive || $prevDone;
        @endphp

        <a href="{{ $clickable ? route($step['route']) : '#' }}"
           class="step-item {{ !$clickable ? 'disabled' : '' }}"
           style="{{ $isActive ? 'opacity:1' : ($clickable ? 'opacity:0.7' : 'opacity:0.4') }}">
            @if ($isDone)
                <span style="width:22px;height:22px;border-radius:50%;background:var(--success);display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff">
                    <i class="bi bi-check"></i>
                </span>
            @else
                <span style="width:22px;height:22px;border-radius:50%;background:{{ $isActive ? 'var(--accent)' : 'var(--border)' }};display:flex;align-items:center;justify-content:center;font-size:.7rem;color:#fff;font-weight:700">
                    {{ $stepNum }}
                </span>
            @endif
            <span style="font-size:.8rem;font-weight:{{ $isActive ? '600' : '400' }};color:{{ $isActive ? 'var(--text-primary)' : 'var(--text-muted)' }}">
                {{ $step['label'] }}
            </span>
        </a>

        @if ($i < count($steps) - 1)
            <div style="flex:1;height:1px;background:var(--border)"></div>
        @endif
    @endforeach
</div>