@extends('layouts.admin')
@section('title', 'POS - New Sale')
@section('page-title', 'Point of Sale')
@section('page-subtitle', 'Process a new sale')
@section('content')
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
    <!-- Product Search -->
    <div class="lg:col-span-2">
        <div class="card p-5 mb-4">
            <h3 class="font-bold text-gray-700 mb-3"><i class="fas fa-search mr-2 text-blue-500"></i>Search Product</h3>
            <input type="text" id="productSearch" placeholder="Type product name or scan barcode..." class="w-full border border-gray-300 rounded-lg px-4 py-2 focus:ring-2 focus:ring-pink-500 focus:outline-none text-sm">
            <div id="searchResults" class="mt-2 border border-gray-200 rounded-lg hidden max-h-48 overflow-y-auto"></div>
        </div>
        <!-- Cart -->
        <div class="card p-5">
            <h3 class="font-bold text-gray-700 mb-3"><i class="fas fa-shopping-cart mr-2 text-pink-500"></i>Cart</h3>
            <div id="cartEmpty" class="text-center py-8 text-gray-400">
                <i class="fas fa-shopping-cart text-4xl mb-2"></i>
                <p>Cart is empty. Search and add products above.</p>
            </div>
            <table class="w-full text-sm hidden" id="cartTable">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-3 py-2 text-left">Product</th>
                        <th class="px-3 py-2 text-center">Qty</th>
                        <th class="px-3 py-2 text-right">Unit Price</th>
                        <th class="px-3 py-2 text-right">Subtotal</th>
                        <th class="px-3 py-2 text-center">Remove</th>
                    </tr>
                </thead>
                <tbody id="cartBody"></tbody>
                <tfoot>
                    <tr class="border-t-2 border-gray-300">
                        <td colspan="3" class="px-3 py-3 text-right font-bold text-lg">TOTAL:</td>
                        <td class="px-3 py-3 text-right font-bold text-xl text-green-700" id="cartTotal">₦0</td>
                        <td></td>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
    <!-- Checkout -->
    <div>
        <div class="card p-5">
            <h3 class="font-bold text-gray-700 mb-4"><i class="fas fa-cash-register mr-2 text-green-600"></i>Checkout</h3>
            <form action="{{ route('admin.pos.process') }}" method="POST" id="saleForm">
                @csrf
                <div id="cartInputs"></div>
                <div class="space-y-3">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Customer Name</label>
                        <input type="text" name="customer_name" placeholder="Walk-in Customer" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method *</label>
                        <select name="payment_method" required class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm">
                            <option value="cash">Cash</option>
                            <option value="transfer">Bank Transfer</option>
                            <option value="pos_terminal">POS Terminal</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1">Amount Tendered (₦)</label>
                        <input type="number" name="amount_tendered" id="amountTendered" placeholder="For cash payments" class="w-full border border-gray-300 rounded-lg px-3 py-2 text-sm" step="50">
                    </div>
                    <div class="bg-gray-50 rounded-lg p-3">
                        <div class="flex justify-between text-sm mb-1">
                            <span class="text-gray-500">Total Amount:</span>
                            <span class="font-bold" id="checkoutTotal">₦0.00</span>
                        </div>
                        <div class="flex justify-between text-sm">
                            <span class="text-gray-500">Change:</span>
                            <span class="font-bold text-green-700" id="changeAmt">₦0.00</span>
                        </div>
                    </div>
                    <button type="submit" id="checkoutBtn" class="w-full bg-green-600 text-white py-3 rounded-lg hover:bg-green-700 font-bold text-sm disabled:opacity-50" disabled>
                        <i class="fas fa-check-circle mr-2"></i>Complete Sale
                    </button>
                </div>
            </form>
        </div>
        <!-- Quick Products -->
        <div class="card p-5 mt-4">
            <h3 class="font-bold text-gray-700 mb-3 text-sm"><i class="fas fa-bolt mr-2 text-yellow-500"></i>Quick Add</h3>
            <div class="grid grid-cols-2 gap-2">
                @foreach($products->take(8) as $p)
                <button type="button" onclick="addToCart({{ $p->id }}, '{{ addslashes($p->name) }}', {{ $p->selling_price }}, {{ $p->quantity }})"
                    class="bg-gray-50 hover:bg-gray-100 border rounded-lg p-2 text-left text-xs transition-colors">
                    <p class="font-medium truncate">{{ $p->name }}</p>
                    <p class="text-green-600 font-bold">₦{{ number_format($p->selling_price) }}</p>
                    <p class="text-gray-400">Stock: {{ $p->quantity }}</p>
                </button>
                @endforeach
            </div>
        </div>
    </div>
</div>

<script>
let cart = {};

function formatNaira(n) { return '₦' + Number(n).toLocaleString('en-NG', {minimumFractionDigits: 2}); }

function addToCart(id, name, price, stock) {
    if (cart[id]) {
        if (cart[id].qty < stock) cart[id].qty++;
        else { alert('Not enough stock!'); return; }
    } else {
        cart[id] = { id, name, price, qty: 1, stock };
    }
    renderCart();
}

function removeFromCart(id) { delete cart[id]; renderCart(); }

function updateQty(id, qty) {
    qty = parseInt(qty);
    if (qty < 1) { removeFromCart(id); return; }
    if (qty > cart[id].stock) { alert('Max stock: ' + cart[id].stock); return; }
    cart[id].qty = qty;
    renderCart();
}

function renderCart() {
    const tbody = document.getElementById('cartBody');
    const cartTable = document.getElementById('cartTable');
    const cartEmpty = document.getElementById('cartEmpty');
    const cartInputs = document.getElementById('cartInputs');
    const keys = Object.keys(cart);
    if (keys.length === 0) {
        cartTable.classList.add('hidden');
        cartEmpty.classList.remove('hidden');
        document.getElementById('checkoutBtn').disabled = true;
        tbody.innerHTML = '';
        cartInputs.innerHTML = '';
        document.getElementById('cartTotal').textContent = '₦0';
        document.getElementById('checkoutTotal').textContent = '₦0.00';
        return;
    }
    cartTable.classList.remove('hidden');
    cartEmpty.classList.add('hidden');
    document.getElementById('checkoutBtn').disabled = false;
    let total = 0;
    let rows = '', inputs = '';
    keys.forEach((id, i) => {
        const item = cart[id];
        const sub = item.price * item.qty;
        total += sub;
        rows += `<tr class="border-t"><td class="px-3 py-2">${item.name}</td>
            <td class="px-3 py-2 text-center"><input type="number" min="1" max="${item.stock}" value="${item.qty}" onchange="updateQty(${id}, this.value)" class="w-16 border rounded text-center text-sm px-1 py-0.5"></td>
            <td class="px-3 py-2 text-right">${formatNaira(item.price)}</td>
            <td class="px-3 py-2 text-right font-medium">${formatNaira(sub)}</td>
            <td class="px-3 py-2 text-center"><button type="button" onclick="removeFromCart(${id})" class="text-red-500 hover:text-red-700"><i class="fas fa-times"></i></button></td></tr>`;
        inputs += `<input type="hidden" name="items[${i}][product_id]" value="${id}">
            <input type="hidden" name="items[${i}][quantity]" value="${item.qty}">`;
    });
    tbody.innerHTML = rows;
    cartInputs.innerHTML = inputs;
    document.getElementById('cartTotal').textContent = formatNaira(total);
    document.getElementById('checkoutTotal').textContent = formatNaira(total);
    updateChange();
}

function updateChange() {
    const total = Object.values(cart).reduce((s, i) => s + i.price * i.qty, 0);
    const tendered = parseFloat(document.getElementById('amountTendered').value) || 0;
    const change = Math.max(0, tendered - total);
    document.getElementById('changeAmt').textContent = formatNaira(change);
}
    document.getElementById('amountTendered').addEventListener('input', updateChange);

// Product search
let searchTimeout;
document.getElementById('productSearch').addEventListener('input', function() {
    clearTimeout(searchTimeout);
    const q = this.value.trim();
    if (q.length < 2) { document.getElementById('searchResults').classList.add('hidden'); return; }
    searchTimeout = setTimeout(() => {
        fetch('{{ route("admin.pos.search") }}?q=' + encodeURIComponent(q), {
            credentials: 'include'
        })
            .then(r => {
                if (!r.ok) throw new Error('Network response was not ok');
                return r.json();
            })
            .then(products => {
                const div = document.getElementById('searchResults');
                if (products.length === 0) { 
                    div.innerHTML = '<p class="px-4 py-3 text-sm text-gray-500">No products found. <a href="{{ route("admin.pos.products.create") }}" class="text-blue-600 hover:underline">Add new product</a></p>'; 
                } else {
                    div.innerHTML = products.map(p => {
                        return `<div class="px-4 py-2 hover:bg-gray-50 cursor-pointer border-b flex justify-between items-center" onclick='addToCart(${p.id}, "${p.name.replace(/"/g, '\\"')}", ${p.selling_price}, ${p.quantity}); document.getElementById("productSearch").value=""; document.getElementById("searchResults").classList.add("hidden");'>
                            <span class="text-sm font-medium">${p.name}</span>
                            <span class="text-sm text-green-700 font-bold">₦${Number(p.selling_price).toLocaleString()} <span class="text-gray-400 font-normal">(${p.quantity} left)</span></span>
                        </div>`;
                    }).join('');
                }
                div.classList.remove('hidden');
            })
            .catch(error => {
                console.error('Search error:', error);
                const div = document.getElementById('searchResults');
                div.innerHTML = '<p class="px-4 py-3 text-sm text-red-500">Search error. Please try again.</p>';
                div.classList.remove('hidden');
            });
    }, 300);
});
</script>
@endsection