<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>{{ config('app.name', 'Cornerstone-ITS LicenseVault') }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // You can add custom colors here if needed
                    }
                }
            }
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <script>
        // Theme initialization
        (function() {
            const storedTheme = localStorage.getItem('theme');
            const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;

            if (storedTheme === 'dark' || (!storedTheme && prefersDark)) {
                document.documentElement.classList.add('dark');
            }
        })();
    </script>
    <style>
        :root {
            --font-size-base: clamp(0.875rem, 1vw, 1rem);
            --font-size-lg: clamp(1rem, 1.5vw, 1.25rem);
            --font-size-xl: clamp(1.25rem, 2vw, 1.5rem);
            --font-size-2xl: clamp(1.5rem, 3vw, 2rem);
            --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
            --spacing-sm: clamp(0.5rem, 1vw, 1rem);
            --spacing-md: clamp(1rem, 2vw, 1.5rem);
            --spacing-lg: clamp(1.5rem, 3vw, 2rem);
            --spacing-xl: clamp(2rem, 4vw, 3rem);

            /* Light mode colors */
            --bg-primary: #f9fafb;
            --bg-secondary: #ffffff;
            --bg-card: #ffffff;
            --text-primary: #111827;
            --text-secondary: #4b5563;
            --text-muted: #9ca3af;
            --border-color: #e5e7eb;
            --glass-bg: rgba(255, 255, 255, 0.95);
            --shadow-color: rgba(0, 0, 0, 0.1);
        }

        .dark {
            --bg-primary: #111827;
            --bg-secondary: #1f2937;
            --bg-card: #1f2937;
            --text-primary: #f9fafb;
            --text-secondary: #d1d5db;
            --text-muted: #6b7280;
            --border-color: #374151;
            --glass-bg: rgba(31, 41, 55, 0.95);
            --shadow-color: rgba(0, 0, 0, 0.3);
        }

        body {
            font-family: 'Inter', sans-serif;
            font-size: var(--font-size-base);
            background-color: var(--bg-primary);
            color: var(--text-primary);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        h2 { font-size: var(--font-size-2xl); }

        .glass-effect {
            background: var(--glass-bg);
            backdrop-filter: blur(10px);
            border-color: var(--border-color);
        }
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .auth-bg {
            background-image: url('/images/cornerstone.jpg');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        .card-hover:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 40px var(--shadow-color);
        }

        /* Fluid container */
        .container-fluid {
            width: 100%;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
            padding-left: clamp(0.5rem, 2vw, 1.5rem);
            padding-right: clamp(0.5rem, 2vw, 1.5rem);
        }

        /* Fluid spacing utilities */
        .p-fluid { padding: var(--spacing-md); }
        .p-fluid-lg { padding: var(--spacing-lg); }
        .gap-fluid { gap: var(--spacing-sm); }
        .gap-fluid-lg { gap: var(--spacing-md); }
        .mb-fluid { margin-bottom: var(--spacing-lg); }
        .mb-fluid-sm { margin-bottom: var(--spacing-sm); }

        /* Fluid text */
        .text-fluid-xs { font-size: clamp(0.625rem, 0.7vw, 0.75rem); }
        .text-fluid-sm { font-size: clamp(0.75rem, 0.8vw, 0.875rem); }
        .text-fluid-base { font-size: var(--font-size-base); }
        .text-fluid-lg { font-size: var(--font-size-lg); }
        .text-fluid-xl { font-size: var(--font-size-xl); }
        .text-fluid-2xl { font-size: var(--font-size-2xl); }

        /* Fluid width */
        .w-fluid { width: clamp(10rem, 20vw, 15rem); }

        /* Fluid border radius */
        .rounded-fluid { border-radius: clamp(0.5rem, 1vw, 1rem); }

        /* Fluid input/button */
        .input-fluid, .btn-fluid {
            padding: clamp(0.5rem, 1vw, 0.75rem) clamp(0.75rem, 1.5vw, 1rem);
            font-size: var(--font-size-base);
        }
    </style>
</head>
<body class="min-h-screen" style="background-color: var(--bg-primary); color: var(--text-primary);">
    <div class="min-h-screen">
        <!-- Navigation -->
        <nav class="glass-effect border-b sticky top-0 z-50" style="background-color: var(--bg-secondary); border-color: var(--border-color);">
            <div class="container-fluid">
                <div class="flex justify-between items-center" style="min-height: clamp(3rem, 6vh, 4rem);">
                    <div class="flex items-center">
                        <a href="{{ route('licenses.index') }}" class="flex items-center gap-fluid">
                            <div class="w-8 h-8 gradient-bg rounded-lg flex items-center justify-center flex-shrink-0">
                                <svg class="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"></path>
                                </svg>
                            </div>
                            <span class="font-bold truncate" style="font-size: clamp(1rem, 2vw, 1.25rem); color: var(--text-primary);">Cornerstone-ITS LicenseVault</span>
                        </a>
                    </div>

                    <!-- Mobile menu button -->
                    <button class="lg:hidden p-2 rounded-lg" style="color: var(--text-secondary); background-color: var(--bg-secondary);" onclick="toggleMobileMenu()">
                        <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"></path>
                        </svg>
                    </button>

                    <!-- Desktop Navigation -->
                    <div class="hidden lg:flex items-center gap-fluid">
                        <a href="{{ route('licenses.index') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium {{ request()->routeIs('licenses.*') ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' }}">
                            Licenses
                        </a>
                        <a href="{{ route('devices.index') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium {{ request()->routeIs('devices.*') ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' }}">
                            Devices
                        </a>
                        <a href="{{ route('licenses.export') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
                            Export
                        </a>

                        <!-- Theme Toggle -->
                        <button onclick="toggleTheme()" class="p-2 rounded-lg text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500" title="Toggle theme">
                            <!-- Sun icon (shown in dark mode) -->
                            <svg class="w-5 h-5 hidden dark:block" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path>
                            </svg>
                            <!-- Moon icon (shown in light mode) -->
                            <svg class="w-5 h-5 block dark:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"></path>
                            </svg>
                        </button>

                        <!-- User Menu -->
                        @auth
                        <div class="relative">
                            <button onclick="toggleUserMenu()" class="flex items-center gap-2 px-3 py-2 rounded-lg text-fluid-base font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700 focus:outline-none">
                                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
                                </svg>
                                <span>{{ Auth::user()->name }}</span>
                                <svg class="w-4 h-4" 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"></path>
                                </svg>
                            </button>
                            <div id="user-menu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 py-2 z-50">
                                <a href="{{ route('settings') }}" class="block px-4 py-2 text-fluid-base text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                    <span class="inline-flex items-center">
                                        <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                        </svg>
                                        Settings
                                    </span>
                                </a>
                                <form method="POST" action="{{ route('logout') }}">
                                    @csrf
                                    <button type="submit" class="w-full text-left block px-4 py-2 text-fluid-base text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700">
                                        <span class="inline-flex items-center">
                                            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
                                            </svg>
                                            Logout
                                        </span>
                                    </button>
                                </form>
                            </div>
                        </div>
                        @endauth
                    </div>
                </div>

                <!-- Mobile Navigation -->
                <div id="mobile-menu" class="hidden lg:hidden pb-4">
                    <div class="flex flex-col gap-2">
                        <a href="{{ route('licenses.index') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium {{ request()->routeIs('licenses.*') ? 'bg-purple-100 text-purple-700' : 'text-gray-600 hover:bg-gray-100' }}">
                            Licenses
                        </a>
                        <a href="{{ route('devices.index') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium {{ request()->routeIs('devices.*') ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' }}">
                            Devices
                        </a>
                        <a href="{{ route('licenses.export') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
                            Export
                        </a>
                        @auth
                        <hr class="my-2 border-gray-200 dark:border-gray-700">
                        <a href="{{ route('settings') }}" class="px-3 py-2 rounded-lg text-fluid-base font-medium {{ request()->routeIs('settings') ? 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300' : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700' }}">
                            Settings
                        </a>
                        <form method="POST" action="{{ route('logout') }}">
                            @csrf
                            <button type="submit" class="w-full text-left px-3 py-2 rounded-lg text-fluid-base font-medium text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700">
                                Logout
                            </button>
                        </form>
                        @endauth
                    </div>
                </div>
            </div>
        </nav>

        <script>
            function toggleMobileMenu() {
                const menu = document.getElementById('mobile-menu');
                menu.classList.toggle('hidden');
            }

            function toggleUserMenu() {
                const menu = document.getElementById('user-menu');
                menu.classList.toggle('hidden');
            }

            function toggleTheme() {
                const html = document.documentElement;
                if (html.classList.contains('dark')) {
                    console.log('Switching to light mode');
                    html.classList.remove('dark');
                    localStorage.setItem('theme', 'light');
                } else {
                    console.log('Switching to dark mode');
                    html.classList.add('dark');
                    localStorage.setItem('theme', 'dark');
                }
            }

            // Close user menu when clicking outside
            document.addEventListener('click', function(event) {
                const userMenu = document.getElementById('user-menu');
                const userButton = event.target.closest('button[onclick="toggleUserMenu()"]');
                if (!userButton && userMenu && !userMenu.contains(event.target)) {
                    userMenu.classList.add('hidden');
                }
            });
        </script>

        <!-- Main Content -->
        <main class="py-fluid-lg">
            <div class="container-fluid">
                @if(session('success'))
                    <div class="mb-fluid-sm p-fluid bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-fluid flex items-center gap-2">
                        <svg class="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                        </svg>
                        <span class="text-green-700 dark:text-green-300 text-fluid-base">{{ session('success') }}</span>
                    </div>
                @endif

                @if(session('error'))
                    <div class="mb-fluid-sm p-fluid bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-fluid flex items-center gap-2">
                        <svg class="w-5 h-5 text-red-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                        </svg>
                        <span class="text-red-700 dark:text-red-300 text-fluid-base">{{ session('error') }}</span>
                    </div>
                @endif

                @yield('content')
            </div>
        </main>
    </div>
</body>
</html>
