@if ($setupGuide)
    @php
        $completedCount = collect($setupGuide['steps'])->where('complete', true)->count();
        $totalCount = count($setupGuide['steps']);
        $progressPercent = $totalCount > 0 ? (int) round($completedCount / $totalCount * 100) : 0;
    @endphp

    <div class="modal fade" id="setupGuideModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content setup-guide-modal">
                <div class="modal-header border-0 pb-0">
                    <div>
                        <h5 class="modal-title fw-bold mb-1">
                            {{ $setupGuide['isComplete'] ? 'Setup Complete' : 'Getting Started' }}
                        </h5>
                        <div class="text-muted small">
                            {{ $setupGuide['isComplete']
                                ? 'Your school configuration is ready for scheduling.'
                                : 'Complete these steps to get your school ready for scheduling.' }}
                        </div>
                    </div>
                    <button type="button" class="btn-close" id="setupGuideCloseBtn" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>

                <div class="modal-body pt-3">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <span class="small fw-semibold text-muted">{{ $completedCount }} of {{ $totalCount }} steps complete</span>
                        <span class="small fw-semibold text-primary">{{ $progressPercent }}%</span>
                    </div>
                    <div class="setup-guide-progress mb-4">
                        <div class="setup-guide-progress-bar" style="width: {{ $progressPercent }}%;"></div>
                    </div>

                    <div class="setup-guide-steps">
                        @foreach ($setupGuide['steps'] as $index => $step)
                            <div class="setup-guide-step {{ $step['complete'] ? 'is-complete' : '' }} {{ $step['key'] === $setupGuide['currentStepKey'] ? 'is-current' : '' }}"
                                 data-step-key="{{ $step['key'] }}">
                                <div class="setup-guide-step-marker">
                                    @if ($step['complete'])
                                        <i class="bi bi-check-lg"></i>
                                    @else
                                        {{ $index + 1 }}
                                    @endif
                                </div>

                                <div class="setup-guide-step-body">
                                    <button type="button" class="setup-guide-step-toggle">
                                        <span class="setup-guide-step-label">{{ $step['label'] }}</span>
                                        @if ($step['complete'])
                                            <span class="badge text-bg-success-subtle text-success-emphasis ms-2">Complete</span>
                                        @elseif ($step['key'] === $setupGuide['currentStepKey'])
                                            <span class="badge text-bg-primary-subtle text-primary-emphasis ms-2">Up next</span>
                                        @endif
                                        <i class="bi bi-chevron-down setup-guide-step-chevron"></i>
                                    </button>

                                    <div class="setup-guide-step-panel" @if ($step['key'] !== $setupGuide['currentStepKey']) hidden @endif>
                                        <div class="text-muted small mb-2">{{ $step['description'] }}</div>

                                        @if ($step['key'] === 'readiness')
                                            @if (!empty($step['issues']))
                                                <ul class="setup-guide-list mb-0">
                                                    @foreach ($step['issues'] as $issue)
                                                        <li>
                                                            <a href="{{ $issue['route'] }}"
                                                               class="setup-guide-nav-link text-warning-emphasis"
                                                               data-tab="{{ $issue['tab'] }}"
                                                               data-tab-storage-key="{{ $issue['tabStorageKey'] }}">
                                                                <i class="bi bi-exclamation-triangle-fill me-2"></i>{{ $issue['label'] }}
                                                                <i class="bi bi-arrow-right-short setup-guide-item-arrow"></i>
                                                            </a>
                                                        </li>
                                                    @endforeach
                                                </ul>
                                            @else
                                                <div class="text-success small fw-semibold">
                                                    <i class="bi bi-check-circle-fill me-1"></i> No blocking readiness issues detected.
                                                </div>
                                            @endif
                                        @else
                                            <ul class="setup-guide-list mb-0">
                                                @forelse ($step['items'] as $item)
                                                    <li>
                                                        <a href="{{ $item['route'] }}"
                                                           class="setup-guide-nav-link {{ $item['complete'] ? 'text-success' : 'text-muted' }}"
                                                           data-tab="{{ $item['tab'] }}"
                                                           data-tab-storage-key="{{ $item['tabStorageKey'] }}">
                                                            <i class="bi {{ $item['complete'] ? 'bi-check-circle-fill' : 'bi-circle' }} me-2"></i>{{ $item['label'] }}
                                                            <i class="bi bi-arrow-right-short setup-guide-item-arrow"></i>
                                                        </a>
                                                    </li>
                                                @empty
                                                    <li class="text-muted">{{ $step['description'] }}</li>
                                                @endforelse
                                            </ul>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="modal-footer border-0 pt-0">
                    <button type="button" class="btn btn-link text-muted text-decoration-none px-0" id="setupGuideSkipBtn" data-bs-dismiss="modal">
                        Skip for now
                    </button>
                </div>
            </div>
        </div>
    </div>

    <style>
        .setup-guide-progress {
            height: 8px;
            border-radius: 999px;
            background: #e5e7eb;
            overflow: hidden;
        }

        .setup-guide-progress-bar {
            height: 100%;
            background: linear-gradient(90deg, #2563eb, #4f46e5);
            border-radius: 999px;
            transition: width 0.3s ease;
        }

        .setup-guide-steps {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .setup-guide-step {
            display: flex;
            gap: 14px;
            padding: 12px 10px;
            border-radius: 14px;
            transition: background 0.15s ease;
        }

        .setup-guide-step.is-current {
            background: #f5f7ff;
        }

        .setup-guide-step-marker {
            flex-shrink: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.85rem;
            font-weight: 600;
            background: #e5e7eb;
            color: #6b7280;
        }

        .setup-guide-step.is-complete .setup-guide-step-marker {
            background: #16a34a;
            color: #fff;
        }

        .setup-guide-step.is-current:not(.is-complete) .setup-guide-step-marker {
            background: #2563eb;
            color: #fff;
        }

        .setup-guide-step-body {
            flex-grow: 1;
            min-width: 0;
        }

        .setup-guide-step-toggle {
            display: flex;
            align-items: center;
            width: 100%;
            background: none;
            border: 0;
            padding: 4px 0;
            text-align: left;
            font-weight: 600;
            color: #111827;
        }

        .setup-guide-step-chevron {
            margin-left: auto;
            font-size: 0.8rem;
            color: #9ca3af;
            transition: transform 0.2s ease;
        }

        .setup-guide-step-toggle[aria-expanded="true"] .setup-guide-step-chevron {
            transform: rotate(180deg);
        }

        .setup-guide-step-panel {
            padding: 6px 0 4px;
        }

        .setup-guide-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 2px;
            font-size: 0.85rem;
        }

        .setup-guide-list a.setup-guide-nav-link {
            display: flex;
            align-items: center;
            text-decoration: none;
            color: inherit;
            padding: 5px 8px;
            margin: 0 -8px;
            border-radius: 8px;
            transition: background 0.15s ease;
        }

        .setup-guide-list a.setup-guide-nav-link:hover {
            background: #eef2ff;
            color: #1e293b;
        }

        .setup-guide-item-arrow {
            margin-left: auto;
            color: #9ca3af;
            transition: transform 0.15s ease;
        }

        .setup-guide-list a.setup-guide-nav-link:hover .setup-guide-item-arrow {
            transform: translateX(2px);
        }
    </style>
@endif