@if($auditor->tiene_correcciones)
@php
    $estados = [
        'pendiente' => 'Pendiente de enviar cambios',
        'en_proceso' => 'En revisión',
        'aprobado' => 'Aprobado'
    ];

    $cambios = $auditor->cambiosSolicitados;
    $estadoActual = $cambios ? $cambios->estado : null;
    $indexActual = $estadoActual ? array_search($estadoActual, array_keys($estados)) : -1;
@endphp

<div class="barra-progreso">
    <div class="barra-fondo">
        <div class="barra-llenado" style="width: {{ $indexActual >= 0 ? ($indexActual / (count($estados)-1) * 100) : 0 }}%"></div>
    </div>
    <div class="etapas">
        @foreach($estados as $key => $label)
            <div class="etapa {{ $indexActual >= array_search($key, array_keys($estados)) ? 'completado' : '' }}">
                <div class="punto"></div>
                <span>{{ $label }}</span>
            </div>
        @endforeach
    </div>
</div>

<style>
    .barra-progreso {
        position: relative;
        width: 100%;
        margin: 1rem 0;
        font-family: sans-serif;
    }

    .barra-fondo {
        position: relative;
        height: 8px;
        background-color: #e0e0e0;
        border-radius: 4px;
    }

    .barra-llenado {
        height: 100%;
        background-color: #4f46e5;
        border-radius: 4px;
        transition: width 0.3s;
    }

    .etapas {
        display: flex;
        justify-content: space-between;
        position: absolute;
        top: -12px;
        left: 0;
        width: 100%;
    }

    .etapa {
        text-align: center;
        position: relative;
        width: 33.33%;
    }

    .etapa span {
        display: block;
        margin-top: 16px;
        font-size: 0.75rem;
        color: #6b7280;
    }

    .etapa.completado span {
        color: #4f46e5;
        font-weight: bold;
    }

    .punto {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #e0e0e0;
        margin: 0 auto;
        z-index: 2;
    }

    .etapa.completado .punto {
        background-color: #4f46e5;
    }
</style>
@endif