@php
    // Étapes par défaut : navigation du dashboard. Une autre page peut passer ses propres étapes :
    // include('partials.step_navigation', ['step_navigation_steps' => [['label' => ..., 'route' => ..., 'active' => ...], ...]])
    $step_navigation_steps = $step_navigation_steps ?? [
        ['label' => 'Dashboard', 'route' => 'dashboard', 'active' => request()->routeIs('dashboard')],
        ['label' => 'Plan de charge', 'route' => 'plan_charge_centrale.index', 'active' => request()->routeIs('plan_charge_centrale.*')],
        ['label' => 'Suivi de livraison', 'route' => 'suivi_livraison.index', 'active' => request()->routeIs('suivi_livraison.*')],
        ['label' => 'État des centrales', 'route' => 'centrale.etat_connexion', 'active' => request()->routeIs('centrale.etat_connexion')],
    ];
    $step_navigation_current = collect($step_navigation_steps)->search(fn($step) => $step['active']);
    $step_navigation_current = $step_navigation_current === false ? 0 : $step_navigation_current;
@endphp

<style>
    .step-nav-wrapper {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 8px;
    }
    .step-nav {
        display: flex;
        align-items: center;
        background: #fff;
        padding: 4px 10px;
        border-radius: 20px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    }
    .step-nav__item {
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    .step-nav__item:hover {
        text-decoration: none;
    }
    .step-nav__circle {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 10px;
        border: 1px solid #ccc;
        color: #999;
        background: #fff;
        flex-shrink: 0;
        transition: all .2s ease;
    }
    .step-nav__label {
        margin-left: 5px;
        font-size: 11px;
        color: #999;
        white-space: nowrap;
    }
    .step-nav__connector {
        width: 16px;
        height: 1px;
        background: #ccc;
        margin: 0 5px;
    }
    .step-nav__item--active .step-nav__circle {
        border-color: #28a745;
        background: #28a745;
        color: #fff;
    }
    .step-nav__item--active .step-nav__label {
        color: #28a745;
        font-weight: bold;
    }
</style>

<div class="step-nav-wrapper">
    <div class="step-nav">
        @foreach($step_navigation_steps as $index => $step)
            @if($index > 0)
                <span class="step-nav__connector"></span>
            @endif
            <a href="{{ route($step['route']) }}" title="{{ $step['label'] }}"
               class="step-nav__item {{ $index == $step_navigation_current ? 'step-nav__item--active' : '' }}">
                <span class="step-nav__circle">{{ $index == $step_navigation_current ? '✓' : $index + 1 }}</span>
                <span class="step-nav__label">{{ $step['label'] }}</span>
            </a>
        @endforeach
    </div>
</div>

<script>
    (function () {
        var stepNavUrls = @json(array_map(fn($step) => route($step['route']), $step_navigation_steps));
        var stepNavCurrent = {{ $step_navigation_current }};

        document.addEventListener('keydown', function (e) {
            if (e.key !== 'ArrowLeft' && e.key !== 'ArrowRight') {
                return;
            }

            var active = document.activeElement;
            var editableTags = ['INPUT', 'TEXTAREA', 'SELECT'];
            if (active && (editableTags.indexOf(active.tagName) !== -1 || active.isContentEditable)) {
                return;
            }

            if (e.key === 'ArrowRight' && stepNavCurrent < stepNavUrls.length - 1) {
                window.location.href = stepNavUrls[stepNavCurrent + 1];
            } else if (e.key === 'ArrowLeft' && stepNavCurrent > 0) {
                window.location.href = stepNavUrls[stepNavCurrent - 1];
            }
        });
    })();
</script>