<!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark fixed-top custom-navbar">
        <div class="container-fluid px-4">
            <!-- Logo -->
            <a class="navbar-brand fw-bold fs-3" href="{{ route('home') }}">
                <span class="text-accent">Stream</span>Flix
            </a>

            <!-- Toggle button for mobile -->
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Navigation Items -->
            <div class="collapse navbar-collapse" id="navbarNav">
                <!-- Center Navigation -->
                <ul class="navbar-nav mx-auto">
                    {{-- <li class="nav-item">
                        <a class="nav-link active" href="{{ route('home') }}">Home</a>
                    </li> --}}
                    {{-- <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="categoriesDropdown" role="button"
                           data-bs-toggle="dropdown" aria-expanded="false">
                            Categories
                        </a>
                        <ul class="dropdown-menu custom-dropdown" aria-labelledby="categoriesDropdown">
                            <li><a class="dropdown-item" href="category.html?category=action">Action</a></li>
                            <li><a class="dropdown-item" href="category.html?category=drama">Drama</a></li>
                            <li><a class="dropdown-item" href="category.html?category=comedy">Comedy</a></li>
                            <li><a class="dropdown-item" href="category.html?category=thriller">Thriller</a></li>
                            <li><a class="dropdown-item" href="category.html?category=sci-fi">Sci-Fi</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="category.html?category=popular">Popular</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="category.html?category=latest">New Releases</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="request.html">Request Movie</a>
                    </li> --}}
                </ul>

                <!-- Right Side -->
                <div class="navbar-nav d-flex flex-row align-items-center gap-3">
                    <!-- Search Bar -->
                    <div class="nav-item d-none d-md-block">
                        <div class="search-container">
                            <input type="text" class="form-control search-input" placeholder="Search movies..." id="searchInput">
                            <i class="bi bi-search search-icon"></i>
                            <!-- Search Results Dropdown -->
                            <div class="search-results-dropdown" id="searchResults">
                                <div class="search-results-header">
                                    <span class="search-results-title">Search Results</span>
                                    <span class="search-results-count" id="searchCount">0 movies found</span>
                                </div>
                                <div class="search-results-list" id="searchResultsList">
                                    <!-- Search results will be populated here -->
                                </div>
                                <div class="search-no-results" id="searchNoResults">
                                    <i class="bi bi-search"></i>
                                    <p>No movies found</p>
                                    <small>Try searching with different keywords</small>
                                </div>
                            </div>
                        </div>
                    {{-- <!-- User Profile -->
                    <div class="nav-item">
                        <button class="btn btn-link text-white p-0" aria-label="User Profile">
                            <i class="bi bi-person-circle fs-5"></i>
                        </button>
                    </div> --}}
                </div>
            </div>
        </div>
    </nav>