{{--
  POS Billing Screen
  File : resources/views/livewire/pos/create.blade.php
  Component: app/Livewire/Pos/Create.php
--}}
<div class="pos-shell" x-data="posApp()" x-init="init()">

    @once
        <!-- <link rel="stylesheet" href="{{ asset('css/poscreate.css') }}"> -->
        <link rel="stylesheet" href="{{ asset('build/assets/css/poscreate.css') }}">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    @endonce

    {{-- ══ TOP BAR ════════════════════════════════════════════ --}}
    <div class="pos-topbar">

        <div class="pos-brand">
            <div class="pos-brand-icon"><i class="bi bi-flower1"></i></div>
            <span class="pos-brand-name">AgroShop POS</span>
        </div>

        {{-- Invoice no + Customer lookup --}}
        <div class="pos-topbar-mid">

            <div class="inv-no-box">
                <span class="inv-no-label">Invoice</span>
                <span class="inv-no-val">{{ $invoiceNo }}</span>
            </div>

            <div class="pos-customer-box" :class="{ 'required-glow': showCustomerError }">
                <i class="bi bi-person" style="color:#4a7055;padding-left:10px;font-size:14px;flex-shrink:0"></i>
                <input type="text"
                       wire:model="mobile"
                       placeholder="Customer mobile…"
                       maxlength="15"
                       x-on:input="if($el.value.length >= 10) $wire.lookupCustomer()"
                       style="flex:1;width:150px">
                <button class="cust-btn" wire:click="lookupCustomer" wire:loading.attr="disabled">
                    <i class="bi bi-search"></i>
                </button>
            </div>

            {{-- Show error if tried to save without customer --}}
@if($flashMsg && $flashType === 'error' && str_contains($flashMsg, 'Customer'))
    <span style="color:#f87171;font-size:11.5px;font-family:var(--font)">
        <i class="bi bi-exclamation-circle"></i> Required
    </span>
@endif

            {{-- Customer status --}}
            @if($customerFound)
                <!-- <div class="cust-found">
                    <i class="bi bi-person-check-fill"></i>
                    <span>{{ $customerName ?: $mobile }}</span>
                </div> -->

                <div class="cust-found">
    <i class="bi bi-person-check-fill"></i>
    <span>{{ $customerName ?: $mobile }}</span>
    <button class="cust-history-btn"
            wire:click="loadHistory"
            title="View purchase history">
        <i class="bi bi-clock-history"></i>
    </button>
</div>
            @elseif($newCustomer)
                <div class="cust-new">
                    <input type="text" wire:model="customerName"
                           placeholder="Enter name (optional)"
                           style="height:28px;padding:0 8px;border:1.5px solid rgba(255,255,255,.15);border-radius:6px;background:rgba(255,255,255,.08);color:#fff;font-size:12px;font-family:var(--font);outline:none;width:140px">
                    <button class="cust-save-btn" wire:click="saveCustomerName">
                        <i class="bi bi-check2"></i> Save
                    </button>
                </div>
            @endif

        </div>

        <div class="pos-topbar-right">
            <button class="pos-tb-btn hold" x-on:click="holdBill()">
                <i class="bi bi-pause-circle"></i> Hold
            </button>
            <button class="pos-tb-btn" wire:click="clearCart">
                <i class="bi bi-trash3"></i> Clear
            </button>
            <a href="{{ route('pos.index') }}" class="pos-tb-btn" wire:navigate>
                <i class="bi bi-list-ul"></i> Sales
            </a>
        </div>

    </div>

    {{-- Flash --}}
    @if($flashMsg)
        <div class="pos-flash {{ $flashType }}"
             x-data="{show:true}" x-show="show"
             x-init="setTimeout(()=>{show=false;$wire.dismissFlash()},4000)">
            <i class="bi bi-{{ $flashType === 'success' ? 'check-circle-fill' : 'exclamation-triangle-fill' }}"></i>
            {{ $flashMsg }}
            <button wire:click="dismissFlash" style="margin-left:auto;background:none;border:none;color:inherit;cursor:pointer">×</button>
        </div>
    @endif

    {{-- ══ BODY ════════════════════════════════════════════════ --}}
    <div class="pos-body">

        {{-- ── LEFT: Products (col-8) ─────────────────────────── --}}
        <div class="pos-left">

            {{-- Search bar --}}
            <div class="prod-search-bar">
                <div class="prod-search-wrap">
                    <i class="bi bi-search"></i>
                    <input type="text"
                           x-model="searchQuery"
                           x-on:input="filterProducts()"
                           placeholder="Search product or company…"
                           class="prod-search-inp">
                    <button x-show="searchQuery" x-on:click="searchQuery='';filterProducts()"
                            class="search-clear-btn">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
                <span x-text="filteredProducts.length + ' products'" class="prod-count-text"></span>
            </div>

            {{-- Category chips --}}
            <div class="cat-chips-bar">
                <button class="cat-chip"
                        :class="activeCat === '' ? 'active' : ''"
                        x-on:click="activeCat='';filterProducts()">
                    All
                </button>
                @foreach($categories as $cat)
                    <button class="cat-chip"
                            :class="activeCat === '{{ $cat->id }}' ? 'active' : ''"
                            x-on:click="activeCat='{{ $cat->id }}';filterProducts()">
                        {{ $cat->category_name }}
                    </button>
                @endforeach
            </div>

            {{-- Product grid --}}
            <div class="prod-grid" id="prodGrid">
                <template x-for="p in filteredProducts" :key="p.id">
                    <div class="prod-card"
                         :class="{ 'in-cart': cartQty(p.id) > 0, 'no-stock': !p.has_stock }"
                         x-on:click="addToCart(p)">

                        {{-- Image area --}}
                        <div class="prod-img-wrap">
                            <template x-if="p.image">
                                <img :src="p.image" :alt="p.name" class="prod-img">
                            </template>
                            <template x-if="!p.image">
                                <div class="prod-img-placeholder">
                                    <i class="bi bi-box-seam"></i>
                                </div>
                            </template>

                            {{-- Overlay: name + company --}}
                            <div class="prod-img-overlay">
                                <div class="prod-overlay-name" x-text="p.name"></div>
                                <div class="prod-overlay-company" x-text="p.company"></div>
                            </div>

                            {{-- Cart qty badge --}}
                            <div class="cart-qty-badge" x-show="cartQty(p.id) > 0"
                                 x-text="cartQty(p.id)"></div>

                            {{-- No stock badge --}}
                            <div class="no-stock-badge" x-show="!p.has_stock">No Stock</div>
                        </div>

                        {{-- Card footer: price + size + add btn --}}
                        <div class="prod-card-foot">
                            <div>
                                <div class="prod-price" x-text="'₹' + p.price.toLocaleString('en-IN')"></div>
                                <div class="prod-size" x-text="p.size ? p.size + ' ' + p.unit : p.unit"></div>
                            </div>
                            <button class="prod-add-btn"
                                    x-on:click.stop="addToCart(p)"
                                    title="Add to bill">
                                <i class="bi bi-plus-lg" style="font-size:12px"></i>
                            </button>
                        </div>

                    </div>
                </template>

                {{-- Empty state --}}
                <template x-if="filteredProducts.length === 0">
                    <div class="prod-empty-state">
                        <i class="bi bi-search" style="font-size:32px;opacity:.3"></i>
                        <div style="font-size:14px;font-weight:600;color:var(--text-2)">No products found</div>
                        <div style="font-size:12px;color:var(--text-3)">Try a different search</div>
                    </div>
                </template>
            </div>



            @if($showHistoryModal)
<div class="backdrop"
     wire:click.self="$set('showHistoryModal', false)"
     x-data
     x-on:keydown.escape.window="$wire.set('showHistoryModal', false)"
     style="z-index:2000">
    <div class="pos-modal" style="max-width:560px;max-height:80vh;overflow-y:auto">

        <div class="pos-modal-head">
            <div class="pos-modal-head-icon">
                <i class="bi bi-clock-history"></i>
            </div>
            <div class="pos-modal-title">
                Purchase History — {{ $customerName ?: $mobile }}
            </div>
            <button class="pos-modal-close"
                    wire:click="$set('showHistoryModal', false)">
                <i class="bi bi-x-lg"></i>
            </button>
        </div>

        <div class="pos-modal-body" style="padding:0">

            @forelse($customerHistory as $sale)
                <div x-data="{ open: false }"
                     style="border-bottom:1px solid var(--border)">

                    {{-- Sale header row — click to expand --}}
                    <div x-on:click="open = !open"
                         style="display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;transition:background .12s"
                         :style="open ? 'background:#f0faf4' : ''"
                         onmouseover="this.style.background='#f8fbf9'"
                         onmouseout="this.style.background=open?'#f0faf4':''">

                        <i class="bi"
                           :class="open ? 'bi-chevron-down' : 'bi-chevron-right'"
                           style="font-size:11px;color:var(--text-3);flex-shrink:0"></i>

                        <span style="font-weight:600;font-size:13px;color:var(--green)">
                            {{ $sale['invoice_no'] }}
                        </span>

                        <span style="font-size:12px;color:var(--text-3)">
                            {{ $sale['date'] }}
                        </span>

                        <span style="margin-left:auto;font-family:var(--mono);font-weight:700;font-size:13px;color:var(--text-1)">
                            ₹{{ number_format($sale['net_amount'], 2) }}
                        </span>

                        <span style="font-size:11.5px;color:var(--text-3)">
                            {{ count($sale['items']) }} items
                        </span>
                    </div>

                    {{-- Expandable items --}}
                    <div x-show="open"
                         x-transition:enter="transition ease-out duration-150"
                         x-transition:enter-start="opacity-0 transform -translate-y-1"
                         x-transition:enter-end="opacity-100 transform translate-y-0"
                         style="background:#fafcfb;border-top:1px solid var(--border)">

                        <table style="width:100%;border-collapse:collapse;font-size:12.5px">
                            <thead>
                                <tr style="background:#f3f7f4">
                                    <th style="padding:6px 16px;text-align:left;font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">Product</th>
                                    <th style="padding:6px 10px;text-align:right;font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">Qty</th>
                                    <th style="padding:6px 10px;text-align:right;font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">Price</th>
                                    <th style="padding:6px 16px;text-align:right;font-size:11px;color:var(--text-3);font-weight:700;text-transform:uppercase;letter-spacing:.05em">Total</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach($sale['items'] as $item)
                                    <tr style="border-top:1px solid #f0f5f2">
                                        <td style="padding:7px 16px;font-weight:500;color:var(--text-1)">
                                            {{ $item['name'] }}
                                        </td>
                                        <td style="padding:7px 10px;text-align:right;font-family:var(--mono);color:var(--text-2)">
                                            {{ $item['qty'] }}
                                        </td>
                                        <td style="padding:7px 10px;text-align:right;font-family:var(--mono);color:var(--text-2)">
                                            ₹{{ number_format($item['price'], 2) }}
                                        </td>
                                        <td style="padding:7px 16px;text-align:right;font-family:var(--mono);font-weight:600;color:var(--green)">
                                            ₹{{ number_format($item['total'], 2) }}
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>

                    </div>
                </div>
            @empty
                <div style="text-align:center;padding:32px;color:var(--text-3)">
                    <i class="bi bi-bag-x" style="font-size:32px;opacity:.3;display:block;margin-bottom:8px"></i>
                    No previous purchases found.
                </div>
            @endforelse

        </div>

    </div>
</div>
@endif

        </div>

        {{-- ── RIGHT: Bill (col-4) ─────────────────────────────── --}}
        <div class="pos-right">

            {{-- Bill header --}}
            <div class="bill-header">
                <div class="bill-header-row">
                    <span class="bill-title">Current Bill</span>
                    <span class="bill-inv-no">{{ $invoiceNo }}</span>
                </div>
                @if($customerFound || $newCustomer)
                    <div class="bill-cust-strip">
                        <i class="bi bi-person-fill"></i>
                        <span>{{ $customerName ?: $mobile }}</span>
                        <span class="bill-cust-mobile">{{ $mobile }}</span>
                    </div>
                @endif
            </div>

            {{-- Empty state --}}
            <div class="bill-empty" x-show="cart.length === 0">
                <i class="bi bi-bag" style="font-size:36px;opacity:.2"></i>
                <div class="bill-empty-title">Bill is empty</div>
                <div class="bill-empty-sub">Click any product to add</div>
            </div>

            {{-- Bill items list --}}
            <div class="bill-items" x-show="cart.length > 0">
                <template x-for="(item, idx) in cart" :key="item.product_id">
                    <div class="bill-row"
                         :class="{ 'active-row': activeItem === item.product_id }"
                         x-on:click="activeItem = item.product_id">

                        <div class="bill-row-left">
                            <div class="bill-row-name" x-text="item.product_name"></div>
                            <!-- <div class="bill-row-meta">
                                <span x-text="item.company_name"></span>
                                <span>·</span>
                                <span x-text="'₹' + item.price + '/unit'" class="bill-row-rate"></span>
                            </div> -->
                            <div class="bill-row-meta">
                                <span x-text="item.company_name"></span>
                                <span>·</span>
                                <span style="display:inline-flex;align-items:center;gap:2px">
                                    <span style="font-size:10px;color:var(--text-3)">₹</span>
                                    <input type="number"
                                           class="price-edit-inp"
                                           :value="item.price"
                                           min="0" step="0.01"
                                           x-on:change.stop="updatePrice(item.product_id, $event.target.value)"
                                           x-on:click.stop
                                           title="Edit price for this sale">
                                </span>
                            </div>
                        </div>

                        {{-- Qty controls --}}
                        <div class="qty-ctrl">
                            <button class="qty-btn minus"
                                    x-on:click.stop="changeQty(item.product_id, -1)">
                                <i class="bi bi-dash" style="font-size:11px"></i>
                            </button>
                            <input type="number"
                                   class="qty-num-input"
                                   :value="item.qty"
                                   min="0.01"
                                   step="0.01"
                                   x-on:change.stop="setQty(item.product_id, $event.target.value)"
                                   x-on:click.stop>
                            <button class="qty-btn"
                                    x-on:click.stop="changeQty(item.product_id, 1)">
                                <i class="bi bi-plus-lg" style="font-size:11px"></i>
                            </button>
                        </div>

                        <div class="bill-row-total" x-text="'₹' + item.total.toLocaleString('en-IN', {minimumFractionDigits:2})"></div>

                        <button class="bill-row-remove" x-on:click.stop="removeFromCart(item.product_id)">
                            <i class="bi bi-x-lg"></i>
                        </button>

                    </div>
                </template>
            </div>

            {{-- Quick qty + loose qty buttons (shows when item active) --}}
            <div class="quick-bar" x-show="cart.length > 0 && activeItem !== null">
                <div class="quick-bar-label">Quick Add:</div>
                <template x-if="activeItemData && !activeItemData.allow_loose">
                    <div style="display:flex;gap:4px;flex:1">
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 1)">+1</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 5)">+5</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 10)">+10</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 25)">+25</button>
                    </div>
                </template>
                <template x-if="activeItemData && activeItemData.allow_loose">
                    <div style="display:flex;gap:4px;flex:1">
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 0.5)">+0.5</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 1)">+1</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 5)">+5</button>
                        <button class="quick-btn" x-on:click="changeQty(activeItem, 10)">+10</button>
                    </div>
                </template>
            </div>

            {{-- Bill footer --}}
            <div class="bill-footer" x-show="cart.length > 0">

                {{-- Totals --}}
                <div class="bill-totals">
                    <div class="bill-total-row">
                        <span>Subtotal</span>
                        <span x-text="'₹' + billSubtotal.toLocaleString('en-IN', {minimumFractionDigits:2})"></span>
                    </div>

                    {{-- Payment Section --}}
                    <div class="payment-section" x-show="cart.length > 0">

                        <div class="payment-row-inline">

                            {{-- Label + Add button --}}
                            <span class="payment-label">Payment</span>

                            {{-- Method dropdown --}}
                            <select class="payment-method-sel"
                                    wire:model.live="payments.0.method">
                                <option value="upi">UPI</option>
                                <option value="cash">Cash</option>
                                <option value="neft">NEFT</option>
                                <option value="card">Card</option>
                            </select>

                            {{-- Amount --}}
                            <div style="position:relative;flex:1">
                                <span class="payment-rupee">₹</span>
                                <input type="number"
                                       class="payment-amount-inp"
                                       wire:model.live="payments.0.amount"
                                       placeholder="0.00"
                                       min="0"
                                       step="0.01">
                            </div>

                            {{-- Add more --}}
                            <button class="payment-add-btn"
                                    wire:click="addPaymentRow"
                                    title="Add payment method">
                                <i class="bi bi-plus-lg"></i>
                            </button>

                        </div>

                        {{-- Extra payment rows if added --}}
                        @if(count($payments) > 1)
                            @foreach($payments as $i => $payment)
                                @if($i === 0) @continue @endif
                                <div class="payment-row-inline" style="margin-top:4px">
                                    <span class="payment-label"></span>
                                    <select class="payment-method-sel"
                                            wire:model.live="payments.{{ $i }}.method">
                                        <option value="upi">UPI</option>
                                        <option value="cash">Cash</option>
                                        <option value="neft">NEFT</option>
                                        <option value="card">Card</option>
                                    </select>
                                    <div style="position:relative;flex:1">
                                        <span class="payment-rupee">₹</span>
                                        <input type="number"
                                               class="payment-amount-inp"
                                               wire:model.live="payments.{{ $i }}.amount"
                                               placeholder="0.00"
                                               min="0" step="0.01">
                                    </div>
                                    <button class="payment-remove-btn"
                                            wire:click="removePaymentRow({{ $i }})">
                                        <i class="bi bi-x-lg"></i>
                                    </button>
                                </div>
                            @endforeach
                        @endif

                        {{-- Due amount — only show if partial --}}
                        @if($dueAmount > 0)
                            <div class="payment-due-row">
                                <span style="color:var(--red)">Due</span>
                                <span style="color:var(--red);font-family:var(--mono);font-weight:700">
                                    ₹{{ number_format($dueAmount, 2) }}
                                </span>
                            </div>
                        @endif

                    </div>

                    {{-- Discount input --}}
                    <div class="bill-total-row discount-row">
                        <span>Discount</span>
                        <div style="display:flex;align-items:center;gap:4px">
                            <span>₹</span>
                            <input type="number"
                                   class="discount-inp"
                                   wire:model.live="discountAmount"
                                   min="0" step="0.01"
                                   placeholder="0.00">
                        </div>
                    </div>

                    <div class="bill-total-row grand">
                        <span>Total</span>
                        <span x-text="'₹' + billTotal.toLocaleString('en-IN', {minimumFractionDigits:2})"></span>
                    </div>
                </div>

                {{-- Save button --}}
                <div class="bill-actions">
                    <button class="bill-save-btn"
                            x-on:click="syncCartAndSave()"
                            wire:loading.attr="disabled"
                            wire:target="saveBill">
                        <span wire:loading.remove wire:target="saveBill">
                            <i class="bi bi-check2-circle"></i> Save Bill
                        </span>
                        <span wire:loading wire:target="saveBill">
                            <i class="bi bi-arrow-repeat" style="animation:spin .7s linear infinite"></i>
                            Saving…
                        </span>
                    </button>
                    <button class="bill-print-btn" x-on:click="syncCartAndSave('print')">
                        <i class="bi bi-printer"></i> Print
                    </button>
                </div>

            </div>

        </div>

    </div>

    {{-- Pass products to JS --}}
    <script>
    window.__POS_PRODUCTS__ = @json($products);
</script>

<script>
function posApp() {
    return {
        allProducts: [],
        filteredProducts: [],
        searchQuery: '',
        activeCat: '',
        cart: [],
        activeItem: null,

        init() {
            this.allProducts      = window.__POS_PRODUCTS__ || [];
            this.filteredProducts = [...this.allProducts];
        },

        filterProducts() {
            const q   = this.searchQuery.toLowerCase().trim();
            const cat = this.activeCat;
            this.filteredProducts = this.allProducts.filter(p => {
                const matchCat  = !cat || String(p.category_id) === String(cat);
                const matchSrch = !q
                    || p.name.toLowerCase().includes(q)
                    || p.company.toLowerCase().includes(q);
                return matchCat && matchSrch;
            });
        },

        cartQty(productId) {
            const item = this.cart.find(i => i.product_id === productId);
            return item ? item.qty : 0;
        },

        get activeItemData() {
            if (!this.activeItem) return null;
            return this.allProducts.find(p => p.id === this.activeItem) || null;
        },

        addToCart(product) {
            const existing = this.cart.find(i => i.product_id === product.id);
            if (existing) {
                existing.qty   = parseFloat((existing.qty + 1).toFixed(2));
                existing.total = parseFloat((existing.qty * existing.price).toFixed(2));
            } else {
                this.cart.push({
                    product_id:   product.id,
                    product_name: product.name,
                    company_name: product.company,
                    price:        product.price,
                    qty:          1,
                    // total:        product.price,
                    // hsn_code:     product.hsn_code,
                    // gst_rate:     product.gst_rate,
                    // allow_loose:  product.allow_loose,
                    sale_unit:     null,                 // NULL = bag/normal sale
           allow_loose:   product.allow_loose,
           loose_price:   product.loose_price,  // price per kg/litre
           base_unit:     product.base_unit,    // kg, litre, piece
           pack_size:     product.size,         // 25 for 25kg bag
           total:         product.price,
           hsn_code:      product.hsn_code,
           gst_rate:      product.gst_rate,
                });
            }
            this.activeItem = product.id;
        },

        // 2. NEW METHOD — toggleLoose():
toggleLoose(productId) {
    const item = this.cart.find(i => i.product_id === productId);
    if (!item || !item.allow_loose) return;

    if (item.sale_unit === null) {
        // Switch TO loose
        item.sale_unit = item.base_unit;         // 'kg' or 'litre'
        item.price     = item.loose_price || 0;  // per kg price
        item.qty       = 1;
        item.total     = parseFloat((item.qty * item.price).toFixed(2));
    } else {
        // Switch BACK to bag
        item.sale_unit = null;
        // Restore bag price from allProducts
        const prod = this.allProducts.find(p => p.id === productId);
        item.price = prod ? prod.price : item.price;
        item.qty   = 1;
        item.total = parseFloat((item.qty * item.price).toFixed(2));
    }
    this.activeItem = productId;
},

        changeQty(productId, delta) {
            const item = this.cart.find(i => i.product_id === productId);
            if (!item) return;
            const newQty = parseFloat((item.qty + delta).toFixed(2));
            if (newQty <= 0) { this.removeFromCart(productId); return; }
            item.qty   = newQty;
            item.total = parseFloat((newQty * item.price).toFixed(2));
            this.activeItem = productId;
        },

        setQty(productId, val) {
            const qty  = parseFloat(val);
            const item = this.cart.find(i => i.product_id === productId);
            if (!item) return;
            if (isNaN(qty) || qty <= 0) { this.removeFromCart(productId); return; }
            item.qty   = parseFloat(qty.toFixed(2));
            item.total = parseFloat((item.qty * item.price).toFixed(2));
        },

        updatePrice(productId, newPrice) {
    const price = parseFloat(newPrice);
    const item  = this.cart.find(i => i.product_id === productId);
    if (!item || isNaN(price) || price < 0) return;
    item.price = parseFloat(price.toFixed(2));
    item.total = parseFloat((item.qty * item.price).toFixed(2));
},

        removeFromCart(productId) {
            this.cart = this.cart.filter(i => i.product_id !== productId);
            if (this.activeItem === productId) this.activeItem = null;
        },

        get billSubtotal() {
            return parseFloat(this.cart.reduce((s, i) => s + i.total, 0).toFixed(2));
        },

        get billTotal() {
            const discount = parseFloat(
                document.querySelector('[wire\\:model\\.live="discountAmount"]')?.value || 0
            );
            return parseFloat(Math.max(0, this.billSubtotal - discount).toFixed(2));
        },

        holdBill() {
            if (this.cart.length === 0) return;
            const bills = JSON.parse(sessionStorage.getItem('pos_held_bills') || '[]');
            bills.push({ cart: this.cart, time: new Date().toLocaleTimeString() });
            sessionStorage.setItem('pos_held_bills', JSON.stringify(bills));
            this.cart = [];
            this.activeItem = null;
            alert('Bill held successfully.');
        },

        async syncCartAndSave() {
            if (this.cart.length === 0) return;
            const id = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
            if (!id) return;
            const component = Livewire.find(id);
            await component.set('cart', this.cart);
            component.call('saveBill');
        },
    };
}
</script>

</div>



</div>

@push('scripts')
<!-- <script src="{{ asset('js/pos.js') }}"></script> -->
<link rel="stylesheet" href="{{ asset('build/assets/js/pos.js') }}">
@endpush