@extends('layouts.pos')

@section('content')
    <div x-data="posApp()" x-init="init()" class="h-screen flex flex-col">
        {{-- 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 sinhala">විකුණුම් පද්ධතිය</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>
                    <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">
                            <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 sinhala">උපකරණ පුවරුව</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 sinhala">තොග කළමනාකරණය</div>
                                </div>
                            </a>

                            <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 sinhala">ඉන්වොයිස</div>
                                </div>
                            </a>

                            <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 sinhala">ඇප් එක ස්ථාපනය කරන්න</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 sinhala">ඉවත් වන්න</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 product / බාකෝඩ් හෝ නිෂ්පාදනය සොයන්න"
                            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">
                    <h2 class="font-semibold text-slate-700 text-lg">🛒 Cart</h2>
                    <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 sinhala">කරුණාකර නිෂ්පාදන එකතු කරන්න</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-3">
                                <div class="flex-1">
                                    <h3 class="font-medium text-slate-800" x-text="item.name"></h3>
                                    <p class="text-sm text-slate-500"
                                        x-text="'LKR ' + formatNumber(item.price) + ' × ' + item.qty"></p>
                                </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>
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-2">
                                    <button @click="updateQty(index, -1)"
                                        class="w-10 h-10 bg-white border-2 border-slate-300 rounded-lg text-xl 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-16 h-10 text-center border-2 border-slate-300 rounded-lg font-semibold"
                                        min="0.001" step="any">
                                    <button @click="updateQty(index, 1)"
                                        class="w-10 h-10 bg-white border-2 border-slate-300 rounded-lg text-xl font-bold text-slate-600 hover:border-blue-500 hover:text-blue-600 transition">+</button>
                                </div>
                                <div class="flex items-center gap-2">
                                    <input type="number" x-model.number="item.discount" placeholder="Disc"
                                        class="w-20 h-10 text-center border-2 border-slate-300 rounded-lg text-sm" min="0">
                                    <span class="text-slate-500">LKR</span>
                                </div>
                                <div class="text-right font-bold text-lg text-slate-800"
                                    x-text="'= ' + formatNumber(getLineTotal(item))"></div>
                            </div>
                        </div>
                    </template>
                </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-4 border-2 border-slate-200 hover:border-blue-500 hover:shadow-lg transition text-left group">
                                <div
                                    class="aspect-square bg-slate-100 rounded-lg mb-3 flex items-center justify-center text-4xl group-hover:scale-105 transition">
                                    📦
                                </div>
                                <h4 class="font-medium text-slate-800 text-sm truncate" x-text="product.name"></h4>
                                <p class="text-xs text-slate-500 sinhala truncate" x-text="product.name_si || ''"></p>
                                <p class="font-bold text-blue-600 mt-1" 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-3 gap-4">
                        <button @click="processPayment('cash')" :disabled="cart.length === 0"
                            class="py-6 bg-gradient-to-br from-green-500 to-green-600 text-white rounded-2xl font-bold text-xl shadow-lg hover:shadow-xl hover:from-green-600 hover:to-green-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                            <div class="text-3xl mb-1">💵</div>
                            CASH
                            <div class="text-sm font-normal opacity-80 sinhala">මුදල්</div>
                        </button>
                        <button @click="processPayment('card')" :disabled="cart.length === 0"
                            class="py-6 bg-gradient-to-br from-blue-500 to-blue-600 text-white rounded-2xl font-bold text-xl shadow-lg hover:shadow-xl hover:from-blue-600 hover:to-blue-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                            <div class="text-3xl mb-1">💳</div>
                            CARD
                            <div class="text-sm font-normal opacity-80 sinhala">කාඩ්</div>
                        </button>
                        <button @click="processPayment('qr')" :disabled="cart.length === 0"
                            class="py-6 bg-gradient-to-br from-purple-500 to-purple-600 text-white rounded-2xl font-bold text-xl shadow-lg hover:shadow-xl hover:from-purple-600 hover:to-purple-700 transition disabled:opacity-50 disabled:cursor-not-allowed">
                            <div class="text-3xl mb-1">📱</div>
                            QR
                            <div class="text-sm font-normal opacity-80 sinhala">ක්‍යූආර්</div>
                        </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>

        {{-- 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' : '📱 QR Payment')"></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"
                                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"
                                autofocus>
                        </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'">
                    <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" 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>

                <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"
                        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">Complete
                        Sale</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
                searchQuery: '',
                searchResults: [],
                cart: [],
                popularProducts: @json($popularProducts),
                selectedCategory: null,
                billDiscount: 0,
                billDiscountType: 'amount',

                // 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']) }}",
                },

                // 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,

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

                // Stock Warning
                showStockWarning: false,
                stockWarning: {
                    productName: '',
                    available: 0,
                    inCart: 0,
                    source: '',
                    branchName: '',
                    alternativeStock: null
                },

                // Init
                async init() {
                    console.log('🚀 BILLING SCRIPT LOADED v4.2 - Branch-Specific Stock Validation Active');
                    console.log('📍 User Branch ID:', {{ auth()->user()->branch_id }});
                    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 - Focus Search
                        if (e.key === 'F4') {
                            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;
                            }
                        }

                        // Escape - Close Modals
                        if (e.key === 'Escape') {
                            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) {
                    // Check stock limits (Online & Offline) 
                    try {
                        let stockLimit = parseInt(product.stock);
                        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.qty++;
                    } else {
                        this.cart.push({
                            id: product.id,
                            barcode: product.barcode,
                            name: product.name,
                            price: parseFloat(product.price || 0), // Use Selling Price as Customer Price
                            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'
                        });
                    }

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

                updateQty(index, delta) {
                    const newQty = this.cart[index].qty + delta;
                    if (newQty > 0) {
                        this.cart[index].qty = newQty;
                    } else if (newQty <= 0) {
                        this.removeFromCart(index);
                    }
                },

                validateQty(index) {
                    if (this.cart[index].qty <= 0) {
                        this.removeFromCart(index);
                    }
                },

                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;
                },

                async completePayment() {
                    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
                        })),
                        bill_discount: this.billDiscount,
                        bill_discount_type: this.billDiscountType,
                        payments: [{
                            method: this.paymentMethod,
                            amount: this.paymentMethod === 'cash' ? 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;

                            // Update local stock even if online to keep cache fresh
                            await this.updateLocalStock(invoice.items);
                        } 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);

                            // 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.');
                        }
                    }
                },

                // 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) {
                            store.put(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 allTransactions = await store.getAll();

                        if (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.$refs.searchInput.focus();
                },

                // 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;
                },

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

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