@extends('layouts.app')
@section('title', 'POS Screen')

@section('styles')
<style>
.main-content { padding: 15px; }
.pos-layout { display: flex; flex-wrap: wrap; margin: -10px; }
.pos-left, .pos-right { padding: 10px; }
.pos-left { flex: 0 0 60%; max-width: 60%; }
.pos-right { flex: 0 0 40%; max-width: 40%; }
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; height: 65vh; overflow-y: auto; padding-right: 5px; }
.pos-product-card { border: 1px solid #ddd; border-radius: 8px; text-align: center; padding: 10px; cursor: pointer; transition: 0.2s; background: white; }
.pos-product-card:hover { border-color: var(--accent-orange); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.pos-product-card img { max-width: 100%; height: 80px; object-fit: contain; margin-bottom: 10px; }
.cart-area { background: white; border-radius: 8px; border: 1px solid #ddd; height: calc(100vh - 100px); display: flex; flex-direction: column; }
.cart-items { flex-grow: 1; overflow-y: auto; padding: 10px; border-bottom: 1px solid #eee; }
.cart-summary { padding: 15px; background: #f8f9fa; border-radius: 0 0 8px 8px; }
@media (max-width: 992px) {
    .pos-left, .pos-right { flex: 0 0 100%; max-width: 100%; }
    .cart-area { height: auto; }
}
</style>
@endsection

@section('content')
<div class="pos-layout">
    <div class="pos-left">
        <div class="card p-3 mb-3">
            <div class="input-group">
                <span class="input-group-text"><i class="bi bi-upc-scan"></i></span>
                <input type="text" id="barcodeInput" class="form-control" placeholder="Scan Barcode or Type Product Name..." autofocus>
            </div>
        </div>
        <div class="mb-3 d-flex gap-2 overflow-auto" style="white-space: nowrap;">
            <button class="btn btn-outline-primary active">All</button>
            @foreach($categories ?? [] as $cat)
                <button class="btn btn-outline-primary">{{ $cat->name }}</button>
            @endforeach
        </div>
        <div class="product-grid" id="productGrid">
            @for($i=1; $i<=12; $i++)
            <div class="pos-product-card" onclick="addToCart({id: {{ $i }}, name: 'Product {{ $i }}', price: 10.50})">
                <img src="https://via.placeholder.com/150" alt="Product">
                <div class="fw-bold small text-truncate">Product {{ $i }}</div>
                <div class="text-primary fw-bold">$10.50</div>
            </div>
            @endfor
        </div>
    </div>
    
    <div class="pos-right">
        <div class="cart-area">
            <div class="p-2 border-bottom fw-bold d-flex justify-content-between align-items-center">
                <span><i class="bi bi-cart3"></i> Current Order</span>
                <button class="btn btn-sm btn-outline-danger" onclick="clearCart()">Clear</button>
            </div>
            <div class="cart-items" id="cartItems">
                <!-- Cart items rendered here via JS -->
                <div class="text-center text-muted mt-5">Cart is empty</div>
            </div>
            <div class="cart-summary">
                <div class="d-flex justify-content-between mb-1">
                    <span>Subtotal:</span>
                    <span id="subtotal">$0.00</span>
                </div>
                <div class="d-flex justify-content-between mb-1">
                    <span>Tax (0%):</span>
                    <span id="tax">$0.00</span>
                </div>
                <div class="d-flex justify-content-between mb-3 fw-bold fs-4 text-accent">
                    <span>Total:</span>
                    <span id="total">$0.00</span>
                </div>
                <form id="checkoutForm">
                    <div class="mb-2">
                        <select class="form-select form-select-sm" id="customer">
                            <option value="">Walk-in Customer</option>
                        </select>
                    </div>
                    <div class="mb-2 d-flex gap-2">
                        <input type="radio" class="btn-check" name="payment" id="payCash" checked>
                        <label class="btn btn-outline-primary btn-sm flex-fill" for="payCash">Cash</label>
                        <input type="radio" class="btn-check" name="payment" id="payCard">
                        <label class="btn btn-outline-primary btn-sm flex-fill" for="payCard">Card</label>
                    </div>
                    <button type="button" class="btn btn-accent w-100 fw-bold py-2 fs-5" onclick="completeSale()">Complete Sale</button>
                </form>
            </div>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    let cart = [];
    
    function addToCart(product) {
        let item = cart.find(i => i.id === product.id);
        if (item) { item.qty++; } 
        else { cart.push({...product, qty: 1}); }
        renderCart();
    }
    
    function updateQty(id, change) {
        let item = cart.find(i => i.id === id);
        if (item) {
            item.qty += change;
            if (item.qty <= 0) cart = cart.filter(i => i.id !== id);
            renderCart();
        }
    }
    
    function clearCart() {
        if(confirm('Clear cart?')) { cart = []; renderCart(); }
    }
    
    function renderCart() {
        let html = '';
        let subtotal = 0;
        
        if (cart.length === 0) {
            html = '<div class="text-center text-muted mt-5">Cart is empty</div>';
        } else {
            cart.forEach(item => {
                let total = item.price * item.qty;
                subtotal += total;
                html += `
                <div class="d-flex justify-content-between align-items-center mb-2 pb-2 border-bottom">
                    <div style="flex: 1">
                        <div class="fw-bold small text-truncate" style="max-width: 150px;">${item.name}</div>
                        <div class="text-muted small">$${item.price.toFixed(2)}</div>
                    </div>
                    <div class="d-flex align-items-center gap-1 mx-2">
                        <button class="btn btn-sm btn-light p-1 px-2" onclick="updateQty(${item.id}, -1)">-</button>
                        <span class="fw-bold px-2">${item.qty}</span>
                        <button class="btn btn-sm btn-light p-1 px-2" onclick="updateQty(${item.id}, 1)">+</button>
                    </div>
                    <div class="fw-bold">$${total.toFixed(2)}</div>
                    <button class="btn btn-sm text-danger ms-2" onclick="updateQty(${item.id}, -999)"><i class="bi bi-x"></i></button>
                </div>`;
            });
        }
        
        document.getElementById('cartItems').innerHTML = html;
        document.getElementById('subtotal').innerText = '$' + subtotal.toFixed(2);
        document.getElementById('total').innerText = '$' + subtotal.toFixed(2);
    }
    
    function completeSale() {
        if (cart.length === 0) return alert('Cart is empty!');
        alert('Sale completed successfully!');
        cart = []; renderCart();
    }
</script>
@endsection