<!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', 'DigiShop') }} Dashboard</title>

    <script>
        // Check local storage or system preference to avoid FOUC before Alpine initializes
        if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        } else {
            document.documentElement.classList.remove('dark')
        }
    </script>

    <!-- Scripts -->
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="font-sans antialiased text-slate-700 bg-[#f8f9fb] transition-colors duration-200 dark:bg-slate-900 dark:text-gray-200" 
      x-data="{ 
          sidebarOpen: false, 
          sidebarCollapsed: false, 
          isDark: localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches),
          initClock() { setInterval(() => this.updateTime(), 1000); this.updateTime(); }, 
          timeData: '', 
          updateTime() { const now = new Date(); const days = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu']; const months = ['Jan', 'Feb', 'Mar', 'Apr', 'Mei', 'Jun', 'Jul', 'Agu', 'Sep', 'Okt', 'Nov', 'Des']; this.timeData = `${days[now.getDay()]}, ${String(now.getDate()).padStart(2, '0')} ${months[now.getMonth()]} ${now.getFullYear()}, - ${now.toLocaleTimeString('id-ID', {hour: '2-digit', minute: '2-digit'}).replace('.', ':')}`; } 
      }" 
      x-init="initClock(); $watch('isDark', val => { if(val) { document.documentElement.classList.add('dark'); localStorage.setItem('color-theme', 'dark'); } else { document.documentElement.classList.remove('dark'); localStorage.setItem('color-theme', 'light'); } })">
    <div class="flex h-screen overflow-hidden">
        
        <!-- Mobile sidebar backdrop -->
        <div x-show="sidebarOpen" class="fixed inset-0 z-20 transition-opacity bg-slate-900 bg-opacity-50 lg:hidden" @click="sidebarOpen = false" x-cloak></div>

        <!-- Sidebar -->
        <div :class="[sidebarOpen ? 'translate-x-0 ease-out' : '-translate-x-full ease-in', sidebarCollapsed ? 'lg:w-24' : 'lg:w-64']" class="fixed inset-y-0 left-0 z-30 flex flex-col transition-all duration-300 transform bg-white dark:bg-slate-800 border-r border-gray-200 dark:border-slate-700 lg:translate-x-0 lg:static lg:inset-0 w-64">
            
            <!-- Logo Section -->
            <div class="flex items-center justify-between h-[4.5rem] border-b border-gray-100 dark:border-slate-700 px-5" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0' : ''">
                <!-- Logo -->
                <a href="{{ url('/') }}" @click="if(sidebarCollapsed) { $event.preventDefault(); sidebarCollapsed = false; }" class="flex items-center gap-3 flex-1 min-w-0" :class="sidebarCollapsed ? 'lg:justify-center cursor-pointer' : ''">
                    @php
                        $appLogo = \App\Models\Setting::where('key', 'app_logo')->value('value');
                        $appName = \App\Models\Setting::where('key', 'app_name')->value('value') ?? 'DigiShop';
                        $appDesc = \App\Models\Setting::where('key', 'app_description')->value('value') ?? 'Premium Digital Marketplace';
                    @endphp
                    
                    @if($appLogo && \Illuminate\Support\Facades\Storage::disk('public')->exists($appLogo))
                        <div class="p-1 rounded-lg flex items-center justify-center flex-shrink-0 bg-transparent h-10 w-10">
                            <img src="{{ \Illuminate\Support\Facades\Storage::url($appLogo) }}" alt="{{ $appName }}" class="max-h-full max-w-full object-contain">
                        </div>
                    @else
                        <div class="bg-orange-600 p-2 rounded-lg flex items-center justify-center flex-shrink-0 h-10 w-10">
                            <x-heroicon-o-shopping-bag class="w-6 h-6 text-white" stroke-width="2" />
                        </div>
                    @endif
                    
                    <div class="flex flex-col overflow-hidden min-w-0" x-show="!sidebarCollapsed">
                        <span class="text-[1.1rem] font-extrabold text-[#1f2937] dark:text-gray-100 leading-none mb-1 truncate block">{{ $appName }}</span>
                        <span class="text-[0.65rem] font-medium text-slate-400 dark:text-slate-500 leading-none tracking-wide truncate block">{{ $appDesc }}</span>
                    </div>
                </a>
                <!-- Collapse Button -->
                <div class="flex items-center justify-end flex-shrink-0 ml-2" x-show="!sidebarCollapsed">
                    <button @click="sidebarCollapsed = !sidebarCollapsed" class="text-slate-400 hover:text-[#1f2937] focus:outline-none hidden lg:block ml-2">
                        <x-heroicon-o-chevron-double-left class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                    </button>
                </div>
            </div>



            <!-- Navigation -->
            <nav class="flex-1 px-4 py-8 space-y-2 overflow-y-auto">
                <div x-show="!sidebarCollapsed" class="px-4 pb-2">
                    <p class="text-[0.65rem] font-bold text-slate-400 uppercase tracking-wider">HALAMAN UTAMA</p>
                </div>

                <!-- Beranda -->
                <a href="{{ url('/') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('home') ? 'text-orange-700 font-bold bg-orange-50 dark:bg-orange-900/30 dark:text-orange-400' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'">
                    <x-heroicon-o-home class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-emerald-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Beranda Belanja</span>
                </a>

                <!-- Dashboard (Orders) -->
                <a href="{{ route('dashboard') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('dashboard') ? 'text-orange-700 font-bold bg-orange-50 dark:bg-orange-900/30 dark:text-orange-400' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'">
                    <x-heroicon-o-shopping-bag class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-orange-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Pesanan Saya</span>
                </a>

                <div x-show="!sidebarCollapsed" class="px-4 pt-4 pb-2">
                    <p class="text-[0.65rem] font-bold text-slate-400 uppercase tracking-wider">AKUN</p>
                </div>

                <!-- Profile -->
                <a href="{{ route('profile.edit') }}" class="flex items-center py-[0.625rem] text-sm font-medium transition-colors rounded-lg {{ request()->routeIs('profile.edit') ? 'text-orange-700 font-bold bg-orange-50 dark:bg-orange-900/30 dark:text-orange-400' : 'text-slate-500 font-semibold hover:bg-slate-50 hover:text-slate-800 dark:text-gray-400 dark:hover:text-gray-100 dark:hover:bg-slate-700/50' }}" :class="sidebarCollapsed ? 'lg:justify-center lg:px-0 px-4' : 'px-4'">
                    <x-heroicon-o-user class="w-[1.35rem] h-[1.35rem] flex-shrink-0 text-rose-500" x-bind:class="sidebarCollapsed ? '' : 'mr-3'" />
                    <span x-show="!sidebarCollapsed" class="truncate" :class="sidebarCollapsed ? 'lg:hidden' : ''">Profil & Keamanan</span>
                </a>
            </nav>

            <!-- Sidebar Footer (User Logout) -->
            <div class="border-t border-gray-100 p-4 dark:border-slate-700" :class="sidebarCollapsed ? 'lg:p-3 lg:flex lg:justify-center' : ''">
                <!-- Expanded User Info -->
                <div class="flex items-center justify-between" x-show="!sidebarCollapsed" :class="sidebarCollapsed ? 'lg:hidden' : ''">
                    <div class="flex items-center gap-3 max-w-[150px]">
                        <div class="w-9 h-9 rounded-lg bg-orange-600 flex items-center justify-center text-white font-bold flex-shrink-0">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </div>
                        <div class="flex flex-col overflow-hidden">
                            <span class="text-[0.85rem] font-bold text-slate-800 dark:text-gray-100 leading-tight truncate">{{ Auth::user()->name }}</span>
                            <span class="text-[0.7rem] text-slate-500 truncate mt-0.5">Pelanggan</span>
                        </div>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="flex-shrink-0">
                        @csrf
                        <button type="submit" class="text-slate-400 hover:text-slate-600 dark:hover:text-gray-300 transition-colors p-2" title="Logout">
                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                        </button>
                    </form>
                </div>
                
                <!-- Collapsed User Info -->
                <div x-show="sidebarCollapsed" class="hidden lg:flex flex-col items-center gap-3 w-full" style="display: none;" :style="sidebarCollapsed ? 'display: flex' : 'display: none'">
                    <div class="w-10 h-10 rounded-lg bg-orange-600 flex items-center justify-center text-white font-bold relative group">
                        {{ substr(Auth::user()->name, 0, 1) }}
                        <div class="absolute left-14 top-1/2 -translate-y-1/2 bg-slate-800 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                            {{ Auth::user()->name }}
                        </div>
                    </div>
                    <form method="POST" action="{{ route('logout') }}" class="w-full">
                        @csrf
                        <button type="submit" class="w-full flex justify-center text-slate-400 hover:text-red-500 transition-colors p-2 bg-slate-50 dark:bg-slate-700 rounded-lg hover:bg-slate-100 dark:hover:bg-slate-600 relative group" title="Logout">
                            <x-heroicon-o-arrow-right-start-on-rectangle class="w-[1.125rem] h-[1.125rem]" stroke-width="2" />
                            <div class="absolute left-14 top-1/2 -translate-y-1/2 bg-red-600 text-white text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50">
                                Logout
                            </div>
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Main Content -->
        <div class="flex flex-col flex-1 overflow-hidden bg-transparent">
            <!-- Topbar -->
            <header class="flex items-center justify-between px-6 bg-white dark:bg-slate-800 border-b border-gray-100 dark:border-slate-700 h-[4.5rem] flex-shrink-0 z-10 transition-colors duration-300 shadow-sm">
                <div class="flex items-center flex-1">
                    <button @click="sidebarOpen = true" class="mr-4 text-slate-500 focus:outline-none lg:hidden">
                        <x-heroicon-o-bars-3 class="w-6 h-6" />
                    </button>
                    
                    <!-- Page Title (Moved from inner page) -->
                    <div class="flex items-center w-full max-w-full truncate overflow-hidden">
                        @if (isset($header))
                            <div class="font-extrabold text-[#1f2937] dark:text-gray-100 text-xl tracking-tight leading-none pt-1">
                                {{ $header }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="flex items-center gap-5 ml-4 flex-shrink-0">
                    <!-- Theme Toggle -->
                    <button @click="isDark = !isDark" class="text-slate-400 hover:text-orange-600 dark:hover:text-orange-400 p-1.5 rounded-full transition-colors focus:outline-none" title="Toggle Dark/Light Mode">
                        <x-heroicon-o-moon x-show="!isDark" class="w-[1.2rem] h-[1.2rem]" stroke-width="2" />
                        <x-heroicon-o-sun x-show="isDark" style="display: none;" class="w-[1.2rem] h-[1.2rem]" stroke-width="2" />
                    </button>

                    <!-- User Name & Date/Time -->
                    <div class="hidden md:flex flex-col items-end pr-2 pl-1 whitespace-nowrap">
                        <span class="text-[0.9rem] font-bold text-[#1f2937] dark:text-gray-100 leading-tight mb-0.5">{{ Auth::user()->name }}</span>
                        <!-- Live Time using AlpineJS -->
                        <span x-text="timeData" class="text-[0.7rem] font-medium text-slate-500 dark:text-slate-400 leading-none"></span>
                    </div>
                </div>
            </header>

            <!-- Main Scrollable Area -->
            <main class="flex-1 overflow-x-hidden overflow-y-auto bg-[#f8f9fb] dark:bg-slate-900 transition-colors duration-300 p-6 lg:p-8">
                <!-- Flash messages -->
                @if (session('success'))
                    <div class="mb-6 p-4 rounded-lg bg-green-50 border border-green-200 text-green-700 dark:bg-green-900/30 dark:border-green-800 dark:text-green-400 flex items-center shadow-sm">
                        <x-heroicon-s-check-circle class="w-5 h-5 mr-2" />
                        {{ session('success') }}
                    </div>
                @endif
                
                @if (session('error'))
                    <div class="mb-6 p-4 rounded-lg bg-red-50 border border-red-200 text-red-700 dark:bg-red-900/30 dark:border-red-800 dark:text-red-400 flex items-center shadow-sm">
                        <x-heroicon-s-x-circle class="w-5 h-5 mr-2" />
                        {{ session('error') }}
                    </div>
                @endif

                <!-- Page Content -->
                <div class="max-w-full">
                    {{ $slot }}
                </div>
            </main>
        </div>
    </div>
</body>
</html>

