{{-- filepath: resources/views/components/estados.blade.php --}}
@php
    // Mapear estado_id a paso actual con nombres personalizados
    $estadosConfig = [
        1 => ['step' => 0, 'name' => 'Crear pedido'],
        2 => ['step' => 1, 'name' => 'Definir Formulación'],  
        3 => ['step' => 2, 'name' => 'Asignar Turnos'],
        4 => ['step' => 3, 'name' => 'Producción'],
        5 => ['step' => 4, 'name' => 'Entregado'],
    ];
    
    // Obtener la información del estado actual
    $estadoActual = $estadosConfig[$pedido->estado_id ?? 1] ?? ['step' => 0, 'name' => 'Sin Estado'];
    $currentStep = $estadoActual['step'];
    $currentStateName = $estadoActual['name'];
    
    // Definir nombres para cada paso
    $stepNames = [
        0 => $estadosConfig[1]['name'],  // 'Crear pedido'
        1 => $estadosConfig[2]['name'],  // 'Definir Formulación'
        2 => $estadosConfig[3]['name'],  // 'Asignar Turnos'
        3 => $estadosConfig[4]['name'],  // 'Producción'
        4 => $estadosConfig[5]['name'],  // 'Entregado'
    ];

    // Definir las rutas para cada paso
    $stepRoutes = [
        0 => null, // Crear pedido - no necesita ruta
        1 => route('board.produccion.show', $pedido->id), // Definir Formulación → URL directa
        2 => route('board.produccion.estacion-doble', ['pedido' => $pedido->id, 'seccion' => 'crear']), // Asignar Turnos → step-crear
        3 => route('board.produccion.estacion-doble', ['pedido' => $pedido->id, 'seccion' => 'produccion']), // Producción → turno-producción
        4 => null, // Entregado - no necesita ruta
    ];

    // Determinar qué pasos están habilitados (hasta el paso actual + 1)
    $enabledSteps = range(0, min($currentStep + 1, 4));
@endphp

<div class="mb-4">
        <div class="progress-steps">
            <div class="step-container">
                <!-- Paso 1: Crear Pedido -->
                <div class="step {{ $currentStep >= 1 ? 'completed' : ($currentStep == 0 ? 'active' : 'pending') }}">
                    @if(in_array(0, $enabledSteps) && $stepRoutes[0])
                        <a href="{{ $stepRoutes[0] }}" class="step-number-btn">
                    @else
                        <div class="step-number {{ !in_array(0, $enabledSteps) ? 'disabled' : '' }}">
                    @endif
                        @if($currentStep >= 1)
                            ✓
                        @else
                            1
                        @endif
                    @if(in_array(0, $enabledSteps) && $stepRoutes[0])
                        </a>
                    @else
                        </div>
                    @endif
                    <div class="step-label">{{ $stepNames[0] }}</div>
                </div>
                
                <!-- Línea de conexión -->
                <div class="step-line {{ $currentStep >= 1 ? 'completed' : '' }}"></div>
                
                <!-- Paso 2: Definir Formulación -->
                <div class="step {{ $currentStep >= 2 ? 'completed' : ($currentStep == 1 ? 'active' : 'pending') }}">
                    @if(in_array(1, $enabledSteps) && $stepRoutes[1])
                        <a href="{{ $stepRoutes[1] }}" class="step-number-btn">
                    @else
                        <div class="step-number {{ !in_array(1, $enabledSteps) ? 'disabled' : '' }}">
                    @endif
                        @if($currentStep >= 2)
                            ✓
                        @else
                            2
                        @endif
                    @if(in_array(1, $enabledSteps) && $stepRoutes[1])
                        </a>
                    @else
                        </div>
                    @endif
                    <div class="step-label">{{ $stepNames[1] }}</div>
                </div>
                
                <!-- Línea de conexión -->
                <div class="step-line {{ $currentStep >= 2 ? 'completed' : '' }}"></div>
                
                <!-- Paso 3: Asignar Turnos -->
                <div class="step {{ $currentStep >= 3 ? 'completed' : ($currentStep == 2 ? 'active' : 'pending') }}">
                    @if(in_array(2, $enabledSteps) && $stepRoutes[2])
                        <a href="{{ $stepRoutes[2] }}" class="step-number-btn">
                    @else
                        <div class="step-number {{ !in_array(2, $enabledSteps) ? 'disabled' : '' }}">
                    @endif
                        @if($currentStep >= 3)
                            ✓
                        @else
                            3
                        @endif
                    @if(in_array(2, $enabledSteps) && $stepRoutes[2])
                        </a>
                    @else
                        </div>
                    @endif
                    <div class="step-label">{{ $stepNames[2] }}</div>
                </div>
                
                <!-- Línea de conexión -->
                <div class="step-line {{ $currentStep >= 3 ? 'completed' : '' }}"></div>
                
                <!-- Paso 4: Producción -->
                <div class="step {{ $currentStep >= 4 ? 'completed' : ($currentStep == 3 ? 'active' : 'pending') }}">
                    @if(in_array(3, $enabledSteps) && $stepRoutes[3])
                        <a href="{{ $stepRoutes[3] }}" class="step-number-btn">
                    @else
                        <div class="step-number {{ !in_array(3, $enabledSteps) ? 'disabled' : '' }}">
                    @endif
                        @if($currentStep >= 4)
                            ✓
                        @else
                            4
                        @endif
                    @if(in_array(3, $enabledSteps) && $stepRoutes[3])
                        </a>
                    @else
                        </div>
                    @endif
                    <div class="step-label">{{ $stepNames[3] }}</div>
                </div>
                
                <!-- Línea de conexión -->
                <div class="step-line {{ $currentStep >= 4 ? 'completed' : '' }}"></div>
                
                <!-- Paso 5: Entregado -->
                <div class="step {{ $currentStep >= 5 ? 'completed' : ($currentStep == 4 ? 'active' : 'pending') }}">
                    <div class="step-number {{ !in_array(4, $enabledSteps) ? 'disabled' : '' }}">
                        @if($currentStep >= 5)
                            ✓
                        @else
                            5
                        @endif
                    </div>
                    <div class="step-label">{{ $stepNames[4] }}</div>
                </div>
            </div>
        </div>
</div>

<style>
/* Estilos adicionales para los botones */
.step-number-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-bottom: 8px;
    z-index: 2;
    position: relative;
    border: none;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.step-number-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.step.completed .step-number-btn {
    background-color: #28a745;
    color: white;
}

.step.active .step-number-btn {
    background-color: #007bff;
    color: white;
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.3);
}

.step.pending .step-number-btn {
    background-color: #e9ecef;
    color: #6c757d;
    border: 2px solid #dee2e6;
}

.step-number.disabled {
    background-color: #f8f9fa;
    color: #adb5bd;
    cursor: not-allowed;
    opacity: 0.6;
}
</style>