@extends('layouts.app')

@section('title', 'POS - Point of Sale')

@section('content')
    <!-- Page Header -->
    <div class="flex items-center justify-between px-4 py-2 border-b border-gray-200 bg-white">
        <h1 class="text-sm font-semibold text-gray-800">Point of Sale</h1>
        <a href="{{ url('dashboard') }}"
           class="inline-flex items-center text-[11px] font-medium text-gray-700 hover:text-gray-900 border border-gray-300 px-2 py-1 rounded-md bg-gray-50 hover:bg-gray-100 transition">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
            </svg>
            Back
        </a>
    </div>

    <!-- POS Interface -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-3">
        <!-- Left: Product List -->
        <div class="col-span-2 bg-white rounded shadow-sm p-4">
            <div class="flex items-center justify-between mb-3">
                <h2 class="text-xs font-semibold text-gray-700">Scan or Search Product</h2>
                <input type="text" id="product-search" placeholder="Enter product name or barcode..."
                       class="w-1/2 text-[11px] border border-gray-300 rounded px-2 py-1 focus:ring-blue-500 focus:border-blue-500" />
            </div>

            <div id="product-list" class="grid grid-cols-2 md:grid-cols-3 gap-2 text-[11px]">
                <!-- Product Cards will be rendered here -->
                <!-- Example static card -->
                <button class="border p-2 rounded hover:bg-gray-100 text-left text-[11px]">
                    <p class="font-semibold text-gray-800">Product Name</p>
                    <p class="text-gray-500">$12.00</p>
                </button>
            </div>
        </div>

        <!-- Right: Cart Summary -->
        <div class="bg-white rounded shadow-sm p-4 text-[11px]">
            <h2 class="text-xs font-semibold text-gray-700 mb-2">Cart</h2>

            <div id="cart-items" class="space-y-2 max-h-64 overflow-y-auto">
                <!-- Cart item -->
                <!-- This will be dynamically generated -->
                <div class="flex justify-between items-center border-b pb-1">
                    <div>
                        <p class="font-medium text-gray-800">Product 1</p>
                        <p class="text-gray-500">Qty: 1 x $10</p>
                    </div>
                    <div>
                        <p class="text-gray-800 font-semibold">$10.00</p>
                        <button class="text-red-600 text-[10px] hover:underline">Remove</button>
                    </div>
                </div>
            </div>

            <div class="border-t pt-2 mt-2 space-y-1">
                <div class="flex justify-between">
                    <span class="font-medium">Subtotal:</span>
                    <span id="subtotal">$0.00</span>
                </div>
                <div class="flex justify-between">
                    <span class="font-medium">Tax (5%):</span>
                    <span id="tax">$0.00</span>
                </div>
                <div class="flex justify-between text-blue-700 font-bold text-[12px]">
                    <span>Total:</span>
                    <span id="total">$0.00</span>
                </div>
            </div>

            <div class="mt-4">
                <label class="block text-[11px] font-medium text-gray-700 mb-1">Payment Method</label>
                <select id="payment_method"
                        class="form-select w-full text-[11px] border border-gray-300 rounded px-2 py-1">
                    <option value="cash">Cash</option>
                    <option value="card">Card</option>
                    <option value="wallet">Wallet</option>
                </select>
            </div>

            <div class="mt-4">
                <button id="checkout-btn"
                        class="w-full bg-blue-600 text-white font-medium text-[11px] py-2 rounded hover:bg-blue-700 transition">
                    Complete Sale
                </button>
            </div>
        </div>
    </div>
@endsection

@push('scripts')

        <script>
            let cart = [];

            // Fetch products from API and render them
            fetch('/select/products-inventory')
            .then(response => response.json())
            .then(products => {
            const productList = document.getElementById('product-list');
            productList.innerHTML = ''; // Clear placeholder

            products.forEach(product => {
            const button = document.createElement('button');
            button.className = 'border p-2 rounded hover:bg-gray-100 text-left text-[11px] w-full';
            button.innerHTML = `
                    <p class="font-semibold text-gray-800">${product.product_name}</p>
                    <p class="text-gray-500">${product.price1 ? `$${parseFloat(product.price1).toFixed(2)}` : 'No Price'}</p>
                `;

            button.addEventListener('click', () => addToCart(product));
            productList.appendChild(button);
        });
        });

            // Add to cart
            function addToCart(product) {
            const existing = cart.find(item => item.product_id === product.product_id);
            if (existing) {
            existing.qty += 1;
        } else {
            cart.push({
            product_id: product.product_id,
            name: product.product_name,
            price: parseFloat(product.price1) || 0,
            qty: 1
        });
        }

            renderCart();
        }

            // Render cart items
            function renderCart() {
            const cartContainer = document.getElementById('cart-items');
            cartContainer.innerHTML = '';

            let subtotal = 0;

            cart.forEach((item, index) => {
            const total = item.qty * item.price;
            subtotal += total;

            const div = document.createElement('div');
            div.className = 'flex justify-between items-center border-b pb-1';
            div.innerHTML = `
                <div>
                    <p class="font-medium text-gray-800">${item.name}</p>
                    <p class="text-gray-500">Qty: ${item.qty} x $${item.price.toFixed(2)}</p>
                </div>
                <div class="text-right">
                    <p class="text-gray-800 font-semibold">$${total.toFixed(2)}</p>
                    <button class="text-red-600 text-[10px] hover:underline" onclick="removeItem(${index})">Remove</button>
                </div>
            `;
            cartContainer.appendChild(div);
        });

            const tax = subtotal * 0.05;
            const total = subtotal + tax;

            document.getElementById('subtotal').textContent = `$${subtotal.toFixed(2)}`;
            document.getElementById('tax').textContent = `$${tax.toFixed(2)}`;
            document.getElementById('total').textContent = `$${total.toFixed(2)}`;
        }

            // Remove item from cart
            function removeItem(index) {
            cart.splice(index, 1);
            renderCart();
        }
    </script>

@endpush