@extends('layouts.app')

@section('content')
<div class="container-fluid px-4 py-4" style="background-color: #f8fafc; min-height: 100vh;">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h4 class="fw-bold text-dark mb-1">On-Field POS Counter Terminal</h4>
            <p class="text-muted small mb-0">Generate digital sales logs with real-time stock allocation checks.</p>
        </div>
        <a href="{{ route('admin.sales.index') }}" class="btn btn-outline-secondary btn-sm px-3 rounded-3">
            <i class="bi bi-arrow-left me-1"></i> Back to Logs
        </a>
    </div>

    @if(session('error'))
    <div class="alert alert-danger border-0 mb-4 rounded-3 shadow-sm">{{ session('error') }}</div>
    @endif

    <form action="{{ route('admin.sales.store') }}" method="POST">
        @csrf
        <div class="row g-4">

            <div class="col-md-4">
                <div class="card border-0 shadow-sm rounded-4 h-100">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-dark mb-3"><i
                                class="bi bi-person-bounding-box me-2 text-indigo-600"></i>Customer Profile</h6>

                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-secondary">Exhibition Terminal Counter <span
                                    class="text-danger">*</span></label>
                            <select name="exhibition_id" id="exhibition_id" class="form-select"
                                style="border-radius: 8px;" required>
                                <option value="">-- Choose Terminal Location --</option>
                                @foreach($exhibitions as $ex)
                                <option value="{{ $ex->id }}">{{ $ex->title ?? $ex->name }} ({{ $ex->city }})</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-secondary">Customer Mobile Name</label>
                            <input type="text" name="customer_name" class="form-control" placeholder="John Doe"
                                style="border-radius: 8px;">
                        </div>

                        <div class="mb-3">
                            <label class="form-label small fw-semibold text-secondary">Contact Mobile Number</label>
                            <input type="text" name="customer_mobile" class="form-control" placeholder="9876543210"
                                style="border-radius: 8px;">
                        </div>

                        <div class="mb-0">
                            <label class="form-label small fw-semibold text-secondary">Payment Method Settlement</label>
                            <select name="payment_mode" class="form-select" style="border-radius: 8px;">
                                <option value="cash">💵 Cash Transaction</option>
                                <option value="upi">📱 UPI / QR Scan</option>
                                <option value="card">💳 POS Card Swipe</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-md-8">
                <div class="card border-0 shadow-sm rounded-4">
                    <div class="card-body p-4">
                        <h6 class="fw-bold text-dark mb-3"><i class="bi bi-cart3 me-2 text-indigo-600"></i>Checkout Cart
                            Matrix</h6>

                        <div class="alert alert-warning border-0 small text-dark p-2.5 mb-4"
                            style="background-color: #fffbeb; border-radius: 8px;">
                            <i class="bi bi-info-circle-fill me-1 text-warning"></i> Select terminal point first to
                            search for available on-field stock allocations.
                        </div>

                        <div class="p-3 bg-light rounded-4 mb-3 border">
                            <div class="row g-2 align-items-end">
                                <div class="col-md-5">
                                    <label class="form-label text-xs fw-bold text-muted uppercase">PRODUCT
                                        ARTICLE</label>
                                    <select id="cart_product_selector" class="form-select" style="border-radius: 8px;"
                                        onchange="updatePriceHint()">
                                        <option value="">-- Select Product --</option>
                                    </select>
                                </div>
                                <div class="col-md-3">
                                    <label class="form-label text-xs fw-bold text-muted uppercase">RATE</label>
                                    <input type="number" id="cart_price_hint" class="form-control" readonly
                                        style="border-radius: 8px; background-color: #f1f5f9;">
                                </div>
                                <div class="col-md-2">
                                    <label class="form-label text-xs fw-bold text-muted uppercase">QTY</label>
                                    <input type="number" id="cart_qty_input" class="form-control" value="1" min="1"
                                        style="border-radius: 8px;">
                                </div>
                                <div class="col-md-2">
                                    <button type="button" class="btn btn-dark w-100 fw-bold" style="border-radius: 8px;"
                                        onclick="addItemToInvoiceList()">
                                        <i class="bi bi-plus-lg"></i> Add
                                    </button>
                                </div>
                            </div>
                            <span class="text-xs text-danger d-block mt-2 ps-1" id="stock_limit_indicator"></span>
                        </div>

                        <div class="table-responsive border rounded-3 mb-4">
                            <table class="table table-hover align-middle mb-0" id="invoice_items_table">
                                <thead class="table-light">
                                    <tr>
                                        <th class="small py-2 ps-3">Item Details</th>
                                        <th class="small py-2 text-center" style="width: 100px;">Rate</th>
                                        <th class="small py-2 text-center" style="width: 80px;">Qty</th>
                                        <th class="small py-2 text-end" style="width: 120px;">Amount</th>
                                        <th class="small py-2 text-center" style="width: 60px;"></th>
                                    </tr>
                                </thead>
                                <tbody id="invoice_items_tbody">
                                </tbody>
                            </table>
                        </div>

                        <div class="p-3 rounded-4 d-flex justify-content-between align-items-center flex-wrap gap-2"
                            style="background-color: #f1f5f9;">
                            <div>
                                <span class="text-dark small fw-bold">Aggregate Bill Total:</span>
                                <small class="text-muted d-block text-xs">All local and state luxury/handloom taxes
                                    managed automatically.</small>
                            </div>
                            <div class="text-end">
                                <span class="h4 mb-0 fw-bold text-indigo-600 d-block"
                                    id="invoice_grand_total">₹0.00</span>
                                <input type="hidden" name="final_total" id="final_total_hidden" value="0">
                            </div>
                        </div>

                        <div class="text-end mt-4 pt-2 border-top">
                            <button type="submit" class="btn btn-success px-4 fw-bold shadow-sm"
                                style="background-color: #10b981; border: none; border-radius: 8px;">
                                <i class="bi bi-check2-all me-1"></i> Clear Receipt & Settle
                            </button>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

<script>
    // 📍 CRITICAL FIX: Wrap everything inside DOMContentLoaded wrapper so elements are never null
    window.addEventListener('DOMContentLoaded', function() {

        let activeBranchProducts = [];
        let invoiceCartItems = [];

        const exhibitionSelector = document.getElementById('exhibition_id');

        if (exhibitionSelector) {
            // 📍 1. Event Listener: Jab Exhibition Location change hogi
            exhibitionSelector.addEventListener('change', function() {
                const exhibitionId = this.value;
                const productSelector = document.getElementById('cart_product_selector');

                // Reset state
                productSelector.innerHTML = '<option value="">-- Select Product --</option>';
                activeBranchProducts = [];
                resetCartForm();
                clearInvoiceTable();

                if (!exhibitionId) return;

                // Fire AJAX to fetch only allocated items for this terminal branch
                fetch('{{ url("admin/exhibitions") }}/' + exhibitionId + '/available-products')
                    .then(response => {
                        if(!response.ok) throw new Error("HTTP error " + response.status);
                        return response.json();
                    })
                    // ... fetch blocks logic
                    .then(data => {
                        activeBranchProducts = data;
                        console.log("Loaded Field Products Matrix:", data); // Check array trace in browser log

                        if(data.length === 0) {
                            productSelector.innerHTML = '<option value="">⚠️ No allocated stock found here!</option>';
                            return;
                        }

                        // Clear placeholders and fill inputs
                        productSelector.innerHTML = '<option value="">-- Select Product --</option>';
                        data.forEach(prod => {
                            let option = document.createElement('option');
                            option.value = prod.id;
                            // Explicit variable keys protection layout mapping
                            option.text = prod.name + " [" + prod.code + "] (Avail: " + prod.available_on_field + ")";
                            productSelector.appendChild(option);
                        });
                    })
                    .catch(err => {
                        console.error("Failed to parse stock metrics:", err);
                        alert("Error connecting to inventory server.");
                    });
            });
        }

        // Expose functions globally for layout onclick buttons to resolve safely
        window.updatePriceHint = function() {
            const selectedId = document.getElementById('cart_product_selector').value;
            const priceInput = document.getElementById('cart_price_hint');
            const limitHint = document.getElementById('stock_limit_indicator');

            if (!selectedId) {
                priceInput.value = '';
                limitHint.innerText = '';
                return;
            }

            const product = activeBranchProducts.find(p => p.id == selectedId);
            if (product) {
                priceInput.value = product.price;
                limitHint.className = "text-xs text-indigo-600 d-block mt-2 ps-1";
                limitHint.innerText = `🔥 Max field availability: ${product.available_on_field} units.`;
            }
        }

        window.addItemToInvoiceList = function() {
            const prodSelector = document.getElementById('cart_product_selector');
            const prodId = prodSelector.value;
            const qtyInput = document.getElementById('cart_qty_input');
            const qty = parseInt(qtyInput.value);

            if (!prodId || isNaN(qty) || qty < 1) {
                alert("Please pick a valid product article and quantity.");
                return;
            }

            const product = activeBranchProducts.find(p => p.id == prodId);
            if (!product) return;

            if (qty > product.available_on_field) {
                alert(`Insufficient field stock! Only [ ${product.available_on_field} ] units available.`);
                return;
            }

            const existingItem = invoiceCartItems.find(item => item.product_id == prodId);
            if (existingItem) {
                if ((existingItem.qty + qty) > product.available_on_field) {
                    alert(`Cannot add more! Combined cart total exceeds field limit (${product.available_on_field}).`);
                    return;
                }
                existingItem.qty += qty;
                existingItem.total_price = existingItem.qty * existingItem.unit_price;
            } else {
                invoiceCartItems.push({
                    product_id: product.id,
                    name: product.name,
                    code: product.code,
                    unit_price: parseFloat(product.price),
                    qty: qty,
                    total_price: qty * parseFloat(product.price)
                });
            }

            renderInvoiceCartTable();
            resetCartForm();
        }

        function renderInvoiceCartTable() {
            const tbody = document.getElementById('invoice_items_tbody');
            tbody.innerHTML = '';
            let grandTotal = 0;

            invoiceCartItems.forEach((item, index) => {
                grandTotal += item.total_price;

                let row = `
                    <tr>
                        <td class="ps-3">
                            <span class="fw-bold text-dark d-block small">${item.name}</span>
                            <small class="badge bg-light text-secondary border font-monospace" style="font-size:10px;">${item.code}</small>
                            <input type="hidden" name="product_ids[]" value="${item.product_id}">
                            <input type="hidden" name="quantities[]" value="${item.qty}">
                            <input type="hidden" name="rates[]" value="${item.unit_price}">
                        </td>
                        <td class="text-center font-monospace small">₹${item.unit_price.toFixed(2)}</td>
                        <td class="text-center fw-bold text-dark small">${item.qty}</td>
                        <td class="text-end fw-bold font-monospace text-dark">₹${item.total_price.toFixed(2)}</td>
                        <td class="text-center">
                            <button type="button" class="btn btn-sm btn-link text-danger p-0" onclick="removeItemFromInvoice(${index})">
                                <i class="bi bi-trash3-fill"></i>
                            </button>
                        </td>
                    </tr>
                `;
                tbody.insertAdjacentHTML('beforeend', row);
            });

            document.getElementById('invoice_grand_total').innerText = '₹' + grandTotal.toLocaleString('en-IN', { minimumFractionDigits: 2 });
            document.getElementById('final_total_hidden').value = grandTotal;
        }

        window.removeItemFromInvoice = function(index) {
            invoiceCartItems.splice(index, 1);
            renderInvoiceCartTable();
        }

        function resetCartForm() {
            document.getElementById('cart_product_selector').value = '';
            document.getElementById('cart_price_hint').value = '';
            document.getElementById('cart_qty_input').value = '1';
            document.getElementById('stock_limit_indicator').innerText = '';
        }

        function clearInvoiceTable() {
            invoiceCartItems = [];
            document.getElementById('invoice_items_tbody').innerHTML = '';
            document.getElementById('invoice_grand_total').innerText = '₹0.00';
            document.getElementById('final_total_hidden').value = 0;
        }
        // ⚡ PHASE 4: Core Barcode Reader Scanner Keyboard Event Hook
document.addEventListener('DOMContentLoaded', function () {
    let barcodeBuffer = "";
    let lastKeyTime = Date.now();

    document.addEventListener('keypress', function (e) {
        const currentTime = Date.now();

        // Barcode scanners fast type karte hain (usually < 30ms per character)
        if (currentTime - lastKeyTime > 50) {
            barcodeBuffer = ""; // Reset if manually typed slowly
        }

        lastKeyTime = currentTime;

        // Agar enter hit hua, matlab barcode read completely stream ho chuka hai
        if (e.key === 'Enter') {
            if (barcodeBuffer.length > 3) {
                e.preventDefault(); // Stop form auto-submission loop
                fetchProductByBarcode(barcodeBuffer);
                barcodeBuffer = ""; // Flush buffer cache
            }
        } else if (e.key !== 'Shift') {
            barcodeBuffer += e.key;
        }
    });

    // Function to automatically query and add scanned item to counter POS cart
    function fetchProductByBarcode(code) {
        const exhibitionId = document.getElementById('exhibition_id').value;
        if (!exhibitionId) {
            alert("📍 Please select the Exhibition Counter node first before scanning items!");
            return;
        }

        console.log("Scanning item code matrix token: " + code);

        // Match the scanned code directly inside the product select dropdown of the cart
        let productFound = false;

        // Aapke template dropdown lines check match pattern loop
        document.querySelectorAll('#product_dropdown option').forEach(option => {
            let optionCode = option.getAttribute('data-code') || option.text;
            if (optionCode.includes(code) || option.value == code) {
                option.selected = true;
                productFound = true;
                // Trigger your existing cart add function here (e.g., addToCart())
                if (typeof window.addProductToCart === "function") {
                    window.addProductToCart();
                } else {
                    alert("Scanned: " + option.text + " successfully matched! Click add to cart.");
                }
            }
        });

        if (!productFound) {
            alert("⚠️ Barcode product code '" + code + "' not found or not allocated to this specific counter stock layout!");
        }
    }
});
    });
</script>