{{--
  POS Sale Edit
  File : resources/views/livewire/pos/pos-edit.blade.php
  Component: app/Livewire/Pos/PosEdit.php
--}}
<div class="pos-shell" x-data="posApp()" x-init="init()">

    @once
        <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-topbar-left">
            <div class="pos-brand">
                <img src="{{ asset('images/logo.png') }}" alt="Logo"
                     style="height:32px;width:auto;object-fit:contain">
            </div>
        </div>

        <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">
                <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:keydown.enter="$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>

            @if($customerFound)
                <div class="cust-found">
                    <i class="bi bi-person-check-fill"></i>
                    <span>{{ $customerName ?: $mobile }}</span>
                </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">
            {{-- Cost popup button --}}
            <button class="pos-tb-btn"
                    x-on:click="showCostPopup = true"
                    x-show="cart.length > 0"
                    title="View cost & margin"
                    style="color:var(--green)">
                <i class="bi bi-graph-up-arrow"></i> Cost
            </button>

            {{-- Notes button --}}
            <button class="pos-tb-btn notes-btn"
                    x-on:click="showNotesPopup = true"
                    title="Add bill notes">
                <i class="bi bi-sticky"></i> Notes
                @if($notes)
                    <span class="notes-dot"></span>
                @endif
            </button>

            <a href="{{ route('pos.show', $saleId) }}" class="pos-tb-btn" wire:navigate>
                <i class="bi bi-eye"></i> View
            </a>
            <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 ──────────────────────────────── --}}
        <div class="pos-left">

            <div class="prod-search-bar">
                <div class="prod-search-wrap">
                    <i class="bi bi-search prod-search-icon"></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>

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

            <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 }"
                         x-on:click="addToCart(p)">

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

                            <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>
                                <template x-if="p.purchase_price > 0">
                                    <div style="font-size:10px;color:rgba(255,255,255,0.75);margin-top:1px"
                                         x-text="'Cost: ₹' + p.purchase_price.toLocaleString('en-IN')"></div>
                                </template>
                            </div>

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

                        <div class="prod-card-footer">
                            <div class="prod-price" x-text="'₹' + p.price.toLocaleString('en-IN')"></div>
                            <template x-if="p.size">
                                <div class="prod-size"
                                     x-text="p.size + ' ' + (p.size_unit || p.unit)"></div>
                            </template>
                        </div>
                    </div>
                </template>

                <template x-if="filteredProducts.length === 0">
                    <div class="prod-empty-state" style="grid-column:1/-1">
                        <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>
                </template>

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

        </div>

        {{-- ── RIGHT: Bill ────────────────────────────────── --}}
        <div class="pos-right">

            {{-- Bill header --}}
            <div class="bill-header">
                <div class="bill-header-row">
                    <span class="bill-title">Edit 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 --}}
            <div class="bill-items" x-show="cart.length > 0">
                <template x-for="(item, idx) in cart" :key="item.product_id ?? idx">
                    <div class="bill-row"
                         :class="{ 'active-row': activeItem === item.product_id }"
                         x-on:click="activeItem = item.product_id">

                        {{-- Line 1: Full product name --}}
                        <div style="width:100%;font-size:13px;font-weight:600;color:var(--text-1);
                                    line-height:1.3;margin-bottom:4px;word-break:break-word;
                                    display:flex;align-items:center;gap:5px">
                            <span x-text="item.product_name"></span>
                            <template x-if="item.is_temp">
                                <span style="font-size:9.5px;padding:1px 5px;border-radius:4px;
                                             background:#dbeafe;color:#1d4ed8;font-weight:600;
                                             flex-shrink:0">CUSTOM</span>
                            </template>
                        </div>

                        {{-- Line 2: price left | qty+total+remove right --}}
                        <div style="display:flex;align-items:center;
                                    justify-content:space-between;width:100%"
                             x-on:click.stop>

                            {{-- LEFT: price + loose --}}
                            <div style="display:flex;align-items:center;gap:6px">
                                <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>

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

                            {{-- RIGHT: qty + total + remove --}}
                            <div style="display:flex;align-items:center;gap:6px">
                                <div class="bill-qty-ctrl" x-on:click.stop>
                                    <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>
                                </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>
                        </div>
                    </div>
                </template>
            </div>

            {{-- Quick bar --}}
            <div class="quick-bar" x-show="cart.length > 0 && activeItem !== null">
                <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>
                </div>
                <div class="quick-bar-sep"></div>
                <div class="quick-bar-group">
                    <span class="quick-bar-label">₹</span>
                    <button class="quick-btn price-btn" x-on:click="adjustPrice(activeItem,-5)">−5</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, 5)">+5</button>
                </div>
                <template x-if="activeCartItem !== null && activeCartItem !== undefined
                                 && activeCartItem.sale_unit !== null
                                 && activeCartItem.sale_unit !== ''">
                    <div style="display:flex;align-items:center;gap:3px">
                        <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, activeCartItem.loose_min_qty || 1)"
                                x-text="'+' + (activeCartItem.loose_min_qty || 1)"></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)"></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)"></button>
                    </div>
                </template>
            </div>

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

                <div class="bill-totals">
                    <div class="bill-total-row">
                        <span>Subtotal</span>
                        <span x-text="'₹' + billSubtotal.toLocaleString('en-IN',{minimumFractionDigits:2})"></span>
                    </div>
                    <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"
                                   x-model="discountAmt"
                                   x-on:input="calcDiscount()"
                                   x-on:change="$wire.set('discountAmount', discountAmt)"
                                   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>

                {{-- Edit Reason --}}
<div style="padding:8px 10px;border-bottom:1px solid var(--border)">
    <label style="font-size:11px;font-weight:700;color:var(--red);
                  text-transform:uppercase;letter-spacing:.05em;
                  display:block;margin-bottom:4px">
        <i class="bi bi-pencil-square"></i>
        Reason for Edit <span style="color:var(--red)">*</span>
    </label>
    <textarea wire:model="editReason"
              rows="2"
              placeholder="Why are you editing this bill? (required)"
              style="width:100%;padding:7px 10px;border:1.5px solid var(--red-light,#fca5a5);
                     border-radius:7px;font-family:var(--font);font-size:12.5px;
                     color:var(--text-1);outline:none;resize:none;line-height:1.4;
                     background:#fff8f8"
              x-on:focus="$el.style.borderColor='var(--red)'"
              x-on:blur="$el.style.borderColor='var(--red-light,#fca5a5)'">
    </textarea>
</div>

                {{-- Payment section --}}
                <div class="payment-section">
                    <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="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>

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

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

                {{-- Actions --}}
                <div class="bill-actions">
                    <button class="bill-save-btn"
                            x-on:click="if(!saving){ saving=true; syncCartAndSave() }"
                            :disabled="saving"
                            :style="saving ? 'opacity:0.6;cursor:not-allowed' : ''"
                            wire:loading.attr="disabled"
                            wire:target="saveBill">
                        <span wire:loading.remove wire:target="saveBill">
                            <i class="bi bi-check2-circle"></i> Update Bill
                        </span>
                        <span wire:loading wire:target="saveBill">
                            <i class="bi bi-arrow-repeat" style="animation:spin .7s linear infinite"></i>
                            Saving…
                        </span>
                    </button>
                    <a href="{{ route('pos.show', $saleId) }}"
                       class="bill-print-btn" wire:navigate title="Cancel"
                       style="display:flex;align-items:center;justify-content:center;flex:1">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>

            </div>

        </div>

    </div>

    {{-- ══ 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:560px;max-height:80vh">
                    <div class="hold-popup-head" style="background:#f0fdf4">
                        <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>
                    <div style="overflow-y:auto;padding:0">
                        <table style="width:100%;border-collapse:collapse;font-size:12.5px">
                            <thead>
                                <tr style="background:#f9fafb;border-bottom:2px solid var(--border)">
                                    <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">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">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">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">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">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">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">Margin</th>
                                </tr>
                            </thead>
                            <tbody>
                                <template x-for="(item, idx) in costSummary.items" :key="idx">
                                    <tr :style="idx % 2 === 0 ? 'background:#fff' : 'background:#f9fafb'">
                                        <td style="padding:7px 12px;font-weight:500;color:var(--text-1)">
                                            <div x-text="item.name"></div>
                                            <div style="font-size:10.5px;color:var(--text-3)" x-text="item.unit"></div>
                                        </td>
                                        <td style="padding:7px 12px;text-align:center;font-family:var(--mono)" x-text="item.qty"></td>
                                        <td style="padding:7px 12px;text-align:right;font-family:var(--mono);color:var(--text-3)"
                                            x-text="item.mrp > 0 ? '₹' + item.mrp.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></td>
                                        <td style="padding:7px 12px;text-align:right;font-family:var(--mono);color:var(--text-3)"
                                            x-text="item.costAmt > 0 ? '₹' + item.cost.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></td>
                                        <td style="padding:7px 12px;text-align:right;font-family:var(--mono);font-weight:600"
                                            x-text="item.costAmt > 0 ? '₹' + item.costAmt.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></td>
                                        <td style="padding:7px 12px;text-align:right;font-family:var(--mono);font-weight:600;color:var(--green)"
                                            x-text="'₹' + item.sellAmt.toLocaleString('en-IN',{minimumFractionDigits:2})"></td>
                                        <td style="padding:7px 12px;text-align:right;font-family:var(--mono);font-weight:700"
                                            :style="item.costAmt > 0 ? (item.margin >= 0 ? 'color:var(--green)' : 'color:var(--red)') : 'color:var(--text-3)'"
                                            x-text="item.costAmt > 0
                                                ? (item.margin >= 0
                                                    ? '+₹' + item.margin.toLocaleString('en-IN',{minimumFractionDigits:2})
                                                    : '-₹' + Math.abs(item.margin).toLocaleString('en-IN',{minimumFractionDigits:2}))
                                                : '—'">
                                        </td>
                                    </tr>
                                </template>
                            </tbody>
                        </table>
                        <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:14px 12px;border-top:2px solid var(--border);background:#f9fafb">
                            <div style="text-align:center">
                                <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px">Total Cost</div>
                                <div style="font-family:var(--mono);font-weight:800;font-size:15px;color:var(--text-1)"
                                     x-text="costSummary.totalCost > 0 ? '₹' + costSummary.totalCost.toLocaleString('en-IN',{minimumFractionDigits:2}) : '—'"></div>
                            </div>
                            <div style="text-align:center">
                                <div style="font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px">Total Selling</div>
                                <div style="font-family:var(--mono);font-weight:800;font-size:15px;color:var(--green)"
                                     x-text="'₹' + costSummary.totalSell.toLocaleString('en-IN',{minimumFractionDigits:2})"></div>
                            </div>
                            <div style="text-align:center;padding:8px;border-radius:8px"
                                 :style="costSummary.totalMargin >= 0 ? 'background:#f0fdf4;border:1.5px solid #bbf7d0' : 'background:#fef2f2;border:1.5px solid #fca5a5'">
                                <div style="font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px"
                                     :style="costSummary.totalMargin >= 0 ? 'color:var(--green)' : '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
                                            ? '+₹' + costSummary.totalMargin.toLocaleString('en-IN',{minimumFractionDigits:2})
                                            : '-₹' + Math.abs(costSummary.totalMargin).toLocaleString('en-IN',{minimumFractionDigits:2}))
                                        : '—'">
                                </div>
                            </div>
                        </div>
                        <div style="padding:8px 12px;background:#f9fafb;border-top:1px solid var(--border);text-align:center">
                            <span style="font-size:11px;color:var(--text-3)">
                                <i class="bi bi-eye-slash"></i>
                                This popup is visible only to you — not printed on receipt
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        {{-- ══ NOTES POPUP ════════════════════════════════════════ --}}
        <template x-if="showNotesPopup">
            <div class="hold-popup-backdrop"
                 x-on:click.self="showNotesPopup = false"
                 x-on:keydown.escape.window="showNotesPopup = false">
                <div class="hold-popup" style="width:400px">
                    <div class="hold-popup-head" style="background:#f9fafb">
                        <div style="display:flex;align-items:center;gap:6px">
                            <i class="bi bi-sticky-fill" style="color:var(--amber)"></i>
                            <span>Bill Notes</span>
                            <span style="font-size:11px;color:var(--text-3);font-weight:400">— optional</span>
                        </div>
                        <button class="hold-popup-close" x-on:click="showNotesPopup = false">
                            <i class="bi bi-x-lg"></i>
                        </button>
                    </div>
                    <div style="padding:14px">
                        <textarea wire:model="notes"
                                  placeholder="Add notes for this bill… (optional)"
                                  rows="4"
                                  style="width:100%;padding:10px;border:1.5px solid var(--border);
                                         border-radius:8px;font-family:var(--font);font-size:13px;
                                         color:var(--text-1);outline:none;resize:vertical;line-height:1.5"
                                  x-on:focus="$el.style.borderColor='var(--green)'"
                                  x-on:blur="$el.style.borderColor='var(--border)'">
                        </textarea>
                        <div style="display:flex;justify-content:flex-end;gap:8px;margin-top:10px">
                            <button class="btn btn-ghost" style="height:32px"
                                    wire:click="$set('notes', '')"
                                    x-on:click="showNotesPopup = false">Clear</button>
                            <button class="btn btn-primary" style="height:32px"
                                    x-on:click="showNotesPopup = false">
                                <i class="bi bi-check2"></i> Done
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </template>

        {{-- ══ JS ══════════════════════════════════════════════════ --}}
        <script>
        window.__POS_PRODUCTS__     = @json($products);
        window.__POS_INITIAL_CART__ = @json($initialCart);
        window.__POS_PAYMENTS__     = @json($initialPayments);

        function posApp() {
            return {
                // ── State ─────────────────────────────────────────
                allProducts:       [],
                _allFiltered:      [],
                filteredProducts:  [],
                displayLimit:      50,
                searchQuery:       '',
                activeCat:         '',
                cart:              [],
                activeItem:        null,

                // ── Popups ────────────────────────────────────────
                showCostPopup:     false,
                showNotesPopup:    false,

                // ── Payment ───────────────────────────────────────
                payments:             window.__POS_PAYMENTS__ || [{ method: 'upi', amount: '' }],
                paymentExceedsTotal:  false,
                dueAmount:            0,
                paidAmount:           0,

                // ── Discount ──────────────────────────────────────
                discountAmt: {{ $discountAmount ?? 0 }},

                // ── Save guard ────────────────────────────────────
                saving: false,

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

                    const existing = window.__POS_INITIAL_CART__ || [];
                    if (existing.length > 0) this.cart = existing;

                    // Calc due from loaded payments — no auto-fill on edit
                    this.calcDue();

                    // Infinite scroll
                    const attachScroll = () => {
                        const grid = document.getElementById('prodGrid');
                        if (!grid) { setTimeout(attachScroll, 500); return; }
                        grid.addEventListener('scroll', () => {
                            if (grid.scrollHeight - grid.scrollTop - grid.clientHeight < 300) {
                                if (this.filteredProducts.length < this._allFiltered.length) {
                                    this.loadMore();
                                }
                            }
                        });
                    };
                    setTimeout(attachScroll, 500);
                },

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

                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;
                    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 activeCartItem() {
                    if (!this.activeItem) return null;
                    return this.cart.find(i => i.product_id === this.activeItem) || null;
                },

                // ── Cart methods ──────────────────────────────────
                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,
                            sale_unit:      null,
                            allow_loose:    product.allow_loose,
                            loose_price:    product.loose_price,
                            loose_min_qty:  product.loose_min_qty || 1,
                            purchase_price: product.purchase_price || 0,
                            mrp:            product.mrp || 0,
                            base_unit:      product.base_unit || product.unit,
                            pack_size:      product.size,
                            total:          product.price,
                            hsn_code:       product.hsn_code,
                            gst_rate:       product.gst_rate,
                            is_temp:        false,
                        });
                    }
                    this.activeItem = product.id;
                    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();
                },

                removeFromCart(productId) {
                    this.cart = this.cart.filter(i => i.product_id !== productId);
                    if (this.activeItem === productId) this.activeItem = null;
                    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();
                },

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

                toggleLoose(productId) {
                    const item = this.cart.find(i => i.product_id === productId);
                    if (!item || !item.allow_loose) return;
                    if (item.sale_unit === null) {
                        item.sale_unit = item.base_unit || 'kg';
                        item.price     = item.loose_price || 0;
                        item.qty       = item.loose_min_qty || 1;
                        item.total     = parseFloat((item.qty * item.price).toFixed(2));
                    } else {
                        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();
                },

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

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

                get billTotal() {
                    const discount = parseFloat(this.discountAmt || 0);
                    return parseFloat(Math.max(0, this.billSubtotal - discount).toFixed(2));
                },

                // ── Payment ───────────────────────────────────────
                // On edit — fillPayment only calls calcDue, never overwrites amounts
                fillPayment() {
                    this.calcDue();
                },

                calcDue() {
                    const net  = this.billTotal;
                    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));
                },

                calcDiscount() {
                    this.calcDue();
                },

                addPayment() {
                    const net  = this.billTotal;
                    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 ? this.formatAmount(rem) : '' });
                    this.calcDue();
                },

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

                formatAmount(val) {
                    const num = parseFloat(val);
                    if (isNaN(num)) return '';
                    return Number.isInteger(num) ? num.toString() : num.toFixed(2);
                },

                // ── Save ──────────────────────────────────────────
                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('discountAmount', this.discountAmt);
                    await component.set('cart',           this.cart);
                    await component.set('payments',       this.payments);
                    component.call('saveBill');
                    setTimeout(() => { this.saving = false; }, 5000);
                },

                // ── Cost summary ──────────────────────────────────
                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);
                        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,
                            unit: item.sale_unit || item.base_unit || 'pcs',
                            mrp, cost, sell, costAmt, sellAmt, 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 };
                },
            };
        }
        </script>

    </div>