@php
$project = $project ?? null;
$currentStep = $current ?? 'identificacao';
$projectId = $project?->id;
$ppLrq = $projetosListagemReturnQuery ?? [];
$steps = [
'identificacao' => [
'label' => __('Identificação'),
'route' => $projectId
? route('admin.projetosProgramas.identificacao', array_merge(['projeto' => $projectId], $ppLrq))
: route('admin.projetosProgramas.create', $ppLrq),
],
'dados' => [
'label' => __('Dados'),
'route' => $projectId ? route('admin.projetosProgramas.dados', array_merge(['projeto' => $projectId], $ppLrq)) : null,
],
'cronograma' => [
'label' => __('Cronograma'),
'route' => $projectId ? route('admin.projetosProgramas.cronograma', array_merge(['projeto' => $projectId], $ppLrq)) : null,
],
'areas' => [
'label' => __('Projetos e Ações'),
'route' => $projectId ? route('admin.projetosProgramas.areas', array_merge(['projeto' => $projectId], $ppLrq)) : null,
],
'investimento' => [
'label' => __('Orçamento'),
'route' => $projectId ? route('admin.projetosProgramas.investimento', array_merge(['projeto' => $projectId], $ppLrq)) : null,
],
];
@endphp

@once
<style>
    .pp-steps {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-bottom: 1.5rem;
    }

    .pp-steps__item {
        display: inline-flex;
        align-items: center;
        gap: .5rem;
        padding: .75rem 1rem;
        border-radius: 999px;
        border: 1px solid #d0d5dd;
        text-decoration: none;
        color: #344054;
        font-weight: 600;
        transition: all .2s ease;
        background-color: #fff;
    }

    .pp-steps__item.is-current {
        border-color: #0d6efd;
        color: #0d6efd;
        box-shadow: 0 0 0 2px rgba(13, 110, 253, .15);
    }

    .pp-steps__item.is-done {
        border-color: #198754;
        color: #198754;
    }

    .pp-steps__item--disabled {
        opacity: .5;
        cursor: not-allowed;
    }

    .pp-steps__index {
        width: 32px;
        height: 32px;
        border-radius: 999px;
        border: 2px solid currentColor;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: .9rem;
    }

    .pp-steps__label {
        white-space: nowrap;
    }
</style>
@endonce

<div class="pp-steps" role="tablist" aria-label="{{ __('Etapas do cadastro') }}">
    @foreach($steps as $key => $step)
    @php
    $isDone = $project && ($project->{$key . '_done'} ?? false);
    $isCurrent = $currentStep === $key;
    $isDisabled = !$projectId && $key !== 'identificacao';
    $href = $isDisabled ? 'javascript:void(0)' : ($step['route'] ?? 'javascript:void(0)');
    @endphp
    <a class="pp-steps__item {{ $isDone ? 'is-done' : '' }} {{ $isCurrent ? 'is-current' : '' }} {{ $isDisabled || !$step['route'] ? 'pp-steps__item--disabled' : '' }}"
        href="{{ $href }}"
        @if($isDisabled || !$step['route']) aria-disabled="true" @endif>
        <span class="pp-steps__index">{{ $loop->iteration }}</span>
        <span class="pp-steps__label">{{ $step['label'] }}</span>
    </a>

    @endforeach
</div>