@section('title','POS')
@section('description','POS')
@extends('layout.app')

@section('content')
    <div class="container-fluid mt-4">
        <div class="row">
            <!-- Cart Section -->
            <div class="col-md-6">
                <div class="mb-3">
                    <label class="form-label">Customer</label>
                    <select class="form-select" id="customerSelect">
                        <option>Select Client</option>
                    </select>
                </div>

                <fieldset class="cart-section shadow">
                    <legend class="text-center">Cart</legend>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Image</th>
                                <th>Item</th>
                                <th>Price</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody id="cartBody"></tbody>
                    </table>
                    
                    <div class="card p-3 shadow-sm">
                        <div>
                            <label class="form-label">Payment Date</label>
                            <input type="date" class="form-control" id="paymentDate">
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Payment Amount</label>
                            <input type="number" class="form-control" id="paymentAmount" readonly>
                        </div>
                        <div class="mt-2">
                            <label class="form-label">Payment Choice</label>
                            <select class="form-select" id="paymentChoice">
                                <option>Choose Payment Option</option>
                                <option>Credit Card</option>
                                <option>Bank Transfer</option>
                            </select>
                        </div>
                    
                        <h5 class="mt-3">Grand Total: $<span id="grandTotal">0</span></h5>
                        <button class="btn btn-primary w-100 mt-3" id="orderNow">Order Now</button>
                    </div>
                </fieldset>
            </div>

            <!-- Products Section -->
            <div class="col-md-6 mt-30">
                <div class="row " id="productList">
 
                    @forEach($products as $product)
                        <div class="col-md-4 mb-4">
                           
                            <div class="card product-card p-3" data-id="{{$product->id}}" data-name="{{$product->product_name}}" data-price="{{$product->product_cost??0}}" data-image="{{$product->accountProfile->logo??''}}">
                                <img src="{{ asset($product->accountProfile?->logo) ?? 'storage/account_profile/default.jpg' }}" alt="Product" class="product-img mx-auto d-block">
                                <h6 class="product-name text-center">{{$product->product_name}}</h6>
                                <p class="product-price text-center">${{$product->product_cost}}</p>
                                <button class="btn btn-success btn-sm add-to-cart w-100">Add to Cart</button>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
@endsection

<script>
    let cart = JSON.parse(localStorage.getItem('cart')) || [];
    let timeout;

    function renderCart() {
        let cartHtml = '';
        let total = 0;
        cart.forEach((item, index) => {
            const imageUrl = item.image ? item.image : '/storage/account_profile/default.jpg';
            total += item.price;
            cartHtml += `<tr>
                <td><img src="${imageUrl}" class="cart-item"></td>
                <td>${item.name}</td>
                <td><input type="number" class="form-control price-input" data-index="${index}" value="${item.price.toFixed(2)}"></td>
                <td><button class="btn btn-danger btn-sm" onclick="removeFromCart(${index})">X</button></td>
            </tr>`;
        });
        document.getElementById('cartBody').innerHTML = cartHtml;
        document.getElementById('grandTotal').textContent = total.toFixed(2);
        document.getElementById('paymentAmount').value = total.toFixed(2);
        localStorage.setItem('cart', JSON.stringify(cart));
    }

    function removeFromCart(index) {
        cart.splice(index, 1);
        renderCart();
    }

    document.addEventListener('DOMContentLoaded', function () {
        renderCart();

        // Handle the add-to-cart button click
        const addToCartButtons = document.querySelectorAll('.add-to-cart');
        addToCartButtons.forEach(button => {
            button.addEventListener('click', function () {

                let product = {
                    id: this.closest('.product-card').dataset.id,
                    image: this.closest('.product-card').dataset.image,
                    name: this.closest('.product-card').dataset.name,
                    price: Number(this.closest('.product-card').dataset.price),
                };

                // Check if the product is already in the cart
                let existingProduct = cart.find(item => item.id === product.id);

                if (!existingProduct) {
                    // Only add the product if it doesn't exist in the cart
                    cart.push(product);
                    renderCart();
                } else {
                    // Optional: Notify the user that the product is already in the cart
                    alert('This product is already in the cart.');
                }
            });
        });

        // Handle the price input change
        document.addEventListener('input', function (event) {
            if (event.target && event.target.classList.contains('price-input')) {
                clearTimeout(timeout); // Clear any previous timeout
                let index = event.target.dataset.index;
                let newPrice = parseFloat(event.target.value) || 0;
                cart[index].price = newPrice;

                // Set a timeout to trigger renderCart after 2000ms of inactivity
                timeout = setTimeout(function() {
                    renderCart(); // Only update after the user stops typing for 2000ms
                }, 1000);
            }
        });
    });
</script>

<style>
    .card { cursor: pointer; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease-in-out; }
    .card:hover { transform: scale(1.05); }
    .cart-item img { width: 50px; height: 50px; }
    .product-card img { width: 100px; height: 100px; margin-bottom: 10px; }
    .product-name { font-size: 16px; font-weight: bold; }
    .product-price { font-size: 14px; color: gray; }
    .cart-section { background: #fff; padding: 20px; border-radius: 10px; }
    .cart-section legend { font-size: 18px; font-weight: bold; }
    .cart-item { max-width: 60px; max-height: 60px; object-fit: cover; }
    .table th, .table td { vertical-align: middle; }
    .product-img { width: 100px; height: 100px; }
    .form-label { font-weight: bold; }
    .btn { border-radius: 5px; }
    #orderNow { font-size: 16px; }
    .mt-30 {
        margin-top: 30px;
    }
</style>