{{--
  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="{{ asset('build/assets/css/pospagecreate.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">Sirisuggi 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 hold" x-on:click="holdBill()">
    <i class="bi bi-pause-circle"></i> Hold
</button>
<button class="pos-tb-btn held-btn"
        x-show="heldBills.length > 0"
        x-on:click="showHoldPopup = true"
        title="View held bills">
    <i class="bi bi-collection"></i>
    Held
    <span class="held-count-dot" x-text="heldBills.length"></span>
</button>

{{-- ADD after held-btn button --}}
<button class="pos-tb-btn cost-btn"
        x-show="cart.length > 0"
        x-on:click="showCostPopup = true"
        title="View purchase cost">
    <i class="bi bi-graph-up"></i> Cost
</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 style="display:flex;align-items:center;gap:6px">
                                <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 class="prod-size" x-text="'₹' + p.mrp.toLocaleString('en-IN')"></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>

            {{-- After closing  of prod-grid --}}
            {{-- ADD after empty state template, still inside prod-grid div --}}
<div x-show="filteredProducts.length < (_allFiltered ? _allFiltered.length : 0)"
     style="grid-column:1/-1;text-align:center;padding:16px;
            font-size:12px;color:var(--text-3)">
    <i class="bi bi-arrow-repeat spin"></i> Scroll for more…
    <span x-text="'(' + filteredProducts.length + ' of ' + (_allFiltered ? _allFiltered.length : 0) + ')'"></span>
</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;padding-bottom:10px;">

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

                    {{-- 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>

                <!-- <button class="hold-btn"
        x-on:click.stop="holdBill()"
        x-show="cart.length > 0"
        title="Hold this bill">
    <i class="bi bi-pause-circle"></i> Hold
</button> -->
                @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>


<!-- hold new -->

{{-- Hold tray --}}
<!-- <div class="hold-tray" x-show="heldBills.length > 0" x-cloak>
    <div class="hold-tray-head">
        <i class="bi bi-pause-circle-fill" style="color:var(--amber)"></i>
        <span>Held Bills</span>
        <span class="hold-count-badge" x-text="heldBills.length"></span>
    </div>
    <div class="hold-tray-list">
        <template x-for="hold in heldBills" :key="hold.id">
            <div class="hold-item">
                <div class="hold-item-info">
                    <div class="hold-item-label" x-text="hold.label"></div>
                    <div class="hold-item-meta">
                        <span x-text="hold.itemCount + ' item' + (hold.itemCount > 1 ? 's' : '')"></span>
                        <span>·</span>
                        <span x-text="'₹' + hold.total.toLocaleString('en-IN', {minimumFractionDigits:2})"></span>
                        <span x-show="hold.mobile">·</span>
                        <span x-text="hold.mobile || ''" x-show="hold.mobile"
                              style="font-family:var(--mono);font-size:10.5px"></span>
                    </div>
                    <div class="hold-item-product"
                         x-text="hold.firstItem + (hold.itemCount > 1 ? ' +' + (hold.itemCount-1) + ' more' : '')">
                    </div>
                </div>
                <div class="hold-item-time" x-text="hold.time"></div>
                <div class="hold-item-actions">
                    <button class="hold-resume-btn"
                            x-on:click.stop="resumeHold(hold.id)">
                        <i class="bi bi-play-fill"></i> Resume
                    </button>
                    <button class="hold-del-btn"
                            x-on:click.stop="deleteHold(hold.id)"
                            title="Discard hold">
                        <i class="bi bi-x-lg"></i>
                    </button>
                </div>
            </div>
        </template>
    </div>
</div> -->


<!-- hold new -->




            {{-- 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">

            {{-- LEFT: name + loose toggle --}}
            <div class="bill-row-left">
                <div class="bill-row-name" x-text="item.product_name"></div>

                {{-- Loose toggle row --}}
                <div class="bill-row-controls" x-on:click.stop>

                    {{-- Price input --}}
                    <span class="bill-price-wrap">
                        <span class="bill-price-sym">₹</span>
                        <input type="number"
                               class="bill-price-inp"
                               :value="item.price"
                               min="0" step="0.01"
                               x-on:change.stop="updatePrice(item.product_id, $event.target.value)"
                               x-on:click.stop>
                    </span>

                    {{-- Loose toggle + unit dropdown --}}
                    <template x-if="item.allow_loose && item.loose_price">
                        <div class="loose-ctrl" x-on:click.stop>
                            <button class="loose-mode-btn"
                                    :class="item.sale_unit === null ? 'bag-active' : 'loose-active'"
                                    x-on:click.stop="toggleLoose(item.product_id)">
                                <span x-text="item.sale_unit === null ? 'Bag' : 'Loose'"></span>
                            </button>
                            {{-- Unit dropdown — only in loose mode --}}
                            <template x-if="item.sale_unit !== null">
                                <select class="loose-unit-sel"
                                        x-on:click.stop
                                        x-on:change.stop="setLooseUnit(item.product_id, $event.target.value)">
                                    <option value="kg"    :selected="item.sale_unit === 'kg'">kg</option>
                                    <option value="gm"    :selected="item.sale_unit === 'gm'">gm</option>
                                    <option value="ml"    :selected="item.sale_unit === 'ml'">ml</option>
                                    <option value="litre" :selected="item.sale_unit === 'litre'">litre</option>
                                </select>
                            </template>
                        </div>
                    </template>

                </div>
            </div>

            {{-- QTY controls --}}
            <div class="bill-qty-ctrl" x-on:click.stop>
                <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>

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

            {{-- REMOVE --}}
            <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> -->

            <div class="quick-bar" x-show="cart.length > 0 && activeItem !== null">

    {{-- QTY section --}}
    <div class="quick-bar-group">
        <span class="quick-bar-label">Qty</span>
        <button class="quick-btn" x-on:click="changeQty(activeItem, -1)">−1</button>
        <button class="quick-btn" x-on:click="changeQty(activeItem, 1)">+1</button>

        <!-- TO — dynamic based on loose_min_qty: -->
<!-- <button class="quick-btn loose-quick"
        x-on:click="changeQty(activeItem, activeCartItem.loose_min_qty)"
        x-text="'+' + activeCartItem.loose_min_qty + ' ' + (activeCartItem.sale_unit || '')">
</button>
<button class="quick-btn loose-quick"
        x-on:click="changeQty(activeItem, activeCartItem.loose_min_qty * 2)"
        x-text="'+' + (activeCartItem.loose_min_qty * 2) + ' ' + (activeCartItem.sale_unit || '')">
</button>
<button class="quick-btn loose-quick"
        x-on:click="changeQty(activeItem, activeCartItem.loose_min_qty * 5)"
        x-text="'+' + (activeCartItem.loose_min_qty * 5) + ' ' + (activeCartItem.sale_unit || '')">
</button> -->



    </div>


    <div class="quick-bar-sep"></div>

    {{-- PRICE section --}}
    <div class="quick-bar-group">
        <span class="quick-bar-label">₹</span>
        <button class="quick-btn price-btn" x-on:click="adjustPrice(activeItem, -10)">−10</button>
        <!-- <button class="quick-btn price-btn" x-on:click="adjustPrice(activeItem, -1)">−1</button>
        <button class="quick-btn price-btn" x-on:click="adjustPrice(activeItem, 1)">+1</button> -->
        <button class="quick-btn price-btn" x-on:click="adjustPrice(activeItem, 10)">+10</button>
    </div>


    <!-- <template x-if="activeCartItem && activeCartItem.sale_unit !== null"> -->
    <template x-if="activeCartItem !== null && activeCartItem !== undefined && activeCartItem.sale_unit !== null && activeCartItem.sale_unit !== ''">
        <div style="display:flex;gap:3px">
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, activeCartItem.loose_min_qty || 1)"
                    x-text="'+' + (activeCartItem.loose_min_qty || 1) + ' ' + (activeCartItem.sale_unit || '')">
            </button>
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, (activeCartItem.loose_min_qty || 1) * 2)"
                    x-text="'+' + ((activeCartItem.loose_min_qty || 1) * 2) + ' ' + (activeCartItem.sale_unit || '')">
            </button>
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, (activeCartItem.loose_min_qty || 1) * 5)"
                    x-text="'+' + ((activeCartItem.loose_min_qty || 1) * 5) + ' ' + (activeCartItem.sale_unit || '')">
            </button>
        </div>
    </template>

    {{-- Loose unit quick buttons — only when loose mode --}}
    <!-- for loose qty increase -->
    <!-- <template x-if="activeCartItem && activeCartItem.sale_unit !== null">
        <div class="quick-bar-group">
            <div class="quick-bar-sep"></div>
            <span class="quick-bar-label" style="color:var(--amber)"
                  x-text="activeCartItem.sale_unit">
            </span>
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, 0.5)"
                    x-text="'+0.5'">
            </button>
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, 1)"
                    x-text="'+1'">
            </button>
            <button class="quick-btn loose-quick"
                    x-on:click="changeQty(activeItem, 5)"
                    x-text="'+5'">
            </button>
        </div>
    </template> -->
    <!-- for loose qty increase -->


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

    {{-- Payment rows --}}
    <template x-for="(pay, i) in payments" :key="i">
        <div class="payment-row-inline" :style="i > 0 ? 'margin-top:4px' : ''">
            <span class="payment-label" x-text="i === 0 ? 'Payment' : ''"></span>

            <select class="payment-method-sel"
                    x-model="pay.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"
                    x-model="pay.amount"
                    x-on:input="i === 0 ? (paymentManuallyEdited = true, calcDue()) : calcDue()"
                    placeholder="0.00"
                    min="0" step="0.01">
            </div>

            <template x-if="i === 0">
                <button class="payment-add-btn" x-on:click="addPayment()">
                    <i class="bi bi-plus-lg"></i>
                </button>
            </template>
            <template x-if="i > 0">
                <button class="payment-remove-btn" x-on:click="removePayment(i)">
                    <i class="bi bi-x-lg"></i>
                </button>
            </template>
        </div>
    </template>

    {{-- Exceeds error --}}
    <div x-show="paymentExceedsTotal"
         style="font-size:11px;color:var(--red);margin-top:4px;
                display:flex;align-items:center;gap:4px">
        <i class="bi bi-exclamation-circle"></i>
        Payment total exceeds bill amount
    </div>

    {{-- Due amount --}}
    <div x-show="dueAmount > 0 && !paymentExceedsTotal"
         class="payment-due-row">
        <span style="color:var(--red)">Due</span>
        <span style="color:var(--red);font-family:var(--mono);font-weight:700"
              x-text="'₹' + dueAmount.toLocaleString('en-IN', {minimumFractionDigits:2})">
        </span>
    </div>

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



        {{-- Hold Bills Popup --}}
<template x-if="showHoldPopup">
    <div class="hold-popup-backdrop"
         x-on:click.self="showHoldPopup = false"
         x-data
         x-on:keydown.escape.window="showHoldPopup = false">
        <div class="hold-popup">

            <div class="hold-popup-head">
                <div style="display:flex;align-items:center;gap:6px">
                    <i class="bi bi-pause-circle-fill" style="color:var(--amber)"></i>
                    <span>Held Bills</span>
                    <span class="hold-count-badge" x-text="heldBills.length"></span>
                </div>
                <button class="hold-popup-close"
                        x-on:click="showHoldPopup = false">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            <div class="hold-popup-body">
                <template x-for="hold in heldBills" :key="hold.id">
                    <div class="hold-item">
                        <div class="hold-item-info">
                            <div class="hold-item-label" x-text="hold.label"></div>
                            <div class="hold-item-meta">
                                <span x-text="hold.itemCount + ' item(s)'"></span>
                                <span>·</span>
                                <span x-text="'₹' + hold.total.toLocaleString('en-IN',{minimumFractionDigits:2})"></span>
                                <template x-if="hold.mobile">
                                    <span x-text="' · ' + hold.mobile"
                                          style="font-family:var(--mono);font-size:11px"></span>
                                </template>
                            </div>
                            <div class="hold-item-product"
                                 x-text="hold.firstItem + (hold.itemCount > 1 ? ' +' + (hold.itemCount-1) + ' more' : '')">
                            </div>
                        </div>
                        <div class="hold-item-time" x-text="hold.time"></div>
                        <div class="hold-item-actions">
                            <button class="hold-resume-btn"
                                    x-on:click="resumeHold(hold.id); showHoldPopup = false">
                                <i class="bi bi-play-fill"></i> Resume
                            </button>
                            <button class="hold-del-btn"
                                    x-on:click="deleteHold(hold.id)">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </div>
                    </div>
                </template>
            </div>

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


{{-- Purchase Cost Popup --}}
<template x-if="showCostPopup">
    <div class="hold-popup-backdrop"
         x-on:click.self="showCostPopup = false"
         x-on:keydown.escape.window="showCostPopup = false">
        <div class="hold-popup" style="width:660px">

            {{-- Head --}}
            <div class="hold-popup-head" style="background:#f0faf4">
                <div style="display:flex;align-items:center;gap:6px">
                    <i class="bi bi-graph-up-arrow" style="color:var(--green)"></i>
                    <span>Purchase Cost View</span>
                    <span style="font-size:11px;color:var(--text-3);font-weight:400">
                        — for reference only
                    </span>
                </div>
                <button class="hold-popup-close"
                        x-on:click="showCostPopup = false">
                    <i class="bi bi-x-lg"></i>
                </button>
            </div>

            {{-- Body --}}
            <div class="hold-popup-body" style="padding:0">

                {{-- Items table --}}
                <table style="width:100%;border-collapse:collapse;font-size:12.5px">
                    <thead>
                        <tr style="background:#f5f9f6">
                            <th style="padding:8px 12px;text-align:left;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Product
                            </th>
                            <th style="padding:8px 12px;text-align:center;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Qty
                            </th>
                            <th style="padding:8px 12px;text-align:right;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                MRP
                            </th>
                            <th style="padding:8px 12px;text-align:right;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Cost/Unit
                            </th>
                            <th style="padding:8px 12px;text-align:right;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Cost Total
                            </th>
                            <th style="padding:8px 12px;text-align:right;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Sell Total
                            </th>
                            <th style="padding:8px 12px;text-align:right;font-size:10.5px;
                                       font-weight:700;color:var(--text-2);text-transform:uppercase;
                                       letter-spacing:.05em;border-bottom:2px solid var(--border)">
                                Margin
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template x-for="(item, i) in costSummary.items" :key="i">
                            <tr :style="i % 2 === 0 ? 'background:#fff' : 'background:#fafcfb'">
                                <td style="padding:7px 12px;font-weight:500;color:var(--text-1)">
                                    <span x-text="item.name"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:center;
                                           font-family:var(--mono);color:var(--text-2)">
                                    <span x-text="item.qty + ' ' + item.unit"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:right;
                                           font-family:var(--mono);color:var(--text-3)">
                                    <span x-text="item.mrp > 0 ? '₹' + item.mrp.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:right;
                                           font-family:var(--mono);color:var(--text-3)">
                                    <span x-text="item.cost > 0 ? '₹' + item.cost.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:right;
                                           font-family:var(--mono);font-weight:600;color:var(--text-2)">
                                    <span x-text="item.costAmt > 0 ? '₹' + item.costAmt.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:right;
                                           font-family:var(--mono);font-weight:600;color:var(--green)">
                                    <span x-text="'₹' + item.sellAmt.toLocaleString('en-IN',{minimumFractionDigits:2})"></span>
                                </td>
                                <td style="padding:7px 12px;text-align:right;font-family:var(--mono);font-weight:700"
                                    :style="item.margin >= 0 ? 'color:var(--green)' : 'color:var(--red)'">
                                    <span x-text="item.costAmt > 0
                                        ? (item.margin >= 0 ? '+' : '') + '₹' + Math.abs(item.margin).toLocaleString('en-IN',{minimumFractionDigits:2})
                                        : '—'">
                                    </span>
                                </td>
                            </tr>
                        </template>
                    </tbody>
                </table>

                {{-- Summary footer --}}
                <div style="padding:12px 14px;background:#f0faf4;border-top:2px solid var(--border)">
                    <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px">

                        <div style="text-align:center;padding:8px;background:#fff;
                                    border-radius:7px;border:1px solid var(--border)">
                            <div style="font-size:11px;color:var(--text-3);font-weight:600;
                                        text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">
                                Total Cost
                            </div>
                            <div style="font-family:var(--mono);font-weight:700;font-size:15px;color:var(--text-2)"
                                 x-text="costSummary.totalCost > 0
                                     ? '₹' + costSummary.totalCost.toLocaleString('en-IN',{minimumFractionDigits:2})
                                     : '—'">
                            </div>
                        </div>

                        <div style="text-align:center;padding:8px;background:#fff;
                                    border-radius:7px;border:1px solid var(--border)">
                            <div style="font-size:11px;color:var(--text-3);font-weight:600;
                                        text-transform:uppercase;letter-spacing:.05em;margin-bottom:3px">
                                Total Selling
                            </div>
                            <div style="font-family:var(--mono);font-weight:700;font-size:15px;color:var(--green)"
                                 x-text="'₹' + costSummary.totalSell.toLocaleString('en-IN',{minimumFractionDigits:2})">
                            </div>
                        </div>

                        <div style="text-align:center;padding:8px;background:#fff;
                                    border-radius:7px"
                             :style="costSummary.totalMargin >= 0
                                 ? 'border:1px solid #86efac'
                                 : 'border:1px solid #fca5a5'">
                            <div style="font-size:11px;font-weight:600;text-transform:uppercase;
                                        letter-spacing:.05em;margin-bottom:3px"
                                 :style="costSummary.totalMargin >= 0
                                     ? 'color:#15803d'
                                     : 'color:var(--red)'">
                                Overall Margin
                            </div>
                            <div style="font-family:var(--mono);font-weight:800;font-size:15px"
                                 :style="costSummary.totalMargin >= 0
                                     ? 'color:var(--green)'
                                     : 'color:var(--red)'"
                                 x-text="costSummary.totalCost > 0
                                     ? (costSummary.totalMargin >= 0 ? '+' : '') + '₹' + Math.abs(costSummary.totalMargin).toLocaleString('en-IN',{minimumFractionDigits:2})
                                     : '—'">
                            </div>
                        </div>

                    </div>

                    {{-- Note --}}
                    <div style="margin-top:8px;font-size:11px;color:var(--text-3);
                                text-align:center;display:flex;align-items:center;
                                justify-content:center;gap:4px">
                        <i class="bi bi-eye-slash"></i>
                        This popup is visible only to you — not printed on receipt
                    </div>
                </div>

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




    </div>

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

<script>
function posApp() {
    return {
        allProducts: [],
        filteredProducts: [],
        searchQuery: '',
        activeCat: '',
        cart: [],
        activeItem: null,
        showCustomerError: false,
        heldBills: [],
showHoldTray: false,
showHoldPopup: false,
showCostPopup: false,
displayLimit: 50,

payments: [{ method: 'upi', amount: '' }],
paymentExceedsTotal: false,
dueAmount: 0,
paidAmount: 0,
paymentManuallyEdited: false,


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

        // REPLACE init()
        init() {
            this.allProducts      = window.__POS_PRODUCTS__ || [];
            this._allFiltered     = [...this.allProducts];
            this.displayLimit     = 50;
            this.filteredProducts = this.allProducts.slice(0, this.displayLimit);
            this.loadHolds();

            // ADD — listen for cart cleared from Livewire
            // window.addEventListener('cart-cleared', () => {
            //     this.cart              = [];
            //     this.activeItem        = null;
            //     this.paymentUserEdited = false;
            //     this.fillPayment();
            // });
            window.addEventListener('cart-cleared', () => {
                this.cart                  = [];
                this.activeItem            = null;
                this.payments              = [{ method: 'upi', amount: '' }];
                this.paymentManuallyEdited = false;
                this.dueAmount             = 0;
                this.paidAmount            = 0;
            });

            // Infinite scroll
            // REPLACE observer code in init()
            // REPLACE scroll listener setup
            // const attachScroll = () => {
            //     const prodLeft = document.querySelector('.pos-left');
            //     if (!prodLeft) {
            //         setTimeout(attachScroll, 500);
            //         return;
            //     }
            //
            //     prodLeft.addEventListener('scroll', () => {
            //       console.log('scrolling', prodLeft.scrollTop, prodLeft.scrollHeight - prodLeft.scrollTop - prodLeft.clientHeight);
            //         const scrollBottom = prodLeft.scrollHeight - prodLeft.scrollTop - prodLeft.clientHeight;
            //         if (scrollBottom < 300) {
            //             if (this.filteredProducts.length < this._allFiltered.length) {
            //                 this.loadMore();
            //             }
            //         }
            //     });
            // };
            //
            // setTimeout(attachScroll, 1000);

            // REPLACE scroll listener setup in init()
            const attachScroll = () => {
    const prodGrid = document.getElementById('prodGrid');
    if (!prodGrid) { setTimeout(attachScroll, 500); return; }

    prodGrid.addEventListener('scroll', () => {
        const scrollBottom = prodGrid.scrollHeight
                           - prodGrid.scrollTop
                           - prodGrid.clientHeight;
        if (scrollBottom < 300) {
            if (this.filteredProducts.length < this._allFiltered.length) {
                this.loadMore();
            }
        }
    });
};

setTimeout(attachScroll, 500);
        },


        fillPayment() {
    // const net = this.billSubtotal;
    // // if (this.payments[0].amount === '' || this.payments[0].amount === '0') {
    // //     this.payments[0].amount = net.toFixed(2);
    // // }
    // // this.calcDue();
    // // Always update first payment to match new total
    // // UNLESS user has manually set a different value
    // this.payments[0].amount = net.toFixed(2);
    // this.calcDue();
    const net = this.billSubtotal;
    if (!this.paymentManuallyEdited) {
        this.payments[0].amount = net.toFixed(2);
    }
    this.calcDue();
},

calcDue() {
    const net  = this.billSubtotal;
    const paid = this.payments.reduce((s, p) => s + parseFloat(p.amount || 0), 0);
    this.paidAmount          = parseFloat(paid.toFixed(2));
    this.paymentExceedsTotal = paid > net && net > 0;
    this.dueAmount           = this.paymentExceedsTotal
                                   ? 0
                                   : parseFloat(Math.max(0, net - paid).toFixed(2));
},

addPayment() {
    const net  = this.billSubtotal;
    const paid = this.payments.reduce((s, p) => s + parseFloat(p.amount || 0), 0);
    const rem  = parseFloat(Math.max(0, net - paid).toFixed(2));
    this.payments.push({ method: 'cash', amount: rem > 0 ? rem.toFixed(2) : '' });
    this.calcDue();
},

removePayment(index) {
    if (this.payments.length <= 1) return;
    this.payments.splice(index, 1);
    this.calcDue();
},



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

        // REPLACE filteredProducts getter/filter
        filterProducts() {
            const q   = this.searchQuery.toLowerCase().trim();
            const cat = this.activeCat;

            this._allFiltered = 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;
            });

            this.displayLimit     = 50; // reset on new filter
            this.filteredProducts = this._allFiltered.slice(0, this.displayLimit);
        },

        loadMore() {
            this.displayLimit    += 50;
            this.filteredProducts = this._allFiltered.slice(0, this.displayLimit);
        },

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

        get activeCartItem() {
    if (!this.activeItem) return null;
    return this.cart.find(i => i.product_id === this.activeItem) || null;
},


get costSummary() {
    if (this.cart.length === 0) return { items: [], totalCost: 0, totalSell: 0, totalMargin: 0 };

    const items = this.cart.map(item => {
        const cost    = parseFloat(item.purchase_price || 0);
        const sell    = parseFloat(item.price || 0);
        const qty     = parseFloat(item.qty || 0);
        const mrp  = parseFloat(item.mrp || 0);  // ADD
        const costAmt = parseFloat((cost * qty).toFixed(2));
        const sellAmt = parseFloat((sell * qty).toFixed(2));
        const margin  = costAmt > 0
            ? parseFloat((sellAmt - costAmt).toFixed(2))
            : 0;

        return {
            name:     item.product_name,
            qty:      qty,
            mrp:      mrp,      // ADD
            unit:     item.sale_unit || item.base_unit || 'pcs',
            cost:     cost,
            sell:     sell,
            costAmt:  costAmt,
            sellAmt:  sellAmt,
            margin:   margin,
        };
    });

    const totalCost   = parseFloat(items.reduce((s, i) => s + i.costAmt, 0).toFixed(2));
    const totalSell   = parseFloat(items.reduce((s, i) => s + i.sellAmt, 0).toFixed(2));
    const totalMargin = parseFloat((totalSell - totalCost).toFixed(2));

    return { items, totalCost, totalSell, totalMargin };
},




        addToCart(product) {
            const existing = this.cart.find(i => i.product_id === product.id);
            // console.log('product allow_loose:', product.allow_loose);
            // console.log('product loose_price:', product.loose_price);
            // console.log('product size:', product.size);
            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,
                    mrp: product.mrp || 0,  // ADD
                    // 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
           loose_min_qty:  product.loose_min_qty || 1,  // ADD
            purchase_price: product.purchase_price || 0,  // ADD
           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;

            // Auto-fill payment input with current total
          // this.$nextTick(() => {
          //     const netTotal = this.billSubtotal;
          //     const payInput = document.querySelector('[wire\\:model\\.live="payments\\.0\\.amount"]');
          //     if (payInput && (parseFloat(payInput.value) <= 0 || !payInput.value)) {
          //         payInput.value = netTotal.toFixed(2);
          //         payInput.dispatchEvent(new Event('input', { bubbles: true }));
          //     }
          // });

          this.fillPayment();
        },



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

    this.fillPayment();
},


// ── 2. ADD setLooseUnit method ────────────────────────────
setLooseUnit(productId, unit) {
    const item = this.cart.find(i => i.product_id === productId);
    if (!item) return;
    item.sale_unit = unit;
},

        // 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 — default unit kg
                item.sale_unit = 'kg';
                item.price     = item.loose_price || 0;
                // item.qty       = 1;
                item.qty       = item.loose_min_qty || 1;
                item.total     = parseFloat((item.qty * item.price).toFixed(2));
            } else {
                // Switch BACK to bag
                item.sale_unit = null;
                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;
             this.fillPayment();
        },

        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;

            this.fillPayment();

        },

        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));

            this.fillPayment();
        },

        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));

    this.fillPayment();
},

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

            this.fillPayment();
        },

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


        // for hold new

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


        loadHolds() {
    this.heldBills = JSON.parse(localStorage.getItem('pos_held_bills') || '[]');
    this.showHoldTray = this.heldBills.length > 0;
},

holdBill() {
    if (this.cart.length === 0) return;

    // Get current customer info from Livewire
    const id = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
    const component = id ? Livewire.find(id) : null;

    const mobile       = document.querySelector('[wire\\:model="mobile"]')?.value || '';
    const customerName = document.querySelector('[wire\\:model="customerName"]')?.value || '';

    const held = {
        id:           Date.now(),
        cart:         JSON.parse(JSON.stringify(this.cart)), // deep copy
        mobile:       mobile,
        customerName: customerName,
        time:         new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
        label:        'Hold ' + (this.heldBills.length + 1),
        total:        this.cart.reduce((s, i) => s + i.total, 0),
        itemCount:    this.cart.length,
        firstItem:    this.cart[0]?.product_name || '',
    };

    this.heldBills.push(held);
    localStorage.setItem('pos_held_bills', JSON.stringify(this.heldBills));

    // Clear current bill
    this.cart       = [];
    this.activeItem = null;
    this.showHoldTray = true;

    // Clear customer in Livewire
    if (component) {
        component.set('mobile',       '');
        component.set('customerName', '');
        component.set('customerId',   null);
        component.set('customerFound',false);
        component.set('newCustomer',  false);
    }

    this.fillPayment();
},

resumeHold(holdId) {
    const index = this.heldBills.findIndex(h => h.id === holdId);
    if (index === -1) return;

    const held = this.heldBills[index];

    // If current cart has items — swap (put current into hold)
    if (this.cart.length > 0) {
        const id = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
        const component = id ? Livewire.find(id) : null;

        const mobile       = document.querySelector('[wire\\:model="mobile"]')?.value || '';
        const customerName = document.querySelector('[wire\\:model="customerName"]')?.value || '';

        // Update this hold slot with current cart
        this.heldBills[index] = {
            ...held,
            cart:         JSON.parse(JSON.stringify(this.cart)),
            mobile:       mobile,
            customerName: customerName,
            time:         new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
            total:        this.cart.reduce((s, i) => s + i.total, 0),
            itemCount:    this.cart.length,
            firstItem:    this.cart[0]?.product_name || '',
        };
        localStorage.setItem('pos_held_bills', JSON.stringify(this.heldBills));
    } else {
        // No current cart — just remove hold from tray
        this.heldBills.splice(index, 1);
        localStorage.setItem('pos_held_bills', JSON.stringify(this.heldBills));
    }

    // Load held bill into active cart
    this.cart       = held.cart;
    this.activeItem = null;

    // Restore customer in Livewire
    const wireId = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
    const comp   = wireId ? Livewire.find(wireId) : null;
    if (comp && held.mobile) {
        comp.set('mobile',       held.mobile);
        comp.set('customerName', held.customerName);
        if (held.mobile) comp.call('lookupCustomer');
    }

    this.showHoldTray = this.heldBills.length > 0;
    this.fillPayment();
},

deleteHold(holdId) {
    this.heldBills = this.heldBills.filter(h => h.id !== holdId);
    localStorage.setItem('pos_held_bills', JSON.stringify(this.heldBills));
    this.showHoldTray = this.heldBills.length > 0;
},


// hold new



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


        // 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);
        //
        //     // Save current payment value before cart sync triggers updatedCart
        //     const payInput   = document.querySelector('[wire\\:model="payments\\.0\\.amount"]');
        //     const savedValue = payInput ? payInput.value : null;
        //
        //     await component.set('cart', this.cart);
        //
        //     // Restore payment value if user had set it (including 0)
        //     if (payInput && savedValue !== null) {
        //         payInput.value = savedValue;
        //         payInput.dispatchEvent(new Event('input', { bubbles: true }));
        //     }
        //
        //     component.call('saveBill');
        // },

        // working when validation error
//         async syncCartAndSave() {
//     if (this.cart.length === 0) return;
//
//     // Customer required
//     const wireId = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
//     if (!wireId) return;
//     const component = Livewire.find(wireId);
//
//     // Sync cart + payments to Livewire before save
//     await component.set('cart',     this.cart);
//     await component.set('payments', this.payments);
//     component.call('saveBill');
// },

// async syncCartAndSave() {
//     if (this.cart.length === 0) return;
//
//     const wireId = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
//     if (!wireId) return;
//     const component = Livewire.find(wireId);
//
//     await component.set('cart', this.cart);
//     await component.set('payments', this.payments);
//
//     // Small delay to ensure both sets complete before calling saveBill
//     setTimeout(() => {
//         component.call('saveBill');
//     }, 100);
// },


async syncCartAndSave() {
    if (this.cart.length === 0) return;

    const wireId = document.querySelector('[wire\\:id]')?.getAttribute('wire:id');
    if (!wireId) return;
    const component = Livewire.find(wireId);

    await component.set('cart', this.cart);
    component.call('saveBill', this.payments);
},



          // ADD this helper method to posApp()
            updatePaymentInput() {
              setTimeout(() => {
                const netTotal = this.billSubtotal;
                // Try both wire:model and wire:model.live selectors
                const payInput = document.querySelector('input[wire\\:model="payments\\.0\\.amount"]')
                              || document.querySelector('input[wire\\:model\\.live="payments\\.0\\.amount"]');
                if (!payInput) return;

                // Only auto-fill if completely empty
                if (payInput.value === '') {
                    payInput.value = netTotal.toFixed(2);
                    payInput.dispatchEvent(new Event('input', { bubbles: true }));
                }
              }, 50);
              },

    };
}
</script>

</div>



</div>

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