@php
    $user = auth()->user();
    $roleName = $user->getRoleNames()->first() ?? 'User';
    $dashboardTitle = $roleName . ' Dashboard';
    $Bkash = $user->hasAnyRole(['Bkash', 'Manager']);
    $userImage = $user->avatar_url && file_exists(public_path($user->avatar_url))? asset($user->avatar_url): asset('images/user.png');
@endphp
<nav class="bg-gray-900 text-amber-50 shadow-md">
    <div class="mx-auto px-4">
        <div class="flex justify-between items-stretch h-20 relative">
            <div class="flex items-center space-x-12">
                <a href="{{ session('home_route', '#') }}" class="flex items-center space-x-2 px-4">
                    <div class="flex space-x-2">
                        <img src="{{ asset('android-chrome-192x192.png') }}" alt="Company Logo 1" class="w-10 h-10 rounded">
                    </div>
                    <span class="text-2xl font-bold text-amber-100">{{ $dashboardTitle }}</span>
                </a>
                @if($Bkash)
                    <div class="flex h-full items-stretch">
                        {{--<a href="{{ route('bkash.dashboard') }}"
                           class="flex items-center px-4 {{ Request::routeIs('bkash.dashboard') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                            <span class="h-full flex items-center">{{ 'Dashboard' }}</span>
                        </a>--}}
                        <a href="{{ route('bkash.transaction') }}"
                           class="flex items-center px-4 {{ Request::routeIs('bkash.transaction') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                            <span class="h-full flex items-center">{{ 'Transaction' }}</span>
                        </a>
                        <a href="{{ route('bkash.summary') }}"
                           class="flex items-center px-4 {{ Request::routeIs('bkash.summary') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                            <span class="h-full flex items-center">{{ 'Summary' }}</span>
                        </a>
                        <a href="{{ route('bkash.fundtransferreport') }}"
                           class="flex items-center px-4 {{ Request::routeIs('bkash.fundtransferreport') || Request::routeIs('bkash.report') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                            <span class="h-full flex items-center">{{ 'Fund Transfer Report' }}</span>
                        </a>
                        @if($user->hasRole('Manager'))
                            <a href="{{ route('bkash.fundtransferreport.uat') }}"
                               class="flex items-center px-4 {{ Request::routeIs('bkash.fundtransferreport.uat') || Request::routeIs('bkash.report.uat') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                                <span class="h-full flex items-center">{{ 'FT Report UAT' }}</span>
                            </a>
                        @endif
                    </div>
                @endif

            </div>
            <div class="flex items-center space-x-4 z-10">
                <div class="relative group">
                    <div class="flex items-center space-x-2 cursor-pointer px-4" id="profileToggle">
                        <img src="{{ $userImage }}" alt="User Profile" class="w-8 h-8 rounded-full border-2 border-white">
                        <span class="font-bold text-amber-200">{{ $user->name }}</span>
                        <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180" id="profileIcon"></i>
                    </div>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 hidden" id="profileDropdown">
                        <a href="#" class="block px-4 py-2 text-amber-900 hover:bg-amber-100 flex items-center">
                            <i class="fas fa-user mr-2 text-amber-700"></i> Profile
                        </a>
                        @if($Bkash)
                            @if($user->hasRole('Bkash'))
                                <a href="{{ route('bKash.changepassword') }}" class="block px-4 py-2 text-gray-800 hover:bg-amber-100 flex items-center">
                                    <i class="fas fa-key mr-2 text-amber-700"></i> Change Password
                                </a>
                            @endif
                        @elseif($user->hasRole('Team bKash Support'))
                            <a href="{{ route('bkashsupport.changepassword') }}" class="block px-4 py-2 text-gray-800 hover:bg-amber-100 flex items-center">
                                <i class="fas fa-key mr-2 text-amber-700"></i> Change Password
                            </a>
                        @else
                            <a href="{{ route('biller.changepassword') }}" class="block px-4 py-2 text-gray-800 hover:bg-amber-100 flex items-center">
                                <i class="fas fa-key mr-2 text-amber-700"></i> Change Password
                            </a>
                        @endif
                        <a href="{{ route('biller.logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                           class="block px-4 py-2 text-gray-800 hover:bg-amber-100 flex items-center">
                            <i class="fas fa-sign-out-alt mr-2 text-amber-700"></i> Logout
                        </a>
                        <form id="logout-form" action="{{ route('biller.logout') }}" method="POST" class="hidden">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>
{{--<nav class="bg-gray-900 text-amber-50 shadow-md">
    <div class="mx-auto px-4">
        <div class="flex justify-between items-stretch h-20 relative">
            <div class="flex items-center space-x-12">
                <!-- Logo & Title -->
                <a href="{{ session('home_route', '#') }}" class="flex items-center space-x-2">
                    <img src="{{ asset('android-chrome-192x192.png') }}" alt="Company Logo" class="w-10 h-10 rounded">
                    <span class="text-xl font-semibold">{{ $dashboardTitle }}</span>
                </a>

                <!-- Desktop Menu -->
                <div class="hidden md:flex items-center space-x-4">
                    <a href="{{ route('bkash.dashboard') }}"
                       class="px-4 py-2 {{ Request::routeIs('bkash.dashboard') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                        Dashboard
                    </a>
                    <a href="{{ route('bkash.transaction') }}"
                       class="px-4 py-2 rounded {{ Request::routeIs('bkash.transaction') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                        Transaction
                    </a>
                    <a href="{{ route('bkash.summary') }}"
                       class="px-4 py-2 rounded {{ Request::routeIs('bkash.summary') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                        Overall
                    </a>
                </div>
            </div>
            <!-- User Profile -->
            <div class="hidden md:flex items-center space-x-4">
                <div class="relative group">
                    <div class="flex items-center space-x-2 cursor-pointer px-4" id="profileToggle">
                        <img src="{{ $userImage }}" alt="User Profile" class="w-8 h-8 rounded-full border-2 border-white">
                        <span>{{ $user->name }}</span>
                        <i class="fas fa-chevron-down text-xs transition-transform group-hover:rotate-180"></i>
                    </div>
                    <div class="absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 hidden group-hover:block">
                        <a href="#" class="block px-4 py-2 text-amber-900 hover:bg-amber-100 flex items-center">
                            <i class="fas fa-user mr-2 text-amber-700"></i> Profile
                        </a>
                        <a href="{{ route('biller.changepassword') }}" class="block px-4 py-2 text-gray-800 hover:bg-blue-100 flex items-center">
                            <i class="fas fa-key mr-2 text-blue-600"></i> Change Password
                        </a>
                        <a href="{{ route('biller.logout') }}"
                           onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                           class="block px-4 py-2 text-gray-800 hover:bg-blue-100 flex items-center">
                            <i class="fas fa-sign-out-alt mr-2 text-blue-600"></i> Logout
                        </a>
                        <form id="logout-form" action="{{ route('biller.logout') }}" method="POST" class="hidden">
                            @csrf
                        </form>
                    </div>
                </div>
            </div>

            <!-- Mobile Hamburger -->
            <div class="md:hidden flex items-center">
                <button id="mobileMenuButton" class="text-white focus:outline-none">
                    <i class="fas fa-bars text-2xl"></i>
                </button>
            </div>
        </div>

        <!-- Mobile Menu -->
        <div id="mobileMenu" class="hidden md:hidden mt-2">
            <a href="{{ route('bkash.dashboard') }}"
               class="block px-4 py-2 rounded {{ Request::routeIs('bkash.dashboard') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                Dashboard
            </a>
            <a href="{{ route('bkash.transaction') }}"
               class="block px-4 py-2 rounded {{ Request::routeIs('bkash.transaction') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                Transaction
            </a>
            <a href="{{ route('bkash.summary') }}"
               class="block px-4 py-2 rounded {{ Request::routeIs('bkash.summary') ? 'bg-blue-500 font-bold' : 'hover:bg-blue-600 font-medium' }}">
                Overall
            </a>

            <div class="border-t border-gray-700 my-2"></div>

            <!-- Mobile Profile Links -->
            <a href="#" class="block px-4 py-2 text-amber-900 hover:bg-amber-100 flex items-center">
                <i class="fas fa-user mr-2 text-amber-700"></i> Profile
            </a>
            <a href="{{ route('biller.changepassword') }}" class="block px-4 py-2 text-gray-800 hover:bg-blue-100 flex items-center">
                <i class="fas fa-key mr-2 text-blue-600"></i> Change Password
            </a>
            <a href="{{ route('biller.logout') }}"
               onclick="event.preventDefault(); document.getElementById('logout-form-mobile').submit();"
               class="block px-4 py-2 text-gray-800 hover:bg-blue-100 flex items-center">
                <i class="fas fa-sign-out-alt mr-2 text-blue-600"></i> Logout
            </a>
            <form id="logout-form-mobile" action="{{ route('biller.logout') }}" method="POST" class="hidden">
                @csrf
            </form>
        </div>
    </div>
</nav>

<script>
    const mobileMenuButton = document.getElementById('mobileMenuButton');
    const mobileMenu = document.getElementById('mobileMenu');

    mobileMenuButton.addEventListener('click', () => {
        mobileMenu.classList.toggle('hidden');
    });
</script>--}}