@extends('layouts.pos')

@section('content')
    <div x-data="posApp()" x-init="init()" class="h-screen flex flex-col">
        @if(session('error'))
            <div class="bg-red-500 text-white px-4 py-2 text-center text-sm font-semibold flex items-center justify-center gap-2">
                <span>⚠️</span> {{ session('error') }}
            </div>
        @endif
        {{-- Header --}}
        <header class="bg-white shadow-sm border-b border-slate-200 px-4 py-2">
            <div class="flex items-center justify-between">
                <div class="flex items-center gap-4">
                    <div class="flex items-center gap-2">
                        <span class="text-2xl">🏪</span>
                        <div>
                            <h1 class="font-semibold text-slate-800">{{ auth()->user()->branch->name ?? app_name() }}</h1>
                            <div class="flex items-center gap-2">
                                <p class="text-xs text-slate-500">POS Billing System</p>
                                <span class="bg-green-600 text-white text-[10px] font-bold px-1.5 py-0.5 rounded">v4.2
                                    FIXED</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex items-center gap-6">
                    <div class="flex items-center gap-2 text-slate-600">
                        <span class="text-lg">👤</span>
                        <span class="font-medium">{{ auth()->user()->name }}</span>
                    </div>
                    <div class="text-slate-600 font-mono" x-text="currentTime"></div>

                    {{-- Keyboard Shortcuts Dropdown --}}
                    <div class="relative" x-data="{ openShortcuts: false }" @click.outside="openShortcuts = false">
                        <button @click="openShortcuts = !openShortcuts" 
                                class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-slate-100 hover:bg-slate-200 text-slate-700 hover:text-slate-900 rounded-lg text-xs font-bold transition">
                            <span>⌨️</span> Shortcuts <span class="text-[10px] text-slate-400">▼</span>
                        </button>
                        
                        <div x-show="openShortcuts" x-cloak x-transition
                             class="absolute right-0 mt-2 w-64 bg-white rounded-xl shadow-2xl border border-slate-200 py-3 px-4 z-50 text-xs text-slate-700">
                            <h4 class="font-bold text-slate-800 border-b border-slate-100 pb-2 mb-2 flex items-center justify-between">
                                <span>⌨️ Terminal Shortcuts</span>
                                <span class="bg-blue-50 text-blue-600 text-[10px] px-1.5 py-0.5 rounded font-bold">POS</span>
                            </h4>
                            <div class="space-y-2">
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Focus Search Bar</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F3 / F4</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Quick Cash Payment</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F8</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Quick Card Payment</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F9</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Print Last Receipt</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F7</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Exact Cash Total</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F10</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Next Customer / New Bill</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">F2</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Complete / Confirm</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">Enter</kbd>
                                </div>
                                <div class="flex items-center justify-between">
                                    <span class="text-slate-600 font-medium">Cancel / Close Modal</span>
                                    <kbd class="px-2 py-0.5 bg-slate-100 border border-slate-300 rounded font-mono font-bold">Esc</kbd>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    {{-- Warranty Lookup Button --}}
                    <button @click="showWarrantyModal = true" type="button"
                       class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-blue-50 hover:bg-blue-100 text-blue-600 hover:text-blue-700 rounded-lg text-xs font-bold transition">
                        <span>🛡️</span> Warranty Lookup
                    </button>

                    {{-- Close Register Button --}}
                    <button @click="openCloseRegisterModal()" type="button"
                            class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-50 hover:bg-red-100 text-red-600 hover:text-red-700 rounded-lg text-xs font-bold transition">
                        <span>🛑</span> Close Register
                    </button>

                    <div x-show="!isOnline"
                         class="flex items-center gap-1 text-amber-600 bg-amber-50 px-3 py-1 rounded-full text-sm">
                        <span>📴</span> Offline
                    </div>
                    <div x-show="pendingTransactionCount > 0"
                         class="flex items-center gap-1 text-blue-600 bg-blue-50 px-3 py-1 rounded-full text-sm cursor-pointer"
                         @click="syncPendingTransactions()" title="Click to sync pending transactions">
                        <span>🔄</span>
                        <span x-text="pendingTransactionCount + ' pending'"></span>
                    </div>
                    <div class="relative" x-data="{ open: false }" @click.outside="open = false">
                        <button @click="open = !open" class="p-2 hover:bg-slate-100 rounded-lg">
                            <svg class="w-6 h-6 text-slate-600" 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>

                        <!-- Dropdown Menu -->
                        <div x-show="open" x-cloak x-transition
                            class="absolute right-0 mt-2 w-56 bg-white rounded-xl shadow-2xl border border-slate-200 py-2 z-50">
                            @if(!auth()->user()->isCashier())
                                <a href="{{ route('admin.dashboard') }}"
                                    class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                    <span class="text-xl">🏠</span>
                                    <div>
                                        <div class="font-medium">Dashboard</div>
                                        <div class="text-xs text-slate-500">View overall statistics</div>
                                    </div>
                                </a>
                            @endif


                            <a href="{{ route('admin.products.index') }}"
                                class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                <span class="text-xl">📦</span>
                                <div>
                                    <div class="font-medium">Products</div>
                                    <div class="text-xs text-slate-500">Manage item inventory</div>
                                </div>
                            </a>

                            <a href="{{ route('admin.categories.index') }}"
                                class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                <span class="text-xl">📋</span>
                                <div>
                                    <div class="font-medium">Categories</div>
                                    <div class="text-xs text-slate-500">Manage categories</div>
                                </div>
                            </a>

                            <a href="{{ route('admin.stock.index') }}"
                                class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                <span class="text-xl">📊</span>
                                <div>
                                    <div class="font-medium">Stock Management</div>
                                    <div class="text-xs text-slate-500">Track and adjust stock</div>
                                </div>
                            </a>

                            <a href="{{ route('admin.suppliers.index') }}"
                                class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                <span class="text-xl">🤝</span>
                                <div>
                                    <div class="font-medium">Suppliers</div>
                                    <div class="text-xs text-slate-500">Manage suppliers</div>
                                </div>
                            </a>

                            <a href="{{ route('admin.purchases.index') }}"
                                class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                <span class="text-xl">📥</span>
                                <div>
                                    <div class="font-medium">Purchase Bills</div>
                                    <div class="text-xs text-slate-500">Record stock entry (GRN)</div>
                                </div>
                            </a>

                            @if(!auth()->user()->isCashier())
                                <a href="{{ route('admin.invoices.index') }}"
                                    class="flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-blue-50 hover:text-blue-600 transition">
                                    <span class="text-xl">🧾</span>
                                    <div>
                                        <div class="font-medium">Invoices</div>
                                        <div class="text-xs text-slate-500">View sales invoices</div>
                                    </div>
                                </a>
                            @endif

                            <div class="border-t border-slate-200 my-2"></div>

                            <button @click="installPWA()" x-show="showInstallButton"
                                class="w-full flex items-center gap-3 px-4 py-3 text-slate-700 hover:bg-green-50 hover:text-green-600 transition text-left">
                                <span class="text-xl">📱</span>
                                <div>
                                    <div class="font-medium">Install App</div>
                                    <div class="text-xs text-slate-500">Install to your device</div>
                                </div>
                            </button>

                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit"
                                    class="w-full flex items-center gap-3 px-4 py-3 text-red-600 hover:bg-red-50 transition text-left">
                                    <span class="text-xl">🚪</span>
                                    <div>
                                        <div class="font-medium">Logout</div>
                                        <div class="text-xs text-red-400">Exit application</div>
                                    </div>
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        {{-- Main Content --}}
        <div class="flex-1 flex overflow-hidden">
            {{-- Left Panel - Cart --}}
            <div class="w-1/2 xl:w-2/5 flex flex-col bg-white border-r border-slate-200">
                {{-- Search Bar --}}
                <div class="p-4 border-b border-slate-200">
                    <div class="relative">
                        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-xl">🔍</span>
                        <input type="text" x-model="searchQuery" @input.debounce.200ms="searchProducts()"
                            @keydown.enter="handleBarcodeEnter()" x-ref="searchInput"
                            placeholder="Scan barcode or search products (F3 to focus)..."
                            class="w-full pl-12 pr-4 py-3 border-2 border-slate-200 rounded-xl text-lg focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none transition">
                    </div>
                    {{-- Search Results Dropdown --}}
                    <div x-show="searchResults.length > 0 && searchQuery.length > 0" x-cloak
                        class="absolute z-50 mt-2 w-[calc(50%-2rem)] xl:w-[calc(40%-2rem)] bg-white rounded-xl shadow-2xl border border-slate-200 max-h-80 overflow-y-auto">
                        <template x-for="product in searchResults" :key="product.id">
                            <button @click="addToCart(product)"
                                class="w-full px-4 py-3 text-left hover:bg-blue-50 border-b border-slate-100 last:border-0 flex items-center justify-between gap-4">
                                <div>
                                    <div class="font-medium text-slate-800" x-text="product.name"></div>
                                    <div class="text-sm text-slate-500" x-text="product.barcode"></div>
                                </div>
                                <div class="text-right">
                                    <div class="font-bold text-blue-600" x-text="'LKR ' + formatNumber(product.price)">
                                    </div>
                                    <div class="text-xs text-slate-500" x-text="'Stock: ' + product.stock"></div>
                                </div>
                            </button>
                        </template>
                    </div>
                </div>

                {{-- Cart Header --}}
                <div class="flex items-center justify-between px-4 py-3 bg-slate-50 border-b border-slate-200">
                    <div class="flex items-center gap-3">
                        <h2 class="font-semibold text-slate-700 text-lg">🛒 Cart</h2>
                        <select x-model="saleMode" @change="toggleSaleMode()" class="px-2 py-1 border border-slate-300 rounded-lg text-xs font-semibold bg-white outline-none">
                            <option value="retail">Retail Mode</option>
                            <option value="wholesale">Wholesale Mode</option>
                        </select>
                    </div>
                    <button @click="clearCart()" x-show="cart.length > 0"
                        class="text-red-500 hover:text-red-600 text-sm font-medium flex items-center gap-1">
                        🗑️ Clear
                    </button>
                </div>

                {{-- Cart Items --}}
                <div class="flex-1 overflow-y-auto p-4 space-y-3">
                    <template x-if="cart.length === 0">
                        <div class="text-center py-12 text-slate-400">
                            <div class="text-5xl mb-4">🛒</div>
                            <p>Cart is empty</p>
                            <p class="text-sm">Please search or scan products to add to cart</p>
                        </div>
                    </template>

                    <template x-for="(item, index) in cart" :key="item.id + '-' + index">
                        <div class="bg-slate-50 rounded-xl p-4 border border-slate-200">
                            <div class="flex items-start justify-between gap-4 mb-2">
                                <div class="flex-1">
                                    <h3 class="font-medium text-slate-800" x-text="item.name"></h3>
                                    <div class="flex items-center gap-2 mt-1">
                                        <span class="text-xs text-slate-400">Price (LKR):</span>
                                        <input type="number" x-model.number="item.price" class="w-24 h-7 text-xs border border-slate-300 rounded px-2 outline-none font-semibold text-blue-600 focus:border-blue-500">
                                    </div>
                                </div>
                                <button @click="removeFromCart(index)" class="text-red-400 hover:text-red-500 p-1">
                                    <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="M6 18L18 6M6 6l12 12" />
                                    </svg>
                                </button>
                            </div>
                            
                            {{-- Mobile Shop Specific Inputs --}}
                            <div class="my-2 pt-2 border-t border-slate-100 grid grid-cols-3 gap-2">
                                <div class="col-span-2">
                                    <label class="block text-[9px] font-bold text-slate-400 uppercase mb-0.5">IMEI / Serial Numbers</label>
                                    <input type="text" x-model="item.imei_numbers" placeholder="Scan/Type IMEI" class="w-full h-7 px-2 py-0.5 border border-slate-300 rounded text-xs outline-none">
                                </div>
                                <div>
                                    <label class="block text-[9px] font-bold text-slate-400 uppercase mb-0.5">Condition</label>
                                    <select x-model="item.condition" class="w-full h-7 px-1 py-0.5 border border-slate-300 rounded text-xs outline-none bg-white">
                                        <option value="new">Brand New</option>
                                        <option value="used">Used</option>
                                        <option value="refurbished">Refurbished</option>
                                    </select>
                                </div>
                            </div>
                            <div class="mb-3">
                                <label class="block text-[9px] font-bold text-slate-400 uppercase mb-0.5">Warranty Period</label>
                                <input type="text" x-model="item.warranty_period" placeholder="e.g. 12 Months" class="w-full h-7 px-2 py-0.5 border border-slate-300 rounded text-xs outline-none">
                            </div>

                            <div class="flex items-center justify-between border-t border-slate-100 pt-2">
                                <div class="flex items-center gap-2">
                                    <button @click="updateQty(index, -1)"
                                        class="w-8 h-8 bg-white border border-slate-300 rounded-lg text-lg font-bold text-slate-600 hover:border-blue-500 hover:text-blue-600 transition">−</button>
                                    <input type="number" x-model.number="item.qty" @change="validateQty(index)"
                                        class="w-12 h-8 text-center border border-slate-300 rounded-lg text-sm font-semibold"
                                        min="0.001" step="any">
                                    <button @click="updateQty(index, 1)"
                                        class="w-8 h-8 bg-white border border-slate-300 rounded-lg text-lg font-bold text-slate-600 hover:border-blue-500 hover:text-blue-600 transition">+</button>
                                </div>
                                <div class="flex items-center gap-1">
                                    <input type="number" x-model.number="item.discount" placeholder="Disc"
                                        class="w-16 h-8 text-center border border-slate-300 rounded-lg text-xs" min="0">
                                    <span class="text-xs text-slate-500">LKR</span>
                                </div>
                                <div class="text-right font-bold text-sm text-slate-800"
                                    x-text="'= ' + formatNumber(getLineTotal(item))"></div>
                            </div>
                        </div>
                    </template>
                </div>

                {{-- Customer Info --}}
                <div class="border-t border-slate-200 p-4 bg-slate-50 space-y-3 relative" @click.outside="showCustomerSuggestions = false">
                    <div class="flex items-center justify-between">
                        <h3 class="text-xs font-semibold text-slate-700">👤 Customer / Buyer Details</h3>
                        <span class="text-[10px] text-slate-400">Optional</span>
                    </div>
                    <div class="grid grid-cols-2 gap-2">
                        <input type="text" x-model="customerName" @input="searchExistingCustomers($event.target.value)" placeholder="Customer Name" class="px-3 py-1 border border-slate-300 rounded-lg text-xs outline-none focus:border-blue-500">
                        <input type="text" x-model="customerPhone" @input="searchExistingCustomers($event.target.value)" placeholder="Phone Number" class="px-3 py-1 border border-slate-300 rounded-lg text-xs outline-none focus:border-blue-500">
                    </div>
                    <div class="grid grid-cols-2 gap-2" x-show="saleMode === 'wholesale'">
                        <input type="text" x-model="customerCompany" placeholder="Shop / Company Name" class="px-3 py-1 border border-slate-300 rounded-lg text-xs outline-none focus:border-blue-500">
                        <input type="text" x-model="customerAddress" placeholder="Company Address" class="px-3 py-1 border border-slate-300 rounded-lg text-xs outline-none focus:border-blue-500">
                    </div>

                    {{-- Customer Suggestions Dropdown --}}
                    <div x-show="showCustomerSuggestions" x-cloak class="absolute left-4 right-4 bg-white border border-slate-200 shadow-xl rounded-xl z-50 overflow-hidden divide-y divide-slate-100 text-xs bottom-full mb-1">
                        <template x-for="cust in customerSuggestions" :key="cust.id">
                            <div @click="selectCustomer(cust)" class="px-4 py-2.5 hover:bg-blue-50 cursor-pointer transition flex items-center justify-between">
                                <div>
                                    <span class="font-bold text-slate-800" x-text="cust.name"></span>
                                    <span x-show="cust.company" class="text-slate-400 ml-1 text-[10px]" x-text="'(' + cust.company + ')'"></span>
                                </div>
                                <span class="font-mono text-blue-600 font-bold" x-text="cust.phone || 'No Phone'"></span>
                            </div>
                        </template>
                    </div>
                </div>

                {{-- Cart Summary --}}
                <div class="border-t border-slate-200 p-4 bg-slate-50">
                    <div class="space-y-2 text-sm">
                        <div class="flex justify-between">
                            <span class="text-slate-600">Subtotal</span>
                            <span class="font-medium" x-text="'LKR ' + formatNumber(subtotal)"></span>
                        </div>
                        <div class="flex justify-between">
                            <span class="text-slate-600">Item Discounts</span>
                            <span class="text-red-500" x-text="'- LKR ' + formatNumber(itemDiscountTotal)"></span>
                        </div>
                        <div class="flex items-center justify-between gap-2">
                            <span class="text-slate-600">Bill Discount</span>
                            <div class="flex items-center gap-2">
                                <input type="number" x-model.number="billDiscount"
                                    class="w-24 h-8 text-center border border-slate-300 rounded-lg text-sm" min="0">
                                <select x-model="billDiscountType"
                                    class="h-8 border border-slate-300 rounded-lg text-sm px-2">
                                    <option value="amount">LKR</option>
                                    <option value="percentage">%</option>
                                </select>
                            </div>
                        </div>
                        <div class="flex justify-between text-slate-600">
                            <span>Tax (0%)</span>
                            <span x-text="'LKR ' + formatNumber(taxTotal)"></span>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-4 pt-4 border-t-2 border-slate-300">
                        <span class="text-xl font-bold text-slate-800">TOTAL</span>
                        <span class="text-3xl font-bold text-blue-600" x-text="'LKR ' + formatNumber(grandTotal)"></span>
                    </div>
                </div>
            </div>

            {{-- Right Panel - Products & Payment --}}
            <div class="w-1/2 xl:w-3/5 flex flex-col bg-slate-100">
                {{-- Quick Categories --}}
                <div class="p-4 bg-white border-b border-slate-200">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">QUICK CATEGORIES</h3>
                    <div class="flex overflow-x-auto gap-2 pb-3">
                        <button @click="selectedCategory = null; loadProducts()"
                            class="shrink-0 whitespace-nowrap px-4 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition flex items-center gap-2">
                            <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="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
                            </svg>
                            Sync Stock
                        </button>
                        <button @click="selectedCategory = null; loadProducts()"
                            :class="selectedCategory === null ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
                            class="shrink-0 whitespace-nowrap px-4 py-2 rounded-lg font-medium transition">All</button>
                        @foreach($categories as $category)
                            <button @click="selectedCategory = {{ $category->id }}; loadProducts()"
                                :class="selectedCategory === {{ $category->id }} ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200'"
                                class="shrink-0 whitespace-nowrap px-4 py-2 rounded-lg font-medium transition">{{ $category->name_en }}</button>
                        @endforeach
                    </div>
                </div>

                {{-- Popular Products Grid --}}
                <div class="flex-1 overflow-y-auto p-4">
                    <h3 class="text-sm font-medium text-slate-500 mb-3">POPULAR PRODUCTS</h3>
                    <div class="grid grid-cols-3 xl:grid-cols-4 gap-3">
                        <template x-for="product in popularProducts" :key="product.id">
                            <button @click="addToCart(product)"
                                class="bg-white rounded-xl p-3 border-2 border-slate-200 hover:border-blue-500 hover:shadow-lg transition text-left group">
                                <div class="flex items-start gap-2.5">
                                    <div class="w-9 h-9 rounded-lg bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center text-white font-bold text-sm flex-shrink-0 group-hover:scale-110 transition"
                                        x-text="product.name.charAt(0).toUpperCase()"></div>
                                    <div class="min-w-0 flex-1">
                                        <h4 class="font-semibold text-slate-800 text-xs leading-tight truncate" x-text="product.name"></h4>
                                        <div class="flex items-center gap-1 mt-1 flex-wrap">
                                            <span class="px-1.5 py-0.5 bg-slate-100 text-slate-500 rounded text-[9px] font-medium" x-text="product.condition === 'new' ? 'New' : (product.condition === 'used' ? 'Used' : 'Refurb')"></span>
                                            <span class="px-1.5 py-0.5 bg-blue-50 text-blue-500 rounded text-[9px] font-medium" x-text="product.warranty_period || 'No Warranty'"></span>
                                        </div>
                                    </div>
                                </div>
                                <p class="font-bold text-blue-600 text-sm mt-2" x-text="'LKR ' + formatNumber(product.price)"></p>
                            </button>
                        </template>
                    </div>
                </div>

                {{-- Payment Section --}}
                <div class="p-4 bg-white border-t border-slate-200">
                    <div class="grid grid-cols-5 gap-2">
                        <button @click="processPayment('cash')" :disabled="cart.length === 0"
                            class="py-4 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-xl font-bold text-xs shadow-md hover:shadow-lg hover:from-green-600 hover:to-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed text-center">
                            <div class="text-2xl mb-1">💵</div>
                            CASH
                        </button>
                        <button @click="processPayment('card')" :disabled="cart.length === 0"
                            class="py-4 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-xl font-bold text-xs shadow-md hover:shadow-lg hover:from-blue-600 hover:to-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed text-center">
                            <div class="text-2xl mb-1">💳</div>
                            CARD
                        </button>
                        <button @click="processPayment('qr')" :disabled="cart.length === 0"
                            class="py-4 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-xl font-bold text-xs shadow-md hover:shadow-lg hover:from-purple-600 hover:to-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed text-center">
                            <div class="text-2xl mb-1">📱</div>
                            QR
                        </button>
                        <button @click="processPayment('bank_transfer')" :disabled="cart.length === 0"
                            class="py-4 bg-gradient-to-br from-amber-500 to-amber-600 text-white rounded-xl font-bold text-xs shadow-md hover:shadow-lg hover:from-amber-600 hover:to-amber-700 transition disabled:opacity-50 disabled:cursor-not-allowed text-center">
                            <div class="text-2xl mb-1">🏦</div>
                            BANK
                        </button>
                        <button @click="processPayment('credit')" :disabled="cart.length === 0"
                            class="py-4 bg-gradient-to-br from-red-500 to-red-600 text-white rounded-xl font-bold text-xs shadow-md hover:shadow-lg hover:from-red-600 hover:to-red-700 transition disabled:opacity-50 disabled:cursor-not-allowed text-center">
                            <div class="text-2xl mb-1">📝</div>
                            CREDIT
                        </button>
                    </div>
                </div>

                {{-- Quick Actions --}}
                <div class="p-4 bg-slate-50 border-t border-slate-200">
                    <div class="flex gap-3">
                        <button @click="holdBill()"
                            class="flex-1 py-3 bg-white border-2 border-slate-300 rounded-xl font-medium text-slate-700 hover:border-blue-500 hover:text-blue-600 transition">
                            🔄 Hold Bill
                        </button>
                        <button @click="showHeldBills()"
                            class="flex-1 py-3 bg-white border-2 border-slate-300 rounded-xl font-medium text-slate-700 hover:border-blue-500 hover:text-blue-600 transition">
                            📋 Held Bills
                        </button>
                        <button @click="searchInvoice()"
                            class="flex-1 py-3 bg-white border-2 border-slate-300 rounded-xl font-medium text-slate-700 hover:border-blue-500 hover:text-blue-600 transition">
                            🔍 Find Bill
                        </button>
                        <button @click="reprintLast()"
                            class="flex-1 py-3 bg-white border-2 border-slate-300 rounded-xl font-medium text-slate-700 hover:border-blue-500 hover:text-blue-600 transition">
                            🖨️ Reprint
                        </button>
                        <button @click="processRefund()"
                            class="flex-1 py-3 bg-white border-2 border-slate-300 rounded-xl font-medium text-slate-700 hover:border-blue-500 hover:text-blue-600 transition">
                            ↩️ Refund
                        </button>
                    </div>
                </div>
            </div>
        </div>

        {{-- Open Register Modal (Blocking) --}}
        <div x-show="!hasActiveRegister" x-cloak class="fixed inset-0 z-[100] flex items-center justify-center bg-slate-900/95 backdrop-blur-sm">
            <div class="bg-white rounded-3xl w-full max-w-md shadow-2xl overflow-hidden p-8">
                <div class="text-center mb-6">
                    <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
                        <span class="text-4xl">💵</span>
                    </div>
                    <h2 class="text-2xl font-bold text-slate-800">Open Cash Register</h2>
                    <p class="text-slate-500 text-sm mt-1">Please enter the starting cash amount in your drawer to begin your shift.</p>
                </div>
                
                <form action="{{ route('pos.register.open') }}" method="POST">
                    @csrf
                    <div class="mb-6">
                        <label class="block text-sm font-medium text-slate-700 mb-2">Opening Cash Amount (LKR)</label>
                        <div class="relative">
                            <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-slate-500 font-bold">Rs.</span>
                            <input type="number" name="opening_amount" step="0.01" required min="0" value="0.00"
                                class="w-full pl-12 pr-4 py-4 bg-slate-50 border border-slate-300 rounded-2xl text-xl font-bold text-slate-800 focus:ring-4 focus:ring-blue-100 focus:border-blue-500 outline-none transition">
                        </div>
                    </div>
                    <button type="submit" 
                        class="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-2xl text-lg shadow-md hover:shadow-lg transition">
                        Open Register
                    </button>
                    @if(!auth()->user()->isCashier())
                    <a href="{{ route('admin.dashboard') }}" class="block text-center mt-4 text-sm text-slate-500 hover:text-blue-600 font-medium">
                        Return to Dashboard
                    </a>
                    @endif
                </form>
                
                <form method="POST" action="{{ route('logout') }}" class="mt-4">
                    @csrf
                    <button type="submit" class="w-full py-3 bg-slate-100 hover:bg-slate-200 text-slate-600 font-bold rounded-2xl text-sm transition">
                        🚪 Logout / Exit
                    </button>
                </form>
            </div>
        </div>

        {{-- Close Register Modal --}}
        <div x-show="showCloseRegisterModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
            <div class="bg-white rounded-3xl w-full max-w-lg shadow-2xl overflow-hidden p-8" @click.away="showCloseRegisterModal = false">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-2xl font-bold text-slate-800">Close Cash Register</h2>
                    <button @click="showCloseRegisterModal = false" class="text-slate-400 hover:text-slate-600 text-2xl">&times;</button>
                </div>
                
                <template x-if="registerStats">
                    <form action="{{ route('pos.register.close') }}" method="POST">
                        @csrf
                        <div class="space-y-4 mb-6">
                            <div class="flex justify-between items-center p-4 bg-slate-50 rounded-xl">
                                <span class="text-slate-600 font-medium">Opening Cash:</span>
                                <span class="text-slate-800 font-bold" x-text="'LKR ' + formatNumber(registerStats.opening_amount)"></span>
                            </div>
                            <div class="flex justify-between items-center p-4 bg-slate-50 rounded-xl">
                                <span class="text-slate-600 font-medium">Cash Sales:</span>
                                <span class="text-green-600 font-bold" x-text="'+ LKR ' + formatNumber(registerStats.cash_sales)"></span>
                            </div>
                            <div class="flex justify-between items-center p-4 bg-blue-50 border border-blue-100 rounded-xl">
                                <span class="text-blue-800 font-bold">Expected Drawer Total:</span>
                                <span class="text-blue-800 font-bold text-xl" x-text="'LKR ' + formatNumber(registerStats.expected_amount)"></span>
                            </div>
                            
                            <div class="pt-2">
                                <label class="block text-sm font-medium text-slate-700 mb-2">Actual Cash in Drawer</label>
                                <div class="relative">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-4 text-slate-500 font-bold">Rs.</span>
                                    <input type="number" name="closing_amount" step="0.01" required min="0" x-model="closeRegisterAmount"
                                        class="w-full pl-12 pr-4 py-3 bg-white border border-slate-300 rounded-xl font-bold text-slate-800 focus:ring-4 focus:ring-red-100 focus:border-red-500 outline-none transition">
                                </div>
                            </div>
                            
                            <div x-show="closeRegisterAmount !== '' && parseFloat(closeRegisterAmount) !== registerStats.expected_amount" class="p-3 rounded-lg text-sm font-medium" :class="parseFloat(closeRegisterAmount) > registerStats.expected_amount ? 'bg-amber-50 text-amber-700' : 'bg-red-50 text-red-700'">
                                <span x-text="parseFloat(closeRegisterAmount) > registerStats.expected_amount ? '⚠️ Overage of LKR ' + formatNumber(parseFloat(closeRegisterAmount) - registerStats.expected_amount) : '⚠️ Shortage of LKR ' + formatNumber(registerStats.expected_amount - parseFloat(closeRegisterAmount))"></span>
                            </div>

                            <div>
                                <label class="block text-sm font-medium text-slate-700 mb-2">Closing Notes / Discrepancy Reason</label>
                                <textarea name="notes" rows="2" class="w-full p-3 border border-slate-300 rounded-xl focus:border-blue-500 outline-none" placeholder="Optional notes..."></textarea>
                            </div>
                        </div>
                        
                        <div class="flex gap-3">
                            <button type="button" @click="showCloseRegisterModal = false" class="flex-1 py-3 bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold rounded-xl transition">Cancel</button>
                            <button type="submit" class="flex-1 py-3 bg-red-600 hover:bg-red-700 text-white font-bold rounded-xl shadow-md hover:shadow-lg transition">Close Shift</button>
                        </div>
                    </form>
                </template>
            </div>
        </div>

        {{-- Warranty Lookup Modal --}}
        @include('pos.partials.warranty-modal')

        {{-- Payment Modal --}}
        <div x-show="showPaymentModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-6" @click.outside="showPaymentModal = false">
                <h2 class="text-2xl font-bold text-slate-800 mb-6 text-center">
                    <span
                        x-text="paymentMethod === 'cash' ? '💵 Cash Payment' : (paymentMethod === 'card' ? '💳 Card Payment' : (paymentMethod === 'qr' ? '📱 QR Payment' : (paymentMethod === 'bank_transfer' ? '🏦 Bank Transfer' : '📝 Store Credit / Pay Later')))"></span>
                </h2>

                <div class="text-center mb-6">
                    <p class="text-slate-500">Amount Due</p>
                    <p class="text-4xl font-bold text-blue-600" x-text="'LKR ' + formatNumber(grandTotal)"></p>
                </div>

                <template x-if="paymentMethod === 'cash'">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-600 mb-2">Amount Received</label>
                            <input type="number" x-model.number="cashReceived" x-ref="cashInput"
                                class="w-full px-4 py-3 text-2xl font-bold text-center border-2 border-slate-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
                        </div>
                        <div class="grid grid-cols-4 gap-2">
                            <template x-for="amount in [100, 500, 1000, 2000, 5000, 10000]" :key="amount">
                                <button @click="cashReceived = amount"
                                    class="py-3 bg-slate-100 rounded-lg font-medium hover:bg-blue-100 hover:text-blue-600 transition"
                                    x-text="amount.toLocaleString()"></button>
                            </template>
                            <button @click="cashReceived = grandTotal"
                                class="py-3 bg-green-100 text-green-700 rounded-lg font-medium hover:bg-green-200 transition col-span-2">Exact</button>
                        </div>
                        <div x-show="cashReceived >= grandTotal"
                            class="bg-green-50 border border-green-200 rounded-xl p-4 text-center">
                            <p class="text-slate-600">Change</p>
                            <p class="text-3xl font-bold text-green-600"
                                x-text="'LKR ' + formatNumber(cashReceived - grandTotal)"></p>
                        </div>
                    </div>
                </template>

                <template x-if="paymentMethod === 'card' || paymentMethod === 'qr' || paymentMethod === 'bank_transfer'">
                    <div class="space-y-4">
                        <div>
                            <label class="block text-sm font-medium text-slate-600 mb-2">Reference Number (Optional)</label>
                            <input type="text" x-model="paymentReference" x-ref="refInput" placeholder="Transaction ID / Approval Code"
                                class="w-full px-4 py-3 border-2 border-slate-300 rounded-xl focus:border-blue-500 focus:ring-2 focus:ring-blue-200 outline-none">
                        </div>
                    </div>
                </template>

                <template x-if="paymentMethod === 'credit'">
                    <div class="bg-red-50 text-red-700 p-4 rounded-xl border border-red-200 text-sm">
                        ⚠️ This will mark the sale on Credit/Account. No immediate payment will be processed. The balance of <strong>LKR <span x-text="formatNumber(grandTotal)"></span></strong> will remain owed by this customer.
                    </div>
                </template>

                <div class="flex gap-4 mt-6">
                    <button @click="showPaymentModal = false"
                        class="flex-1 py-3 bg-slate-100 text-slate-700 rounded-xl font-medium hover:bg-slate-200 transition">Cancel</button>
                    <button @click="completePayment()" :disabled="(paymentMethod === 'cash' && cashReceived < grandTotal) || isSubmitting"
                        class="flex-1 py-3 bg-green-600 text-white rounded-xl font-bold hover:bg-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                        <span x-text="isSubmitting ? 'Processing...' : 'Complete Sale'"></span>
                    </button>
                </div>
            </div>
        </div>

        {{-- Success Modal --}}
        <div x-show="showSuccessModal" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md p-8 text-center">
                <div class="text-6xl mb-4">✅</div>
                <h2 class="text-2xl font-bold text-slate-800 mb-2">Sale Complete!</h2>
                <p class="text-slate-500 mb-2" x-text="'Invoice #' + lastInvoiceNumber"></p>
                <p class="text-3xl font-bold text-green-600 mb-6" x-text="'LKR ' + formatNumber(lastTotal)"></p>

                <div class="w-full">
                    <button @click="printReceipt('thermal')"
                        class="w-full py-3 bg-blue-600 text-white rounded-xl font-medium hover:bg-blue-700 transition">🖨️
                        Print 80mm</button>
                </div>
                <button @click="nextCustomer()"
                    class="w-full mt-4 py-4 bg-green-600 text-white rounded-xl font-bold text-lg hover:bg-green-700 transition">Next
                    Customer →</button>
            </div>
        </div>

        {{-- Stock Warning Modal --}}
        <div x-show="showStockWarning" x-cloak class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
            <div class="bg-white rounded-2xl shadow-2xl w-full max-w-sm p-6 text-center"
                @click.outside="showStockWarning = false">
                <div class="text-5xl mb-4">⚠️</div>
                <h2 class="text-xl font-bold text-red-600 mb-2">Out of Stock!</h2>

                <div class="bg-red-50 rounded-xl p-4 mb-6 text-left text-sm text-slate-700 space-y-2">
                    <p><strong>Product:</strong> <span x-text="stockWarning.productName"></span></p>
                    <p><strong>Available:</strong> <span x-text="stockWarning.available"></span></p>
                    <p><strong>In Cart:</strong> <span x-text="stockWarning.inCart"></span></p>
                    <p class="text-xs text-slate-500 mt-2">
                        Location: <span x-text="stockWarning.branchName || 'Current Branch'"></span><br>
                        Source: <span x-text="stockWarning.source"></span>
                    </p>

                    <template x-if="stockWarning.alternativeStock">
                        <div class="mt-3 p-3 bg-yellow-100 rounded-lg border border-yellow-200">
                            <p class="font-bold text-yellow-800 flex items-center gap-2">
                                <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="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                Stock Found Elsewhere!
                            </p>
                            <p class="text-yellow-700 mt-1">
                                <span class="font-bold" x-text="stockWarning.alternativeStock.quantity"></span> units
                                available in<br>
                                <span class="font-bold" x-text="stockWarning.alternativeStock.branch"></span>
                            </p>
                        </div>
                    </template>
                </div>

                <button @click="showStockWarning = false"
                    class="w-full py-3 bg-red-600 text-white rounded-xl font-bold hover:bg-red-700 transition">
                    Okay, Got it
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        function posApp() {
            return {
                // State
                hasActiveRegister: {{ isset($activeRegister) && $activeRegister ? 'true' : 'false' }},
                showCloseRegisterModal: false,
                showWarrantyModal: false,
                registerStats: null,
                searchQuery: '',
                searchResults: [],
                cart: [],
                popularProducts: @json($popularProducts),
                selectedCategory: null,
                billDiscount: 0,
                billDiscountType: 'amount',
                saleMode: 'retail',
                customerName: '',
                customerPhone: '',
                customerCompany: '',
                customerAddress: '',
                customerSuggestions: [],
                showCustomerSuggestions: false,
                warrantySearchQuery: '',
                warrantySearchResults: [],
                warrantyLoading: false,
                selectedWarrantyItem: null,
                warrantyReplacementProducts: [],
                warrantyBranches: [],
                warrantyClaimForm: {
                    issue_description: '',
                    is_replaced: false,
                    replacement_product_id: '',
                    replacement_branch_id: '',
                    replacement_qty: 1,
                    replacement_imei: '',
                    notes: '',
                    status: 'received'
                },

                // Endpoints
                endpoints: {
                    search: "{{ route('pos.products.search') }}",
                    barcode: "{{ route('pos.products.barcode') }}",
                    stock: "{{ route('pos.products.stock', ['product' => ':id']) }}",
                    invoice: "{{ route('pos.invoice.store') }}",
                    thermal: "{{ route('pos.invoice.thermal', ['invoice' => ':id']) }}",
                    receipt: "{{ route('pos.invoice.receipt', ['invoice' => ':id']) }}",
                    customerSearch: "{{ route('pos.customers.search') }}",
                    warrantySearch: "{{ route('pos.warranty.search') }}",
                    warrantyClaim: "{{ route('pos.warranty.claim') }}",
                },

                // Payment
                showPaymentModal: false,
                paymentMethod: 'cash',
                cashReceived: 0,
                paymentReference: '',

                // Success
                showSuccessModal: false,
                lastInvoiceNumber: '',
                lastInvoiceId: null,
                lastTotal: 0,

                // UI State
                currentTime: '',
                isOnline: navigator.onLine,
                showMenu: false,
                pendingTransactionCount: 0,
                isSubmitting: false,

                // PWA Install
                showInstallButton: false,
                deferredPrompt: null,

                // Stock Warning
                showStockWarning: false,
                stockWarning: {
                    productName: '',
                    available: 0,
                    inCart: 0,
                    source: '',
                    branchName: '',
                    alternativeStock: null
                },
                // Register actions
                openCloseRegisterModal() {
                    fetch("{{ route('pos.register.stats') }}")
                        .then(res => res.json())
                        .then(data => {
                            if (data.error) {
                                alert(data.error);
                            } else {
                                this.registerStats = data;
                                this.showCloseRegisterModal = true;
                            }
                        });
                },

                // Init
                async init() {
                    console.log('🚀 BILLING SCRIPT LOADED v4.2 - Branch-Specific Stock Validation Active');
                    console.log('📍 User Branch ID:', {{ auth()->user()->branch_id ?? 'null' }});
                    await this.updateTime();
                    setInterval(() => this.updateTime(), 1000);
                    this.$refs.searchInput.focus();

                    // Online/Offline handlers
                    window.addEventListener('online', () => {
                        this.isOnline = true;
                        console.log('Connection restored - syncing pending transactions...');
                        this.syncPendingTransactions();
                    });

                    window.addEventListener('offline', () => {
                        this.isOnline = false;
                        console.log('Connection lost - transactions will be queued');
                    });

                    // PWA Install prompt
                    window.addEventListener('beforeinstallprompt', (e) => {
                        e.preventDefault();
                        this.deferredPrompt = e;
                        this.showInstallButton = true;
                    });

                    window.addEventListener('appinstalled', () => {
                        this.showInstallButton = false;
                        this.deferredPrompt = null;
                    });

                    // Check for pending transactions on load
                    await this.updatePendingCount();

                    // Cache popular products
                    if (navigator.onLine) {
                        this.cacheProducts(this.popularProducts);
                        this.syncPendingTransactions();
                    }

                    // Check for reprint request
                    const urlParams = new URLSearchParams(window.location.search);
                    const reprintId = urlParams.get('reprint');
                    if (reprintId) {
                        this.lastInvoiceId = reprintId;
                        console.log('🔄 Auto-printing invoice:', reprintId);
                        // Small delay to ensure DOM is ready
                        setTimeout(() => this.printReceipt('thermal'), 1000);
                    }

                    // Global Keyboard Shortcuts
                    window.addEventListener('keydown', (e) => {
                        // F2 - Next Customer (New Bill)
                        if (e.key === 'F2') {
                            e.preventDefault();
                            if (this.showSuccessModal) {
                                this.nextCustomer();
                            }
                        }

                        // F4 or F3 - Focus Search
                        if (e.key === 'F4' || e.key === 'F3') {
                            e.preventDefault();
                            this.$refs.searchInput.focus();
                        }

                        // F7 - Print Last Receipt
                        if (e.key === 'F7') {
                            e.preventDefault();
                            if (this.lastInvoiceId) {
                                this.printReceipt('thermal');
                            }
                        }

                        // F8 - Cash Payment
                        if (e.key === 'F8') {
                            e.preventDefault();
                            if (this.cart.length > 0) this.processPayment('cash');
                        }

                        // F9 - Card Payment
                        if (e.key === 'F9') {
                            e.preventDefault();
                            if (this.cart.length > 0) this.processPayment('card');
                        }

                        // F10 - Exact Cash (Only when Payment Modal is open)
                        if (e.key === 'F10') {
                            e.preventDefault();
                            if (this.showPaymentModal && this.paymentMethod === 'cash') {
                                this.cashReceived = this.grandTotal;
                            }
                        }

                        // Enter - Trigger actions depending on open modals
                        if (e.key === 'Enter') {
                            // 1. If payment modal is open, complete payment
                            if (this.showPaymentModal && !this.isSubmitting) {
                                // For cash, verify that cashReceived >= grandTotal
                                if (this.paymentMethod !== 'cash' || this.cashReceived >= this.grandTotal) {
                                    e.preventDefault();
                                    this.completePayment();
                                }
                            }
                            // 2. If success modal is open, print receipt and go to next customer
                            else if (this.showSuccessModal) {
                                e.preventDefault();
                                this.printReceipt('thermal');
                                this.nextCustomer();
                            }
                        }

                        // Escape - Close Modals or Focus Search
                        if (e.key === 'Escape') {
                            if (!this.showPaymentModal && !this.showStockWarning && !this.showSuccessModal) {
                                this.$refs.searchInput.focus();
                            } else {
                                this.showPaymentModal = false;
                                this.showStockWarning = false;
                                this.showSuccessModal = false; // Optional: specific to workflow
                            }
                        }
                    });
                },

                updateTime() {
                    const now = new Date();
                    this.currentTime = now.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' });
                },

                // Product Search
                async searchProducts() {
                    if (this.searchQuery.length < 2) {
                        this.searchResults = [];
                        return;
                    }
                    try {
                        const url = `${this.endpoints.search}?q=${encodeURIComponent(this.searchQuery)}`;
                        const response = await fetch(url, {
                            headers: { 'Accept': 'application/json' }
                        });
                        const products = await response.json();

                        // Auto-add if exact barcode match (for scanners that don't send Enter)
                        if (products.length === 1 && products[0].barcode === this.searchQuery) {
                            this.addToCart(products[0]);
                            this.searchQuery = '';
                            this.searchResults = [];
                            return;
                        }

                        this.searchResults = products;
                        // Cache searched products
                        this.cacheProducts(products);
                    } catch (e) {
                        console.error('Search failed:', e);
                    }
                },

                async handleBarcodeEnter() {
                    if (this.searchQuery.length < 1) return;
                    try {
                        const url = `${this.endpoints.barcode}?barcode=${encodeURIComponent(this.searchQuery)}`;
                        const response = await fetch(url, {
                            headers: { 'Accept': 'application/json' }
                        });
                        if (response.ok) {
                            const product = await response.json();
                            this.addToCart(product);
                            this.searchQuery = '';
                            this.searchResults = [];
                        }
                    } catch (e) {
                        console.error('Barcode lookup failed: ', e);
                    }
                },

                // Cart Operations 
                async addToCart(product) {
                    let stockLimit = parseInt(product.stock);
                    // Check stock limits (Online & Offline) 
                    try {
                        let source = 'Object Default';

                        // REALTIME CHECK (Online) 
                        if (this.isOnline) {
                            try {
                                console.log(`🔍 Checking real-time stock for product ID: ${product.id}`);
                                const url = this.endpoints.stock.replace(':id', product.id);
                                const response = await fetch(url);
                                if (response.ok) {
                                    const freshData = await response.json();
                                    stockLimit = parseInt(freshData.stock);
                                    source = 'Server Realtime';

                                    // Store extra info for warning
                                    product.branchName = freshData.branch_name;
                                    product.alternativeStock = freshData.alternative_stock;

                                    console.log(`✅ Server verified stock for "${product.name}" : ${stockLimit} (Branch: ${freshData.branch_id})`);
                                } else {
                                    console.error('❌ Server returned error: ', response.status);
                                }
                            } catch (err) {
                                console.error('❌ Server check failed, falling back to cache', err);
                            }
                        } else {
                            // FALLBACK (Offline) 
                            // If offline or if we have fresher local data, use it 
                            const cachedProduct = await this.getCachedProduct(product.id);
                            if (cachedProduct) {
                                stockLimit = parseInt(cachedProduct.stock);
                                source = 'IndexedDB Cache';
                            }
                            // Check in-memory array as fallback/double-check 
                            const memoryProduct = this.popularProducts.find(p => p.id == product.id);
                            if (memoryProduct && memoryProduct.stock < stockLimit) {
                                // If memory says less (because we just updated it), use memory 
                                stockLimit = parseInt(memoryProduct.stock);
                                source = 'In-Memory State';
                            }
                        }

                        const currentQty = this.cart.find(item => item.id == product.id)?.qty || 0;

                        // Strict check
                        console.log(`📊 Stock Check: Product = "${product.name}" | InCart=${currentQty} | Limit=${stockLimit} | Source=${source} `);
                        if (currentQty + 1 > stockLimit) {
                            console.warn(`🚫 BLOCKED: Cannot add more. ${currentQty} + 1 > ${stockLimit}`);

                            this.stockWarning = {
                                productName: product.name,
                                available: stockLimit,
                                inCart: currentQty,
                                source: source,
                                branchName: product.branchName || 'Current Branch', // Will be populated from freshData
                                alternativeStock: product.alternativeStock || null
                            };
                            this.showStockWarning = true;
                            return;
                        }
                        console.log(`✅ ALLOWED: Adding to cart`);

                    } catch (e) {
                        console.error('Stock check failed:', e);
                        alert('Stock check error: ' + e.message);
                    }

                    const existing = this.cart.find(item => item.id == product.id);
                    if (existing) {
                        existing.stockLimit = stockLimit;
                        existing.qty++;
                    } else {
                        const defaultPrice = this.saleMode === 'wholesale' 
                            ? parseFloat(product.wholesale_price || product.price || 0) 
                            : parseFloat(product.price || 0);

                        this.cart.push({
                            id: product.id,
                            barcode: product.barcode,
                            name: product.name,
                            price: defaultPrice,
                            retail_price: parseFloat(product.price || 0),
                            wholesale_price: parseFloat(product.wholesale_price || 0),
                            warranty_period: product.warranty_period || 'No Warranty',
                            condition: product.condition || 'new',
                            mrp: parseFloat(product.price), // Store MRP for display
                            cost: parseFloat(product.cost || 0),
                            tax_rate: parseFloat(product.tax_rate || 0),
                            is_taxable: product.is_taxable || false,
                            qty: 1,
                            discount: 0,
                            discountType: 'amount',
                            imei_numbers: '',
                            stockLimit: stockLimit
                        });
                    }

                    this.searchQuery = '';
                    this.searchResults = [];
                    this.$refs.searchInput.focus();
                },

                toggleSaleMode() {
                    this.cart.forEach(item => {
                        if (this.saleMode === 'wholesale') {
                            item.price = item.wholesale_price > 0 ? item.wholesale_price : item.retail_price;
                        } else {
                            item.price = item.retail_price;
                        }
                    });
                },

                updateQty(index, delta) {
                    const item = this.cart[index];
                    const newQty = item.qty + delta;
                    if (newQty > 0) {
                        if (item.stockLimit !== undefined && newQty > item.stockLimit) {
                            alert(`Insufficient stock. Only ${item.stockLimit} available.`);
                            return;
                        }
                        item.qty = newQty;
                    } else if (newQty <= 0) {
                        this.removeFromCart(index);
                    }
                },

                validateQty(index) {
                    const item = this.cart[index];
                    if (item.qty <= 0) {
                        this.removeFromCart(index);
                        return;
                    }
                    if (item.stockLimit !== undefined && item.qty > item.stockLimit) {
                        alert(`Insufficient stock. Resetting to max available: ${item.stockLimit}`);
                        item.qty = item.stockLimit;
                    }
                },

                removeFromCart(index) {
                    this.cart.splice(index, 1);
                },

                clearCart() {
                    if (confirm('Clear all items from cart?')) {
                        this.cart = [];
                        this.billDiscount = 0;
                    }
                },

                getLineTotal(item) {
                    return (item.price * item.qty) - item.discount;
                },

                // Computed Totals
                get subtotal() {
                    return this.cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
                },

                get itemDiscountTotal() {
                    return this.cart.reduce((sum, item) => sum + item.discount, 0);
                },

                get taxTotal() {
                    return 0; // Simplified for now
                },

                get billDiscountAmount() {
                    if (this.billDiscountType === 'percentage') {
                        return (this.subtotal - this.itemDiscountTotal) * (this.billDiscount / 100);
                    }
                    return this.billDiscount;
                },

                get grandTotal() {
                    return Math.max(0, this.subtotal - this.itemDiscountTotal - this.billDiscountAmount + this.taxTotal);
                },

                // Payment
                processPayment(method) {
                    this.paymentMethod = method;
                    this.cashReceived = 0;
                    this.paymentReference = '';
                    this.showPaymentModal = true;
                    if (method === 'cash') {
                        this.$nextTick(() => {
                            if (this.$refs.cashInput) {
                                this.$refs.cashInput.focus();
                                this.$refs.cashInput.select();
                            }
                        });
                    } else if (method === 'card' || method === 'qr') {
                        this.$nextTick(() => {
                            if (this.$refs.refInput) {
                                this.$refs.refInput.focus();
                                this.$refs.refInput.select();
                            }
                        });
                    }
                },

                async completePayment() {
                    if (this.isSubmitting || !this.cart || this.cart.length === 0) return;
                    this.isSubmitting = true;

                    const invoice = {
                        items: this.cart.map(item => ({
                            product_id: item.id,
                            product_name: item.name,
                            product_barcode: item.barcode,
                            quantity: item.qty,
                            unit_price: item.price,
                            cost_price: item.cost,
                            discount: item.discount,
                            discount_type: item.discountType,
                            tax_rate: item.tax_rate,
                            is_taxable: item.is_taxable,
                            imei_numbers: item.imei_numbers || null,
                            warranty_period: item.warranty_period || null,
                            condition: item.condition || null
                        })),
                        bill_discount: this.billDiscount,
                        bill_discount_type: this.billDiscountType,
                        customer_name: this.customerName || null,
                        customer_phone: this.customerPhone || null,
                        customer_company: this.customerCompany || null,
                        customer_address: this.customerAddress || null,
                        payments: [{
                            method: this.paymentMethod,
                            amount: (this.paymentMethod === 'cash' || this.paymentMethod === 'credit') ? this.cashReceived : this.grandTotal,
                            reference: this.paymentReference || null
                        }]
                    };

                    try {
                        const response = await fetch(this.endpoints.invoice, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': window.csrfToken
                            },
                            body: JSON.stringify(invoice)
                        });

                        const data = await response.json();

                        if (data.success) {
                            this.lastInvoiceNumber = data.invoice.invoice_number;
                            this.lastInvoiceId = data.invoice.id;
                            this.lastTotal = data.invoice.total;
                            this.showPaymentModal = false;
                            this.showSuccessModal = true;

                            // Clear cart immediately upon successful payment
                            const itemsToUpdate = [...invoice.items];
                            this.cart = [];

                            // Update local stock even if online to keep cache fresh
                            await this.updateLocalStock(itemsToUpdate);
                        } else {
                            alert('Error: ' + (data.message || 'Failed to create invoice'));
                        }
                    } catch (e) {
                        console.error('Payment failed:', e);

                        // If offline, queue the transaction
                        if (!navigator.onLine) {
                            await this.queueOfflineTransaction(invoice);

                            // Clear cart immediately upon offline queueing
                            this.cart = [];

                            // Generate temporary invoice number
                            this.lastInvoiceNumber = 'OFFLINE-' + Date.now();
                            this.lastInvoiceId = null;
                            this.lastTotal = this.grandTotal;
                            this.showPaymentModal = false;
                            this.showSuccessModal = true;

                            alert('⚠️ Offline Mode\n\nTransaction queued for sync when online.');
                        } else {
                            alert('Failed to process payment. Please try again.');
                        }
                    } finally {
                        this.isSubmitting = false;
                    }
                },

                // Queue transaction for offline sync
                async queueOfflineTransaction(invoice) {
                    try {
                        const db = await this.openDB();
                        const transaction = db.transaction(['pendingTransactions'], 'readwrite');
                        const store = transaction.objectStore('pendingTransactions');

                        await store.add({
                            data: invoice,
                            csrfToken: window.csrfToken,
                            timestamp: new Date().toISOString(),
                            total: this.grandTotal
                        });

                        console.log('Transaction queued for offline sync');

                        // Update pending count
                        await this.updatePendingCount();

                        // Decrement local stock for queued transaction
                        await this.updateLocalStock(invoice.items);

                    } catch (error) {
                        console.error('Failed to queue transaction:', error);
                    }
                },

                // Database Helpers
                openDB() {
                    return new Promise((resolve, reject) => {
                        const request = indexedDB.open('POSRetail', 2); // Version 2

                        request.onerror = () => reject(request.error);
                        request.onsuccess = () => resolve(request.result);

                        request.onupgradeneeded = (event) => {
                            const db = event.target.result;
                            if (!db.objectStoreNames.contains('pendingTransactions')) {
                                db.createObjectStore('pendingTransactions', { keyPath: 'id', autoIncrement: true });
                            }
                            // Add products store for offline stock
                            if (!db.objectStoreNames.contains('products')) {
                                db.createObjectStore('products', { keyPath: 'id' });
                            }
                        };
                    });
                },

                async cacheProducts(products) {
                    if (!products || products.length === 0) return;
                    try {
                        const db = await this.openDB();
                        const transaction = db.transaction(['products'], 'readwrite');
                        const store = transaction.objectStore('products');

                        for (const product of products) {
                            // AlpineJS wraps objects in Proxies, which cannot be cloned by IndexedDB.
                            // We must parse/stringify to get a clean object.
                            store.put(JSON.parse(JSON.stringify(product)));
                        }
                    } catch (error) {
                        console.error('Failed to cache products:', error);
                    }
                },

                async getCachedProduct(id) {
                    try {
                        const db = await this.openDB();
                        return new Promise((resolve, reject) => {
                            const transaction = db.transaction(['products'], 'readonly');
                            const store = transaction.objectStore('products');
                            const request = store.get(id);

                            request.onsuccess = () => resolve(request.result);
                            request.onerror = () => reject(request.error);
                        });
                    } catch (error) {
                        return null;
                    }
                },

                async updateLocalStock(items) {
                    try {
                        const db = await this.openDB();
                        const transaction = db.transaction(['products'], 'readwrite');
                        const store = transaction.objectStore('products');

                        for (const item of items) {
                            const request = store.get(item.product_id);
                            request.onsuccess = () => {
                                const product = request.result;
                                if (product) {
                                    product.stock -= item.quantity;
                                    store.put(product);

                                    // Also update in-memory arrays to reflect change immediately
                                    const popularIndex = this.popularProducts.findIndex(p => p.id === item.product_id);
                                    if (popularIndex !== -1) {
                                        this.popularProducts[popularIndex].stock = product.stock;
                                    }

                                    const searchIndex = this.searchResults.findIndex(p => p.id === item.product_id);
                                    if (searchIndex !== -1) {
                                        this.searchResults[searchIndex].stock = product.stock;
                                    }
                                }
                            };
                        }
                        console.log('Local stock updated (DB + Memory)');
                    } catch (error) {
                        console.error('Failed to update local stock:', error);
                    }
                },

                // Update pending transaction count
                async updatePendingCount() {
                    try {
                        const db = await this.openDB();
                        const transaction = db.transaction(['pendingTransactions'], 'readonly');
                        const store = transaction.objectStore('pendingTransactions');
                        const count = await store.count();

                        this.pendingTransactionCount = count;
                    } catch (error) {
                        console.error('Failed to get pending count:', error);
                    }
                },

                // Sync pending transactions when online
                async syncPendingTransactions() {
                    if (!navigator.onLine) return;

                    try {
                        const db = await this.openDB();
                        const transaction = db.transaction(['pendingTransactions'], 'readonly');
                        const store = transaction.objectStore('pendingTransactions');
                        const request = store.getAll();
                        const allTransactions = await new Promise((resolve, reject) => {
                            request.onsuccess = () => resolve(request.result);
                            request.onerror = () => reject(request.error);
                        });

                        if (!allTransactions || allTransactions.length === 0) return;

                        console.log('Syncing', allTransactions.length, 'pending transactions...');

                        for (const txn of allTransactions) {
                            try {
                                const response = await fetch(this.endpoints.invoice, {
                                    method: 'POST',
                                    headers: {
                                        'Content-Type': 'application/json',
                                        'Accept': 'application/json',
                                        'X-CSRF-TOKEN': txn.csrfToken
                                    },
                                    body: JSON.stringify(txn.data)
                                });

                                if (response.ok) {
                                    // Remove from queue
                                    const deleteTransaction = db.transaction(['pendingTransactions'], 'readwrite');
                                    const deleteStore = deleteTransaction.objectStore('pendingTransactions');
                                    await deleteStore.delete(txn.id);

                                    console.log('Synced transaction:', txn.id);
                                }
                            } catch (error) {
                                console.error('Failed to sync transaction:', error);
                            }
                        }

                        await this.updatePendingCount();

                        if (this.pendingTransactionCount === 0) {
                            alert('✅ All offline transactions synced successfully!');
                        }
                    } catch (error) {
                        console.error('Sync failed:', error);
                    }
                },

                // Post-Sale
                printReceipt(type) {
                    if (type === 'thermal') {
                        const url = this.endpoints.thermal.replace(':id', this.lastInvoiceId) + '?t=' + new Date().getTime();
                        const iframe = document.getElementById('receipt-frame');
                        iframe.src = url;
                    } else {
                        const url = this.endpoints.receipt.replace(':id', this.lastInvoiceId);
                        window.open(url, '_blank');
                    }
                },

                nextCustomer() {
                    this.showSuccessModal = false;
                    this.cart = [];
                    this.billDiscount = 0;
                    this.billDiscountType = 'amount';
                    this.customerName = '';
                    this.customerPhone = '';
                    this.customerCompany = '';
                    this.customerAddress = '';
                    this.saleMode = 'retail';
                    this.$refs.searchInput.focus();
                },

                async searchExistingCustomers(query) {
                    if (query.length < 2) {
                        this.customerSuggestions = [];
                        this.showCustomerSuggestions = false;
                        return;
                    }
                    try {
                        const res = await fetch(this.endpoints.customerSearch + '?q=' + encodeURIComponent(query));
                        this.customerSuggestions = await res.json();
                        this.showCustomerSuggestions = this.customerSuggestions.length > 0;
                    } catch(e) {
                        console.error('Customer search failed:', e);
                    }
                },

                selectCustomer(cust) {
                    this.customerName = cust.name;
                    this.customerPhone = cust.phone || '';
                    this.customerCompany = cust.company || '';
                    this.customerAddress = cust.address || '';
                    this.customerSuggestions = [];
                    this.showCustomerSuggestions = false;
                },

                // Quick Actions
                holdBill() {
                    if (this.cart.length === 0) return;
                    const held = JSON.parse(localStorage.getItem('heldBills') || '[]');
                    held.push({
                        cart: this.cart,
                        billDiscount: this.billDiscount,
                        billDiscountType: this.billDiscountType,
                        timestamp: new Date().toISOString()
                    });
                    localStorage.setItem('heldBills', JSON.stringify(held));
                    this.cart = [];
                    this.billDiscount = 0;
                    alert('Bill held successfully');
                },

                showHeldBills() {
                    const held = JSON.parse(localStorage.getItem('heldBills') || '[]');
                    if (held.length === 0) {
                        alert('No held bills');
                        return;
                    }
                    const index = prompt(`Select held bill (1-${held.length}):`);
                    if (index && held[index - 1]) {
                        const bill = held[index - 1];
                        this.cart = bill.cart;
                        this.billDiscount = bill.billDiscount;
                        this.billDiscountType = bill.billDiscountType;
                        held.splice(index - 1, 1);
                        localStorage.setItem('heldBills', JSON.stringify(held));
                    }
                },

                searchInvoice() {
                    const invoiceNumber = prompt('Enter invoice number:');
                    if (invoiceNumber) {
                        // TODO: Implement invoice search
                        alert('Feature coming soon');
                    }
                },

                reprintLast() {
                    if (this.lastInvoiceId) {
                        this.printReceipt('thermal');
                    } else {
                        alert('No recent invoice to reprint');
                    }
                },

                processRefund() {
                    alert('Refund feature coming soon');
                },

                async loadProducts() {
                    try {
                        let url = `${this.endpoints.search}?q=`;
                        if (this.selectedCategory) {
                            url += '&category=' + this.selectedCategory;
                        }
                        const response = await fetch(url, {
                            headers: { 'Accept': 'application/json' }
                        });
                        const products = await response.json();
                        this.popularProducts = products.map(p => ({
                            id: p.id,
                            barcode: p.barcode,
                            name: p.name,
                            name_si: p.name_si || '',
                            price: p.price,
                            cost: p.cost || 0,
                            tax_rate: p.tax_rate || 0,
                            is_taxable: p.is_taxable || false,
                            stock: p.stock || 0 // Ensure stock is included
                        }));
                    } catch (e) {
                        console.error('Failed to load products:', e);
                    }
                },

                // PWA Installation
                async installPWA() {
                    if (!this.deferredPrompt) {
                        alert('App is already installed or installation is not available');
                        return;
                    }

                    this.deferredPrompt.prompt();
                    const { outcome } = await this.deferredPrompt.userChoice;

                    if (outcome === 'accepted') {
                        console.log('PWA installed');
                    }

                    this.deferredPrompt = null;
                    this.showInstallButton = false;
                },

                // Warranty Search and Claim Methods
                async searchWarranty() {
                    if (!this.warrantySearchQuery) return;
                    this.warrantyLoading = true;
                    this.warrantySearchResults = [];
                    this.selectedWarrantyItem = null;
                    try {
                        const res = await fetch(`${this.endpoints.warrantySearch}?search=${encodeURIComponent(this.warrantySearchQuery)}`);
                        const data = await res.json();
                        if (data.success) {
                            this.warrantySearchResults = data.items;
                            this.warrantyReplacementProducts = data.products;
                            this.warrantyBranches = data.branches;
                        } else {
                            alert('Search failed');
                        }
                    } catch (e) {
                        console.error('Warranty search error:', e);
                        alert('An error occurred during lookup');
                    } finally {
                        this.warrantyLoading = false;
                    }
                },

                selectWarrantyItem(item) {
                    this.selectedWarrantyItem = item;
                    this.warrantyClaimForm.issue_description = '';
                    this.warrantyClaimForm.is_replaced = false;
                    this.warrantyClaimForm.replacement_product_id = item.product_id || '';
                    this.warrantyClaimForm.replacement_branch_id = this.warrantyBranches.length > 0 ? this.warrantyBranches[0].id : '';
                    this.warrantyClaimForm.replacement_qty = 1;
                    this.warrantyClaimForm.replacement_imei = '';
                    this.warrantyClaimForm.notes = '';
                    this.warrantyClaimForm.status = 'received';
                },

                async submitWarrantyClaim() {
                    const form = this.warrantyClaimForm;
                    const item = this.selectedWarrantyItem;
                    if (!form.issue_description) {
                        alert('Please describe the fault');
                        return;
                    }
                    if (form.is_replaced && (!form.replacement_product_id || !form.replacement_branch_id)) {
                        alert('Please fill in replacement product and branch');
                        return;
                    }

                    try {
                        const payload = {
                            invoice_id: item.invoice_id,
                            product_id: item.product_id,
                            customer_name: item.customer_name,
                            customer_phone: item.customer_phone,
                            product_name: item.product_name,
                            imei_numbers: item.imei_numbers,
                            issue_description: form.issue_description,
                            status: form.status,
                            notes: form.notes,
                            is_replaced: form.is_replaced ? 1 : 0,
                            replacement_product_id: form.replacement_product_id,
                            replacement_branch_id: form.replacement_branch_id,
                            replacement_qty: form.replacement_qty,
                            replacement_imei: form.replacement_imei
                        };

                        const response = await fetch(this.endpoints.warrantyClaim, {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                                'Accept': 'application/json',
                                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                            },
                            body: JSON.stringify(payload)
                        });

                        const resData = await response.json();
                        if (resData.success) {
                            alert('Warranty claim and replacement processed successfully!');
                            this.showWarrantyModal = false;
                            this.selectedWarrantyItem = null;
                            this.warrantySearchResults = [];
                            this.warrantySearchQuery = '';
                        } else {
                            alert('Error: ' + resData.message);
                        }
                    } catch (e) {
                        console.error('Claim submit error:', e);
                        alert('Failed to process warranty claim');
                    }
                },

                // Helpers
                formatNumber(num) {
                    return parseFloat(num || 0).toLocaleString('en-US', {
                        minimumFractionDigits: 2,
                        maximumFractionDigits: 2
                    });
                }
            };
        }
    </script>

    <style>
        [x-cloak] {
            display: none !important;
        }
    </style>
@endpush