@extends('layouts.app')
@section('title', 'POS')
@section('content')
<div class="container-fluid px-4 py-3 bg-light">
    <h2 class="mb-4 fw-bold text-dark">កន្លែងលក់ទំនិញ</h2>
    <div class="row">
        <!-- Left Column: Products -->
        <div class="col-lg-8">
            <div class="d-flex align-items-center gap-3 mb-3">
                <input type="text" class="form-control" placeholder="Search by Barcode Scanner">
            </div>

            <div class="d-flex flex-wrap gap-2 mb-4">
                <a href="{{ route('sales.create') }}" 
                   class="btn {{ empty($category_id) ? 'btn-primary' : 'btn-outline-primary' }}" 
                   style="font-size: 0.9rem; padding: 0.45rem 0.9rem;">All Categories</a>
                @foreach ($allcategory as $category)
                    <a href="{{ route('sales.create', ['category_id' => $category->id]) }}" 
                       class="btn {{ ($category_id == $category->id) ? 'btn-primary' : 'btn-outline-primary' }}" 
                       style="font-size: 0.9rem; padding: 0.45rem 0.9rem;">
                        {{ $category->name }}
                    </a>
                @endforeach
            </div>
            <div class="row g-3">
                @foreach ($products as $product)
                    <div class="col-6 col-md-4 col-lg-3">
                        <div class="card shadow-sm border-0 rounded-4 p-3">
                            <!-- Product Image -->
                            <img 
                                src="{{ $product->image ? asset('storage/' . $product->image) : asset('image/default.png') }}" 
                                class="card-img-top rounded-4 mx-auto d-block"
                                style="width: 150px; height: 150px; object-fit: cover;">
                            <!-- Title -->
                            <div class="card-body px-0">
                                <h6 class="fw-bold text-dark mb-1">{{ $product->name }}</h6>
                                <p class="text-muted small mb-2">{{ $product->code }}</p>

                                <div class="d-flex justify-content-between align-items-center">
                                    <!-- Price -->
                                    <span class="fw-bold text-danger">
                                        ${{ number_format($product->price, 2) }}
                                    </span>
                                    <!-- Add Button -->
                                    <button class="btn btn-primary rounded-3 p-2 add-to-cart-btn"
                                            style="width: 40px; height: 45px;"
                                            data-id="{{ $product->id }}"
                                            data-name="{{ $product->name }}"
                                            data-code="{{ $product->code }}"
                                            data-price="{{ $product->price }}">
                                        <i class="bi bi-plus fs-5"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>


        </div>
        <!-- Right Column: Cart -->
        <div class="col-lg-4">
            <!-- Your main POS order card -->
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <div class="d-flex justify-content-between">
                        <select class="form-select m-2 w-50">
                            <option>Walk-in-customer</option>
                            @foreach ($customers as $c)
                                <option value="{{ $c->id }}">{{ $c->name }}</option>
                            @endforeach
                        </select>

                        <select class="form-select m-2 w-50">
                            <option>ProCare Warehouse</option>
                        </select>
                    </div>
                </div>
                <div class="card-body p-2 m-2">
                    <table class="table table-sm align-middle mb-0" id="cart-table">
                        <thead class="bg-light m-2">
                            <tr>
                                <th width="140px">ឈ្មោះ</th>
                                <th width="80px">ចំនួន</th>
                                <th width="80px">តម្លៃ</th>
                                <th>តម្លៃសរុប</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="cart-body">
                            <tr><td colspan="5" class="text-center text-muted">No items in cart</td></tr>
                        </tbody>
                    </table>
                </div>

                <div class="card-footer bg-white">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label>បញ្ចុះតម្លៃ</label>
                        <input type="number" class="form-control w-25" id="discount" value="0">
                    </div>

                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <label>សេវាដឹក</label>
                        <input type="number" class="form-control w-25" id="shipping" value="0">
                    </div>

                    <div class="d-flex justify-content-between fw-semibold">
                        <span>តម្លៃ:</span>
                        <span id="sub-total">$0.00</span>
                    </div>
                    <div class="d-flex justify-content-between fw-bold">
                        <span>តម្លៃសរុប:</span>
                        <span id="total">$0.00</span>
                    </div>

                    <div class="d-flex justify-content-between mt-3 gap-2">
                        <button class="btn btn-warning flex-fill">សេចក្តីព្រាង</button>
                        <button class="btn btn-danger flex-fill" id="empty-cart">សម្អាត</button>
                        <button class="btn btn-primary flex-fill" id="btn-payments">បង់ប្រាក់</button>
                    </div>
                </div>
            </div>

    <!-- Store Notifications card (NOW inside same column) -->
    <div class="mt-3">
        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">ការជូនដំណឹងពីហាង</h5>
                <button id="notifyOrderBtn" class="btn btn-sm btn-success">
                    <i class="bi bi-bell-fill"></i> Refresh See Order
                    <span id="orderCountBadge" class="badge bg-danger ms-1" style="display:none;">0</span>
                </button>
            </div>
            <div class="card-body" style="max-height: 380px; overflow-y: auto;">
                <div id="notificationContainer">
                    <div class="text-center text-muted">Click Refresh to see notifications</div>
                </div>
            </div>
        </div>
    </div>
</div>
    </div>
    {{-- <div id="notificationContainer" class="position-fixed top-0 end-0 m-3" style="z-index: 1050;"></div> --}}
    <script>
        const STORAGE_KEY = "recent_orders";
        document.addEventListener('DOMContentLoaded', () => {
            showSavedOrders();
        });
        document.getElementById('notifyOrderBtn').addEventListener('click', function() {
            fetch('/orders')
                .then(res => res.json())
                .then(orders => {
                    localStorage.setItem(STORAGE_KEY, JSON.stringify(orders));
                    displayOrders(orders);
                    const countBadge = document.getElementById("orderCountBadge");

                    if (orders.length > 0) {
                        countBadge.textContent = orders.length;
                        countBadge.style.display = "inline-block";
                    } else {
                        countBadge.style.display = "none";
                    }
                })
                .catch(err => console.error(err));
        });
        function displayOrders(orders) {
            const container = document.querySelector('#notificationContainer');
            
            container.innerHTML = '';

            if (!orders || orders.length === 0) {
                container.innerHTML = '<div class="text-center text-muted">No recent orders</div>';
                return;
            }
            orders.forEach(order => {
                const box = document.createElement('div');
                box.className = 'alert alert-primary p-2 mb-2 shadow-sm';
                box.innerHTML = `
                    <div class="d-flex justify-content-between">
                        <div>
                            <strong>លេខកម្មង់ #${order.table_id}</strong><br>
                            ចំនួនមនុស្ស: ${order.guest_count} នាក់<br>
                        </div>
                        <small class="text-muted">${order.first_order_at}</small>
                        <div>
                            <button class="btn btn-primary btn-sm" onclick="viewOrder(${order.table_session_id})">មើលនិងបង់ប្រាក់</button>
                        </div>
                    </div>
                `;
                container.appendChild(box);
            });
        }
        function showSavedOrders() {
            const saved = localStorage.getItem(STORAGE_KEY);

            if (saved) {
                const orders = JSON.parse(saved);
                displayOrders(orders);
            }
        }
    </script>
    <div class="modal fade" id="paymentsModal" tabindex="-1" aria-labelledby="paymentsModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-xl">
            <div class="modal-content">
                <div class="modal-header bg-light text-dark">
                    <h5 class="modal-title" id="paymentsModalLabel">ទទួលយកការទូទាត់</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive">
                        <table class="table table-bordered table-sm text-center">
                            <thead class="table-light">
                                <tr>
                                    <th>ឈ្មោះ</th>
                                    <th>ចំនួន</th>
                                    <th>តម្លៃ</th>
                                    <th>តម្លៃសរុប</th>
                                </tr>
                            </thead>
                            <tbody id="payment-cart-body"></tbody>
                            <tfoot>
                                <tr>
                                    <th colspan="3" class="text-end">បញ្ចុះតម្លៃ</th>
                                    <th id="payment-discount">$0.00</th>
                                </tr>
                                <tr>
                                    <th colspan="3" class="text-end">សេវាដឹក</th>
                                    <th id="payment-shipping">$0.00</th>
                                </tr>
                                <tr class="table-primary">
                                    <th colspan="3" class="text-end">សរុបចុងក្រោយ</th>
                                    <th id="payment-total">$0.00</th>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <!-- Payment Method & Amount -->
                    <div class="row mt-3">
                        <div class="col-md-4">
                            <label for="payment_method" class="form-label">បង់ប្រាក់តាមរយះ</label>
                            <select name="payment_method" id="payment_method" class="form-select">
                                @foreach ($PaymentMethod as $payment)
                                        <option value="{{ $payment->name }}">{{ $payment->name }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="col-md-4">
                            <label for="payment_amount_usd" class="form-label">សរុបលុយជា (USD)</label>
                            <input type="number" step="0.01" id="payment_amount_usd" class="form-control" placeholder="Enter USD amount">
                        </div>
                        <div class="col-md-4" style="display: none">
                            <label for="payment_amount_kh" class="form-label">សរុបលុយជា (KHR)</label>
                            <input type="number" step="1" id="payment_amount_kh" class="form-control" placeholder="Enter KHR amount">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-success" id="confirm-payment">Yes, Pay</button>
                </div>
            </div>
        </div>
    </div>
    <!-- View Order Modal -->
   <div class="modal fade" id="viewOrderModal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">ព័ត៌មាន Order</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <!-- Order Info -->
                    <h6>លេខតុ: <span id="modalTableId"></span></h6>
                    <h6>ចំនួនមនុស្ស: <span id="modalGuestCount"></span> នាក់</h6>
                    <hr>
                    <!-- Order Items Table -->
                    <table class="table table-bordered">
                        <thead>
                            <tr>
                                <th>ម៉ោងកម្មង់</th>
                                <th>ផលិតផល</th>
                                <th>ចំនួន</th>
                                <th>តម្លៃ</th>
                                <th>តម្លៃសរុប</th>
                            </tr>
                        </thead>
                        <tbody id="modalItemsBody"></tbody>
                    </table>
                    <table class="table table-striped">
                        <tbody id="modalPaymentBody"></tbody>
                    </table>
                    <h5 class="mb-3">បញ្ចូលការបង់ប្រាក់</h5>
                    <div class="row g-3">
                        <div class="col-md-4">
                            <label class="form-label">Amount</label>
                            <input type="number" id="paymentAmount" class="form-control" placeholder="បញ្ចូលចំនួនប្រាក់">
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Payment Method</label>
                               <select name="payment_method" id="paymentMethod" class="form-select">
                                    @foreach ($PaymentMethod as $payment)
                                        <option value="{{ $payment->name }}">{{ $payment->name }}</option>
                                    @endforeach
                                </select>
                        </div>
                        <div class="col-md-4">
                            <label class="form-label">Payment Type</label>
                            <select id="paymentType" class="form-control">
                                <option value="full">Full</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary" onclick="submitPayment()">បង់ប្រាក់</button>
                    <button class="btn btn-secondary" data-bs-dismiss="modal">បិទ</button>
                </div>

            </div>
        </div>
    </div>



</div>
<script>
let currentSessionId = null;
let currentSaleId = null;

function viewOrder(sessionId) {
    currentSessionId = sessionId;

    fetch(`/orders/${sessionId}/items`)
        .then(res => res.json())
        .then(data => {
            if (!data.order) {
                alert("Order not found!");
                return;
            }

            currentSaleId = data.order.id;

            document.getElementById('modalTableId').textContent = data.table_id;
            document.getElementById('modalGuestCount').textContent = data.guest_count;

            document.getElementById("paymentMethod").value = "ABA";
            document.getElementById("paymentType").value = "full";

            const body = document.getElementById('modalItemsBody');
            body.innerHTML = "";
            let autoTotal = 0;

            data.items.forEach(item => {
                body.innerHTML += `
                    <tr>
                        <td>${item.created_at}</td>
                        <td>${item.name}</td>
                        <td>${item.qty}</td>
                        <td>${item.price}</td>
                        <td>${item.subtotal}</td>
                    </tr>
                `;
                autoTotal += parseFloat(item.subtotal);
            });

            const paymentAmountInput = document.getElementById("paymentAmount");
            paymentAmountInput.value = autoTotal.toFixed(2);
            paymentAmountInput.setAttribute("data-auto", autoTotal.toFixed(2));

            new bootstrap.Modal(document.getElementById('viewOrderModal')).show();
        })
        .catch(err => {
            console.error(err);
            // alert("Server Error!");
        });
}

document.getElementById("paymentAmount").addEventListener("input", function () {
    if (this.value.trim() === "") {
        this.value = this.getAttribute("data-auto");
    }
});

function submitPayment() {
    if (!currentSaleId) {
        alert("Sale ID not found — reopen order modal!");
        return;
    }

    const amount = document.getElementById("paymentAmount").value;
    const method = document.getElementById("paymentMethod").value || "ABA";
    const type = document.getElementById("paymentType").value || "full";

    if (!amount) {
        alert("សូមបញ្ចូល Amount");
        return;
    }

    fetch(`/orders/${currentSessionId}/payments`, {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]').content
        },
        body: JSON.stringify({
            sale_id: currentSaleId,         
            amount_usd: amount,
            amount_khmer: 0,
            payment_method: method,
            payments_type: type,
            currency: "USD"
        })
    })
    .then(res => res.json())
    .then(res => {
        if (res.success) {
            alert("បង់ប្រាក់ជោគជ័យ!");
            window.location.href = `/invoice/${currentSaleId}`;
            document.getElementById("paymentAmount").value = "";
            document.getElementById("paymentMethod").value = "ABA";
            document.getElementById("paymentType").value = "full";
            viewOrder(currentSessionId);
        } else {
            alert("Error: " + res.error);
        }
    })
    .catch(err => {
        console.error(err);
        alert("Server Error!");
    });
}
</script>


<style>
.modal-body { max-height: 60vh; overflow-y: auto; }
</style>
@endsection

@section('scripts')
<script>
document.addEventListener('DOMContentLoaded', function () {
    let cart = JSON.parse(localStorage.getItem('posCart')) || {};
    const cartBody = document.getElementById('cart-body');

    const saveCart = () => {
        localStorage.setItem('posCart', JSON.stringify(cart));
        updateCartTable();
    }
    const updateCartTable = () => {
        cartBody.innerHTML = '';
        const keys = Object.keys(cart);
        if (keys.length === 0) {
            cartBody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No items in cart</td></tr>';
        } else {
            keys.forEach(id => {
                const item = cart[id];
                const row = document.createElement('tr');
                row.dataset.id = id;
                row.innerHTML = `
                    <td>${item.name}</td>
                    <td class="text-center">
                        <div class="d-flex justify-content-center align-items-center gap-1">
                            <button class="btn btn-sm btn-outline-secondary decrement">-</button>
                            <span class="qty">${item.qty}</span>
                            <button class="btn btn-sm btn-outline-secondary increment">+</button>
                        </div>
                    </td>
                    <td>$${item.price.toFixed(2)}</td>
                    <td class="subtotal">$${(item.price * item.qty).toFixed(2)}</td>
                    <td>
                        <button class="btn btn-sm btn-outline-danger remove"><i class="bi bi-trash"></i></button>
                    </td>
                `;
                cartBody.appendChild(row);

                row.querySelector('.increment').addEventListener('click', () => { item.qty++; saveCart(); });
                row.querySelector('.decrement').addEventListener('click', () => { if(item.qty>1){ item.qty--; saveCart(); } });
                row.querySelector('.remove').addEventListener('click', () => { delete cart[id]; saveCart(); });
            });
        }
        updateTotals();
    }
    const updateTotals = () => {
        let subtotal = Object.values(cart).reduce((sum, i) => sum + i.price*i.qty, 0);
        const discount = parseFloat(document.getElementById('discount').value)||0;
        const shipping = parseFloat(document.getElementById('shipping').value)||0;
        document.getElementById('sub-total').textContent = '$'+subtotal.toFixed(2);
        document.getElementById('total').textContent = '$'+(subtotal-discount+shipping).toFixed(2);
    }
    document.querySelectorAll('.add-to-cart-btn').forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.dataset.id,
                name = btn.dataset.name,
                code = btn.dataset.code ?? 'N/A',
                price = parseFloat(btn.dataset.price),
                cost = parseFloat(btn.dataset.cost ?? 0),
                unit = btn.dataset.unit ?? 'pcs';

            if(cart[id]) {
                cart[id].qty++;
            } else {
                cart[id] = {
                    product_id: id,
                    name,
                    code,
                    price,
                    cost,
                    qty: 1,
                    unit
                };
            }
            saveCart();
        });
    });

    document.getElementById('discount').addEventListener('input', updateTotals);
    document.getElementById('shipping').addEventListener('input', updateTotals);
    document.getElementById('empty-cart').addEventListener('click', () => { cart={}; saveCart(); });

    updateCartTable();

    // Payments modal
    const paymentsModal = new bootstrap.Modal(document.getElementById('paymentsModal'));
    document.getElementById('btn-payments').addEventListener('click', () => {
        const paymentCartBody = document.getElementById('payment-cart-body');
        paymentCartBody.innerHTML = '';
        Object.values(cart).forEach(item=>{
            const row = document.createElement('tr');
            row.innerHTML = `<td>${item.name}</td><td>${item.qty}</td><td>$${item.price.toFixed(2)}</td><td>$${(item.price*item.qty).toFixed(2)}</td>`;
            paymentCartBody.appendChild(row);
        });
        const discount=parseFloat(document.getElementById('discount').value)||0;
        const shipping=parseFloat(document.getElementById('shipping').value)||0;
        const subtotal=Object.values(cart).reduce((sum,i)=>sum+i.price*i.qty,0);
        document.getElementById('payment-discount').textContent='$'+discount.toFixed(2);
        document.getElementById('payment-shipping').textContent='$'+shipping.toFixed(2);
        document.getElementById('payment-total').textContent='$'+(subtotal-discount+shipping).toFixed(2);
        paymentsModal.show();
    });

    document.getElementById('confirm-payment').addEventListener('click', () => {

        const items = Object.values(cart).map(i => ({
            product_name: i.name,
            cost: i.cost,
            price: i.price,
            qty: i.qty,
            amount: i.price * i.qty,
            grand_total: i.price * i.qty,
            unit_name: i.unit
        }));

        const data = {
            discount: parseFloat(document.getElementById('discount').value) || 0,
            shipping: parseFloat(document.getElementById('shipping').value) || 0,
            total: parseFloat(document.getElementById('total').textContent.replace('$','')),
            payment_method_id: document.getElementById('payment_method').value,
            amount_usd: parseFloat(document.getElementById('payment_amount_usd').value) || 0,
            amount_kh: parseFloat(document.getElementById('payment_amount_kh').value) || 0,
            items: items,
            _token: '{{ csrf_token() }}'
        };

        if(!data.payment_method_id) { alert('Select payment method'); return; }
        if(data.amount_usd <= 0 && data.amount_kh <= 0){ alert('Enter at least one payment amount'); return; }

        fetch("{{ route('sales.store') }}", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify(data)
        })
        .then(res => res.json())
        .then(res => {
            if(res.success){
                window.location.href = "/sales/invoice/" + res.sale_id;
                paymentsModal.hide();
                cart = {};
                saveCart();
            } else {
                alert('Error: ' + res.message);
            }
        })
        .catch(err => console.log('Error: ' + err));
    });
});
</script>
@endsection