@php
    // Fetch faculties with their institutes
    $faculties = \App\Models\Faculty::where('activation', 1)->get();

    // Fetch institutes without faculties
    $institutesWithoutFaculty = \App\Models\Institute::whereNull('faculty_id')->where('activation', 1)->get();
@endphp

<!-- Navbar -->
<header>
    <nav class="navbar navbar-expand-lg navbar-light w-100">
        <div class="container px-3">
            <a class="navbar-brand d-flex align-items-center" href="{{ route('home') }}">
                <img src="{{ asset('backend-assets/img/logo/uhst-logo.png') }}" width="35" alt="UHST Logo"/>
                <span class="fw-bold ms-2">UHST</span>
            </a>
            <button class="navbar-toggler offcanvas-nav-btn" type="button">
                <i class="bi bi-list"></i>
            </button>
            <div class="offcanvas offcanvas-start offcanvas-nav" style="width: 20rem">
                <div class="offcanvas-header">
                    <a href="{{ route('home') }}" class="d-flex align-items-center">
                        <img src="{{ asset('backend-assets/img/logo/uhst-logo.png') }}" width="35" alt="UHST Logo"/>
                        <span class="fw-bold ms-2">UHST</span>
                    </a>
                    <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
                </div>
                <div class="offcanvas-body pt-0 align-items-center">
                    <ul class="navbar-nav ms-auto align-items-lg-center">
                        <!-- Home -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('home') }}">Home</a>
                        </li>
                        <!-- About Us -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">About Us</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{{ route('history') }}" class="dropdown-item">History</a>
                                </li>
                                <li>
                                    <a href="{{ route('mission-vision') }}" class="dropdown-item">Mission & Vision</a>
                                </li>
                                <li>
                                    <a href="{{ route('president-message') }}" class="dropdown-item">President Message</a>
                                </li>
                                <li>
                                    <a href="{{ route('partner') }}" class="dropdown-item">Partner</a>
                                </li>
                            </ul>
                        </li>
                        <!-- Faculty -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Faculty</a>
                            <ul class="dropdown-menu">
                                {{-- Faculties with their institutes --}}
                                @foreach($faculties as $faculty)
                                    @php
                                        // Fetch institutes with faculties
                                        $institutesWithFaculty = \App\Models\Institute::where('faculty_id', $faculty->id)->where('activation', 1)->get();
                                    @endphp

                                    @if($institutesWithFaculty->count() > 0)
                                        <li class="dropdown-submenu dropend">
                                            {{-- Faculty name as the main dropdown item --}}
                                            <a class="dropdown-item dropdown-toggle" href="{{ $faculty->id }}">{{ $faculty->title_en }}</a>

                                            {{-- Check if faculty has institutes --}}
                                            <ul class="dropdown-menu">
                                                @foreach($institutesWithFaculty as $institute)
                                                    {{-- List of institutes under each faculty --}}
                                                    <li>
                                                        <a class="dropdown-item" href="{{ route('institute', $institute->id) }}">{{ $institute->title_en }}</a>
                                                    </li>
                                                @endforeach
                                            </ul>
                                        </li>
                                    @else
                                        {{-- List of faculty without instittue --}}
                                        <li>
                                            <a class="dropdown-item" href="{{ route('faculty', $faculty->id) }}">{{ $faculty->title_en }}</a>
                                        </li>
                                    @endif
                                @endforeach

                                {{-- Institutes without faculty --}}
                                @foreach($institutesWithoutFaculty as $institute)
                                    <li>
                                        <a class="dropdown-item" href="{{ route('institute', $institute->id) }}">{{ $institute->title_en }}</a>
                                    </li>
                                @endforeach
                            </ul>
                        </li>
                        <!-- Study -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Study</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{{ route('admission') }}" class="dropdown-item">Admission</a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item">Scholarship(Soon)</a>
                                </li>
                                <li>
                                    <a href="#" class="dropdown-item">Short Courses(Soon)</a>
                                </li>
                            </ul>
                        </li>
                        <!-- Research & Innovation -->
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Research & Innovation</a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="{{ route('project') }}" class="dropdown-item">Project</a>
                                </li>
                                <li>
                                    <a href="{{ route('publication-book') }}" class="dropdown-item">Publication Book</a>
                                </li>
                                <li>
                                    <a href="{{ route('training-workshop') }}" class="dropdown-item">Training & Workshop</a>
                                </li>
                                <li>
                                    <a href="{{ route('conference') }}" class="dropdown-item">Conference</a>
                                </li>
                            </ul>
                        </li>
                        <!-- Contact -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('contact') }}">Contact</a>
                        </li>
                        <!-- News -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('news') }}">News</a>
                        </li>
                        <!-- Career -->
                        <li class="nav-item">
                            <a class="nav-link" href="{{ route('career') }}">Career</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
</header>