@push('page_modals')
@php
    $steps = [
        'configuration'     => ['label' => 'Configuration',      'icon' => 'bx-cog',          'tab' => null],
        'business-info'     => ['label' => 'Business Information','icon' => 'bx-file',         'tab' => 'business-info'],
        'owner-info'        => ['label' => 'Owner Information',   'icon' => 'bx-user',         'tab' => 'owner-info'],
        'products-services' => ['label' => 'Products & Services', 'icon' => 'bx-credit-card',  'tab' => 'products-services'],
        'fee-schedule'      => ['label' => 'Fee Schedule',        'icon' => 'bx-dollar-circle','tab' => 'fee-schedule'],
        'docs-signing'      => ['label' => 'Docs & Signing',      'icon' => 'bx-pen',          'tab' => 'docs-signing'],
    ];

    $completedSteps = ['configuration']; // Configuration is always done once lead exists
@endphp
<div class="modal fade" id="modalViewSteps" tabindex="-1" aria-labelledby="modalViewStepsLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalViewStepsLabel">Application Progress</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body p-0">
                <ul class="list-group list-group-flush">
                    @foreach($steps as $key => $step)
                    @php
                        $isDone    = in_array($key, $completedSteps);
                        $isCurrent = isset($activeTab) && $activeTab === $key;
                        $editUrl   = $lead && $step['tab'] ? route('turbo-app.edit', [$lead->id, 'tab' => $step['tab']]) : '#';
                        $configUrl = $lead ? route('turbo-app.edit', $lead->id) : '#';
                    @endphp
                    <li class="list-group-item d-flex align-items-center px-4 py-3">
                        <i class="bx {{ $step['icon'] }} fs-5 me-3 text-primary"></i>
                        <span class="flex-grow-1 fw-medium {{ $isCurrent ? 'text-primary' : '' }}">
                            {{ $step['label'] }}
                        </span>
                        @if($isDone)
                            <i class="bx bx-check-circle text-success fs-5 me-2" title="Complete"></i>
                            @if($step['tab'])
                            <a href="{{ $editUrl }}"
                               class="btn btn-sm btn-outline-secondary"
                               data-bs-dismiss="modal">
                                <i class="bx bx-edit-alt"></i>
                            </a>
                            @else
                            <a href="{{ $configUrl }}"
                               class="btn btn-sm btn-outline-secondary"
                               data-bs-dismiss="modal">
                                <i class="bx bx-edit-alt"></i>
                            </a>
                            @endif
                        @else
                            @if($step['tab'])
                            <a href="{{ $editUrl }}"
                               class="btn btn-sm btn-outline-primary"
                               data-bs-dismiss="modal">
                                {{ $isCurrent ? 'Continue' : 'Start' }}
                            </a>
                            @endif
                        @endif
                    </li>
                    @endforeach
                </ul>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary btn-sm"
                        data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
@endpush