@extends('layouts.app')

@section('content')
    <div class="page-title">
        <div>
            <h1>POS Billing</h1>
            <p class="muted">Fast billing, barcode/QR lookup, hold/resume, split payments, estimates, and customer display.</p>
        </div>
        <div class="actions">
            <a class="btn btn-secondary" href="{{ route('products.create') }}">Add product</a>
            <a class="btn btn-secondary" target="_blank" href="{{ route('billing.customer-display') }}">Customer display</a>
        </div>
    </div>

    <form id="billForm" method="POST" action="{{ route('billing.store') }}">
        @csrf
        <input type="hidden" name="invoice_type" id="invoiceType" value="invoice">
        <input type="hidden" name="held_bill_id" id="heldBillId">
        <input type="hidden" name="coupon_discount" id="couponDiscountInput" value="0">
        <input type="hidden" name="round_off" id="roundOffInput" value="0">

        <section class="billing-shell">
            <aside class="billing-panel">
                <h2>Products</h2>
                <div class="field">
                    <label for="barcodeInput">Barcode / QR / Search</label>
                    <input id="barcodeInput" placeholder="Scan or type product name">
                </div>
                <div class="category-strip">
                    <button class="chip active" type="button" data-category="all">All</button>
                    @foreach ($categories as $category)
                        <button class="chip" type="button" data-category="{{ $category->id }}">{{ $category->name }}</button>
                    @endforeach
                </div>
                <div class="preview-box" id="smartPreview">
                    <strong>Smart preview</strong>
                    <p class="muted">Scan barcode to show images, variants, stock and alternatives.</p>
                </div>
                <div class="product-grid" id="productGrid"></div>
            </aside>

            <section class="billing-panel">
                <h2>Cart</h2>
                <div class="counter-strip">
                    <span class="badge active">Counter 1</span>
                    <span class="badge">Offline ready</span>
                    <span class="badge">Restaurant table</span>
                </div>
                <div class="grid-2">
                    <div class="field">
                        <label for="counterCode">Counter</label>
                        <input id="counterCode" name="counter_code" value="COUNTER-1">
                    </div>
                    <div class="field">
                        <label for="tableNumber">Table / Token</label>
                        <input id="tableNumber" name="table_number" placeholder="Restaurant mode">
                    </div>
                </div>
                <div class="cart-list" id="cartList"></div>
                <div class="field">
                    <label for="billNotes">Bill notes</label>
                    <textarea id="billNotes" name="notes" placeholder="Kitchen note, delivery note, return mapping, approval reason"></textarea>
                </div>
            </section>

            <aside class="billing-panel">
                <h2>Checkout</h2>
                <div class="field">
                    <label for="customerId">Customer</label>
                    <select id="customerId" name="customer_id">
                        <option value="">Walk-in customer</option>
                        @foreach ($customers as $customer)
                            <option value="{{ $customer->id }}">{{ $customer->name }} - {{ $customer->mobile }}</option>
                        @endforeach
                    </select>
                </div>
                <div class="grid-2">
                    <div class="field">
                        <label for="currency">Currency</label>
                        <select id="currency" name="currency">
                            <option value="INR">INR</option>
                            <option value="USD">USD</option>
                            <option value="AED">AED</option>
                        </select>
                    </div>
                    <div class="field">
                        <label for="couponCode">Coupon</label>
                        <input id="couponCode" name="coupon_code" placeholder="Coupon code">
                    </div>
                </div>
                <div class="grid-2">
                    <div class="field">
                        <label for="couponDiscount">Coupon discount</label>
                        <input id="couponDiscount" type="number" min="0" step="0.01" value="0">
                    </div>
                    <div class="field">
                        <label for="roundOff">Round off</label>
                        <input id="roundOff" type="number" step="0.01" value="0">
                    </div>
                </div>
                <div class="field">
                    <label for="loyaltyPoints">Loyalty points used</label>
                    <input id="loyaltyPoints" name="loyalty_points_used" type="number" min="0" value="0">
                </div>
                <label class="check-row">
                    <input type="checkbox" name="is_offline" value="1">
                    <span>Offline billing mode</span>
                </label>
                <div class="summary-box">
                    <div class="summary-line"><span>Subtotal</span><strong id="subtotalText">Rs 0.00</strong></div>
                    <div class="summary-line"><span>Item discount</span><strong id="discountText">Rs 0.00</strong></div>
                    <div class="summary-line"><span>Tax</span><strong id="taxText">Rs 0.00</strong></div>
                    <div class="summary-line"><span>Grand total</span><strong class="summary-total" id="grandText">Rs 0.00</strong></div>
                    <div class="summary-line"><span>Change return</span><strong id="changeText">Rs 0.00</strong></div>
                </div>

                <h2>Split payments</h2>
                <div id="payments"></div>
                <button class="btn btn-secondary full" type="button" id="addPayment">Add payment mode</button>

                <div class="actions" style="margin-top: 14px;">
                    <button class="btn btn-primary" type="button" data-submit="invoice">Checkout</button>
                    <button class="btn btn-secondary" type="button" data-submit="draft">Draft</button>
                    <button class="btn btn-secondary" type="button" data-submit="estimate">Estimate</button>
                    <button class="btn btn-danger" type="button" id="holdBill">Hold bill</button>
                </div>

                <h2 style="margin-top: 18px;">Held bills</h2>
                @foreach ($heldBills as $heldBill)
                    <button class="chip resume-bill" type="button" data-held='@json($heldBill)'>{{ $heldBill->hold_number }} · {{ number_format($heldBill->estimated_total, 2) }}</button>
                @endforeach
            </aside>
        </section>
    </form>

    <script>
        const products = @json($products);
        const productGrid = document.getElementById('productGrid');
        const cartList = document.getElementById('cartList');
        const smartPreview = document.getElementById('smartPreview');
        const money = value => 'Rs ' + Number(value || 0).toFixed(2);
        let cart = [];
        let activeCategory = 'all';

        function renderProducts() {
            const q = document.getElementById('barcodeInput').value.toLowerCase();
            productGrid.innerHTML = '';
            products.filter(product => {
                const categoryOk = activeCategory === 'all' || String(product.product_category_id) === String(activeCategory);
                const searchOk = !q || product.name.toLowerCase().includes(q) || product.sku.toLowerCase() === q || (product.barcode || '').toLowerCase() === q || (product.qr_code || '').toLowerCase() === q;
                return categoryOk && searchOk;
            }).forEach(product => {
                const tile = document.createElement('button');
                tile.type = 'button';
                tile.className = 'product-tile';
                tile.innerHTML = `<div class="product-image">${product.image_url ? `<img src="${product.image_url}" alt="" style="max-width:100%;height:92px;object-fit:cover;">` : product.name.substring(0, 2).toUpperCase()}</div><div class="product-info"><strong>${product.name}</strong><span class="muted">${product.sku} · Stock ${product.stock_quantity}</span><div>${money(product.sale_price)}</div></div>`;
                tile.addEventListener('click', () => addProduct(product));
                productGrid.appendChild(tile);
            });
        }

        function addProduct(product) {
            const existing = cart.find(item => item.product_id === product.id && !item.variant_name);
            if (existing) {
                existing.quantity += 1;
            } else {
                cart.push({ product_id: product.id, product, quantity: 1, discount_amount: 0, weight: '', notes: '', variant_name: '' });
            }
            renderPreview(product);
            renderCart();
        }

        function renderPreview(product) {
            const alternatives = products.filter(item => item.product_category_id === product.product_category_id && item.id !== product.id).slice(0, 3);
            smartPreview.innerHTML = `<strong>${product.name}</strong><p class="muted">Stock ${product.stock_quantity} · Tax ${product.tax_rate}% · Barcode ${product.barcode || '-'}</p><p>Variants: ${(product.variants || ['Standard']).join(', ')}</p><p class="muted">Alternatives: ${alternatives.map(item => item.name).join(', ') || 'None'}</p>`;
        }

        function renderCart() {
            cartList.innerHTML = '';
            cart.forEach((item, index) => {
                const product = item.product;
                const row = document.createElement('div');
                row.className = 'cart-item';
                row.innerHTML = `
                    <div class="cart-row">
                        <div><span class="cart-name">${product.name}</span><span class="muted">${product.sku}</span></div>
                        <div class="qty-control"><button class="btn btn-secondary" type="button" data-dec="${index}">-</button><strong>${item.quantity}</strong><button class="btn btn-secondary" type="button" data-inc="${index}">+</button></div>
                        <strong>${money(product.sale_price)}</strong>
                        <button class="btn btn-danger" type="button" data-remove="${index}">Remove</button>
                    </div>
                    <div class="cart-controls">
                        <input name="items[${index}][product_id]" type="hidden" value="${item.product_id}">
                        <input name="items[${index}][quantity]" type="hidden" value="${item.quantity}">
                        <input name="items[${index}][variant_name]" placeholder="Variant" value="${item.variant_name}" data-field="${index}:variant_name">
                        <input name="items[${index}][discount_amount]" type="number" min="0" step="0.01" placeholder="Discount" value="${item.discount_amount}" data-field="${index}:discount_amount">
                        <input name="items[${index}][weight]" type="number" min="0" step="0.001" placeholder="Weight" value="${item.weight}" data-field="${index}:weight">
                        <input name="items[${index}][notes]" placeholder="Item notes" value="${item.notes}" data-field="${index}:notes">
                    </div>`;
                cartList.appendChild(row);
            });
            bindCartButtons();
            calculateTotals();
        }

        function bindCartButtons() {
            document.querySelectorAll('[data-inc]').forEach(button => button.onclick = () => { cart[button.dataset.inc].quantity += 1; renderCart(); });
            document.querySelectorAll('[data-dec]').forEach(button => button.onclick = () => { cart[button.dataset.dec].quantity = Math.max(1, cart[button.dataset.dec].quantity - 1); renderCart(); });
            document.querySelectorAll('[data-remove]').forEach(button => button.onclick = () => { cart.splice(button.dataset.remove, 1); renderCart(); });
            document.querySelectorAll('[data-field]').forEach(input => input.oninput = () => {
                const [index, field] = input.dataset.field.split(':');
                cart[index][field] = input.value;
                calculateTotals();
            });
        }

        function calculateTotals() {
            const coupon = Number(document.getElementById('couponDiscount').value || 0);
            const roundOff = Number(document.getElementById('roundOff').value || 0);
            let subtotal = 0, discount = 0, tax = 0;
            cart.forEach(item => {
                const gross = Number(item.product.sale_price) * item.quantity;
                const itemDiscount = Math.min(Number(item.discount_amount || 0), gross);
                subtotal += gross;
                discount += itemDiscount;
                tax += (gross - itemDiscount) * (Number(item.product.tax_rate || 0) / 100);
            });
            const grand = Math.max(0, subtotal - discount - coupon + tax + roundOff);
            const cashTendered = Number(document.querySelector('[data-pay-mode="cash"]')?.closest('.payment-row')?.querySelector('[data-pay-tendered]')?.value || 0);
            document.getElementById('subtotalText').textContent = money(subtotal);
            document.getElementById('discountText').textContent = money(discount + coupon);
            document.getElementById('taxText').textContent = money(tax);
            document.getElementById('grandText').textContent = money(grand);
            document.getElementById('changeText').textContent = money(Math.max(0, cashTendered - grand));
            document.getElementById('couponDiscountInput').value = coupon;
            document.getElementById('roundOffInput').value = roundOff;
            return grand;
        }

        function addPayment(mode = 'cash', amount = '') {
            const index = document.querySelectorAll('.payment-row').length;
            const row = document.createElement('div');
            row.className = 'payment-row grid-2';
            row.innerHTML = `<div class="field"><label>Mode</label><select name="payments[${index}][mode]" data-pay-mode="${mode}"><option value="cash">Cash</option><option value="card">Card</option><option value="upi">UPI</option><option value="wallet">Wallet</option><option value="emi">EMI</option><option value="gift_card">Gift card</option><option value="store_credit">Store credit</option><option value="bnpl">BNPL</option></select></div><div class="field"><label>Amount</label><input name="payments[${index}][amount]" type="number" step="0.01" min="0" value="${amount}"></div><div class="field"><label>Tendered</label><input name="payments[${index}][tendered_amount]" data-pay-tendered type="number" step="0.01" min="0" value="${amount}"></div><div class="field"><label>Reference / denominations</label><input name="payments[${index}][reference]" placeholder="UPI ref or cash notes"></div>`;
            document.getElementById('payments').appendChild(row);
            row.querySelector('select').value = mode;
            row.querySelectorAll('input,select').forEach(input => input.addEventListener('input', calculateTotals));
        }

        document.querySelectorAll('.chip[data-category]').forEach(button => button.addEventListener('click', () => {
            document.querySelectorAll('.chip[data-category]').forEach(item => item.classList.remove('active'));
            button.classList.add('active');
            activeCategory = button.dataset.category;
            renderProducts();
        }));
        document.getElementById('barcodeInput').addEventListener('input', () => {
            renderProducts();
            const exact = products.find(product => [product.sku, product.barcode, product.qr_code].filter(Boolean).map(String).includes(document.getElementById('barcodeInput').value));
            if (exact) renderPreview(exact);
        });
        document.getElementById('couponDiscount').addEventListener('input', calculateTotals);
        document.getElementById('roundOff').addEventListener('input', calculateTotals);
        document.getElementById('addPayment').addEventListener('click', () => addPayment('upi', ''));
        document.querySelectorAll('[data-submit]').forEach(button => button.addEventListener('click', () => {
            if (!cart.length) return alert('Add at least one product.');
            document.getElementById('invoiceType').value = button.dataset.submit;
            if (!document.querySelector('.payment-row') && button.dataset.submit === 'invoice') addPayment('cash', calculateTotals().toFixed(2));
            if (button.dataset.submit === 'invoice') {
                const firstAmount = document.querySelector('input[name$="[amount]"]');
                const firstTendered = document.querySelector('[data-pay-tendered]');
                if (firstAmount && !firstAmount.value) firstAmount.value = calculateTotals().toFixed(2);
                if (firstTendered && !firstTendered.value) firstTendered.value = firstAmount.value;
            }
            document.getElementById('billForm').submit();
        }));
        document.getElementById('holdBill').addEventListener('click', async () => {
            if (!cart.length) return alert('Add products before holding bill.');
            const form = document.createElement('form');
            form.method = 'POST';
            form.action = '{{ route('billing.hold') }}';
            form.innerHTML = `@csrf<input name="customer_id" value="${document.getElementById('customerId').value}"><input name="counter_code" value="${document.getElementById('counterCode').value}"><input name="table_number" value="${document.getElementById('tableNumber').value}"><input name="estimated_total" value="${calculateTotals()}"><input name="notes" value="${document.getElementById('billNotes').value}">`;
            cart.forEach((item, i) => form.innerHTML += `<input name="cart_payload[${i}][product_id]" value="${item.product_id}"><input name="cart_payload[${i}][quantity]" value="${item.quantity}"><input name="cart_payload[${i}][discount_amount]" value="${item.discount_amount}"><input name="cart_payload[${i}][variant_name]" value="${item.variant_name}"><input name="cart_payload[${i}][weight]" value="${item.weight}"><input name="cart_payload[${i}][notes]" value="${item.notes}">`);
            document.body.appendChild(form);
            form.submit();
        });
        document.querySelectorAll('.resume-bill').forEach(button => button.addEventListener('click', () => {
            const held = JSON.parse(button.dataset.held);
            document.getElementById('heldBillId').value = held.id;
            cart = held.cart_payload.map(item => ({ ...item, product: products.find(product => product.id == item.product_id) })).filter(item => item.product);
            renderCart();
        }));

        renderProducts();
        addPayment('cash', '');
    </script>
@endsection