<!DOCTYPE html>
<html lang="id" class="h-full">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
    <title>@yield('title', 'POS') — {{ \App\Models\Setting::get('store_name', config('app.name')) }}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { sans: ['Plus Jakarta Sans', 'sans-serif'] },
                    colors: {
                        brand: { 50:'#eff6ff',100:'#dbeafe',200:'#bfdbfe',300:'#93c5fd',400:'#60a5fa',500:'#3b82f6',600:'#2563eb',700:'#1d4ed8',800:'#1e40af',900:'#1e3a8a' }
                    }
                }
            }
        }
    </script>
    <style>
        [x-cloak] { display: none !important; }
        .scrollbar-thin::-webkit-scrollbar { width: 4px; height: 4px; }
        .scrollbar-thin::-webkit-scrollbar-track { background: #f1f5f9; }
        .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; }
        .fade-in { animation: fadeIn .2s ease-in-out; }
        @keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
    </style>
    @stack('styles')
</head>
<body class="h-full bg-slate-50 font-sans">

<div class="flex h-full">
    {{-- SIDEBAR --}}
    <aside id="sidebar" class="fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-white flex flex-col transition-transform duration-300 lg:translate-x-0 -translate-x-full">
        {{-- Logo --}}
        @php 
            $storeName = \App\Models\Setting::get('store_name', 'POS UMKM');
            $storeLogo = \App\Models\Setting::get('store_logo');
        @endphp
        <div class="flex items-center gap-3 px-5 py-4 border-b border-slate-700/50">
            @if($storeLogo)
                <img src="{{ asset($storeLogo) }}" class="w-9 h-9 object-contain rounded-lg bg-white p-0.5">
            @else
                <div class="w-9 h-9 bg-blue-500 rounded-xl flex items-center justify-center text-white font-bold text-lg shadow-lg shadow-blue-500/30">
                    {{ substr($storeName, 0, 1) }}
                </div>
            @endif
            <div>
                <div class="text-sm font-bold text-white leading-tight truncate w-32">{{ $storeName }}</div>
                <div class="text-xs text-slate-400">Point of Sale</div>
            </div>
        </div>

        {{-- User Info --}}
        <div class="px-4 py-3 border-b border-slate-700/30">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-400 to-indigo-500 flex items-center justify-center text-sm font-bold">
                    {{ strtoupper(substr(auth()->user()->name, 0, 1)) }}
                </div>
                <div class="min-w-0">
                    <div class="text-sm font-semibold text-white truncate">{{ auth()->user()->name }}</div>
                    <div class="text-xs text-slate-400 capitalize">{{ auth()->user()->role }}</div>
                </div>
                @php $sess = auth()->user()->getActiveSession(); @endphp
                @if($sess)
                <div class="ml-auto">
                    <span class="inline-flex items-center gap-1 text-xs bg-emerald-500/20 text-emerald-400 px-2 py-0.5 rounded-full">
                        <span class="w-1.5 h-1.5 rounded-full bg-emerald-400 animate-pulse"></span>Buka
                    </span>
                </div>
                @endif
            </div>
        </div>

        {{-- Nav --}}
        <nav class="flex-1 overflow-y-auto scrollbar-thin py-3 px-3 space-y-0.5">
            @php
                $role = auth()->user()->role;
                $navItems = [
                    ['route' => 'pos.index',     'icon' => '🧾', 'label' => 'Klerek / POS',      'roles' => ['admin','kasir','manajer']],
                    ['route' => 'dashboard',     'icon' => '📊', 'label' => 'Dashboard',          'roles' => ['admin','manajer']],
                    ['route' => 'products.index','icon' => '📦', 'label' => 'Produk',             'roles' => ['admin','manajer']],
                    ['route' => 'categories.index','icon'=> '🏷️','label' => 'Kategori',           'roles' => ['admin','manajer']],
                    ['route' => 'reports.sales', 'icon' => '📈', 'label' => 'Laporan Penjualan',  'roles' => ['admin','manajer']],
                    ['route' => 'reports.voids', 'icon' => '🚫', 'label' => 'Laporan Void',       'roles' => ['admin','manajer']],
                    ['route' => 'reports.clerk', 'icon' => '👤', 'label' => 'Laporan Klerek',     'roles' => ['admin','manajer']],
                    ['route' => 'reports.stock', 'icon' => '📋', 'label' => 'Laporan Stok',       'roles' => ['admin','manajer']],
                    ['route' => 'reports.purchases', 'icon' => '🚛', 'label' => 'Laporan Pembelian', 'roles' => ['admin','manajer']],
                    ['route' => 'reports.expenses', 'icon' => '💸', 'label' => 'Laporan Pengeluaran', 'roles' => ['admin','manajer']],
                    ['route' => 'users.index',   'icon' => '👥', 'label' => 'Pengguna',           'roles' => ['admin']],
                    ['route' => 'settings.index','icon' => '⚙️', 'label' => 'Pengaturan',         'roles' => ['admin']],
                ];
            @endphp

            @foreach($navItems as $item)
                @if(in_array($role, $item['roles']))
                    <a href="{{ route($item['route']) }}"
                       class="flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-150 group
                              {{ request()->routeIs(rtrim($item['route'], '.index') . '*')
                                 ? 'bg-blue-500 text-white shadow-lg shadow-blue-500/25'
                                 : 'text-slate-400 hover:text-white hover:bg-slate-700/50' }}">
                        <span class="text-base">{{ $item['icon'] }}</span>
                        <span class="font-medium">{{ $item['label'] }}</span>
                    </a>
                @endif
            @endforeach
        </nav>

        {{-- Logout --}}
        <div class="p-3 border-t border-slate-700/30">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-red-500/20 hover:text-red-400 transition-all">
                    <span>🚪</span> <span class="font-medium">Keluar</span>
                </button>
            </form>
        </div>
    </aside>

    {{-- OVERLAY mobile --}}
    <div id="sidebarOverlay" class="fixed inset-0 bg-black/50 z-40 lg:hidden hidden" onclick="toggleSidebar()"></div>

    {{-- MAIN --}}
    <div class="flex-1 flex flex-col min-h-full lg:ml-64">
        {{-- Top bar --}}
        <header class="sticky top-0 z-30 bg-white/80 backdrop-blur border-b border-slate-200 px-4 py-3 flex items-center gap-4">
            <button onclick="toggleSidebar()" class="lg:hidden p-2 rounded-lg hover:bg-slate-100 text-slate-600">
                <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="M4 6h16M4 12h16M4 18h16"/></svg>
            </button>
            <div class="text-sm font-semibold text-slate-700">@yield('page-title', 'Dashboard')</div>
            <div class="ml-auto flex items-center gap-2 text-sm text-slate-500">
                <span>{{ now()->isoFormat('dddd, D MMMM YYYY') }}</span>
                <span class="font-mono font-semibold text-slate-700" id="liveClock"></span>
            </div>
        </header>

        {{-- Alerts --}}
        <div class="px-4 pt-4 space-y-2">
            @foreach(['success' => 'emerald', 'warning' => 'amber', 'error' => 'red'] as $type => $color)
                @if(session($type))
                <div class="flex items-center gap-3 px-4 py-3 rounded-xl bg-{{ $color }}-50 border border-{{ $color }}-200 text-{{ $color }}-800 text-sm fade-in">
                    <span>{{ $type === 'success' ? '✅' : ($type === 'warning' ? '⚠️' : '❌') }}</span>
                    <span>{{ session($type) }}</span>
                    <button onclick="this.parentElement.remove()" class="ml-auto text-{{ $color }}-500 hover:text-{{ $color }}-700 font-bold">×</button>
                </div>
                @endif
            @endforeach
            @if($errors->any())
            <div class="px-4 py-3 rounded-xl bg-red-50 border border-red-200 text-red-800 text-sm fade-in">
                <div class="font-semibold mb-1">❌ Terdapat kesalahan:</div>
                <ul class="list-disc list-inside space-y-0.5">
                    @foreach($errors->all() as $err)
                    <li>{{ $err }}</li>
                    @endforeach
                </ul>
            </div>
            @endif
        </div>

        {{-- Content --}}
        <main class="flex-1 p-4">
            @yield('content')
        </main>

        <footer class="text-center text-xs text-slate-400 py-3 border-t border-slate-200">
            POS UMKM &copy; {{ date('Y') }} — v1.0
        </footer>
    </div>
</div>

<script>
    function toggleSidebar() {
        const sb = document.getElementById('sidebar');
        const ov = document.getElementById('sidebarOverlay');
        sb.classList.toggle('-translate-x-full');
        ov.classList.toggle('hidden');
    }
    // Live clock
    function updateClock() {
        const el = document.getElementById('liveClock');
        if (el) el.textContent = new Date().toLocaleTimeString('id-ID', {hour:'2-digit',minute:'2-digit',second:'2-digit'});
    }
    setInterval(updateClock, 1000); updateClock();

    // Format rupiah helper
    window.rupiah = (n) => 'Rp ' + parseFloat(n).toLocaleString('id-ID', {minimumFractionDigits:0});
</script>
@stack('scripts')
</body>
</html>
