<header>
    <div class="container">
        <div class="header-content">
            <div class="logo"><a href="/" style="text-decoration: none; color: inherit;">Additional Design</a></div>
            <nav>
                <!-- <a href="/">Home</a> -->
                <a href="/wallpapers">Wallpaper</a>
                <a href="/murals">Murals</a>
                <!-- <a href="/fabrics">Fabrics</a> -->
                <!-- <a href="/#portfolio">Portfolio</a> -->
                <a href="/#projects">Projects</a>
                <!-- <a href="/#shop">Decor Shop</a> -->
                <a href="/#contact">Contact</a>
                <a href="{{ route('track-order-form') }}">Track Order</a>
            </nav>
            <div style="display: flex; align-items: center; gap: 1.5rem;">
                <!-- Authentication Links -->
                @auth
                    <a href="{{ route('custom-orders.create') }}" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Custom Order</a>
                    <div style="position: relative; display: inline-block;">
                        <button onclick="toggleUserMenu()" style="background: none; border: none; cursor: pointer; padding: 0; font-weight: 500; display: flex; align-items: center; gap: 0.5rem; color: inherit; font-size: 0.9rem; font-family: Montserrat, sans-serif;">
                            {{ auth()->user()->name }}
                            <svg style="width: 16px; height: 16px;" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>
                        <div id="user-menu" style="display: none; position: absolute; right: 0; top: 100%; margin-top: 0.5rem; background: white; border-radius: 0.5rem; box-shadow: 0 10px 25px rgba(0,0,0,0.1); min-width: 200px; z-index: 1000;">
                            <a href="{{ route('my-account') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Account</a>
                            <a href="{{ route('my-orders') }}" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">My Orders</a>
                            @if(auth()->user()->is_admin)
                                <a href="/admin" style="display: block; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid #e5e7eb;">Admin Panel</a>
                            @endif
                            <form action="{{ route('logout') }}" method="POST" style="margin: 0;" id="logout-form">
                                @csrf
                                <button type="submit" style="font-family: Montserrat, sans-serif; width: 100%; text-align: left; padding: 0.75rem 1rem; background: none; border: none; cursor: pointer; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign Out</button>
                            </form>
                        </div>
                    </div>
                @else
                    <a href="{{ route('auth.login') }}" style="text-decoration: none; color: inherit; font-weight: 500; font-size: 0.9rem;">Sign In</a>
                @endauth

                <!-- Cart -->
                <a href="{{ route('cart') }}" style="display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: inherit; font-weight: 500; position: relative;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <circle cx="9" cy="21" r="1"></circle>
                        <circle cx="20" cy="21" r="1"></circle>
                        <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"></path>
                    </svg>
                    <span>Cart</span>
                    @if($cartCount > 0)
                        <span style="background: var(--accent-dark); color: white; border-radius: 50%; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: bold; position: absolute; top: -8px; right: -8px;">{{ $cartCount }}</span>
                    @endif
                </a>
            </div>
        </div>
        </div>
    </div>
</header>

<script>
function toggleUserMenu() {
    const menu = document.getElementById('user-menu');
    if (menu) {
        menu.style.display = menu.style.display === 'none' ? 'block' : 'none';
    }
}

// Close menu when clicking outside
document.addEventListener('click', function(event) {
    const userMenu = document.getElementById('user-menu');
    const toggleButton = event.target.closest('button[onclick="toggleUserMenu()"]');
    const logoutForm = document.getElementById('logout-form');
    
    // Don't close if clicking logout form or the toggle button
    if (userMenu && !event.target.closest('#user-menu') && !toggleButton && !logoutForm?.contains(event.target)) {
        userMenu.style.display = 'none';
    }
});

// Allow logout form to submit by not preventing default
document.addEventListener('submit', function(event) {
    if (event.target.id === 'logout-form') {
        // Allow normal form submission
        return true;
    }
});
</script>
