{{-- Provider Detail Left Sidebar Nav — shared across all providers/{id}/* admin pages --}}
@php
    $providerId = $providerDetails->uuid ?? '';
    $isPersonnelPage = in_array($activePage ?? '', ['personnel-heads', 'personnel-moderators', 'personnel-access']);
    $isDocumentsPage = in_array($activePage ?? '', ['documents-repository', 'documents-services', 'documents-checklists']);
@endphp
<style>
    .provider-detail-nav .nav-link {
        color: #697a8d;
        border-radius: 0.375rem;
        padding: 0.55rem 1rem;
    }
    .provider-detail-nav .nav-link:hover {
        background-color: rgba(105, 122, 141, 0.08);
    }
    .provider-detail-nav .nav-link.active {
        color: #696cff;
        background-color: rgba(105, 108, 255, 0.08);
        font-weight: 600;
    }
    .provider-detail-nav .nav-subnav { padding-left: 1.25rem; margin-top: 0.25rem; }
    .provider-detail-nav .nav-subnav .nav-link { font-size: 0.8125rem; padding: 0.35rem 0.75rem; }
    .provider-detail-nav .nav-toggle .nav-chevron { transition: transform 0.2s; }
    .provider-detail-nav .nav-toggle:not(.collapsed) .nav-chevron { transform: rotate(90deg); }
    .provider-detail-nav .nav-toggle:not(.collapsed) { color: #696cff; font-weight: 600; }
</style>
<div class="d-flex justify-content-between flex-column mb-3 mb-lg-0">
    <ul class="nav nav-align-left nav-pills flex-column provider-detail-nav">
        <li class="nav-item mb-1">
            <a class="nav-link{{ $activePage === 'dashboard' ? ' active' : '' }}" href="{{ url('providers/' . $providerId) }}">
                <i class="ti ti-layout-dashboard me-2"></i>
                <span class="align-middle">Dashboard</span>
            </a>
        </li>
        <li class="nav-item mb-1">
            <a class="nav-link{{ $activePage === 'settings' ? ' active' : '' }}" href="{{ url('providers/' . $providerId . '/settings') }}">
                <i class="ti ti-settings me-2"></i>
                <span class="align-middle">Settings</span>
            </a>
        </li>
        <li class="nav-item mb-1">
            <a class="nav-link nav-toggle d-flex align-items-center{{ $isPersonnelPage ? '' : ' collapsed' }}"
               data-bs-toggle="collapse" href="#personnel-subnav" role="button"
               aria-expanded="{{ $isPersonnelPage ? 'true' : 'false' }}" aria-controls="personnel-subnav">
                <i class="ti ti-users me-2"></i>
                <span class="align-middle">Personnel</span>
                <i class="ti ti-chevron-right ms-auto ti-xs nav-chevron"></i>
            </a>
            <div class="collapse{{ $isPersonnelPage ? ' show' : '' }}" id="personnel-subnav">
                <ul class="nav flex-column nav-subnav">
                    <li class="nav-item mb-1">
                        <a class="nav-link{{ $activePage === 'personnel-heads' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/personnel/heads') }}">
                            <i class="ti ti-crown me-2 ti-xs"></i>
                            <span class="align-middle">Heads</span>
                        </a>
                    </li>
                    <li class="nav-item mb-1">
                        <a class="nav-link{{ $activePage === 'personnel-moderators' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/personnel/moderators') }}">
                            <i class="ti ti-user-check me-2 ti-xs"></i>
                            <span class="align-middle">Moderators</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{{ $activePage === 'personnel-access' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/personnel/access') }}">
                            <i class="ti ti-lock me-2 ti-xs"></i>
                            <span class="align-middle">Access Control</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav-item mb-1">
            <a class="nav-link nav-toggle d-flex align-items-center{{ $isDocumentsPage ? '' : ' collapsed' }}"
               data-bs-toggle="collapse" href="#documents-subnav" role="button"
               aria-expanded="{{ $isDocumentsPage ? 'true' : 'false' }}" aria-controls="documents-subnav">
                <i class="ti ti-file-text me-2"></i>
                <span class="align-middle">Documents</span>
                <i class="ti ti-chevron-right ms-auto ti-xs nav-chevron"></i>
            </a>
            <div class="collapse{{ $isDocumentsPage ? ' show' : '' }}" id="documents-subnav">
                <ul class="nav flex-column nav-subnav">
                    <li class="nav-item mb-1">
                        <a class="nav-link{{ $activePage === 'documents-repository' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/documents/repository') }}">
                            <i class="ti ti-archive me-2 ti-xs"></i>
                            <span class="align-middle">Repository</span>
                        </a>
                    </li>
                    <li class="nav-item mb-1">
                        <a class="nav-link{{ $activePage === 'documents-services' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/documents/services') }}">
                            <i class="ti ti-category me-2 ti-xs"></i>
                            <span class="align-middle">Service & Job Types</span>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{{ $activePage === 'documents-checklists' ? ' active' : '' }}"
                           href="{{ url('providers/' . $providerId . '/documents/checklists') }}">
                            <i class="ti ti-list-check me-2 ti-xs"></i>
                            <span class="align-middle">Checklists</span>
                        </a>
                    </li>
                </ul>
            </div>
        </li>
        <li class="nav-item">
            <a class="nav-link{{ $activePage === 'quickbooks' ? ' active' : '' }}" href="{{ url('providers/' . $providerId . '/quickbooks') }}">
                <i class="ti ti-brand-cashapp me-2"></i>
                <span class="align-middle">QuickBooks</span>
            </a>
        </li>
    </ul>
</div>