<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin Dashboard') - AutoPart</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: { brand: { red: '#E41E26', dark: '#1A1A1A' } },
                    fontFamily: { sans: ['Inter', 'sans-serif'] }
                }
            }
        }
    </script>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>body { font-family: 'Inter', sans-serif; }</style>
</head>
<body class="bg-gray-50 text-gray-800 antialiased min-h-screen flex overflow-x-hidden">

    {{-- Sidebar --}}
    {{-- Mobile Overlay --}}
    <div id="mobile-overlay" class="fixed inset-0 bg-black/50 z-30 hidden transition-opacity md:hidden"></div>
    <aside id="sidebar" class="w-64 transition-all duration-300 bg-brand-dark text-white flex flex-col shrink-0 fixed h-full z-40 overflow-hidden -translate-x-full md:translate-x-0">
        <div class="h-16 flex items-center px-6 bg-black/20 border-b border-white/10 whitespace-nowrap">
            <a href="{{ url('/') }}" class="flex items-center space-x-2 text-white group" target="_blank">
                <div class="w-8 h-8 bg-brand-red rounded flex items-center justify-center shrink-0 group-hover:bg-white group-hover:text-brand-red transition-colors">
                    <i data-lucide="settings" class="w-5 h-5"></i>
                </div>
                <div class="sidebar-text font-extrabold text-lg leading-none tracking-tight">DIKE <span class="text-brand-red group-hover:text-white transition-colors">AUTO PARTS</span><span class="block text-[8px] tracking-widest text-gray-400 font-normal uppercase mt-0.5">Admin Store</span></div>
            </a>
        </div>
        <nav class="flex-1 py-6 px-4 space-y-1 overflow-y-auto">
            <div class="sidebar-text text-xs font-bold text-gray-500 uppercase tracking-widest mb-4 px-2 whitespace-nowrap">Main Menu</div>
            <a href="{{ route('admin.dashboard') }}" class="flex items-center space-x-3 px-3 py-2.5 rounded transition-colors {{ request()->routeIs('admin.dashboard') ? 'bg-brand-red text-white font-bold' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}">
                <i data-lucide="layout-dashboard" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Dashboard</span>
            </a>
            <a href="{{ route('admin.products.index') }}" class="flex items-center justify-between px-3 py-2.5 rounded transition-colors {{ request()->routeIs('admin.products.*') ? 'bg-brand-red text-white font-bold' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}">
                <div class="flex items-center space-x-3"><i data-lucide="package" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Products</span></div>
            </a>
            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded transition-colors text-gray-400 hover:bg-white/10 hover:text-white cursor-not-allowed">
                <i data-lucide="shopping-cart" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Orders</span>
            </a>
            <a href="#" class="flex items-center space-x-3 px-3 py-2.5 rounded transition-colors text-gray-400 hover:bg-white/10 hover:text-white cursor-not-allowed">
                <i data-lucide="users" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Customers</span>
            </a>
            <a href="{{ route('admin.settings') }}" class="flex items-center space-x-3 px-3 py-2.5 rounded transition-colors {{ request()->routeIs('admin.settings') ? 'bg-brand-red text-white font-bold' : 'text-gray-300 hover:bg-white/10 hover:text-white' }}">
                <i data-lucide="settings" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Settings</span>
            </a>
        </nav>
        <div class="p-4 border-t border-white/10">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit" class="flex items-center space-x-3 px-3 py-2.5 rounded w-full text-left text-gray-400 hover:bg-white/10 hover:text-white transition-colors">
                    <i data-lucide="log-out" class="w-5 h-5 shrink-0"></i><span class="sidebar-text whitespace-nowrap">Logout</span>
                </button>
            </form>
        </div>
    </aside>

    {{-- Main Content --}}
    <div id="main-content" class="flex-1 flex flex-col min-w-0 md:ml-64 relative min-h-screen transition-all duration-300">
        {{-- Header --}}
        <header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 sticky top-0 z-10 shadow-sm">
            <div class="flex items-center gap-4">
                <button id="sidebar-toggle" class="text-gray-500 hover:text-brand-red focus:outline-none transition-colors">
                    <i data-lucide="menu" class="w-6 h-6"></i>
                </button>
                <h1 class="text-xl font-extrabold text-brand-dark uppercase tracking-wider">@yield('header', 'Dashboard')</h1>
            </div>
            <div class="flex items-center space-x-4">
                <a href="{{ url('/') }}" target="_blank" class="text-sm font-bold text-gray-600 hover:text-brand-red flex items-center space-x-2 mr-4">
                    <i data-lucide="external-link" class="w-4 h-4"></i><span class="hidden sm:inline">View Store</span>
                </a>
                <div class="flex items-center space-x-3 pl-4 border-l border-gray-200">
                    <div class="text-right hidden sm:block">
                        <div class="text-sm font-bold text-gray-800">{{ auth()->user()->name ?? 'Admin User' }}</div>
                        <div class="text-xs text-brand-red font-bold uppercase tracking-widest">Administrator</div>
                    </div>
                    <div class="w-10 h-10 rounded-full bg-brand-dark text-white flex items-center justify-center font-bold">
                        {{ strtoupper(substr(auth()->user()->name ?? 'A', 0, 1)) }}
                    </div>
                </div>
            </div>
        </header>

        {{-- Page Content --}}
        <main class="flex-1 p-6 md:p-8 overflow-y-auto w-full">
            @if(session('success'))
                <div id="toast-success" class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6 flex items-center space-x-3 shadow-sm transition-opacity duration-500">
                    <i data-lucide="check-circle" class="w-5 h-5 shrink-0 text-green-500"></i>
                    <span class="font-medium text-sm">{{ session('success') }}</span>
                </div>
            @endif

            @if(session('error'))
                <div id="toast-error" class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded mb-6 flex items-center space-x-3 shadow-sm transition-opacity duration-500">
                    <i data-lucide="alert-circle" class="w-5 h-5 shrink-0 text-red-500"></i>
                    <span class="font-medium text-sm">{{ session('error') }}</span>
                </div>
            @endif

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

    @stack('scripts')
    <script>
        lucide.createIcons();
        
        // Sidebar Toggle Logic
        const sidebar = document.getElementById('sidebar');
        const mainContent = document.getElementById('main-content');
        const texts = document.querySelectorAll('.sidebar-text');
        const mobileOverlay = document.getElementById('mobile-overlay');

        document.getElementById('sidebar-toggle').addEventListener('click', function() {
            if (window.innerWidth < 768) {
                // Mobile behavior
                sidebar.classList.toggle('-translate-x-full');
                mobileOverlay.classList.toggle('hidden');
            } else {
                // Desktop behavior
                if (sidebar.classList.contains('w-64')) {
                    sidebar.classList.replace('w-64', 'w-20');
                    mainContent.classList.replace('md:ml-64', 'md:ml-20');
                    texts.forEach(el => el.classList.add('hidden'));
                } else {
                    sidebar.classList.replace('w-20', 'w-64');
                    mainContent.classList.replace('md:ml-20', 'md:ml-64');
                    texts.forEach(el => el.classList.remove('hidden'));
                }
            }
        });

        if (mobileOverlay) {
            mobileOverlay.addEventListener('click', function() {
                sidebar.classList.add('-translate-x-full');
                mobileOverlay.classList.add('hidden');
            });
        }

        // Auto-dismiss Toasts
        setTimeout(() => {
            const successToast = document.getElementById('toast-success');
            if (successToast) {
                successToast.style.opacity = '0';
                setTimeout(() => successToast.remove(), 500);
            }
            const errorToast = document.getElementById('toast-error');
            if (errorToast) {
                errorToast.style.opacity = '0';
                setTimeout(() => errorToast.remove(), 500);
            }
        }, 4000);
    </script>
</body>
</html>
