<!DOCTYPE html>
<html lang="en" x-data="{ darkMode: localStorage.getItem('darkMode') === 'true' }" :class="{ 'dark': darkMode }">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <title>@yield('title', 'Dashboard') | {{ config('app.name', 'ABC YARN HOUSE ERP') }}</title>

    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
                    colors: {
                        primary: {
                            50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd',
                            400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8',
                            800: '#1e40af', 900: '#1e3a8a', 950: '#172554',
                        },
                        slate: {
                            50: '#f8fafc', 100: '#f1f5f9', 200: '#e2e8f0', 300: '#cbd5e1',
                            400: '#94a3b8', 500: '#64748b', 600: '#475569', 700: '#334155',
                            800: '#1e293b', 900: '#0f172a', 950: '#020617',
                        }
                    },
                    boxShadow: {
                        'soft': '0 2px 8px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06)',
                        'card': '0 4px 16px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.03)',
                        'glow': '0 0 0 4px rgba(59, 130, 246, 0.15)',
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.4s ease-in-out',
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    },
                    keyframes: {
                        fadeIn: { '0%': { opacity: 0 }, '100%': { opacity: 1 } },
                    }
                }
            }
        }
    </script>

    <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;800;900&display=swap" rel="stylesheet">

    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></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/dist/umd/lucide.js"></script>

    <style>
        body { font-family: 'Inter', system-ui, sans-serif; }
        [x-cloak] { display: none !important; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
        .dark ::-webkit-scrollbar-thumb { background: #334155; }
        .dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

        .counter-num { font-variant-numeric: tabular-nums; }

        /* Universal smooth transitions */
        .sidebar-element, .main-element { transition: all 0.25s ease-in-out; }
    </style>
    @stack('styles')
</head>
<body class="bg-slate-50 dark:bg-slate-950 text-slate-800 dark:text-slate-200 antialiased overflow-x-hidden">

    <div x-data="layoutState()" x-init="init()" class="min-h-screen">

        {{-- Mobile overlay (below sidebar) --}}
        <div x-show="mobileOpen" @click="closeMobile()" x-transition.opacity x-cloak
             class="fixed inset-0 bg-slate-900/60 z-30 lg:hidden backdrop-blur-sm"></div>

        {{-- Sidebar --}}
        <aside
            :class="[
                collapsed ? 'lg:w-20' : 'lg:w-72',
                mobileOpen ? 'translate-x-0' : '-translate-x-full lg:translate-x-0'
            ]"
            class="sidebar-element fixed top-0 left-0 z-40 w-72 h-screen bg-white dark:bg-slate-900 border-r border-slate-200 dark:border-slate-800 flex flex-col shadow-xl overflow-hidden">

            {{-- Brand --}}
            <div class="h-16 flex items-center justify-between px-4 border-b border-slate-200 dark:border-slate-800 flex-shrink-0">
                <a href="{{ route('dashboard') }}" class="flex items-center gap-3 overflow-hidden min-w-0">
                    <div class="w-10 h-10 min-w-10 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center shadow-glow flex-shrink-0">
                        <i data-lucide="hexagon" class="w-5 h-5 text-white"></i>
                    </div>
                    <div x-show="!collapsed" x-transition class="flex flex-col leading-tight min-w-0">
                        <span class="font-bold text-base text-slate-900 dark:text-white whitespace-nowrap">ABC YARN</span>
                        <span class="text-[10px] uppercase tracking-wider text-slate-500 dark:text-slate-400 font-semibold">House ERP</span>
                    </div>
                </a>
                <button @click="toggleDesktop()" class="hidden lg:flex w-8 h-8 flex-shrink-0 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 dark:hover:bg-slate-800 transition">
                    <i data-lucide="panel-left-close" x-show="!collapsed" class="w-4 h-4"></i>
                    <i data-lucide="panel-left-open" x-show="collapsed" x-cloak class="w-4 h-4"></i>
                </button>
                <button @click="closeMobile()" class="lg:hidden text-slate-500 p-2">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            {{-- Search --}}
            <div x-show="!collapsed" class="px-4 py-3 border-b border-slate-200 dark:border-slate-800">
                <div class="relative">
                    <i data-lucide="search" class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400"></i>
                    <input type="text" placeholder="Quick search..."
                        class="w-full pl-9 pr-3 py-2 text-sm bg-slate-100 dark:bg-slate-800 border-0 rounded-xl focus:ring-2 focus:ring-primary-500 focus:bg-white dark:focus:bg-slate-900 transition" />
                </div>
            </div>

            {{-- Navigation --}}
            <nav class="flex-1 overflow-y-auto overflow-x-hidden px-3 py-4">
                @include('components.sidebar-menu')
            </nav>

        </aside>

        {{-- Main Content --}}
        <div :class="collapsed ? 'lg:ml-20' : 'lg:ml-72'" class="main-element flex flex-col min-h-screen max-w-full">

            {{-- Navbar --}}
            @include('components.navbar')

            {{-- Breadcrumb --}}
            @hasSection('breadcrumb')
                <div class="px-4 sm:px-6 lg:px-8 py-3 bg-white dark:bg-slate-900 border-b border-slate-200 dark:border-slate-800 shadow-sm">
                    @yield('breadcrumb')
                </div>
            @endif

            {{-- Content --}}
            <main class="flex-1 px-3 sm:px-4 lg:px-8 py-4 sm:py-6 animate-fade-in min-w-0">
                @yield('content')
            </main>

            {{-- Footer --}}
            @include('components.footer')
        </div>
    </div>

    <script>
        function layoutState() {
            return {
                collapsed: localStorage.getItem('sidebarCollapsed') === 'true',
                mobileOpen: false,
                get isDesktop() { return window.matchMedia('(min-width: 1024px)').matches; },
                init() {
                    this.$nextTick(() => {
                        lucide.createIcons();
                        // Re-render icons on resize
                        window.addEventListener('resize', () => {
                            if (this.isDesktop) this.mobileOpen = false;
                            this.$nextTick(() => lucide.createIcons());
                        });
                    });
                },
                toggleDesktop() {
                    this.collapsed = !this.collapsed;
                    localStorage.setItem('sidebarCollapsed', this.collapsed);
                    setTimeout(() => lucide.createIcons(), 300);
                },
                toggleMobile() {
                    this.mobileOpen = !this.mobileOpen;
                    document.body.style.overflow = this.mobileOpen ? 'hidden' : '';
                },
                closeMobile() {
                    this.mobileOpen = false;
                    document.body.style.overflow = '';
                }
            }
        }

        document.addEventListener('alpine:init', () => {
            Alpine.store('darkMode', {
                on: localStorage.getItem('darkMode') === 'true',
                toggle() {
                    this.on = !this.on;
                    localStorage.setItem('darkMode', this.on);
                    document.documentElement.classList.toggle('dark', this.on);
                    lucide.createIcons();
                }
            });
        });
    </script>

    @stack('scripts')
</body>
</html>
