@extends('layouts.pos')

@section('content')
<div class="flex-1 flex flex-col lg:flex-row w-full h-full overflow-y-auto lg:overflow-hidden bg-slate-100" 
     x-data="{
         barcodeInput: '',
         cart: [],
         discount: 0,
         paymentMethod: 'pos_cash',
         searchQuery: '',
         products: {{ json_encode($products) }},
         
         get subtotal() {
             return this.cart.reduce((sum, item) => sum + (item.price * item.qty), 0);
         },
         get totalGst() {
             return this.cart.reduce((sum, item) => sum + ((item.price * item.qty * (item.gst_percent || 0)) / 100), 0);
         },
         get grandTotal() {
             return Math.max(0, (this.subtotal - parseFloat(this.discount || 0)));
         },

         addItem(prod, variant = null) {
             const key = prod.id + '-' + (variant ? variant.id : 'base');
             const existing = this.cart.find(i => i.key === key);
             if (existing) {
                 existing.qty++;
             } else {
                 this.cart.push({
                     key: key,
                     product_id: prod.id,
                     variant_id: variant ? variant.id : null,
                     name: prod.name + (variant ? ' (' + variant.variant_name + ')' : ''),
                     weight: variant ? variant.weight : prod.weight,
                     price: variant ? (variant.discount_price && variant.discount_price > 0 ? variant.discount_price : variant.selling_price) : (prod.discount_price && prod.discount_price > 0 ? prod.discount_price : prod.selling_price),
                     gst_percent: prod.gst_percent || 0,
                     qty: 1
                 });
             }
         },

         scanBarcode() {
             if (!this.barcodeInput.trim()) return;
             fetch('{{ route('admin.pos.barcode') }}?code=' + encodeURIComponent(this.barcodeInput.trim()))
                 .then(res => res.json())
                 .then(data => {
                     if (data.success) {
                         const p = data.product;
                         const key = p.id + '-' + (p.variant_id ? p.variant_id : 'base');
                         const existing = this.cart.find(i => i.key === key);
                         if (existing) {
                             existing.qty++;
                         } else {
                             this.cart.push({
                                 key: key,
                                 product_id: p.id,
                                 variant_id: p.variant_id,
                                 name: p.name,
                                 weight: p.weight,
                                 price: p.effective_price,
                                 gst_percent: p.gst_percent || 0,
                                 qty: 1
                             });
                         }
                         this.barcodeInput = '';
                     } else {
                         alert(data.message);
                         this.barcodeInput = '';
                     }
                 });
         },

         completeSale() {
             if (this.cart.length === 0) {
                 alert('POS Cart is empty! Please add or scan items first.');
                 return;
             }
             fetch('{{ route('admin.pos.sale') }}', {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
                     'X-CSRF-TOKEN': '{{ csrf_token() }}'
                 },
                 body: JSON.stringify({
                     items: this.cart,
                     discount: this.discount,
                     payment_method: this.paymentMethod
                 })
             })
             .then(res => res.json())
             .then(data => {
                 if (data.success) {
                     alert(data.message);
                     window.open(data.invoice_url, '_blank');
                     this.cart = [];
                     this.discount = 0;
                 } else {
                     alert('POS Sale failed: ' + (data.message || 'Error'));
                 }
             });
         }
      }">

    <!-- Left Column: Item Catalog & Barcode Scanner -->
    <div class="w-full lg:w-7/12 p-4 sm:p-6 flex flex-col border-b lg:border-b-0 lg:border-r border-slate-200 space-y-4 overflow-hidden bg-slate-50/60">
        
        <!-- Barcode & Search Controls Header -->
        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <!-- Barcode Scanner Input Box -->
            <div class="relative">
                <input type="text" 
                       x-model="barcodeInput" 
                       @keydown.enter.prevent="scanBarcode()" 
                       placeholder="Scan Barcode / Press Enter" 
                       class="w-full pl-10 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-xs font-mono font-bold text-amber-700 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-amber-500 shadow-xs">
                <i class="fa-solid fa-barcode absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
            </div>

            <!-- Instant Search Input -->
            <div class="relative">
                <input type="text" 
                       x-model="searchQuery" 
                       placeholder="Search products by name..." 
                       class="w-full pl-10 pr-4 py-3 bg-white border border-slate-200 rounded-2xl text-xs font-medium text-slate-900 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-brand-500 shadow-xs">
                <i class="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-400 text-sm"></i>
            </div>
        </div>

        <!-- Product Grid -->
        <div class="flex-1 min-h-[300px] lg:min-h-0 overflow-y-auto no-scrollbar grid grid-cols-2 sm:grid-cols-3 gap-3.5 pr-1">
            <template x-for="prod in products.filter(p => !searchQuery || p.name.toLowerCase().includes(searchQuery.toLowerCase()))" :key="prod.id">
                <div class="bg-white border border-slate-200/90 hover:border-brand-500 rounded-2xl p-3 flex flex-col justify-between cursor-pointer transition hover:-translate-y-0.5 shadow-sm hover:shadow-md group relative overflow-hidden" @click="addItem(prod)">
                    <!-- Big Product Image Box -->
                    <div class="w-full h-28 sm:h-32 bg-slate-50 rounded-xl p-2 flex items-center justify-center mb-2 overflow-hidden border border-slate-100 group-hover:scale-105 transition-transform duration-300">
                        <img :src="prod.image ? prod.image : 'https://images.unsplash.com/photo-1542838132-92c53300491e?auto=format&fit=crop&w=300&q=80'" :alt="prod.name" class="max-h-full max-w-full object-contain">
                    </div>

                    <!-- Name & Weight -->
                    <div class="space-y-0.5 mb-2">
                        <div class="text-xs font-extrabold text-slate-900 line-clamp-1 group-hover:text-brand-600 leading-snug" x-text="prod.name"></div>
                        <div class="text-[10px] font-bold text-slate-400" x-text="prod.weight ? prod.weight : ''"></div>
                    </div>

                    <!-- Price & Stock Row -->
                    <div class="flex items-center justify-between pt-2 border-t border-slate-100 text-xs">
                        <span class="font-black text-brand-700 text-sm" x-text="'₹' + (prod.discount_price && prod.discount_price > 0 ? prod.discount_price : prod.selling_price)"></span>
                        <span class="text-[10px] text-slate-600 font-extrabold bg-slate-100 px-2 py-0.5 rounded-full border border-slate-200/60" x-text="prod.stock_quantity + ' Stock'"></span>
                    </div>
                </div>
            </template>
        </div>
    </div>

    <!-- Right Column: POS Cart & Instant Checkout Bill (Light Theme) -->
    <div class="w-full lg:w-5/12 p-4 sm:p-6 flex flex-col bg-white space-y-4 shadow-sm">
        
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <h3 class="font-extrabold text-slate-900 text-sm sm:text-base flex items-center gap-2">
                <i class="fa-solid fa-receipt text-brand-600"></i> Current POS Bill Cart
            </h3>
            <button @click="cart = []" class="text-xs font-bold text-rose-600 hover:underline">Clear Bill</button>
        </div>

        <!-- POS Cart Items Table -->
        <div class="flex-1 min-h-[200px] lg:min-h-0 overflow-y-auto no-scrollbar space-y-2">
            <template x-if="cart.length === 0">
                <div class="text-center py-8 sm:py-12 text-slate-400 text-xs font-medium">
                    <i class="fa-solid fa-barcode text-3xl mb-2 block text-slate-300"></i>
                    Scan barcode or click items to add to bill
                </div>
            </template>

            <template x-for="(item, index) in cart" :key="item.key">
                <div class="bg-slate-50 border border-slate-200/80 rounded-xl p-3 flex items-center justify-between text-xs gap-3">
                    <div class="flex-1 min-w-0">
                        <div class="font-extrabold text-slate-900 truncate" x-text="item.name"></div>
                        <div class="text-[10px] text-slate-500" x-text="'₹' + item.price + ' each'"></div>
                    </div>

                    <!-- Quantity Control Buttons -->
                    <div class="flex items-center bg-white border border-slate-200 rounded-lg p-1">
                        <button @click="if(item.qty > 1) item.qty--; else cart.splice(index, 1)" class="w-6 h-6 rounded bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold flex items-center justify-center">-</button>
                        <span class="w-8 text-center font-bold text-slate-900" x-text="item.qty"></span>
                        <button @click="item.qty++" class="w-6 h-6 rounded bg-slate-100 hover:bg-slate-200 text-slate-700 font-bold flex items-center justify-center">+</button>
                    </div>

                    <div class="text-right min-w-[60px]">
                        <div class="font-black text-slate-900" x-text="'₹' + (item.price * item.qty).toFixed(2)"></div>
                    </div>

                    <button @click="cart.splice(index, 1)" class="text-slate-400 hover:text-rose-600"><i class="fa-solid fa-xmark"></i></button>
                </div>
            </template>
        </div>

        <!-- Payment Calculations & Mode Selection -->
        <div class="bg-slate-50 rounded-2xl p-4 border border-slate-200 space-y-3 shrink-0">
            
            <div class="space-y-1.5 text-xs text-slate-600 font-semibold">
                <div class="flex justify-between">
                    <span>Subtotal:</span>
                    <span class="text-slate-900 font-mono font-bold" x-text="'₹' + subtotal.toFixed(2)">₹0.00</span>
                </div>
                <div class="flex justify-between text-slate-500">
                    <span>Estimated GST:</span>
                    <span class="font-mono font-bold" x-text="'₹' + totalGst.toFixed(2)">₹0.00</span>
                </div>
                <div class="flex justify-between items-center pt-1">
                    <span>Discount (₹):</span>
                    <input type="number" step="0.01" x-model="discount" class="w-24 px-2 py-1 bg-white border border-slate-200 rounded text-xs text-right font-mono font-bold text-slate-900 focus:outline-none focus:ring-2 focus:ring-brand-500">
                </div>
            </div>

            <!-- Total Amount -->
            <div class="border-t border-slate-200 pt-3 flex justify-between items-baseline">
                <span class="text-sm font-extrabold text-slate-900">Grand Total</span>
                <span class="text-xl sm:text-2xl font-black text-brand-700 font-mono" x-text="'₹' + grandTotal.toFixed(2)">₹0.00</span>
            </div>

            <!-- Payment Method Radio Switches -->
            <div class="grid grid-cols-3 gap-2 pt-2">
                <button type="button" @click="paymentMethod = 'pos_cash'" :class="paymentMethod === 'pos_cash' ? 'bg-emerald-600 text-white font-black shadow-xs' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-100'" class="py-2 rounded-xl text-xs transition">
                    <i class="fa-solid fa-money-bill"></i> Cash
                </button>
                <button type="button" @click="paymentMethod = 'pos_card'" :class="paymentMethod === 'pos_card' ? 'bg-blue-600 text-white font-black shadow-xs' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-100'" class="py-2 rounded-xl text-xs transition">
                    <i class="fa-solid fa-credit-card"></i> Card
                </button>
                <button type="button" @click="paymentMethod = 'pos_upi'" :class="paymentMethod === 'pos_upi' ? 'bg-purple-600 text-white font-black shadow-xs' : 'bg-white border border-slate-200 text-slate-700 hover:bg-slate-100'" class="py-2 rounded-xl text-xs transition">
                    <i class="fa-solid fa-qrcode"></i> UPI
                </button>
            </div>

            <!-- Complete POS Checkout Button -->
            <button @click="completeSale()" class="w-full bg-brand-600 hover:bg-brand-700 text-white font-black text-xs sm:text-sm py-3.5 rounded-xl transition shadow-lg shadow-brand-600/30 flex items-center justify-center gap-2">
                <i class="fa-solid fa-check-double"></i> Complete Sale & Print Bill
            </button>
        </div>

    </div>

</div>
@endsection