
<header class="w-full bg-white/80 backdrop-blur-md border-b border-gray-100 fixed top-0 z-50 h-[80px] flex items-center transition-all duration-300">
    <div class="w-full max-w-[1300px] mx-auto px-6 md:px-0 flex items-center justify-between">
        
        <a href="<?php echo e(url('/')); ?>" class="flex items-center">
            <img src="<?php echo e(asset('logo.png')); ?>" alt="<?php echo e(config('app.name', 'Laravel')); ?>" class="h-6 w-auto">
        </a>

        
        

        
        <div class="hidden md:flex items-center gap-3">
            <p style="display: none;">Auth check:<?php echo e(session('db_connection')); ?> <?php echo e(auth()->check() ? 'Yes' : 'No'); ?></p>

            <?php if(auth()->guard()->check()): ?>
                <div class="relative">
                    <button type="button" id="user-menu-button" class="flex items-center gap-2 px-4 py-2 rounded-full hover:bg-gray-50 transition-all duration-200">
                        <img src="https://ui-avatars.com/api/?name=<?php echo e(urlencode(auth()->user()->name)); ?>&background=2F3D7E&color=fff"
                            alt="User" class="w-8 h-8 rounded-full">
                        <span class="text-sm font-medium text-gray-700"><?php echo e(auth()->user()->name); ?></span>
                        <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
                        </svg>
                    </button>

                    
                    <div id="user-menu-dropdown"
                        class="hidden absolute right-0 mt-2 w-48 bg-white shadow-lg rounded-xl py-2 border border-gray-100"
                        style="z-index: 9999;">
                        <a href="<?php echo e(route('dashboard.index')); ?>"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">Dashboard</a>
                        <a href="<?php echo e(route('see-salary')); ?>"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">See Salaries</a>
                        <a href="<?php echo e(route('logout')); ?>"
                            onclick="event.preventDefault(); document.getElementById('logout-form').submit();"
                            class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-50 transition">Logout</a>
                        <form id="logout-form" action="<?php echo e(route('logout')); ?>" method="POST" class="hidden">
                            <?php echo csrf_field(); ?>
                        </form>
                    </div>
                </div>
            <?php else: ?>
                <a href="<?php echo e(route('login')); ?>"
                    class="h-10 px-4 text-sm font-medium text-gray-600 hover:text-[#2F3D7E] flex items-center rounded-full hover:bg-gray-50 transition-all">
                    Log in
                </a>

                <div class="h-6 w-px bg-gray-200 mx-1"></div>

                <a href="<?php echo e(route('register')); ?>"
                    class="h-10 px-5 text-sm font-medium bg-white border border-gray-200 hover:border-[#2F3D7E]/30 hover:bg-gray-50 rounded-xl flex items-center shadow-sm transition-all">
                    Sign Up
                </a>

                <a href="<?php echo e(route('see-salary')); ?>"
                    class="h-10 px-5 text-sm font-medium bg-[#2F3D7E] hover:bg-[#1E2858] text-white hover:text-white rounded-xl flex items-center gap-2 shadow-lg shadow-blue-900/10 transition-all group">
                    See Salaries
                    <svg class="w-4 h-4 group-hover:translate-x-0.5 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                    </svg>
                </a>
            <?php endif; ?>
        </div>

        
        <button type="button" id="mobile-menu-button" class="md:hidden p-2 text-gray-600 hover:bg-gray-100 rounded-lg transition-colors">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
        </button>
    </div>

    
    <nav id="mobile-menu" class="hidden absolute top-[80px] left-0 w-full bg-white border-b border-gray-100 p-6 flex-col gap-4 md:hidden shadow-xl animate-in slide-in-from-top-5 duration-200">
        <a href="<?php echo e(url('/')); ?>" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Individual</a>
        <a href="#" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Community</a>
        <a href="#" class="text-lg font-medium text-gray-700 py-2 border-b border-gray-50">Resources</a>

        <div class="flex flex-col gap-3 mt-4">
            <?php if(auth()->guard()->check()): ?>
                <a href="<?php echo e(route('dashboard.index')); ?>" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Dashboard</a>
                <a href="<?php echo e(route('logout')); ?>"
                    onclick="event.preventDefault(); document.getElementById('logout-form-mobile').submit();"
                    class="w-full py-3 text-center bg-[#2F3D7E] text-white rounded-lg text-sm font-medium hover:bg-[#1E2858] transition">Logout</a>
                <form id="logout-form-mobile" action="<?php echo e(route('logout')); ?>" method="POST" class="hidden">
                    <?php echo csrf_field(); ?>
                </form>
            <?php else: ?>
                <a href="<?php echo e(route('login')); ?>" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Log in</a>
                <a href="<?php echo e(route('register')); ?>" class="w-full py-3 text-center border border-gray-200 rounded-lg text-sm font-medium hover:bg-gray-50 transition">Sign Up</a>
                <a href="<?php echo e(route('see-salary')); ?>" class="w-full py-3 text-center bg-[#2F3D7E] text-white rounded-lg text-sm font-medium hover:bg-[#1E2858] transition">See Salaries</a>
            <?php endif; ?>
        </div>
    </nav>
</header>

<?php if(auth()->guard()->check()): ?>
<script>
    // User menu dropdown toggle
    const userMenuButton = document.getElementById('user-menu-button');
    const userMenuDropdown = document.getElementById('user-menu-dropdown');

    if (userMenuButton && userMenuDropdown) {
        userMenuButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            console.log('Button clicked'); // Debug log
            userMenuDropdown.classList.toggle('block');
        });

        // Close dropdown when clicking outside
        document.addEventListener('click', function(event) {
            if (!userMenuButton.contains(event.target) && !userMenuDropdown.contains(event.target)) {
                userMenuDropdown.classList.add('hidden');
            }
        });
    }
</script>
<?php endif; ?>

<script>
    // Mobile menu toggle
    const mobileMenuButton = document.getElementById('mobile-menu-button');
    const mobileMenu = document.getElementById('mobile-menu');

    if (mobileMenuButton && mobileMenu) {
        mobileMenuButton.addEventListener('click', function() {
            // mobileMenu.classList.toggle('hidden');
            mobileMenu.classList.toggle('flex');
        });
    }
</script>
<?php /**PATH /var/www/ratemypay/resources/views/components/header.blade.php ENDPATH**/ ?>