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

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

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

        <div class="pos-brand">
            <div class="pos-brand-icon"><i class="bi bi-flower1"></i></div>
            <span class="pos-brand-name">Sirisuggi POS— Edit</span>
        </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">
            <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 (col-8) ─────────────────────────── --}}
        <div class="pos-left">

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

            <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, 'no-stock': !p.has_stock }"
                         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>
                            </div>
                            <div class="cart-qty-badge" x-show="cartQty(p.id) > 0"
                                 x-text="cartQty(p.id)"></div>
                            <div class="no-stock-badge" x-show="!p.has_stock">No Stock</div>
                        </div>

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

                    </div>
                </template>

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

        </div>

        {{-- ── RIGHT: Bill (col-4) ─────────────────────────────── --}}
        <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">
                    <div class="bill-row"
                         :class="{ 'active-row': activeItem === item.product_id }"
                         x-on:click="activeItem = item.product_id">

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

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

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

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

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

            {{-- Quick 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 && 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)">+0.5</button>
                        <button class="quick-btn loose-quick" x-on:click="changeQty(activeItem, 1)">+1</button>
                        <button class="quick-btn loose-quick" x-on:click="changeQty(activeItem, 5)">+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"
                                   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>

                {{-- Payment section --}}
                <div class="payment-section">
                    <div class="payment-row-inline">
                        <span class="payment-label">Payment</span>
                        <select class="payment-method-sel"
                                wire:model="payments.0.method">
                            <option value="upi">UPI</option>
                            <option value="cash">Cash</option>
                            <option value="neft">NEFT</option>
                            <option value="card">Card</option>
                        </select>
                        <div style="position:relative;flex:1">
                            <span class="payment-rupee">₹</span>
                            <input type="number"
                                   class="payment-amount-inp"
                                   wire:model="payments.0.amount"
                                   placeholder="0.00" min="0" step="0.01">
                        </div>
                        <button class="payment-add-btn" wire:click="addPaymentRow">
                            <i class="bi bi-plus-lg"></i>
                        </button>
                    </div>

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

                    @if($paymentExceedsTotal)
                        <div 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>
                    @endif

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

                </div>

                {{-- 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> 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 edit">
                        <i class="bi bi-x-lg"></i>
                    </a>
                </div>

            </div>

        </div>

    </div>

    {{-- Pass data to JS --}}
    <div id="monthlyChartData" style="display:none"
         data-products="{{ json_encode($products) }}"
         data-cart="{{ json_encode($initialCart) }}">
    </div>

    <script>
    window.__POS_PRODUCTS__     = @json($products);
    window.__POS_INITIAL_CART__ = @json($initialCart);

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

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

                // Pre-load existing sale items
                const existing = window.__POS_INITIAL_CART__ || [];
                if (existing.length > 0) {
                    this.cart = existing;
                }
            },

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

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

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

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

            addToCart(product) {
                const existing = this.cart.find(i => i.product_id === product.id);
                if (existing) {
                    existing.qty   = parseFloat((existing.qty + 1).toFixed(2));
                    existing.total = parseFloat((existing.qty * existing.price).toFixed(2));
                } else {
                    this.cart.push({
                        product_id:   product.id,
                        product_name: product.name,
                        company_name: product.company,
                        price:        product.price,
                        qty:          1,
                        sale_unit:    null,
                        allow_loose:  product.allow_loose,
                        loose_price:  product.loose_price,
                        base_unit:    product.base_unit,
                        pack_size:    product.size,
                        total:        product.price,
                        hsn_code:     product.hsn_code,
                        gst_rate:     product.gst_rate,
                    });
                }
                this.activeItem = product.id;
                this.updatePaymentInput();
            },

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

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

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

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

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

            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 = 'kg';
                    item.price     = item.loose_price || 0;
                    item.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.updatePaymentInput();
            },

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

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

            updatePaymentInput() {
                setTimeout(() => {
                    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 }));
                    }
                }, 50);
            },

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

</div>

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