@if ($projectCategories->isNotEmpty())
    <div class="DHeader">
        <div class="accordion Proacoordian" id="Dashboard-Pro">
            <div class="accordion-item">
                <h2 class="accordion-header" id="All-Projects">
                    <div class="headPro">
                        <a href="{{ route('projects') }}"
                            class="projectCategoryList{{ !$singleProjectCategory ? ' active' : '' }}"
                            aria-label="All Projects" data-project-category-id="all">
                            All Projects
                        </a>
                        <button class="accordion-button" type="button" data-bs-toggle="collapse"
                            data-bs-target="#Inner-Pro" aria-expanded="true" aria-controls="Inner-Pro"
                            aria-label="Inner Products">
                            <svg xmlns="http://www.w3.org/2000/svg" width="8" height="10.696"
                                viewBox="0 0 8 10.696">
                                <path id="Path_14_5" data-name="Path 14"
                                    d="M1.657,5.348,7.8.857a.414.414,0,0,0,0-.71.875.875,0,0,0-.971,0L.2,4.992a.414.414,0,0,0,0,.71l6.627,4.846a.875.875,0,0,0,.971,0,.414.414,0,0,0,0-.71Z"
                                    transform="translate(0 0)" />
                            </svg>
                        </button>
                    </div>
                </h2>
                <div id="Inner-Pro" class="accordion-collapse collapse show" aria-labelledby="All-Projects"
                    data-bs-parent="#Dashboard-Pro">
                    <div class="accordion-body">
                        <!-- Nested accordion -->
                        <div class="accordion" id="accordion2">
                            @foreach ($projectCategories as $projectCategory)
                                <div class="accordion-item">
                                    <h2 class="accordion-header" id="innerHeading{{ $loop->iteration }}">
                                        <div class="proSec">
                                            <a class="projectCategoryList{{ isset($singleProjectCategory) && $singleProjectCategory->id == $projectCategory->id ? ' active' : '' }}"
                                                href="{{ route('projects', $projectCategory->slug) }}"
                                                aria-label="{{ $projectCategory->title }}"
                                                data-project-category-id="{{ base64_encode($projectCategory->id) }}">
                                                {{ $projectCategory->title }}
                                            </a>
                                            <button
                                                class="accordion-button{{ isset($singleProjectCategory) && $singleProjectCategory->id == $projectCategory->id ? '' : ' collapsed' }}"
                                                type="button" data-bs-toggle="collapse"
                                                data-bs-target="#Pro-{{ $loop->iteration }}"
                                                aria-expanded="{{ isset($singleProjectCategory) && $singleProjectCategory->id == $projectCategory->id ? 'true' : 'false' }}"
                                                aria-controls="Pro-{{ $loop->iteration }}"
                                                aria-label="{{ $projectCategory->title }}">
                                                <svg xmlns="http://www.w3.org/2000/svg" width="8" height="10.696"
                                                    viewBox="0 0 8 10.696">
                                                    <path id="Path_14_6" data-name="Path 14"
                                                        d="M1.657,5.348,7.8.857a.414.414,0,0,0,0-.71.875.875,0,0,0-.971,0L.2,4.992a.414.414,0,0,0,0,.71l6.627,4.846a.875.875,0,0,0,.971,0,.414.414,0,0,0,0-.71Z"
                                                        transform="translate(0 0)" />
                                                </svg>
                                            </button>
                                        </div>
                                    </h2>
                                    @if ($projectCategory->projects->isNotEmpty())
                                        <div id="Pro-{{ $loop->iteration }}"
                                            class="accordion-collapse collapse{{ isset($singleProjectCategory) && $singleProjectCategory->id == $projectCategory->id ? ' show' : '' }}"
                                            aria-labelledby="innerHeading{{ $loop->iteration }}"
                                            data-bs-parent="#accordion2">
                                            <div class="accordion-body">
                                                <div class="Links">
                                                    @foreach ($projectCategory->projects as $project)
                                                        <a href="{{ route('project-details', ['category_slug' => $project->projectCategory->slug, 'slug' => $project->slug]) }}"
                                                            class="{{ isset($projectDetails) && $projectDetails->id == $project->id ? ' active' : '' }}"
                                                            aria-label="{{ $project->title }}">
                                                            {{ $project->title }}
                                                        </a>
                                                    @endforeach
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                        <!-- End of nested accordion -->
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif