@extends('layouts.app')

@section('title', 'POS Checkout')
@section('page_title', 'Point of Sale')

@section('content')
<div class="row g-3 pos-container">
    <!-- Left Panel: Products List -->
    <div class="col-lg-7 pos-left pe-lg-3">
        <div class="card border-0 shadow-sm p-3 mb-3">
            <div class="input-group">
                <span class="input-group-text bg-white border-end-0"><i class="bi bi-search text-secondary"></i></span>
                <input type="text" class="form-control border-start-0" id="productSearch" placeholder="Scan barcode or type product name/SKU to filter...">
            </div>
        </div>

        <div class="row row-cols-2 row-cols-md-3 row-cols-xl-4 g-3" id="productGrid">
            @foreach($variants as $variant)
                <div class="col product-item" data-name="{{ $variant->variant_name }} {{ $variant->product->product_name }}" data-sku="{{ $variant->sku }}">
                    <div class="product-grid-card p-3 h-100 d-flex flex-column justify-content-between" 
                         onclick="addToCart('product', {{ $variant->id }}, '{{ $variant->variant_name }}', {{ $variant->selling_price }}, {{ $variant->stock_qty }}, '{{ $variant->sku }}', '{{ $variant->product->tax_type }}')">
                        <div>
                            <span class="badge bg-secondary mb-2 small">{{ $variant->sku }}</span>
                            <h6 class="fw-bold text-dark mb-1 text-truncate">{{ $variant->variant_name }}</h6>
                            <small class="text-secondary d-block mb-3 text-truncate">{{ $variant->product->product_name }}</small>
                        </div>
                        <div class="d-flex align-items-center justify-content-between">
                            <span class="fw-extrabold text-primary">{{ number_format($variant->selling_price) }} UGX</span>
                            <span class="badge bg-{{ $variant->stock_qty > 10 ? 'success' : 'danger' }}-subtle text-{{ $variant->stock_qty > 10 ? 'success' : 'danger' }} small">
                                Qty: {{ $variant->stock_qty }}
                            </span>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <!-- Right Panel: Cart & Payment details -->
    <div class="col-lg-5 pos-right p-3 rounded shadow-sm">
        <h5 class="fw-bold mb-3 d-flex align-items-center justify-content-between text-dark border-bottom pb-2">
            <span>Checkout Cart</span>
            <button class="btn btn-outline-danger btn-sm" onclick="clearCart()"><i class="bi bi-trash"></i> Reset</button>
        </h5>

        <!-- Client Selector -->
        <div class="mb-3">
            <label class="form-label text-secondary small fw-bold">SELECT CUSTOMER</label>
            <select class="form-select" id="cartClient">
                @foreach($clients as $client)
                    <option value="{{ $client->id }}">{{ $client->full_name }} ({{ $client->client_code }})</option>
                @endforeach
            </select>
        </div>

        <!-- Cart items list scroll area -->
        <div class="pos-cart-items mb-3 border rounded p-2 bg-light">
            <div id="emptyCartMessage" class="text-center py-5 text-secondary">
                <i class="bi bi-cart3 fs-1 mb-2 d-inline-block"></i>
                <p class="mb-0">Cart is empty. Click on products to add.</p>
            </div>
            <div class="list-group list-group-flush" id="cartList">
                <!-- Cart rows inserted dynamically -->
            </div>
        </div>

        <!-- Summary & Inputs -->
        <div class="border-top pt-3">
            <div class="row g-2 mb-2">
                <div class="col-6">
                    <label class="form-label text-secondary small fw-bold">DISCOUNT (UGX)</label>
                    <input type="number" class="form-control" id="cartDiscount" value="0" min="0" oninput="calculateTotals()">
                </div>
                <div class="col-6">
                    <label class="form-label text-secondary small fw-bold">TAX RATE (%)</label>
                    <input type="text" class="form-control bg-light" id="cartTaxRate" value="Auto (18% / Exempt)" readonly>
                </div>
            </div>

            <div class="bg-light p-3 rounded mb-3 border">
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-secondary small">Subtotal</span>
                    <span class="fw-bold text-dark" id="summarySubtotal">0 UGX</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-secondary small">Discount</span>
                    <span class="fw-bold text-danger" id="summaryDiscount">-0 UGX</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span class="text-secondary small">VAT Tax</span>
                    <span class="fw-bold text-dark" id="summaryTax">0 UGX</span>
                </div>
                <div class="d-flex justify-content-between border-top pt-2">
                    <span class="fw-bold text-dark">Grand Total</span>
                    <span class="fw-bold text-primary fs-5" id="summaryTotal">0 UGX</span>
                </div>
            </div>

            <!-- Payment details -->
            <div class="row g-2 mb-3">
                <div class="col-6">
                    <label class="form-label text-secondary small fw-bold">PAYMENT TYPE</label>
                    <select class="form-select" id="cartPaymentMethod">
                        <option value="cash">Cash</option>
                        <option value="mobile_money">Mobile Money</option>
                        <option value="bank_transfer">Bank Transfer</option>
                        <option value="cheque">Cheque</option>
                    </select>
                </div>
                <div class="col-6">
                    <label class="form-label text-secondary small fw-bold">AMOUNT PAID (UGX)</label>
                    <input type="number" class="form-control" id="cartAmountPaid" value="0" min="0" oninput="calculateTotals()">
                </div>
            </div>

            <div class="row g-2 align-items-center mb-3">
                <div class="col-6">
                    <div class="small" id="changeLabel">Change Due: <span class="fw-bold text-success">0 UGX</span></div>
                </div>
                <div class="col-6">
                    <div class="small" id="debtLabel">Balance Owed: <span class="fw-bold text-danger">0 UGX</span></div>
                </div>
            </div>

            <div class="d-grid">
                <button class="btn btn-primary btn-lg" id="checkoutBtn" onclick="submitCheckout()">
                    <i class="bi bi-cart-check"></i> PROCESS CHECKOUT
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Invoice print modal popup -->
<div class="modal fade" id="successModal" tabindex="-1" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-body text-center p-5">
                <i class="bi bi-check-circle-fill text-success fs-1 mb-3 d-inline-block"></i>
                <h4 class="fw-bold text-dark mb-1">Transaction Success!</h4>
                <p class="text-secondary small mb-4">Invoice <span class="fw-bold text-primary" id="successInvoiceNum">INV-000</span> generated.</p>
                <div class="d-grid gap-2">
                    <a href="#" id="viewInvoiceLink" class="btn btn-primary">
                        <i class="bi bi-file-earmark-text"></i> View / Print Invoice
                    </a>
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal" onclick="clearCart()">
                        Close and Reset POS
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let cart = [];

    // Local Search filtration
    document.getElementById('productSearch').addEventListener('input', function(e) {
        const query = e.target.value.toLowerCase();
        document.querySelectorAll('.product-item').forEach(item => {
            const name = item.getAttribute('data-name').toLowerCase();
            const sku = item.getAttribute('data-sku').toLowerCase();
            if (name.includes(query) || sku.includes(query)) {
                item.classList.remove('d-none');
            } else {
                item.classList.add('d-none');
            }
        });
    });

    function addToCart(type, id, name, price, stock, sku, taxType) {
        const existing = cart.find(i => i.item_type === type && i.item_id === id);
        if (existing) {
            if (stock && existing.quantity >= stock) {
                alert("Cannot exceed available stock limit (" + stock + ")");
                return;
            }
            existing.quantity++;
        } else {
            if (stock <= 0) {
                alert("This item is currently out of stock!");
                return;
            }
            cart.push({
                item_type: type,
                item_id: id,
                item_name: name,
                sku: sku,
                unit_price: price,
                quantity: 1,
                discount: 0,
                stock: stock,
                tax_type: taxType || 'vatable'
            });
        }
        renderCart();
    }

    function updateQty(index, qty) {
        const item = cart[index];
        if (qty > item.stock) {
            alert("Cannot exceed available stock limit (" + item.stock + ")");
            return;
        }
        item.quantity = qty;
        if (item.quantity <= 0) {
            cart.splice(index, 1);
        }
        renderCart();
    }

    function renderCart() {
        const emptyMsg = document.getElementById('emptyCartMessage');
        const cartList = document.getElementById('cartList');
        
        cartList.innerHTML = '';
        
        if (cart.length === 0) {
            emptyMsg.classList.remove('d-none');
            calculateTotals();
            return;
        }
        
        emptyMsg.classList.add('d-none');
        
        cart.forEach((item, index) => {
            const row = document.createElement('div');
            row.className = 'list-group-item d-flex align-items-center justify-content-between py-2 border-0 bg-transparent border-bottom';
            row.innerHTML = `
                <div class="flex-grow-1 overflow-hidden me-2">
                    <div class="fw-semibold text-dark text-truncate text-small">${item.item_name}</div>
                    <small class="text-secondary">${item.sku} - ${item.unit_price.toLocaleString()} UGX</small>
                </div>
                <div class="d-flex align-items-center gap-2">
                    <div class="input-group input-group-sm" style="width: 100px;">
                        <button class="btn btn-outline-secondary btn-sm" onclick="updateQty(${index}, ${item.quantity - 1})">-</button>
                        <input type="text" class="form-control text-center bg-white border-0" value="${item.quantity}" readonly>
                        <button class="btn btn-outline-secondary btn-sm" onclick="updateQty(${index}, ${item.quantity + 1})">+</button>
                    </div>
                    <button class="btn btn-sm btn-outline-danger border-0" onclick="updateQty(${index}, 0)"><i class="bi bi-x-lg"></i></button>
                </div>
            `;
            cartList.appendChild(row);
        });
        
        calculateTotals();
    }

    // System VAT rate (matches backend setting)
    const SYSTEM_VAT_RATE = {{ \App\Models\Setting::get('vat_rate', 18) }};

    function getItemTaxRate(taxType) {
        if (taxType === 'vatable') return SYSTEM_VAT_RATE;
        return 0; // exempt or zero_rated
    }

    function calculateTotals() {
        let subtotal = 0;
        let taxAmount = 0;

        const discount = parseFloat(document.getElementById('cartDiscount').value) || 0;

        // First pass: compute raw subtotal
        cart.forEach(item => {
            subtotal += (item.unit_price * item.quantity) - item.discount;
        });

        // Apply cart-level discount proportionally per item for tax base
        const discountFactor = subtotal > 0 ? Math.max(0, subtotal - discount) / subtotal : 1;

        // Second pass: compute tax per item based on its tax_type
        cart.forEach(item => {
            const itemNet = ((item.unit_price * item.quantity) - item.discount) * discountFactor;
            const itemTaxRate = getItemTaxRate(item.tax_type);
            taxAmount += itemNet * (itemTaxRate / 100);
        });

        taxAmount = Math.round(taxAmount);
        const taxable = Math.max(0, subtotal - discount);
        const total = taxable + taxAmount;

        const amountPaid = parseFloat(document.getElementById('cartAmountPaid').value) || 0;
        const change = Math.max(0, amountPaid - total);
        const debt = Math.max(0, total - amountPaid);

        document.getElementById('summarySubtotal').innerText = subtotal.toLocaleString() + ' UGX';
        document.getElementById('summaryDiscount').innerText = '-' + discount.toLocaleString() + ' UGX';
        document.getElementById('summaryTax').innerText = taxAmount.toLocaleString() + ' UGX';
        document.getElementById('summaryTotal').innerText = total.toLocaleString() + ' UGX';

        document.getElementById('changeLabel').innerHTML = 'Change Due: <span class="fw-bold text-success">' + change.toLocaleString() + ' UGX</span>';
        document.getElementById('debtLabel').innerHTML = 'Balance Owed: <span class="fw-bold text-danger">' + debt.toLocaleString() + ' UGX</span>';
    }

    function clearCart() {
        cart = [];
        document.getElementById('cartDiscount').value = '0';
        document.getElementById('cartAmountPaid').value = '0';
        document.getElementById('productSearch').value = '';
        renderCart();
    }

    function submitCheckout() {
        if (cart.length === 0) {
            alert("Cart is empty.");
            return;
        }

        const checkoutBtn = document.getElementById('checkoutBtn');
        checkoutBtn.disabled = true;

        const payload = {
            client_id: document.getElementById('cartClient').value,
            payment_method: document.getElementById('cartPaymentMethod').value,
            amount_paid: document.getElementById('cartAmountPaid').value,
            discount: document.getElementById('cartDiscount').value,
            items: cart.map(i => ({
                item_type: i.item_type,
                item_id: i.item_id,
                quantity: i.quantity,
                unit_price: i.unit_price,
                discount: i.discount,
                tax_type: i.tax_type
            }))
        };

        fetch("{{ route('pos.checkout') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(payload)
        })
        .then(response => response.json().then(data => ({ status: response.status, body: data })))
        .then(({ status, body }) => {
            checkoutBtn.disabled = false;
            if (status === 200 && body.success) {
                document.getElementById('successInvoiceNum').innerText = body.invoice_number;
                document.getElementById('viewInvoiceLink').href = body.invoice_url;
                new bootstrap.Modal(document.getElementById('successModal')).show();
            } else {
                alert("Error during checkout: " + (body.message || "Unknown error"));
            }
        })
        .catch(err => {
            checkoutBtn.disabled = false;
            console.error(err);
            alert("An error occurred during transaction processing.");
        });
    }
</script>
@endsection