<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@yield('title', 'Biller Panel') | {{ config('app.name') }}</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <style>
        [x-cloak] { display: none !important; }
        .sidebar-transition { transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    </style>
</head>
<body class="bg-zinc-50 font-sans antialiased text-zinc-900 h-screen flex overflow-hidden" 
      x-data="{ sidebarOpen: localStorage.getItem('sidebarOpen') !== 'false' }" 
      x-init="$watch('sidebarOpen', val => localStorage.setItem('sidebarOpen', val))">
    <!-- Sidebar -->
    <aside 
        :class="sidebarOpen ? 'w-64' : 'w-20'"
        class="bg-zinc-950 text-white flex flex-col flex-shrink-0 z-20 sidebar-transition relative">
        
        <div class="h-16 flex items-center px-6 border-b border-zinc-800 flex-shrink-0 overflow-hidden">
            <div class="flex items-center min-w-max">
                <div class="w-8 h-8 bg-indigo-600 rounded-sm flex items-center justify-center text-white font-black text-sm shadow-lg shadow-indigo-900/40 mr-3 flex-shrink-0">B</div>
                <span x-show="sidebarOpen" x-transition.opacity class="text-xs font-black tracking-widest uppercase whitespace-nowrap">Biller Panel</span>
            </div>
        </div>

        <nav class="flex-1 overflow-y-auto py-6 px-4 space-y-1 no-scrollbar">
            <div class="px-3 mb-4 h-4 flex items-center">
                <p x-show="sidebarOpen" x-transition.opacity class="text-[9px] font-black text-zinc-500 uppercase tracking-widest whitespace-nowrap">Main Menu</p>
                <div x-show="!sidebarOpen" class="w-full border-t border-zinc-800"></div>
            </div>
            
            <a href="{{ route('biller.dashboard') }}" 
               class="flex items-center px-3 py-2.5 rounded-sm transition-all group {{ request()->routeIs('biller.dashboard') ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-900/40' : 'text-zinc-400 hover:bg-zinc-900 hover:text-white' }}">
                <div class="w-6 flex justify-center flex-shrink-0">
                    <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 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"></path></svg>
                </div>
                <span x-show="sidebarOpen" x-transition.opacity class="text-[10px] font-black uppercase tracking-widest ml-3 whitespace-nowrap">Overview</span>
            </a>

            <a href="{{ route('biller.pos') }}" 
               class="flex items-center px-3 py-2.5 rounded-sm transition-all group {{ request()->routeIs('biller.pos') ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-900/40' : 'text-zinc-400 hover:bg-zinc-900 hover:text-white' }}">
                <div class="w-6 flex justify-center flex-shrink-0">
                    <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="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"></path></svg>
                </div>
                <span x-show="sidebarOpen" x-transition.opacity class="text-[10px] font-black uppercase tracking-widest ml-3 whitespace-nowrap">POS Terminal</span>
            </a>

            <a href="{{ route('biller.orders.index') }}" 
               class="flex items-center px-3 py-2.5 rounded-sm transition-all group {{ request()->routeIs('biller.orders.*') ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-900/40' : 'text-zinc-400 hover:bg-zinc-900 hover:text-white' }}">
                <div class="w-6 flex justify-center flex-shrink-0">
                    <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="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
                </div>
                <span x-show="sidebarOpen" x-transition.opacity class="text-[10px] font-black uppercase tracking-widest ml-3 whitespace-nowrap">Order History</span>
            </a>

            <div x-data="{ reportsOpen: {{ request()->routeIs('biller.reports.*') ? 'true' : 'false' }} }">
                <button @click="reportsOpen = !reportsOpen"
                   class="w-full flex items-center justify-between px-3 py-2.5 rounded-sm transition-all group {{ request()->routeIs('biller.reports.*') ? 'bg-indigo-600 text-white shadow-lg shadow-indigo-900/40' : 'text-zinc-400 hover:bg-zinc-900 hover:text-white' }}">
                    <div class="flex items-center">
                        <div class="w-6 flex justify-center flex-shrink-0">
                            <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="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
                        </div>
                        <span x-show="sidebarOpen" x-transition.opacity class="text-[10px] font-black uppercase tracking-widest ml-3 whitespace-nowrap">Reports</span>
                    </div>
                    <svg x-show="sidebarOpen" class="w-3 h-3 transition-transform" :class="{'rotate-180': reportsOpen}" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                </button>
                
                <div x-show="reportsOpen && sidebarOpen" x-collapse class="pl-11 pr-3 py-2 space-y-1">
                    <a href="{{ route('biller.reports.index') }}" class="block px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors {{ request()->routeIs('biller.reports.index') ? 'text-white bg-zinc-800' : 'text-zinc-500 hover:text-white hover:bg-zinc-800' }}">Dashboard</a>
                    <a href="{{ route('biller.reports.sales') }}" class="block px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors {{ request()->routeIs('biller.reports.sales') ? 'text-white bg-zinc-800' : 'text-zinc-500 hover:text-white hover:bg-zinc-800' }}">Sales & Coll.</a>
                    <a href="{{ route('biller.reports.items') }}" class="block px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors {{ request()->routeIs('biller.reports.items') ? 'text-white bg-zinc-800' : 'text-zinc-500 hover:text-white hover:bg-zinc-800' }}">Item Sales</a>
                    <a href="{{ route('biller.reports.categories') }}" class="block px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors {{ request()->routeIs('biller.reports.categories') ? 'text-white bg-zinc-800' : 'text-zinc-500 hover:text-white hover:bg-zinc-800' }}">Category Sales</a>
                    <a href="{{ route('biller.reports.stewards') }}" class="block px-2 py-1.5 text-[10px] font-bold uppercase tracking-widest rounded-sm transition-colors {{ request()->routeIs('biller.reports.stewards') ? 'text-white bg-zinc-800' : 'text-zinc-500 hover:text-white hover:bg-zinc-800' }}">Steward Perf.</a>
                </div>
            </div>

            <div class="px-3 pt-6 mb-4 h-4 flex items-center">
                <p x-show="sidebarOpen" x-transition.opacity class="text-[9px] font-black text-zinc-500 uppercase tracking-widest whitespace-nowrap">Quick Actions</p>
                <div x-show="!sidebarOpen" class="w-full border-t border-zinc-800"></div>
            </div>

            <div class="px-3 space-y-2 overflow-hidden">
                <div class="p-3 bg-zinc-900 rounded-sm border border-zinc-800 flex items-center">
                    <div x-show="!sidebarOpen" class="w-6 flex justify-center flex-shrink-0">
                        <div class="w-2 h-2 rounded-full bg-indigo-400"></div>
                    </div>
                    <div x-show="sidebarOpen" x-transition.opacity class="min-w-0">
                        <p class="text-[8px] font-black text-zinc-500 uppercase tracking-widest mb-1">Active Branch</p>
                        <p class="text-[10px] font-bold text-indigo-400 uppercase tracking-tight truncate">{{ auth()->user()->activeBranch->name }}</p>
                    </div>
                </div>
            </div>
        </nav>

        <div class="p-4 border-t border-zinc-800 flex-shrink-0 overflow-hidden">
            <div class="flex items-center px-3 py-2">
                <div class="w-8 h-8 rounded-full bg-zinc-800 border border-zinc-700 flex items-center justify-center text-[10px] font-black text-zinc-400 flex-shrink-0">
                    {{ substr(auth()->user()->name, 0, 1) }}
                </div>
                <div x-show="sidebarOpen" x-transition.opacity class="flex-1 min-w-0 ml-3">
                    <p class="text-[10px] font-black text-white truncate">{{ auth()->user()->name }}</p>
                    <p class="text-[8px] font-black text-zinc-500 uppercase tracking-widest truncate">Biller</p>
                </div>
                <form x-show="sidebarOpen" action="{{ route('biller.logout') }}" method="POST" class="ml-2">
                    @csrf
                    <button class="p-1.5 text-zinc-500 hover:text-red-500 transition-colors">
                        <svg class="w-4 h-4" 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>
                    </button>
                </form>
            </div>
        </div>
    </aside>

    <!-- Main Content Area -->
    <main class="flex-1 flex flex-col overflow-hidden">
        <!-- Top Bar -->
        <header class="h-16 bg-white border-b border-zinc-200 flex items-center justify-between px-8 flex-shrink-0 z-10">
            <div class="flex items-center space-x-6">
                <button @click="sidebarOpen = !sidebarOpen" class="p-2 -ml-2 text-zinc-400 hover:text-zinc-600 transition-colors">
                    <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"></path></svg>
                </button>
                <h1 class="text-xs font-black uppercase tracking-widest text-zinc-500">@yield('page_title', 'Dashboard')</h1>
            </div>
            
            <div class="flex items-center space-x-4">
                <div class="flex items-center space-x-2 text-zinc-400">
                    <div class="w-2 h-2 rounded-full bg-green-500"></div>
                    <span class="text-[9px] font-black uppercase tracking-widest">System Online</span>
                </div>
                <div class="h-4 w-[1px] bg-zinc-200"></div>
                <div class="text-[9px] font-black uppercase tracking-widest text-zinc-500 italic">
                    {{ now()->format('l, d M Y') }}
                </div>
            </div>
        </header>

        <!-- Content -->
        <div class="flex-1 overflow-y-auto @yield('content_padding', 'p-8') bg-zinc-50/50">
            @yield('content')
        </div>
    </main>

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