{% extends "base.html" %}

{% block content %}
<style>
  .pos-title{font-weight:700;color:#111827;margin:0}
  .pos-card{background:#fff;border:1px solid #e9eef7;border-radius:16px;padding:18px;box-shadow:0 4px 14px rgba(15,23,42,.04)}
  .pos-card + .pos-card{margin-top:16px}
  .pos-card h6{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:#64748b;text-transform:uppercase;margin-bottom:12px}

  .search-wrap{position:relative}
  #result{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 10px 30px rgba(15,23,42,.12);max-height:280px;overflow-y:auto;z-index:50}
  #result:empty{display:none}
  .p-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-size:14px;border-bottom:1px solid #f1f5f9;gap:10px}
  .p-item:last-child{border-bottom:none}
  .p-item:hover{background:#eef2ff}
  .p-item .p-price{font-weight:700;color:#1d4ed8}
  .p-item-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
  .p-stock{font-size:11px;font-weight:600;color:#16a34a}
  .p-stock-out{color:#dc2626}
  .p-item-disabled{cursor:not-allowed;opacity:.55}
  .p-item-disabled:hover{background:transparent}

  .cart-table{width:100%;font-size:14px}
  .cart-table thead th{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:#64748b;font-weight:700;border-bottom:1px solid #eef0f4;padding:8px 6px}
  .cart-table tbody td{padding:8px 6px;vertical-align:middle;border-bottom:1px solid #f4f6f9}
  .cart-table input[type=number]{padding:4px 8px;font-size:13px}
  .cart-empty{text-align:center;color:#94a3b8;padding:32px 10px;font-size:14px}
  .qty-stock-hint{font-size:11px;color:#94a3b8;margin-top:2px}
  .qty-stock-hint.over{color:#dc2626;font-weight:600}
  tr.row-over-stock{background:#fef2f2}
  .cart-table input.is-invalid{border-color:#dc2626;background:#fef2f2}

  .stock-warning{display:none;align-items:center;gap:8px;background:#fee2e2;color:#991b1b;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:600;margin-bottom:12px}

  .summary-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:14.5px;color:#334155}
  .summary-row.total{font-size:1.2rem;font-weight:750;color:#172554;border-top:1px dashed #e2e8f0;margin-top:6px;padding-top:12px}

  .change-box{border-radius:12px;padding:14px 16px;margin-top:6px;display:none;align-items:center;justify-content:space-between;gap:10px}
  .change-box.show{display:flex}
  .change-box .cb-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;opacity:.85}
  .change-box .cb-amount{font-size:1.25rem;font-weight:750}
  .change-box.positive{background:#dcfce7;color:#166534}
  .change-box.negative{background:#fee2e2;color:#991b1b}

  .summary-sticky{position:sticky;top:70px}

  @media (max-width:991px){ .summary-sticky{position:static} }
</style>

<div class="container-fluid py-3">

  <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
    <h3 class="pos-title"><i class="bi bi-cart-check text-primary me-2"></i>{{ l('POS Sell', 'বিক্রয় স্ক্রিন') }}</h3>
    <a href="/held-sales" class="btn btn-outline-secondary btn-sm"><i class="bi bi-pause-circle me-1"></i>{{ l('Held Sales', 'হোল্ড সেল') }}</a>
  </div>

  <div class="row g-3">

    <!-- LEFT: customer / product search + cart -->
    <div class="col-lg-8">

      <div class="pos-card">
        <div class="row g-3">
          <div class="col-md-6">
            <div class="d-flex align-items-center justify-content-between mb-1">
              <h6 class="mb-0">{{ l('Customer', 'গ্রাহক') }}</h6>
              <button type="button" class="btn btn-sm btn-outline-primary py-0 px-2" style="font-size:12px;" data-bs-toggle="modal" data-bs-target="#quickCustomerModal">
                <i class="bi bi-person-plus-fill me-1"></i>+ {{ l('New', 'নতুন') }}
              </button>
            </div>
            <input type="text" id="customerSearch" class="form-control mb-2" placeholder="{{ l('Search by name or phone...', 'নাম বা ফোন দিয়ে খুঁজুন...') }}" autocomplete="off">
            <select class="form-select" id="customer" onchange="onCustomerSelect()">
              <option value="" data-search="" data-points="0" data-advance="0">{{ l('Walk-in Customer', 'সরাসরি গ্রাহক') }}</option>
              {% for c in customers %}
              <option value="{{ c.id }}" data-search="{{ c.name }} {{ c.phone or '' }}" data-points="{{ c.loyalty_points|default(0) }}" data-advance="{{ c.advance_balance|default(0) }}">{{ c.name }}{% if c.phone %} - {{ c.phone }}{% endif %}</option>
              {% endfor %}
            </select>
            <div id="loyaltyInfoBox" class="mt-2 small text-muted d-none" style="background:#f8fafc; padding:6px 10px; border-radius:8px; border:1px solid #e2e8f0;">
              <div class="d-flex justify-content-between align-items-center">
                <span><i class="bi bi-star-fill text-warning me-1"></i>{{ l('Points', 'পয়েন্ট') }}: <strong id="customerPoints">0</strong></span>
                <span class="text-secondary"><i class="bi bi-wallet2 me-1"></i>{{ l('Advance', 'অগ্রিম') }}: ৳<strong id="customerAdvance">0.00</strong></span>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="d-flex align-items-center justify-content-between mb-1">
              <h6 class="mb-0">{{ l('Add product', 'পণ্য যোগ করুন') }}</h6>
            </div>
            <div class="search-wrap">
              <div class="input-group">
                <input id="search" class="form-control" placeholder="{{ l('Scan barcode or type product name...', 'বারকোড স্ক্যান করুন বা পণ্যের নাম লিখুন...') }}" autocomplete="off">
                <button type="button" class="btn btn-primary fw-semibold px-3" onclick="openCameraScanner()" title="{{ l('Scan with Camera', 'ক্যামেরা দিয়ে স্ক্যান করুন') }}">
                  <i class="bi bi-camera-fill me-1"></i> {{ l('Scan', 'স্ক্যান') }}
                </button>
              </div>
              <div id="result"></div>
            </div>
          </div>
        </div>
      </div>

      <div class="pos-card">
        <h6 class="mb-2">{{ l('Cart', 'কার্ট') }}</h6>
        <div id="stockWarning" class="stock-warning">
          <i class="bi bi-exclamation-triangle-fill"></i>
          {{ l('Some items exceed available stock — reduce the quantity to continue.', 'কিছু পণ্যের পরিমাণ স্টকের চেয়ে বেশি — চালিয়ে যেতে পরিমাণ কমান।') }}
        </div>
        <div class="table-responsive">
          <table class="cart-table">
            <thead>
              <tr>
                <th>{{ l('Product', 'পণ্য') }}</th>
                <th>{{ l('Qty', 'পরিমাণ') }}</th>
                <th>{{ l('Price', 'দাম') }}</th>
                <th>{{ l('Total', 'মোট') }}</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="cart"></tbody>
          </table>
          <div id="cartEmpty" class="cart-empty"><i class="bi bi-cart-x fs-2 d-block mb-1"></i>{{ l('Cart is empty — search a product above to add it.', 'কার্ট খালি — উপরে পণ্য খুঁজে যোগ করুন।') }}</div>
        </div>
      </div>

    </div>

    <!-- RIGHT: order summary / payment -->
    <div class="col-lg-4">
      <div class="pos-card summary-sticky">
        <h6>{{ l('Order summary', 'অর্ডার সারাংশ') }}</h6>

        <div class="summary-row"><span>{{ l('Subtotal', 'সাবটোটাল') }}</span><span>৳ <span id="subtotal">0.00</span></span></div>
        <div class="summary-row"><span>{{ l('Discount', 'ছাড়') }}</span><span>- ৳ <span id="discountShown">0.00</span></span></div>
        <div class="summary-row total"><span>{{ l('Total', 'সর্বমোট') }}</span><span>৳ <span id="grand">0.00</span></span></div>

        <div class="row g-2 mt-2">
          <div class="col-8">
            <input class="form-control form-control-sm" id="coupon_code_input" placeholder="{{ l('Coupon code', 'কুপন কোড') }}">
          </div>
          <div class="col-4 d-grid">
            <button type="button" class="btn btn-outline-primary btn-sm" onclick="applyCoupon()">{{ l('Apply', 'প্রয়োগ') }}</button>
          </div>
        </div>

        <div class="mt-2">
          <label class="form-label small fw-semibold text-muted mb-1">{{ l('Direct Discount', 'সরাসরি ছাড়') }}</label>
          <div class="input-group input-group-sm">
            <input type="number" step="0.01" min="0" id="manual_discount_input" class="form-control" placeholder="0.00" oninput="renderCart()">
            <select id="discount_type_select" class="form-select" style="max-width:95px;" onchange="renderCart()">
              <option value="flat">৳ Flat</option>
              <option value="percent">% Percent</option>
            </select>
          </div>
        </div>

        <div class="form-check mt-2" id="loyaltyRedeemWrap">
          <input class="form-check-input" type="checkbox" id="use_loyalty" onchange="renderCart()">
          <label class="form-check-label small" for="use_loyalty" id="loyaltyLabel">
            {{ l('Redeem Loyalty Points (1 Pt = ৳1)', 'লয়্যালটি পয়েন্ট ব্যবহার করুন (১ পয়েন্ট = ৳১)') }}
          </label>
          <div id="loyaltyNotice" class="text-danger small mt-1" style="font-size:11px; display:none;">
            <i class="bi bi-exclamation-circle me-1"></i>{{ l('Min 100 points required to redeem.', 'পয়েন্ট ভাঙাতে অন্তত ১০০ পয়েন্ট প্রয়োজন।') }}
          </div>
        </div>

        <hr class="my-3">

        <div class="mb-2">
          <label class="form-label small fw-semibold text-muted mb-1">{{ l('Payment method', 'পেমেন্ট মাধ্যম') }}</label>
          <select class="form-select form-select-sm" id="payment_method">
            <option>Cash</option>
            <option>bKash</option>
            <option>Nagad</option>
            <option>Card</option>
            <option>Bank</option>
          </select>
        </div>

        <div class="mb-2">
          <label class="form-label small fw-semibold text-muted mb-1">{{ l('Amount received from customer', 'গ্রাহকের কাছ থেকে পাওয়া টাকা') }}</label>
          <input class="form-control" id="paid_amount" type="number" step="0.01" min="0" placeholder="{{ l('Leave blank to mark as fully paid', 'পুরো টাকা হলে ফাঁকা রাখুন') }}" oninput="updateChangeDisplay()">
        </div>

        <div id="changeBox" class="change-box">
          <span class="cb-label" id="changeLabel"></span>
          <span class="cb-amount">৳ <span id="changeAmount">0.00</span></span>
        </div>

        <div class="form-check mt-3">
          <input class="form-check-input" type="checkbox" id="use_advance" onchange="updateChangeDisplay()">
          <label class="form-check-label small" for="use_advance">{{ l('Use customer advance balance', 'গ্রাহকের অগ্রিম ব্যালেন্স ব্যবহার করুন') }}</label>
        </div>

        <form method="POST" action="/create-invoice" onsubmit="return prepareInvoice()" class="mt-3">
          <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
          <input type="hidden" id="cart_data" name="cart_data">
          <input type="hidden" id="customer_id" name="customer_id">
          <input type="hidden" id="coupon_code" name="coupon_code">
          <input type="hidden" id="manual_discount" name="manual_discount">
          <input type="hidden" id="discount_type" name="discount_type">
          <input type="hidden" id="use_loyalty_hidden" name="use_loyalty">
          <input type="hidden" id="payment_method_hidden" name="payment_method">
          <input type="hidden" id="paid_amount_hidden" name="paid_amount">
          <input type="hidden" id="use_advance_hidden" name="use_advance">
          <button id="invoiceBtn" type="submit" class="btn btn-success w-100 py-2 fw-semibold"><i class="bi bi-receipt me-1"></i>{{ l('Generate Invoice', 'ইনভয়েস তৈরি করুন') }}</button>
        </form>

        <form method="POST" action="/hold-sale" onsubmit="return prepareHold()" class="mt-2">
    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
          <input type="hidden" id="hold_cart_data" name="cart_data">
          <input type="hidden" id="hold_customer_id" name="customer_id">
          <input class="form-control form-control-sm mb-2" id="hold_note" name="note" placeholder="{{ l('Hold note (optional)', 'নোট (ঐচ্ছিক)') }}">
          <button class="btn btn-outline-warning w-100"><i class="bi bi-pause-circle me-1"></i>{{ l('Hold Sale', 'সেল হোল্ড করুন') }}</button>
        </form>

      </div>
    </div>

  </div>
</div>


<script>

let cart = [];
let currentDiscount = 0;
let currentCouponCode = "";

// CUSTOMER SEARCH (Name or Phone)
document.getElementById("customerSearch").addEventListener("input", function () {
    let search = this.value.trim().toLowerCase();
    let select = document.getElementById("customer");
    let options = select.querySelectorAll("option");
    let matchCount = 0;
    let firstMatchVal = null;

    options.forEach(function (option) {
        let text = option.textContent.toLowerCase();
        let data = (option.getAttribute("data-search") || "").toLowerCase();
        if (!search || option.value === "") {
            option.hidden = false;
            option.disabled = false;
            option.style.display = "";
        } else {
            let isMatch = text.includes(search) || data.includes(search);
            option.hidden = !isMatch;
            option.disabled = !isMatch;
            option.style.display = isMatch ? "" : "none";
            if (isMatch && option.value !== "") {
                matchCount++;
                if (!firstMatchVal) firstMatchVal = option.value;
            }
        }
    });

    if (search && firstMatchVal) {
        select.value = firstMatchVal;
        onCustomerSelect();
    } else if (!search) {
        select.value = "";
        onCustomerSelect();
    }
});

// ADD PRODUCT TO CART (stock-aware)
function addProduct(p) {
    let stock = (p.stock === null || p.stock === undefined) ? Infinity : Number(p.stock);
    let existing = cart.find(item => item.id === p.id);

    if (existing) {
        if (existing.qty + 1 > stock) {
            alert("{{ l('Only', 'শুধু') }} " + stock + " {{ l('in stock for', 'টি স্টকে আছে') }} \"" + p.name + "\". {{ l('You already have the max in your cart.', 'কার্টে ইতিমধ্যে সর্বোচ্চ পরিমাণ আছে।') }}");
            return;
        }
        existing.qty += 1;
    } else {
        if (stock <= 0) {
            alert("\"" + p.name + "\" {{ l('is out of stock.', 'স্টকে নেই।') }}");
            return;
        }
        cart.push({ id: p.id, name: p.name, qty: 1, price: p.price, stock: stock });
    }
    renderCart();
    document.getElementById("search").value = "";
    document.getElementById("result").innerHTML = "";
}

// DISPLAY CART
function renderCart() {
    let html = "";
    let subtotal = 0;

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

        let stockKnown = item.stock !== undefined && item.stock !== null && isFinite(item.stock);
        let overLimit = stockKnown && item.qty > item.stock;
        let stockHint = stockKnown
            ? `<div class="qty-stock-hint ${overLimit ? 'over' : ''}">${overLimit ? "{{ l('Only', 'শুধু') }} " + item.stock + " {{ l('available!', 'আছে!') }}" : "{{ l('In stock', 'স্টকে আছে') }}: " + item.stock}</div>`
            : "";

        html += `
        <tr class="${overLimit ? 'row-over-stock' : ''}">
            <td class="fw-semibold">${item.name}</td>
            <td>
                <input type="number" step="0.01" min="0.01" ${stockKnown ? `max="${item.stock}"` : ""} value="${Number(item.qty).toFixed(2)}"
                     onchange="updateQty(${index},this.value)" class="form-control ${overLimit ? 'is-invalid' : ''}" style="width:75px">
                ${stockHint}
            </td>
            <td><input type="number" value="${Number(item.price).toFixed(2)}"
                 onchange="updatePrice(${index},this.value)" class="form-control" style="width:95px"></td>
            <td class="fw-semibold">${total.toFixed(2)}</td>
            <td><button type="button" class="btn btn-outline-danger btn-sm" onclick="removeItem(${index})"><i class="bi bi-trash"></i></button></td>
        </tr>`;
    });

    document.getElementById("cart").innerHTML = html;
    document.getElementById("cartEmpty").style.display = cart.length === 0 ? "block" : "none";

    let totalDiscount = currentDiscount; // Coupon discount

    // Manual direct discount
    let manualVal = parseFloat(document.getElementById("manual_discount_input").value) || 0;
    let discType = document.getElementById("discount_type_select").value;
    if (manualVal > 0) {
        if (discType === "percent") {
            totalDiscount += (subtotal * (manualVal / 100.0));
        } else {
            totalDiscount += manualVal;
        }
    }

    // Loyalty points redemption (Min 100 points rule)
    let select = document.getElementById("customer");
    let selectedOption = select.options[select.selectedIndex];
    let points = parseFloat(selectedOption ? selectedOption.getAttribute("data-points") : 0) || 0;
    let useLoyalty = document.getElementById("use_loyalty");

    if (useLoyalty.checked && points >= 100) {
        let currentGrand = Math.max(subtotal - totalDiscount, 0);
        let redeemAmount = Math.min(points, currentGrand);
        totalDiscount += redeemAmount;
    }

    let finalGrand = Math.max(subtotal - totalDiscount, 0);

    document.getElementById("subtotal").innerHTML = subtotal.toFixed(2);
    document.getElementById("discountShown").innerHTML = totalDiscount.toFixed(2);
    document.getElementById("grand").innerHTML = finalGrand.toFixed(2);

    let anyOverStock = cart.some(item => item.stock !== undefined && item.stock !== null && isFinite(item.stock) && item.qty > item.stock);
    document.getElementById("stockWarning").style.display = anyOverStock ? "flex" : "none";
    document.getElementById("invoiceBtn").disabled = anyOverStock;

    updateChangeDisplay();
}

function onCustomerSelect() {
    let select = document.getElementById("customer");
    let selectedOption = select.options[select.selectedIndex];
    let points = parseFloat(selectedOption ? selectedOption.getAttribute("data-points") : 0) || 0;
    let advance = parseFloat(selectedOption ? selectedOption.getAttribute("data-advance") : 0) || 0;

    let infoBox = document.getElementById("loyaltyInfoBox");
    let pointsEl = document.getElementById("customerPoints");
    let advanceEl = document.getElementById("customerAdvance");

    if (select.value) {
        infoBox.classList.remove("d-none");
        pointsEl.textContent = points;
        advanceEl.textContent = advance.toFixed(2);
    } else {
        infoBox.classList.add("d-none");
    }

    let useLoyalty = document.getElementById("use_loyalty");
    let loyaltyNotice = document.getElementById("loyaltyNotice");
    if (points < 100) {
        useLoyalty.checked = false;
        useLoyalty.disabled = true;
        loyaltyNotice.style.display = select.value ? "block" : "none";
    } else {
        useLoyalty.disabled = false;
        loyaltyNotice.style.display = "none";
    }

    renderCart();
}

// UPDATE QUANTITY (capped at available stock)
function updateQty(index, value) {
    value = parseFloat(value);
    if (isNaN(value) || value <= 0) value = 1;

    let item = cart[index];
    let stockKnown = item.stock !== undefined && item.stock !== null && isFinite(item.stock);

    if (stockKnown && value > item.stock) {
        alert("{{ l('Only', 'শুধু') }} " + item.stock + " {{ l('in stock for', 'টি স্টকে আছে') }} \"" + item.name + "\".");
        value = item.stock;
    }

    item.qty = value;
    renderCart();
}

// UPDATE SELL PRICE
function updatePrice(index, value) {
    value = parseFloat(value);
    if (value < 0) value = 0;
    cart[index].price = value;
    renderCart();
}

// REMOVE PRODUCT
function removeItem(index) {
    cart.splice(index, 1);
    renderCart();
}

// PRODUCT SEARCH
document.getElementById("search").addEventListener("keyup", function () {
    let q = this.value;
    if (q.length < 2) {
        document.getElementById("result").innerHTML = "";
        return;
    }
    fetch("/search-product?q=" + q)
        .then(res => res.json())
        .then(data => {
            let html = "";
            data.forEach(p => {
                let stock = (p.stock === null || p.stock === undefined) ? null : Number(p.stock);
                let outOfStock = stock !== null && stock <= 0;
                let stockText = stock === null ? "" : (outOfStock ? "{{ l('Out of stock', 'স্টক নেই') }}" : "{{ l('Stock', 'স্টক') }}: " + stock);
                html += `<div onclick='${outOfStock ? '' : `addProduct(${JSON.stringify(p)})`}' class="p-item ${outOfStock ? 'p-item-disabled' : ''}">
                    <span>${p.name}</span>
                    <span class="p-item-right">
                        <span class="p-price">৳ ${p.price}</span>
                        ${stockText ? `<span class="p-stock ${outOfStock ? 'p-stock-out' : ''}">${stockText}</span>` : ""}
                    </span>
                </div>`;
            });
            document.getElementById("result").innerHTML = html;
        });
});

function applyCoupon() {
    let code = document.getElementById("coupon_code_input").value.trim().toUpperCase();
    if (!code) {
        currentDiscount = 0;
        currentCouponCode = "";
        renderCart();
        return;
    }
    let subtotal = parseFloat(document.getElementById("subtotal").innerHTML) || 0;
    fetch(`/api/validate-coupon?code=${encodeURIComponent(code)}&subtotal=${subtotal}`)
        .then(res => res.json())
        .then(data => {
            if (data.valid) {
                currentDiscount = data.discount;
                currentCouponCode = code;
                alert("Coupon applied! Discount: ৳" + data.discount);
            } else {
                currentDiscount = 0;
                currentCouponCode = "";
                alert(data.message || "Invalid coupon");
            }
            renderCart();
        });
}

// LIVE CHANGE / DUE CALCULATION
function updateChangeDisplay() {
    let grandTotal = parseFloat(document.getElementById("grand").innerHTML) || 0;
    let paidInput = document.getElementById("paid_amount").value;
    let box = document.getElementById("changeBox");
    let label = document.getElementById("changeLabel");
    let amountEl = document.getElementById("changeAmount");

    if (paidInput === "" || paidInput === null) {
        box.classList.remove("show", "positive", "negative");
        return;
    }

    let paid = parseFloat(paidInput);
    if (isNaN(paid)) {
        box.classList.remove("show", "positive", "negative");
        return;
    }

    let diff = paid - grandTotal;

    box.classList.add("show");
    if (diff >= 0) {
        box.classList.add("positive");
        box.classList.remove("negative");
        label.textContent = "{{ l('Change to return', 'ফেরত দিতে হবে') }}";
        amountEl.textContent = diff.toFixed(2);
    } else {
        box.classList.add("negative");
        box.classList.remove("positive");
        label.textContent = "{{ l('Remaining due from customer', 'গ্রাহকের কাছে বাকি থাকবে') }}";
        amountEl.textContent = Math.abs(diff).toFixed(2);
    }
}

// SEND CART TO SERVER (INVOICE)
function prepareInvoice() {
    if (!cart || cart.length === 0) {
        alert("{{ l('Cart is empty. Please add products first.', 'কার্ট খালি। অনুগ্রহ করে প্রথমে পণ্য যোগ করুন।') }}");
        return false;
    }
    let overStockItem = cart.find(item => item.stock !== undefined && item.stock !== null && isFinite(item.stock) && item.qty > item.stock);
    if (overStockItem) {
        alert("\"" + overStockItem.name + "\" {{ l('only has', 'এ শুধু আছে') }} " + overStockItem.stock + " {{ l('in stock. Please reduce the quantity.', 'স্টকে। পরিমাণ কমান।') }}");
        return false;
    }
    document.getElementById("cart_data").value = JSON.stringify(cart);
    document.getElementById("customer_id").value = document.getElementById("customer").value || "";
    document.getElementById("coupon_code").value = currentCouponCode || "";
    document.getElementById("manual_discount").value = document.getElementById("manual_discount_input").value || "0";
    document.getElementById("discount_type").value = document.getElementById("discount_type_select").value || "flat";
    document.getElementById("use_loyalty_hidden").value = document.getElementById("use_loyalty").checked ? "on" : "";
    document.getElementById("payment_method_hidden").value = document.getElementById("payment_method").value || "Cash";
    document.getElementById("paid_amount_hidden").value = document.getElementById("paid_amount").value || "";
    document.getElementById("use_advance_hidden").value = document.getElementById("use_advance").checked ? "on" : "";

    let btn = document.getElementById("invoiceBtn");
    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-1"></span> {{ l("Creating Invoice...", "ইনভয়েস তৈরি হচ্ছে...") }}';
    }
    return true;
}

// QUICK ADD CUSTOMER AJAX SUBMIT
function submitQuickCustomer(e) {
    e.preventDefault();
    let name = document.getElementById("q_name").value.trim();
    let phone = document.getElementById("q_phone").value.trim();
    let address = document.getElementById("q_address").value.trim();

    let formData = new FormData();
    formData.append("name", name);
    formData.append("phone", phone);
    formData.append("address", address);
    formData.append("_csrf_token", "{{ csrf_token }}");

    fetch("/quick-add-customer", {
        method: "POST",
        body: formData
    })
    .then(res => res.json())
    .then(data => {
        if (data.success) {
            let cust = data.customer || data;
            let custId = cust.id || data.id;
            let custName = cust.name || data.name || "Customer";
            let custPhone = cust.phone || data.phone || "";
            let custPoints = cust.loyalty_points !== undefined ? cust.loyalty_points : (data.loyalty_points || 0);
            let custAdvance = cust.advance_balance !== undefined ? cust.advance_balance : (data.advance_balance || 0);

            let select = document.getElementById("customer");
            let option = document.createElement("option");
            option.value = custId;
            option.textContent = custName + (custPhone ? " - " + custPhone : "");
            option.setAttribute("data-search", (custName + " " + custPhone).toLowerCase());
            option.setAttribute("data-points", custPoints);
            option.setAttribute("data-advance", custAdvance);
            select.appendChild(option);
            select.value = custId;

            let modalEl = document.getElementById("quickCustomerModal");
            let modal = bootstrap.Modal.getOrCreateInstance(modalEl);
            if (modal) modal.hide();
            document.getElementById("quickCustomerForm").reset();

            onCustomerSelect();
            alert("{{ l('Customer added successfully!', 'কাস্টমার সফলভাবে যুক্ত হয়েছে!') }}");
        } else {
            alert(data.message || "Failed to add customer.");
        }
    })
    .catch(err => {
        alert("Error adding customer: " + err);
    });
}

// SEND CART TO SERVER (HOLD SALE)
function prepareHold() {
    if (!cart || cart.length === 0) {
        alert("{{ l('Cart is empty, nothing to hold.', 'কার্ট খালি, হোল্ড করার মতো কিছু নেই।') }}");
        return false;
    }
    document.getElementById("hold_cart_data").value = JSON.stringify(cart);
    document.getElementById("hold_customer_id").value = document.getElementById("customer").value || "";
    return true;
}

// RESUME A HELD SALE (if this page was loaded from /resume-hold/<id>)
(function loadResumeCart() {
    try {
        let resumeCart = JSON.parse({{ (resume_cart or '[]') | tojson | safe }});
        if (resumeCart && resumeCart.length > 0) {
            cart = resumeCart;
            renderCart();
        }
        let resumeCustomer = "{{ resume_customer or '' }}";
        if (resumeCustomer) {
            document.getElementById("customer").value = resumeCustomer;
            onCustomerSelect();
        }
    } catch (e) {
        console.warn("No held sale to resume.");
    }
})();

renderCart();

</script>

<!-- QUICK ADD CUSTOMER MODAL -->
<div class="modal fade" id="quickCustomerModal" tabindex="-1" aria-labelledby="quickCustomerModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="quickCustomerModalLabel"><i class="bi bi-person-plus text-primary me-2"></i>{{ l('Quick Add Customer', 'দ্রুত কাস্টমার যুক্ত করুন') }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="quickCustomerForm" onsubmit="submitQuickCustomer(event)">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label fw-semibold">{{ l('Customer Name', 'গ্রাহকের নাম') }} *</label>
            <input type="text" class="form-control" id="q_name" required placeholder="{{ l('e.g. Rahim Uddin', 'যেমন: রহিম উদ্দিন') }}">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">{{ l('Phone Number', 'ফোন নম্বর') }}</label>
            <input type="text" class="form-control" id="q_phone" placeholder="017xxxxxxxx">
          </div>
          <div class="mb-3">
            <label class="form-label fw-semibold">{{ l('Address', 'ঠিকানা') }}</label>
            <input type="text" class="form-control" id="q_address" placeholder="{{ l('Address', 'ঠিকানা') }}">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ l('Cancel', 'বাতিল') }}</button>
          <button type="submit" class="btn btn-primary"><i class="bi bi-check-circle me-1"></i>{{ l('Save & Select', 'সংরক্ষণ ও নির্বাচন') }}</button>
        </div>
      </form>
    </div>
  </div>
<!-- CAMERA BARCODE SCANNER MODAL -->
<div class="modal fade" id="cameraScannerModal" tabindex="-1" aria-labelledby="cameraScannerModalLabel" aria-hidden="true" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded-4 border-0 shadow-lg overflow-hidden">
      <div class="modal-header bg-dark text-white py-3 px-4">
        <h5 class="modal-title fs-6 fw-bold" id="cameraScannerModalLabel">
          <i class="bi bi-camera-video-fill text-primary me-2"></i>{{ l('Live Camera Barcode Scanner', 'লাইভ ক্যামেরা বারকোড স্ক্যানার') }}
        </h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close" onclick="stopCameraScanner()"></button>
      </div>
      <div class="modal-body p-3 bg-light text-center">
        <div id="scannerNotification" class="alert alert-success py-2 mb-2 d-none fw-bold small"></div>
        <div id="cameraReaderContainer" style="width:100%; min-height:280px; max-height:350px; background:#000; border-radius:12px; overflow:hidden; position:relative;">
          <div id="cameraReader" style="width:100%;"></div>
        </div>
        <p class="text-muted small mt-2 mb-0">
          <i class="bi bi-info-circle me-1"></i>{{ l('Align product barcode inside the camera box to scan automatically.', 'পণ্যের বারকোডটি ক্যামেরার সামনে ধরুন, স্বয়ংক্রিয়ভাবে কার্টে যোগ হবে।') }}
        </p>
      </div>
      <div class="modal-footer bg-white py-2 px-3 justify-content-between">
        <button type="button" class="btn btn-outline-secondary btn-sm" id="btnSwitchCamera" onclick="switchCamera()">
          <i class="bi bi-arrow-repeat me-1"></i>{{ l('Flip Camera', 'ক্যামেরা পরিবর্তন') }}
        </button>
        <button type="button" class="btn btn-primary btn-sm px-4 fw-bold" data-bs-dismiss="modal" onclick="stopCameraScanner()">
          <i class="bi bi-check-lg me-1"></i>{{ l('Done / Close', 'সম্পন্ন') }}
        </button>
      </div>
    </div>
  </div>
</div>

<script src="{{ url_for('static', filename='js/html5-qrcode.min.js') }}"></script>
<script>
let html5QrCode = null;
let currentFacingMode = "environment"; // Rear camera by default
let isScanningActive = false;
let lastScannedCode = "";
let lastScannedTime = 0;

// Synthesized Audio Beep for Scan Feedback (100% Offline via Web Audio API)
function playScanBeep() {
    try {
        const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
        const osc = audioCtx.createOscillator();
        const gain = audioCtx.createGain();
        osc.type = "sine";
        osc.frequency.setValueAtTime(1000, audioCtx.currentTime); // 1000 Hz beep
        gain.gain.setValueAtTime(0.3, audioCtx.currentTime);
        gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + 0.12);
        osc.connect(gain);
        gain.connect(audioCtx.destination);
        osc.start();
        osc.stop(audioCtx.currentTime + 0.12);
    } catch (e) {
        console.warn("Audio Context beep unavailable:", e);
    }
}

function showScannerToast(msg, isError = false) {
    const el = document.getElementById("scannerNotification");
    if (!el) return;
    el.className = isError ? "alert alert-danger py-2 mb-2 fw-bold small" : "alert alert-success py-2 mb-2 fw-bold small";
    el.innerHTML = (isError ? '<i class="bi bi-exclamation-circle me-1"></i>' : '<i class="bi bi-check-circle-fill me-1"></i>') + msg;
    el.classList.remove("d-none");
    setTimeout(() => {
        if (el) el.classList.add("d-none");
    }, 2500);
}

function openCameraScanner() {
    const modalEl = document.getElementById('cameraScannerModal');
    const modal = bootstrap.Modal.getOrCreateInstance(modalEl);
    modal.show();
    setTimeout(startCameraScanner, 300);
}

function startCameraScanner() {
    if (isScanningActive) return;
    if (typeof Html5Qrcode === "undefined") {
        alert("Camera scanner library loading... please try again in a moment.");
        return;
    }

    if (!html5QrCode) {
        html5QrCode = new Html5Qrcode("cameraReader");
    }

    const config = {
        fps: 15,
        qrbox: { width: 260, height: 180 },
        aspectRatio: 1.333334
    };

    html5QrCode.start(
        { facingMode: currentFacingMode },
        config,
        onBarcodeScanSuccess,
        onBarcodeScanFailure
    ).then(() => {
        isScanningActive = true;
    }).catch(err => {
        console.error("Camera start error:", err);
        showScannerToast("{{ l('Camera permission denied or camera not found.', 'ক্যামেরা চালু করতে সমস্যা হয়েছে। অনুগ্রহ করে ক্যামেরার অনুমতি দিন।') }}", true);
    });
}

function stopCameraScanner() {
    if (html5QrCode && isScanningActive) {
        html5QrCode.stop().then(() => {
            isScanningActive = false;
        }).catch(err => {
            console.warn("Camera stop warning:", err);
            isScanningActive = false;
        });
    }
}

function switchCamera() {
    currentFacingMode = currentFacingMode === "environment" ? "user" : "environment";
    if (html5QrCode && isScanningActive) {
        html5QrCode.stop().then(() => {
            isScanningActive = false;
            startCameraScanner();
        });
    }
}

function onBarcodeScanSuccess(decodedText, decodedResult) {
    const now = Date.now();
    // Debounce duplicate scans within 1.5 seconds
    if (decodedText === lastScannedCode && (now - lastScannedTime) < 1500) {
        return;
    }
    lastScannedCode = decodedText;
    lastScannedTime = now;

    playScanBeep();

    // Query backend for product matching this barcode/SKU/name
    fetch("/search-product?q=" + encodeURIComponent(decodedText.trim()))
        .then(res => res.json())
        .then(data => {
            if (data && data.length > 0) {
                const product = data[0];
                const stock = (product.stock === null || product.stock === undefined) ? null : Number(product.stock);
                if (stock !== null && stock <= 0) {
                    showScannerToast(`"${product.name}" {{ l('is out of stock!', 'স্টকে নেই!') }}`, true);
                } else {
                    addProduct(product);
                    showScannerToast(`{{ l('Added', 'যোগ করা হয়েছে') }}: <strong>${product.name}</strong> (৳${product.price})`);
                }
            } else {
                showScannerToast(`{{ l('Barcode', 'বারকোড') }} "${decodedText}" {{ l('not found in inventory.', 'স্টকে পাওয়া যায়নি।') }}`, true);
            }
        })
        .catch(err => {
            console.error("Barcode lookup error:", err);
        });
}

function onBarcodeScanFailure(error) {
    // Silent on ongoing frame search
}
</script>

{% endblock %}