{{-- Top Navigation Bar --}}
<nav class="bg-white border-b-4 border-gray-200 shadow-lg">
    <div class="px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between items-center h-16">

            {{-- Logo/Brand --}}
            <div class="flex items-center gap-3">
                <a href="
                    @auth
                        {{ route('dashboard') }}
                    @else
                        {{ route('welcome') }}
                    @endauth
                " class="flex items-center gap-2 hover:opacity-80 transition">
                    <img src="{{ asset('images/jannatsaba_logo.png') }}" alt="Jannat Saba Logo" class="h-10 w-auto">
                    <span class="text-gray-800 font-bold text-lg hidden sm:inline">Jannat Saba Restaurant</span>
                </a>
            </div>

            {{-- Center Navigation (for authenticated users) --}}
            @auth
                <div class="hidden md:flex items-center gap-6">
                    @if(auth()->user()->role === 'admin')
                        <a href="{{ route('admin.dashboard') }}"
                           class="text-gray-700 hover:text-blue-600 transition font-medium">
                            Dashboard
                        </a>
                    @elseif(auth()->user()->role === 'manager')
                        <a href="{{ route('manager.dashboard') }}"
                           class="text-gray-700 hover:text-blue-600 transition font-medium">
                            Dashboard
                        </a>
                    @else
                        <a href="{{ route('dashboard') }}"
                           class="text-gray-700 hover:text-blue-600 transition font-medium">
                            Dashboard
                        </a>
                    @endif
                </div>
            @endauth

            {{-- Right side: Auth Links --}}
            <div class="flex items-center gap-4">
                @guest
                    <a href="{{ route('login') }}"
                       class="text-gray-700 hover:text-blue-600 transition font-medium">
                        Login
                    </a>
                    <a href="{{ route('register') }}"
                       class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition font-medium">
                        Register
                    </a>
                @else
                    {{-- User Profile Dropdown --}}
                    <div class="flex items-center gap-3">
                        <span class="text-gray-700 text-sm font-medium">
                            {{ auth()->user()->name }}
                        </span>

                        <div class="relative group">
                            <button class="text-gray-700 hover:text-blue-600 transition">
                                <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            {{-- Dropdown Menu --}}
                            <div class="absolute right-0 mt-2 w-48 bg-white text-gray-800 rounded-lg shadow-xl opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-200 z-50 border border-gray-200">
                                <a href="{{ route('profile.edit') }}"
                                   class="block px-4 py-2 hover:bg-gray-100 rounded-t-lg transition text-gray-700 font-medium">
                                    Profile Settings
                                </a>
                                <form method="POST" action="{{ route('logout') }}" class="w-full">
                                    @csrf
                                    <button type="submit"
                                           class="w-full text-left px-4 py-2 hover:bg-gray-100 rounded-b-lg transition text-red-600 font-medium">
                                        Logout
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                @endguest
            </div>
        </div>
    </div>
</nav>