<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>{{ config('app.name', 'Laravel') }}</title>
		<link rel="icon" href="/favicon.svg" type="image/svg+xml">
		@vite(['resources/css/app.css', 'resources/js/app.js'])

		<!-- Critical theme initialization to prevent FOUC -->
		<script>
			const theme = localStorage.getItem('theme');
			const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (theme === 'dark' || (!theme && systemDark)) {
				document.documentElement.classList.add('dark');
			}
		</script>
	</head>

	<body class="bg-gray-50 dark:bg-gray-900 text-gray-800 dark:text-gray-100">
		<div class="min-h-screen flex flex-col">
			<!-- Navigation -->
			<nav class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
				<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
					<div class="flex justify-between h-16">
						<div class="flex items-center">
							<a href="{{ route('dashboard')}}" class="text-xl font-bold text-gray-900 dark:text-white">
								{{ config('app.name', 'Laravel') }}
							</a>
						</div>

						<!-- Desktop Navigation -->
						<div class="hidden sm:flex items-center space-x-4">
							@auth
								<a href="{{ route('dashboard')}}"
									class="px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Dashboard</a>
								<form method="POST" action="{{ route('logout') }}">
									@csrf
									<button type="submit"
										class="px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Logout</button>
								</form>
							@else
								<a href="{{ route('login') }}"
									class="px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Login</a>
								<a href="{{ route('register') }}"
									class="px-3 py-2 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">Register</a>
							@endauth

							<button id="theme-toggle" class="p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700">
								<svg id="theme-toggle-dark-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
									<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
								</svg>
								<svg id="theme-toggle-light-icon" class="hidden w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
									<path
										d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
										fill-rule="evenodd" clip-rule="evenodd"></path>
								</svg>
							</button>
						</div>

						<!-- Mobile menu button -->
						<div class="flex items-center sm:hidden">
							<button id="mobile-menu-button" class="p-2 rounded-md hover:bg-gray-100 dark:hover:bg-gray-700">
								<svg id="mobile-menu-open-icon" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
								</svg>
								<svg id="mobile-menu-close-icon" class="hidden w-6 h-6" fill="none" viewBox="0 0 24 24"
									stroke="currentColor">
									<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
								</svg>
							</button>
						</div>
					</div>
				</div>

				<!-- Mobile menu -->
				<div id="mobile-menu"
					class="hidden sm:hidden absolute right-0 left-0 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 z-50">
					<div class="px-2 pt-2 pb-3 space-y-1">

						@auth
							<a href="{{ route('dashboard') }}"
								class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Dashboard</a>
							<form method="POST" action="{{ route('logout') }}">
								@csrf
								<button type="submit"
									class="block w-full text-left px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Logout</button>
							</form>
						@else
							<a href="{{ route('login') }}"
								class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Login</a>
							<a href="{{ route('register') }}"
								class="block px-3 py-2 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">Register</a>
						@endauth

						<button id="theme-toggle-mobile"
							class="w-full text-left px-3 py-2 flex items-center hover:bg-gray-100 dark:hover:bg-gray-700">
							<svg id="theme-toggle-dark-icon-mobile" class="hidden w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
								<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
							</svg>
							<svg id="theme-toggle-light-icon-mobile" class="hidden w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 20 20">
								<path
									d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
									fill-rule="evenodd" clip-rule="evenodd"></path>
							</svg>
							<span id="theme-toggle-text">Toggle Theme</span>
						</button>
					</div>
				</div>
			</nav>

			<!-- Page Content -->
			<main class="flex-grow">
				@yield('content')
			</main>

			<!-- Footer -->
			<footer class="bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700">
				<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
					<div class="md:flex md:items-center md:justify-between">
						<div class="text-center md:text-left">
							<p class="text-gray-500 dark:text-gray-400 text-sm">
								&copy; {{ date('Y') }} BizLex. All rights reserved.
							</p>
						</div>
						<div class="mt-4 md:mt-0 flex justify-center md:justify-end space-x-6">
							{{-- 
							<a href="#"
								class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 text-sm">Privacy
								Policy</a>
							<a href="#"
								class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 text-sm">Terms of
								Service</a>
							<a href="#"
								class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 text-sm">Contact Us</a>
							--}}
						</div>
					</div>
				</div>
			</footer>
		</div>
	</body>

</html>
