@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>
            </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 TK</span>
                </div>
                <div class="flex justify-between">
                    <span class="font-medium">Tax (5%):</span>
                    <span id="tax">0.00 TK</span>
                </div>
                <div class="flex justify-between text-blue-700 font-bold text-[12px]">
                    <span>Total:</span>
                    <span id="total">0.00 TK</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 = 'flex justify-between items-start border p-2 rounded hover:bg-gray-100 text-left text-[11px] w-full gap-4';

                    const imageUrl = product.image || 'https://via.placeholder.com/80'; // Fallback image

                    button.innerHTML = `
                <div class="flex-1">
                    <p class="font-semibold text-gray-800">${product.product_name}</p>
                    <p class="text-gray-500">${product.product_price ? `${parseFloat(product.product_price).toFixed(2)} TK` : 'No Price'}</p>
                </div>
                <div class="w-16 h-16 flex-shrink-0">
                    <img src="${imageUrl}" alt="${product.image}" class="w-full h-full object-cover rounded" />
                </div>
            `;

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

        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.product_price) || 0,
                    qty: 1,
                    image: product.image || 'https://via.placeholder.com/80'
                });
            }

            renderCart();
        }

        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-start border-b pb-2 gap-4';

                div.innerHTML = `
                    <div class="flex-1">
                        <p class="font-medium text-gray-800">${item.name}</p>
                        <p class="text-gray-500">Qty: ${item.qty} x $${item.price.toFixed(2)}</p>
                        <p class="text-gray-800 font-semibold mt-1">${total.toFixed(2)} TK</p>
                        <button class="text-red-600 text-[10px] hover:underline mt-1" onclick="removeItem(${index})">Remove</button>
                    </div>
                    <div class="w-20 h-20 flex-shrink-0">
                        <img src="${item.image}" alt="${item.name}" class="w-full h-full object-cover rounded" />
                    </div>
                `;
                cartContainer.appendChild(div);
            });

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

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

        // Remove item from cart
        function removeItem(index) {
            cart.splice(index, 1);
            renderCart();
        }
    </script>
    <script>
        $('#checkout-btn').on('click', function (e) {
            e.preventDefault();

            if (cart.length === 0) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Cart is Empty',
                    text: 'Please add products to the cart before proceeding.',
                });
                return;
            }

            const terminalId = $('#terminal_id').val();
            const paymentMethod = $('#payment_method').val();

            /* if (!terminalId) {
                Swal.fire({
                    icon: 'warning',
                    title: 'Missing Terminal',
                    text: 'Please select a POS terminal.',
                });
                return;
            } */

            // Prepare data
            let formData = {
                terminal_id: terminalId,
                payment_method: paymentMethod,
                items: cart.map(item => ({
                    product_id: item.product_id,
                    quantity: item.qty,
                    price: item.price
                })),
                _token: '{{ csrf_token() }}'
            };

            // Submit sale
            $.ajax({
                url: '{{ route("pos.save") }}', // Adjust route name as needed
                method: 'POST',
                data: formData,
                success: function (response) {
                    Swal.fire({
                        icon: 'success',
                        title: 'Sale Completed',
                        text: response.message || 'The sale has been processed successfully.',
                        confirmButtonColor: '#3085d6',
                    }).then(() => {
                        // Redirect to the invoice page for this sale
                        window.location.href = `/sales/sale/${response.sale_id}/invoice`;
                    });

                },
                error: function (xhr) {
                    if (xhr.status === 422) {
                        let errors = xhr.responseJSON.errors;
                        let errorMessages = Object.values(errors).flat().join('<br>');
                        Swal.fire({
                            icon: 'error',
                            title: 'Validation Error',
                            html: errorMessages,
                        });
                    } else {
                        Swal.fire({
                            icon: 'error',
                            title: 'Server Error',
                            text: xhr.responseJSON.message || 'An unexpected error occurred.',
                        });
                    }
                }
            });
        });


    </script>

@endpush