<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Admin Dashboard - SI Apotek')</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#10b981',
                        secondary: '#047857',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @theme {
            --color-primary: #10b981;
            --color-secondary: #047857;
        }
        [x-cloak] { display: none !important; }
        
        /* Dark Mode Overrides */
        .dark {
            background-color: #111827 !important; color: #f3f4f6 !important;
        }
        .dark .bg-white { background-color: #1f2937 !important; }
        .dark .bg-gray-50, .dark .bg-gray-100 { background-color: #111827 !important; }
        .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600 { color: #f3f4f6 !important; }
        .dark .text-gray-500 { color: #9ca3af !important; }
        .dark .border, .dark .border-b, .dark .border-t, .dark .border-gray-200, .dark .border-gray-100, .dark .border-gray-300 { border-color: #374151 !important; }
        .dark input, .dark select, .dark textarea { background-color: #374151 !important; color: #f3f4f6 !important; border-color: #4b5563 !important; }
        .dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; }
        .dark .divide-y > * + * { border-color: #374151 !important; }
        .dark table th { background-color: #374151 !important; color: #e5e7eb !important; border-color: #4b5563 !important; }
        .dark table td { border-color: #4b5563 !important; }
        .dark aside { background-color: #1f2937 !important; border-right: 1px solid #374151; }
        .dark header { background-color: #1f2937 !important; border-bottom: 1px solid #374151; }
        .dark canvas { filter: invert(0.8) hue-rotate(180deg); }
    </style>
</head>
<body class="bg-gray-100 font-sans antialiased text-gray-800 transition-colors duration-200" 
      x-data="{ 
          darkMode: localStorage.getItem('theme') === 'dark',
          sidebarOpen: false, 
          desktopSidebarOpen: true 
      }" 
      x-init="$watch('darkMode', val => localStorage.setItem('theme', val ? 'dark' : 'light'))"
      :class="{ 'dark': darkMode }">
    <div class="flex h-screen overflow-hidden">
        
        <!-- Sidebar -->
        <aside class="z-20 w-64 overflow-y-auto bg-white flex-shrink-0 shadow-lg transition-all duration-300" :class="{'block': sidebarOpen, 'hidden': !sidebarOpen, 'md:block': desktopSidebarOpen, 'md:hidden': !desktopSidebarOpen}">
            <div class="py-4 text-gray-500">
                <a class="ml-6 text-xl font-bold text-emerald-600 flex items-center gap-2" href="{{ route('dashboard') }}">
                    @if(isset($appSetting) && $appSetting->logo_path)
                        <img src="{{ asset($appSetting->logo_path) }}" alt="Logo" class="h-8 object-contain">
                    @else
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"></path></svg>
                    @endif
                    <span class="truncate">{{ $appSetting->app_name ?? 'ApotekKu' }}</span>
                </a>
                <ul class="mt-6">
                    <li class="relative px-6 py-3">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->routeIs('dashboard') ? 'text-emerald-600' : '' }}" href="{{ route('dashboard') }}">
                            <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="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path></svg>
                            <span class="ml-4">Dashboard</span>
                        </a>
                    </li>
                </ul>
                
                <div class="px-6 my-2 text-xs font-semibold tracking-wider text-gray-400 uppercase mt-4">Master Data</div>
                <ul>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('categories*') ? 'text-emerald-600' : '' }}" href="{{ route('categories.index') }}">
                            <span class="ml-4">Kategori Obat</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('units*') ? 'text-emerald-600' : '' }}" href="{{ route('units.index') }}">
                            <span class="ml-4">Satuan</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('suppliers*') ? 'text-emerald-600' : '' }}" href="{{ route('suppliers.index') }}">
                            <span class="ml-4">Supplier</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('medicines*') ? 'text-emerald-600' : '' }}" href="{{ route('medicines.index') }}">
                            <span class="ml-4">Data Obat</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('users*') ? 'text-emerald-600' : '' }}" href="{{ route('users.index') }}">
                            <span class="ml-4">Pengguna</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->routeIs('settings.*') ? 'text-emerald-600' : '' }}" href="{{ route('settings.index') }}">
                            <span class="ml-4">Pengaturan Sistem</span>
                        </a>
                    </li>
                </ul>

                <div class="px-6 my-2 text-xs font-semibold tracking-wider text-gray-400 uppercase mt-4">Transaksi & Laporan</div>
                <ul>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('pos*') ? 'text-emerald-600' : '' }}" href="{{ route('pos.index') }}">
                            <span class="ml-4">Kasir / POS</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('purchases*') ? 'text-emerald-600' : '' }}" href="{{ route('purchases.index') }}">
                            <span class="ml-4">Pembelian (Restock)</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('forecasting*') ? 'text-emerald-600' : '' }}" href="{{ route('forecasting.index') }}">
                            <span class="ml-4">Forecasting (SMA)</span>
                        </a>
                    </li>
                    <li class="relative px-6 py-2">
                        <a class="inline-flex items-center w-full text-sm font-semibold transition-colors duration-150 hover:text-emerald-600 {{ request()->is('reports/sales*') ? 'text-emerald-600' : '' }}" href="{{ route('reports.sales') }}">
                            <span class="ml-4">Laporan Penjualan</span>
                        </a>
                    </li>
                </ul>
            </div>
        </aside>

        <!-- Main Content Wrapper -->
        <div class="flex flex-col flex-1 w-full">
            <!-- Topbar -->
            <header class="z-10 py-4 bg-white shadow-sm">
                <div class="container flex items-center justify-between h-full px-6 mx-auto text-emerald-600">
                    <button class="p-1 mr-5 -ml-1 rounded-md md:hidden focus:outline-none focus:shadow-outline-emerald" @click="sidebarOpen = !sidebarOpen" aria-label="Menu">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                    </button>
                    <button class="p-1 mr-5 -ml-1 rounded-md hidden md:block focus:outline-none focus:shadow-outline-emerald" @click="desktopSidebarOpen = !desktopSidebarOpen" aria-label="Menu">
                        <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
                    </button>
                    
                    <div class="flex justify-center flex-1 lg:mr-32">
                        <!-- Search input space -->
                    </div>
                    
                    <ul class="flex items-center flex-shrink-0 space-x-6">
                        <!-- Theme Toggler -->
                        <li class="flex">
                            <button class="rounded-md focus:outline-none focus:shadow-outline-emerald text-emerald-600 dark:text-emerald-400" @click="darkMode = !darkMode" aria-label="Toggle color mode">
                                <template x-if="!darkMode">
                                    <svg class="w-5 h-5" aria-hidden="true" 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>
                                </template>
                                <template x-if="darkMode">
                                    <svg class="w-5 h-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4.22 4.22a1 1 0 011.415 0l.708.708a1 1 0 01-1.414 1.414l-.708-.708a1 1 0 010-1.414zM18 10a1 1 0 01-1 1h-1a1 1 0 110-2h1a1 1 0 011 1zM14.22 15.636a1 1 0 01-1.415 0l-.708-.708a1 1 0 011.414-1.414l.708.708a1 1 0 010 1.414zM10 18a1 1 0 01-1-1v-1a1 1 0 112 0v1a1 1 0 01-1 1zm-4.22-4.22a1 1 0 01-1.415 0l-.708-.708a1 1 0 011.414-1.414l.708.708a1 1 0 010 1.414zM2 10a1 1 0 011-1h1a1 1 0 110 2H3a1 1 0 01-1-1zm1.564-4.22a1 1 0 010-1.415l.708-.708a1 1 0 111.414 1.414l-.708.708a1 1 0 01-1.414 0zM10 14a4 4 0 100-8 4 4 0 000 8z" clip-rule="evenodd"></path>
                                    </svg>
                                </template>
                            </button>
                        </li>
                        <li class="relative" x-data="{ profileOpen: false }">
                            <button class="align-middle rounded-full focus:shadow-outline-emerald focus:outline-none flex items-center gap-2" @click="profileOpen = !profileOpen" @keydown.escape="profileOpen = false" aria-label="Account" aria-haspopup="true">
                                <span class="text-sm text-gray-700 font-semibold">{{ Auth::user()->name }} ({{ ucfirst(Auth::user()->role) }})</span>
                                <div class="w-8 h-8 rounded-full bg-emerald-100 flex items-center justify-center text-emerald-600 font-bold">
                                    {{ substr(Auth::user()->name, 0, 1) }}
                                </div>
                            </button>
                            <template x-if="profileOpen">
                                <ul x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @click.away="profileOpen = false" class="absolute right-0 w-56 p-2 mt-2 space-y-2 text-gray-600 bg-white border border-gray-100 rounded-md shadow-lg">
                                    <li class="flex">
                                        <form method="POST" action="{{ route('logout') }}" class="w-full">
                                            @csrf
                                            <button class="inline-flex items-center w-full px-2 py-2 text-sm font-semibold transition-colors duration-150 rounded-md hover:bg-gray-100 hover:text-gray-800">
                                                <svg class="w-4 h-4 mr-3" 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>
                                                <span>Keluar</span>
                                            </button>
                                        </form>
                                    </li>
                                </ul>
                            </template>
                        </li>
                    </ul>
                </div>
            </header>
            
            <main class="h-full overflow-y-auto bg-gray-50 pb-10">
                <div class="container px-6 mx-auto grid mt-6">
                    @yield('content')
                </div>
            </main>
        </div>
    </div>
    @stack('scripts')
</body>
</html>
