@props(['step' => 1, 'totalSteps' => 6])

@php
    $steps = [
        1 => ['label' => 'Request Type', 'icon' => 'M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z'],
        2 => ['label' => 'Medication', 'icon' => 'M21 7.5l-2.25-1.313M21 7.5v2.25m0-2.25l-2.25 1.313M3 7.5l2.25-1.313M3 7.5l2.25 1.313M3 7.5v2.25m9 3l2.25-1.313M12 12.75l-2.25-1.313M12 12.75V15m0 6.75l2.25-1.313M12 21.75V19.5m0 2.25l-2.25-1.313m0-16.875L12 2.25l2.25 1.313M21 14.25v2.25l-2.25 1.313m-13.5 0L3 16.5v-2.25'],
        3 => ['label' => 'Medical Info', 'icon' => 'M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z'],
        4 => ['label' => 'Billing & Shipping', 'icon' => 'M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z'],
        5 => ['label' => 'Pharmacy', 'icon' => 'M13.5 21v-7.5a.75.75 0 01.75-.75h3a.75.75 0 01.75.75V21m-4.5 0H2.36m11.14 0H18m0 0h3.64m-1.39 0V9.349m-16.5 11.65V9.35m0 0a3.001 3.001 0 003.75-.615A2.993 2.993 0 009.75 9.75c.896 0 1.7-.393 2.25-1.016a2.993 2.993 0 002.25 1.016c.896 0 1.7-.393 2.25-1.016a3.001 3.001 0 003.75.614m-16.5 0a3.004 3.004 0 01-.621-4.72L4.318 3.44A1.5 1.5 0 015.378 3h13.243a1.5 1.5 0 011.06.44l1.19 1.189a3 3 0 01-.621 4.72m-13.5 8.65h3.75a.75.75 0 00.75-.75V13.5a.75.75 0 00-.75-.75H6.75a.75.75 0 00-.75.75v3.75c0 .415.336.75.75.75z'],
        6 => ['label' => 'Prescriber', 'icon' => 'M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z']
    ];
    
    $progress = (($step - 1) / ($totalSteps - 1)) * 100;
@endphp

<!-- Progress Stepper Component - WCAG 2.2 Compliant -->
<div class="mb-5" role="region" aria-label="Progress indicator">
    
    <!-- Step Info Header -->
    <div class="d-flex align-items-center justify-content-between mb-4">
        <div class="d-flex align-items-center gap-3">
            <div class="rounded-circle text-white d-flex align-items-center justify-content-center fw-bold shadow-sm" 
                 style="width: 3rem; height: 3rem; font-size: 1.125rem;"
                 aria-hidden="true">
                {{ $step }}
            </div>
            <div>
                <p class="small text-secondary fw-medium mb-0" aria-live="polite">
                    STEP {{ $step }} OF {{ $totalSteps }}
                </p>
                <h2 class="h5 fw-bold text-dark mb-0">{{ $steps[$step]['label'] ?? 'Step ' . $step }}</h2>
            </div>
        </div>
    </div>

    <!-- Progress Bar -->
    <div class="progress mb-4" 
         style="height: 0.5rem;" 
         role="progressbar" 
         aria-valuenow="{{ $progress }}" 
         aria-valuemin="0" 
         aria-valuemax="100"
         aria-label="Form completion progress">
        <div class="progress-bar bg-primary" 
             style="width: {{ $progress }}%; transition: width 0.3s ease;"
             aria-hidden="true">
        </div>
    </div>

    <!-- Desktop Step Indicators -->
    <div class="d-none d-lg-flex align-items-center justify-content-between">
        @foreach($steps as $index => $stepData)
            <div class="d-flex align-items-center {{ $index < $totalSteps ? 'flex-grow-1' : '' }}">
                
                <!-- Step Circle -->
                <div class="d-flex flex-column align-items-center">
                    <div class="rounded-circle d-flex align-items-center justify-content-center fw-bold transition-all
                        @if($step > $index) bg-success text-white
                        @elseif($step == $index) text-white shadow-sm
                        @else bg-secondary bg-opacity-25 text-secondary
                        @endif"
                        style="width: 2.5rem; height: 2.5rem; font-size: 0.875rem; position: relative; z-index: 2;"
                        aria-label="{{ $stepData['label'] }} - {{ $step > $index ? 'completed' : ($step == $index ? 'current' : 'upcoming') }}"
                        aria-current="{{ $step == $index ? 'step' : 'false' }}">
                        
                        @if($step > $index)
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="3" stroke="currentColor" width="16" height="16" aria-hidden="true">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
                            </svg>
                        @else
                            {{ $index }}
                        @endif
                    </div>
                    
                    <!-- Step Label -->
                    <span class="small mt-2 text-center
                        @if($step == $index) fw-semibold text-primary
                        @else text-secondary
                        @endif"
                        style="max-width: 5rem;">
                        {{ $stepData['label'] }}
                    </span>
                </div>

                <!-- Connector Line -->
                @if($index < $totalSteps)
                    <div class="flex-grow-1 mx-2 transition-all" 
                         style="height: 3px; background-color: {{ $step > $index ? 'var(--color-success)' : 'var(--color-gray-300)' }}; position: relative; top: -1.25rem;"
                         aria-hidden="true">
                    </div>
                @endif
            </div>
        @endforeach
    </div>

    <!-- Mobile Step Indicators (Simplified) -->
    <div class="d-lg-none d-flex align-items-center gap-2 justify-content-center">
        @for($i = 1; $i <= $totalSteps; $i++)
            <div class="rounded-pill transition-all
                @if($step >= $i) bg-primary
                @else bg-opacity-25
                @endif"
                style="width: {{ $step == $i ? '2rem' : '0.5rem' }}; height: 0.5rem;"
                role="presentation"
                aria-hidden="true">
            </div>
        @endfor
    </div>
</div>