<!DOCTYPE html>
<html lang="en" 
    x-data="{ 
        mobileMenuOpen: false,
        darkMode: localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
        toggleTheme() {
            this.darkMode = !this.darkMode;
            if (this.darkMode) {
                document.documentElement.classList.add('dark');
                localStorage.setItem('theme', 'dark');
            } else {
                document.documentElement.classList.remove('dark');
                localStorage.setItem('theme', 'light');
            }
        }
    }" 
    :class="{ 'dark': darkMode }">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script>

    <script>
        // Configuration for Tailwind Dark Mode
        tailwind.config = {
            darkMode: 'class',
        }
        
        // Instant check to prevent white flash if system is dark or storage is dark
        if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark')
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>

    <style>
        [x-cloak] { display: none !important; }
    </style>
</head>

<body class="bg-slate-50 dark:bg-slate-950 text-slate-900 dark:text-slate-100 transition-colors duration-300">

<header class="sticky top-0 z-50 w-full transition-colors duration-300">
    <nav class="bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 px-4 py-2.5 transition-colors duration-300">
        <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
            
            <div class="flex items-center">
                @auth
                <button @click="mobileMenuOpen = true" class="p-2 mr-3 text-slate-600 rounded-lg lg:hidden hover:bg-slate-100 dark:text-slate-400 dark:hover:bg-slate-800 focus:outline-none">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
                @endauth

                <a href="{{ route('user.dashboard') }}" class="flex items-center">
                    <img src="{{ getFile('logo', @$general->whitelogo) }}" class="mr-3 h-8 sm:h-10 rounded" alt="Logo" />
                </a>
            </div>

            <div class="flex items-center lg:order-2 space-x-2">
                <button @click="toggleTheme()" class="p-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full transition-all focus:outline-none">
                    <span x-show="!darkMode">
                        <i data-lucide="moon" class="w-6 h-6"></i>
                    </span>
                    <span x-show="darkMode" x-cloak>
                        <i data-lucide="sun" class="w-6 h-6"></i>
                    </span>
                </button>

                @guest
                    <a href="{{route('user.login')}}" class="text-white bg-indigo-600 hover:bg-indigo-700 font-medium rounded-lg text-sm px-4 py-2 transition">Login</a>
                @endguest

                @auth
                <div class="relative group">
                    <button class="p-2 text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-full">
                        <i data-lucide="bell" class="w-6 h-6"></i>
                        <span class="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-500 text-[10px] text-white">1</span>
                    </button>
                </div>

                <div x-data="{ open: false }" class="relative">
                    <button @click="open = !open" class="flex items-center text-slate-500 dark:text-slate-400">
                        <i data-lucide="circle-user-round" class="w-8 h-8"></i>
                    </button>
                    <div x-show="open" @click.away="open = false" x-cloak x-transition class="absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-lg shadow-xl border border-slate-200 dark:border-slate-700 py-2 z-50">
                        <a href="{{ route('user.profile') }}" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-200 hover:bg-slate-100 dark:hover:bg-slate-700">Profile</a>
                        <hr class="my-1 border-slate-200 dark:border-slate-700">
                        <a href="{{ route('user.logout') }}" class="block px-4 py-2 text-sm text-red-600 hover:bg-slate-100 dark:hover:bg-slate-700">Logout</a>
                    </div>
                </div>
                @endauth
            </div>
        </div>
    </nav>

    @auth
    <div x-show="mobileMenuOpen" x-cloak class="fixed inset-0 z-[60] overflow-hidden">
        <div @click="mobileMenuOpen = false" class="absolute inset-0 bg-slate-900/50 backdrop-blur-sm transition-opacity"></div>
        
        <div class="absolute inset-y-0 left-0 max-w-xs w-full bg-white dark:bg-slate-900 shadow-xl flex flex-col transform transition-transform" 
             x-show="mobileMenuOpen"
             x-transition:enter="transition ease-out duration-300"
             x-transition:enter-start="-translate-x-full"
             x-transition:enter-end="translate-x-0"
             x-transition:leave="transition ease-in duration-300"
             x-transition:leave-start="translate-x-0"
             x-transition:leave-end="-translate-x-full">
            
            <div class="flex items-center justify-between p-4 border-b border-slate-200 dark:border-slate-800">
                <img src="{{ getFile('logo', @$general->whitelogo) }}" class="h-8" alt="Logo">
                <button @click="mobileMenuOpen = false" class="text-slate-500 dark:text-slate-400">
                    <i data-lucide="x" class="w-6 h-6"></i>
                </button>
            </div>

            <div class="p-4">
                <div class="bg-indigo-600 rounded-xl p-4 text-white shadow-lg">
                    <p class="text-xs opacity-80 uppercase font-bold tracking-wider">Total Balance</p>
                    <h3 class="text-2xl font-bold mt-1">{{ @Auth::user()->currency }}{{ number_format(auth()->user()->balance, 2) }}</h3>
                </div>
            </div>

            <div class="flex-1 overflow-y-auto px-2 space-y-1 py-2">
                @php
                    $navItems = [
                        ['route' => 'user.dashboard', 'label' => 'Dashboard', 'icon' => 'layout-dashboard'],
                        ['route' => 'traders', 'label' => 'Copy A Trader', 'icon' => 'user-round-cog'],
                        ['route' => 'user.transaction.log', 'label' => 'All Transactions', 'icon' => 'history'],
                        ['url' => '#', 'label' => 'Fund Account', 'icon' => 'wallet-minimal'],
                        ['route' => 'user.profile', 'label' => 'Settings', 'icon' => 'settings-2'],
                    ];
                @endphp

                @foreach($navItems as $item)
                    @php
                        $isActive = isset($item['route']) && Request::routeIs($item['route']);
                        $href = isset($item['route']) ? route($item['route']) : $item['url'];
                    @endphp
                    <a href="{{ $href }}" 
                       class="flex items-center px-4 py-3 rounded-lg transition-all group {{ $isActive ? 'bg-indigo-600 text-white' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-slate-800 hover:text-indigo-600 dark:hover:text-white' }}">
                        <i data-lucide="{{ $item['icon'] }}" class="w-5 h-5 mr-3"></i>
                        <span class="font-medium">{{ $item['label'] }}</span>
                    </a>
                @endforeach

                <a href="{{ route('user.logout') }}" class="flex items-center px-4 py-3 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/10 rounded-lg mt-4 transition-all">
                    <i data-lucide="log-out" class="w-5 h-5 mr-3"></i>
                    <span class="font-bold">Logout</span>
                </a>
            </div>
        </div>
    </div>
    @endauth
</header>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        lucide.createIcons();
    });
</script>

</body>
</html>