{% extends "pos/base.html" %}
{% load static %}

{% block title %}Barcode Print{% endblock %}
{% block heading %}{% endblock %}

{#
  CHANGE SUMMARY (vs your original barcode_print.html):
  1. MFG/EXP date fields are now ALWAYS shown — the old show_mfg_exp conditional gating is gone.
  2. Settings "modal" replaced with an always-visible inline groupbox. No localStorage,
     no Save button. New checkboxes: Print Header, Print Manufacture Date, Print Expiry.
  3. New "Load From Purchase Invoice" section + per-row select checkboxes + "select all".
     Only ticked rows are sent to bulk-preview/.
  4. Visual redesign: card sections, calmer navy/white/neutral palette.
  5. Name / Company / Category are now editable inputs (previously plain text).
     Keyboard nav: Enter -> same column, next row. Left/Right arrow -> jump to the
     adjacent column when the caret is already at the start/end of the field.
#}

{% block stylesheets %}
<style>
  :root {
    --bcprint-navy: #16243f;
    --bcprint-navy-soft: #2c4267;
    --bcprint-bg: #f5f7fa;
    --bcprint-border: #e1e6ee;
    --bcprint-muted: #6b7686;
  }

  .bcprint-page-title {
    color: var(--bcprint-navy);
    font-weight: 700;
    margin: 0 0 16px 0;
  }

  .bcprint-section {
    background: #fff;
    border: 1px solid var(--bcprint-border);
    border-radius: 10px;
    margin-bottom: 18px;
    overflow: hidden;
  }

  .bcprint-section-header {
    background: var(--bcprint-bg);
    border-bottom: 1px solid var(--bcprint-border);
    padding: 11px 18px;
  }

  .bcprint-section-header h6 {
    margin: 0;
    font-weight: 700;
    color: var(--bcprint-navy);
    font-size: 14px;
    letter-spacing: .2px;
  }

  .bcprint-section-header h6 i { width: 18px; text-align: center; margin-right: 6px; }

  .bcprint-section-body { padding: 18px; }

  .bcprint-label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bcprint-navy-soft);
    margin-bottom: 4px;
    display: block;
  }

  .bcprint-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px 18px;
  }

  .bcprint-check-item { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #333; }
  .bcprint-check-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; margin: 0; }
  .bcprint-check-item label { margin: 0; cursor: pointer; }

  .bcprint-btn-primary { background: var(--bcprint-navy); border-color: var(--bcprint-navy); color: #fff; }
  .bcprint-btn-primary:hover, .bcprint-btn-primary:focus { background: var(--bcprint-navy-soft); border-color: var(--bcprint-navy-soft); color: #fff; }

  .bcprint-btn-outline { background: #fff; border: 1px solid var(--bcprint-border); color: var(--bcprint-navy); }
  .bcprint-btn-outline:hover { background: var(--bcprint-bg); }

  .bcprint-table thead th {
    background: var(--bcprint-navy) !important;
    color: #fff !important;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .3px;
    border-color: var(--bcprint-navy) !important;
    vertical-align: middle;
    white-space: nowrap;
  }

  .bcprint-table tbody td { vertical-align: middle; font-size: 13px; }
  .bcprint-table input.form-control-sm { font-size: 12.5px; padding: 4px 6px; height: auto; }
  .bcprint-table tbody tr.row-unchecked { opacity: .42; }
  .bcprint-table tbody tr.row-unchecked input { background: #f3f3f3; }

  .bcprint-summary-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    background: var(--bcprint-bg);
    border-top: 1px solid var(--bcprint-border);
  }

  .bcprint-summary-count { font-size: 14px; font-weight: 700; color: var(--bcprint-navy); }

  .bcprint-invoice-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

  .date-format-help { font-size: 11px; color: var(--bcprint-muted); }
  .small-help { font-size: 12px; color: var(--bcprint-muted); }
  .qty-input { min-width: 70px; }
</style>
{% endblock %}

{% block content %}

<h5 class="bcprint-page-title"><i class="fas fa-barcode mr-2"></i>Barcode Print</h5>

<!-- 1) Sticker Settings (was a modal, now an always-visible groupbox; nothing is persisted) -->
<div class="bcprint-section">
  <div class="bcprint-section-header">
    <h6><i class="fas fa-sliders-h"></i>Sticker Settings</h6>
  </div>
  <div class="bcprint-section-body">
    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="bcprint-label">Width (inch)</label>
        <input type="number" step="0.01" min="0.5" class="form-control" id="setStickerW" value="1.5">
      </div>
      <div class="col-md-2 mb-3">
        <label class="bcprint-label">Height (inch)</label>
        <input type="number" step="0.01" min="0.5" class="form-control" id="setStickerH" value="1.0">
      </div>
      <div class="col-md-5 mb-3">
        <label class="bcprint-label">Header / Shop Name</label>
        <input type="text" class="form-control" id="setStickerHeader"
               placeholder="Business Name"
               value="{{ default_header|default:'Business Name' }}">
      </div>
      <div class="col-md-3 mb-3 d-flex align-items-end">
        <div class="bcprint-check-item">
          <input type="checkbox" id="setPrintHeader" checked>
          <label for="setPrintHeader">Print Header on Sticker</label>
        </div>
      </div>
    </div>

    <hr>

    <div class="bcprint-check-grid">
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintCode" checked>
        <label for="setPrintCode">Print Product Code</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintName" checked>
        <label for="setPrintName">Print Product Name</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintPrice" checked>
        <label for="setPrintPrice">Print Price</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintCompany">
        <label for="setPrintCompany">Print Company</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintCategory">
        <label for="setPrintCategory">Print Category</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintMfg">
        <label for="setPrintMfg">Print Manufacture Date</label>
      </div>
      <div class="bcprint-check-item">
        <input type="checkbox" id="setPrintExp">
        <label for="setPrintExp">Print Expiry Date</label>
      </div>
    </div>
  </div>
</div>

<!-- 2) Load From Purchase Invoice -->
<div class="bcprint-section">
  <div class="bcprint-section-header">
    <h6><i class="fas fa-file-invoice"></i>Load From Purchase Invoice</h6>
  </div>
  <div class="bcprint-section-body">
    <div class="bcprint-invoice-row">
      <div class="form-group mb-0">
        <label class="bcprint-label">Purchase Invoice No.</label>
        <input type="number" class="form-control" id="purchaseInvoiceNo" placeholder="e.g. 1042" style="width: 200px;">
      </div>
      <button type="button" class="btn bcprint-btn-primary" id="loadPurchaseInvoiceBtn">
        <i class="fas fa-download mr-1"></i>Load Items
      </button>
    </div>
  </div>
</div>

<!-- 3) Add Single Product -->
<div class="bcprint-section">
  <div class="bcprint-section-header">
    <h6><i class="fas fa-plus-circle"></i>Add Product</h6>
  </div>
  <div class="bcprint-section-body">
    <div class="row align-items-end">
      <div class="col-md-4 mb-3">
        <label class="bcprint-label">Search Product</label>
        <select id="productSelect" class="form-control"></select>
      </div>

      <div class="col-md-1 mb-3">
        <label class="bcprint-label">Qty</label>
        <input type="number" id="barcodeQty" class="form-control" value="1" min="1" step="1">
      </div>

      <div class="col-md-2 mb-3">
        <label class="bcprint-label">Price</label>
        <input type="number" id="barcodePrice" class="form-control" value="0" min="0" step="0.01">
      </div>

      <div class="col-md-2 mb-3">
        <label class="bcprint-label">MFG Date</label>
        <input type="text" id="mfgDate" class="form-control date-ddmmyyyy" placeholder="dd/mm/yyyy" maxlength="10">
      </div>

      <div class="col-md-2 mb-3">
        <label class="bcprint-label">EXP Date</label>
        <input type="text" id="expDate" class="form-control date-ddmmyyyy" placeholder="dd/mm/yyyy" maxlength="10">
      </div>

      <div class="col-md-1 mb-3">
        <button type="button" id="clearEntryRow" class="btn bcprint-btn-outline btn-block" title="Clear">
          <i class="fas fa-eraser"></i>
        </button>
      </div>
    </div>

  </div>
</div>

<!-- 4) Items table (fully editable + keyboard navigation) -->
<div class="bcprint-section">
  <div class="bcprint-section-header">
    <h6><i class="fas fa-list"></i>Items To Print</h6>
  </div>

  <div class="table-responsive">
    <table class="table table-bordered table-sm mb-0 bcprint-table">
      <thead>
        <tr>
          <th style="width: 36px;" class="text-center">
            <input type="checkbox" id="selectAllItems" title="Select / Deselect All">
          </th>
          <th style="width: 40px;">#</th>
          <th>Product</th>
          <th style="width: 130px;">Barcode</th>
          <th style="width: 100px;">Price</th>
          <th style="width: 110px;">MFG</th>
          <th style="width: 110px;">EXP</th>
          <th style="width: 130px;">Company</th>
          <th style="width: 130px;">Category</th>
          <th style="width: 80px;">Qty</th>
          <th style="width: 56px;">Action</th>
        </tr>
      </thead>
      <tbody id="barcodeItemBody">
        <tr>
          <td colspan="11" class="text-center text-muted py-4">
            No products added yet. Search above or load a purchase invoice.
          </td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="bcprint-summary-bar">
    <div class="bcprint-summary-count">Total Stickers: <span id="totalLabels">0</span></div>
    <button type="button" id="printBarcodes" class="btn bcprint-btn-primary">
      <i class="fas fa-print mr-1"></i>Preview / Print
    </button>
  </div>
</div>

<!-- Hidden POST Form: Bulk Preview New Tab -->
<form id="bulkPreviewForm"
      method="post"
      action="bulk-preview/"
      target="_blank"
      style="display:none;">
    {% csrf_token %}

    <input type="hidden" name="w" id="previewW">
    <input type="hidden" name="h" id="previewH">
    <input type="hidden" name="header" id="previewHeader">
    <input type="hidden" name="print_header" id="previewPrintHeader">
    <input type="hidden" name="print_code" id="previewPrintCode">
    <input type="hidden" name="print_name" id="previewPrintName">
    <input type="hidden" name="print_price" id="previewPrintPrice">
    <input type="hidden" name="print_company" id="previewPrintCompany">
    <input type="hidden" name="print_category" id="previewPrintCategory">
    <input type="hidden" name="print_mfg" id="previewPrintMfg">
    <input type="hidden" name="print_exp" id="previewPrintExp">

    <input type="hidden" name="items_json" id="previewItemsJson">
</form>

{% endblock %}

{% block javascripts %}
<script>
(function ($) {
    "use strict";

    var items = [];
    var selectedProduct = null;

    function escapeHtml(value) {
        value = value === null || value === undefined ? "" : String(value);
        return value
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }

    function money(value) {
        var numberValue = parseFloat(value || 0);
        return numberValue.toFixed(2);
    }

    function showToast(icon, title) {
        if (typeof Swal !== "undefined") {
            Swal.fire({ toast: true, position: "top-end", icon: icon, title: title, showConfirmButton: false, timer: 1800 });
        } else {
            alert(title);
        }
    }

    function getQueryParam(name) {
        try {
            return new URLSearchParams(window.location.search).get(name);
        } catch (e) {
            return null;
        }
    }

    function isValidDdMmYyyy(value) {
        if (!value) return true;
        var regex = /^(0[1-9]|[12][0-9]|3[01])\/(0[1-9]|1[0-2])\/\d{4}$/;
        if (!regex.test(value)) return false;
        var parts = value.split("/");
        var day = parseInt(parts[0], 10);
        var month = parseInt(parts[1], 10);
        var year = parseInt(parts[2], 10);
        var date = new Date(year, month - 1, day);
        return (date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day);
    }

    function autoSlashDateInput(input) {
        var value = input.value.replace(/[^\d]/g, "").slice(0, 8);
        if (value.length >= 5) {
            input.value = value.slice(0, 2) + "/" + value.slice(2, 4) + "/" + value.slice(4);
        } else if (value.length >= 3) {
            input.value = value.slice(0, 2) + "/" + value.slice(2);
        } else {
            input.value = value;
        }
    }

    // ── Entry row (single product add) ─────────────────────────────────────
    function getEntryData() {
        if (!selectedProduct) {
            showToast("warning", "Please select product first.");
            return null;
        }

        var qty = parseInt($("#barcodeQty").val() || "1", 10);
        var price = parseFloat($("#barcodePrice").val() || "0");

        if (!qty || qty < 1) {
            showToast("warning", "Qty must be greater than 0.");
            $("#barcodeQty").focus().select();
            return null;
        }
        if (isNaN(price) || price < 0) {
            showToast("warning", "Price must be valid.");
            $("#barcodePrice").focus().select();
            return null;
        }

        var mfgDate = ($("#mfgDate").val() || "").trim();
        var expDate = ($("#expDate").val() || "").trim();

        if (!isValidDdMmYyyy(mfgDate)) {
            showToast("warning", "MFG date format dd/mm/yyyy hona chahiye.");
            $("#mfgDate").focus().select();
            return null;
        }
        if (!isValidDdMmYyyy(expDate)) {
            showToast("warning", "EXP date format dd/mm/yyyy hona chahiye.");
            $("#expDate").focus().select();
            return null;
        }

        return { qty: qty, price: price, mfg_date: mfgDate, exp_date: expDate };
    }

    function resetEntryRow() {
        selectedProduct = null;
        $("#productSelect").val(null).trigger("change");
        $("#barcodeQty").val("1");
        $("#barcodePrice").val("0");
        $("#mfgDate").val("");
        $("#expDate").val("");
    }

    function addSelectedProduct() {
        var entry = getEntryData();
        if (!entry) return;

        var existingIndex = items.findIndex(function (item) {
            return (
                String(item.product_id) === String(selectedProduct.product_id) &&
                String(item.price) === String(entry.price) &&
                String(item.mfg_date || "") === String(entry.mfg_date || "") &&
                String(item.exp_date || "") === String(entry.exp_date || "")
            );
        });

        if (existingIndex >= 0) {
            items[existingIndex].qty += entry.qty;
        } else {
            items.push({
                product_id: selectedProduct.product_id,
                prod_id: selectedProduct.prod_id,
                name: selectedProduct.name || "",
                product_code: selectedProduct.product_code || "",
                price: entry.price,
                company: selectedProduct.company || "",
                category: selectedProduct.category || "",
                mfg_date: entry.mfg_date || "",
                exp_date: entry.exp_date || "",
                qty: entry.qty,
                checked: true
            });
        }

        renderTable();
        resetEntryRow();
        showToast("success", "Product added.");
        setTimeout(function () { $("#productSelect").select2("open"); }, 200);
    }

    // ── Load from purchase invoice ───────────────────────────────────────────
    function loadPurchaseInvoice(noOverride) {
        var no = (noOverride !== undefined && noOverride !== null
            ? String(noOverride)
            : ($("#purchaseInvoiceNo").val() || "")).trim();
        if (!no) {
            showToast("warning", "Please enter a purchase invoice number.");
            return;
        }

        $.ajax({
            url: "load-purchase-invoice/",
            method: "GET",
            data: { pur_order_no: no },
            dataType: "json"
        }).done(function (resp) {
            if (!resp || !resp.items || !resp.items.length) {
                showToast("warning", (resp && resp.error) || "No items found for this invoice.");
                return;
            }

            resp.items.forEach(function (newItem) {
                var existingIndex = items.findIndex(function (item) {
                    return (
                        String(item.product_id) === String(newItem.product_id) &&
                        String(item.mfg_date || "") === String(newItem.mfg_date || "") &&
                        String(item.exp_date || "") === String(newItem.exp_date || "")
                    );
                });

                if (existingIndex >= 0) {
                    items[existingIndex].qty += newItem.qty;
                } else {
                    newItem.checked = true;
                    items.push(newItem);
                }
            });

            renderTable();
            showToast("success", resp.items.length + " item(s) loaded from invoice #" + no + ".");
            $("#purchaseInvoiceNo").val("");
        }).fail(function (xhr) {
            var msg = "Could not load invoice.";
            try { msg = JSON.parse(xhr.responseText).error || msg; } catch (e) {}
            showToast("error", msg);
        });
    }

    // ── Load single product by prod_id (deep-link) ──────────────────────────
    function loadProductByProdId(prodId) {
        $.ajax({
            url: "product-lookup/",
            method: "GET",
            data: { prod_id: prodId },
            dataType: "json"
        }).done(function (resp) {
            if (!resp || resp.error) {
                showToast("warning", (resp && resp.error) || "Product not found.");
                return;
            }

            items.push({
                product_id: resp.product_id,
                prod_id: resp.prod_id,
                name: resp.name || "",
                product_code: resp.product_code || "",
                price: resp.price || 0,
                company: resp.company || "",
                category: resp.category || "",
                mfg_date: "",
                exp_date: "",
                qty: 1,
                checked: true
            });

            renderTable();
            showToast("success", "Product loaded.");
        }).fail(function (xhr) {
            var msg = "Could not load product.";
            try { msg = JSON.parse(xhr.responseText).error || msg; } catch (e) {}
            showToast("error", msg);
        });
    }

    // ── Table render ──────────────────────────────────────────────────────
    function buildRow(item, index) {
        var qty = parseInt(item.qty || 1, 10);
        var checked = item.checked !== false;

        var row = '<tr class="' + (checked ? '' : 'row-unchecked') + '">';

        row += '<td class="text-center">' +
            '<input type="checkbox" class="item-checked" data-index="' + index + '"' + (checked ? ' checked' : '') + '>' +
        '</td>';

        row += '<td>' + (index + 1) + '</td>';

        row += '<td><input type="text" class="form-control form-control-sm item-name" ' +
            'data-index="' + index + '" data-col="0" value="' + escapeHtml(item.name) + '"></td>';

        row += '<td>' + escapeHtml(item.product_code) + '</td>';

        row += '<td><input type="number" class="form-control form-control-sm item-price" ' +
            'data-index="' + index + '" data-col="1" value="' + money(item.price) + '" min="0" step="0.01"></td>';

        row += '<td><input type="text" class="form-control form-control-sm item-mfg-date date-ddmmyyyy" ' +
            'data-index="' + index + '" data-col="2" value="' + escapeHtml(item.mfg_date || "") + '" placeholder="dd/mm/yyyy" maxlength="10"></td>';

        row += '<td><input type="text" class="form-control form-control-sm item-exp-date date-ddmmyyyy" ' +
            'data-index="' + index + '" data-col="3" value="' + escapeHtml(item.exp_date || "") + '" placeholder="dd/mm/yyyy" maxlength="10"></td>';

        row += '<td><input type="text" class="form-control form-control-sm item-company" ' +
            'data-index="' + index + '" data-col="4" value="' + escapeHtml(item.company) + '"></td>';

        row += '<td><input type="text" class="form-control form-control-sm item-category" ' +
            'data-index="' + index + '" data-col="5" value="' + escapeHtml(item.category) + '"></td>';

        row += '<td><input type="number" class="form-control form-control-sm item-qty qty-input" ' +
            'data-index="' + index + '" data-col="6" value="' + qty + '" min="1" step="1"></td>';

        row += '<td class="text-center"><button type="button" class="btn btn-outline-danger btn-sm remove-item" data-index="' + index + '">' +
            '<i class="fas fa-trash"></i></button></td>';

        row += '</tr>';
        return row;
    }

    function recomputeTotals() {
        var total = 0;
        items.forEach(function (item) {
            if (item.checked !== false) total += parseInt(item.qty || 1, 10);
        });
        $("#totalLabels").text(total);
    }

    function syncSelectAllState() {
        if (!items.length) {
            $("#selectAllItems").prop("checked", false).prop("indeterminate", false);
            return;
        }
        var checkedCount = items.filter(function (i) { return i.checked !== false; }).length;
        if (checkedCount === 0) {
            $("#selectAllItems").prop("checked", false).prop("indeterminate", false);
        } else if (checkedCount === items.length) {
            $("#selectAllItems").prop("checked", true).prop("indeterminate", false);
        } else {
            $("#selectAllItems").prop("checked", false).prop("indeterminate", true);
        }
    }

    function renderTable() {
        var tbody = $("#barcodeItemBody");

        if (!items.length) {
            tbody.html('<tr><td colspan="11" class="text-center text-muted py-4">No products added yet. Search above or load a purchase invoice.</td></tr>');
            $("#totalLabels").text("0");
            $("#selectAllItems").prop("checked", false).prop("indeterminate", false);
            return;
        }

        var html = "";
        items.forEach(function (item, index) { html += buildRow(item, index); });
        tbody.html(html);

        recomputeTotals();
        syncSelectAllState();
    }

    // ── Keyboard navigation across editable cells ────────────────────────────
    function focusCell(rowIndex, colIndex) {
        var el = $("#barcodeItemBody tr").eq(rowIndex).find('[data-col="' + colIndex + '"]');
        if (el.length) el.trigger("focus").select();
    }

    function isCaretAtStart(el) {
        try { return el.selectionStart === 0 && el.selectionEnd === 0; }
        catch (e) { return true; } // type="number" doesn't expose selection in some browsers
    }

    function isCaretAtEnd(el) {
        try {
            var len = (el.value || "").length;
            return el.selectionStart === len && el.selectionEnd === len;
        } catch (e) { return true; }
    }

    $("#barcodeItemBody").on("keydown", "input[data-col]", function (e) {
        var row = parseInt($(this).data("index"), 10);
        var col = parseInt($(this).data("col"), 10);

        if (e.key === "Enter") {
            e.preventDefault();
            focusCell(row + 1, col);
        } else if (e.key === "ArrowLeft") {
            if (isCaretAtStart(this)) { e.preventDefault(); focusCell(row, col - 1); }
        } else if (e.key === "ArrowRight") {
            if (isCaretAtEnd(this)) { e.preventDefault(); focusCell(row, col + 1); }
        }
    });

    // ── Bulk preview submission ──────────────────────────────────────────
    function openBulkPreview() {
        var selected = items.filter(function (item) { return item.checked !== false; });

        if (!selected.length) {
            showToast("warning", "Please tick at least one product to print.");
            return;
        }

        $("#previewW").val($("#setStickerW").val() || "1.5");
        $("#previewH").val($("#setStickerH").val() || "1.0");

        var printHeader = $("#setPrintHeader").is(":checked");
        var headerText = $("#setStickerHeader").val() || "";
        $("#previewHeader").val(headerText);
        $("#previewPrintHeader").val(printHeader ? "1" : "0");

        $("#previewPrintName").val($("#setPrintName").is(":checked") ? "1" : "0");
        $("#previewPrintCode").val($("#setPrintCode").is(":checked") ? "1" : "0");
        $("#previewPrintPrice").val($("#setPrintPrice").is(":checked") ? "1" : "0");
        $("#previewPrintCompany").val($("#setPrintCompany").is(":checked") ? "1" : "0");
        $("#previewPrintCategory").val($("#setPrintCategory").is(":checked") ? "1" : "0");
        $("#previewPrintMfg").val($("#setPrintMfg").is(":checked") ? "1" : "0");
        $("#previewPrintExp").val($("#setPrintExp").is(":checked") ? "1" : "0");

        $("#previewItemsJson").val(JSON.stringify(selected));

        $("#bulkPreviewForm")[0].submit();
    }

    $(document).ready(function () {
        $("#productSelect").select2({
            theme: "bootstrap4",
            placeholder: "Search product by name, code, company, category",
            allowClear: true,
            minimumInputLength: 1,
            ajax: {
                url: "products-json/",
                dataType: "json",
                delay: 250,
                data: function (params) { return { q: params.term || "", page: params.page || 1 }; },
                processResults: function (data) { return data; }
            }
        });

        $("#productSelect").on("select2:select", function (e) {
            selectedProduct = e.params.data;
            $("#barcodePrice").val(money(selectedProduct.price || 0));
            setTimeout(function () { $("#barcodeQty").focus().select(); }, 100);
        });

        $("#productSelect").on("select2:clear", function () {
            selectedProduct = null;
            $("#barcodePrice").val("0");
        });

        $("#clearEntryRow").on("click", function () {
            resetEntryRow();
            $("#productSelect").select2("open");
        });

        $("#barcodeQty").on("keypress", function (e) {
            if (e.which === 13) { e.preventDefault(); $("#barcodePrice").focus().select(); }
        });

        $("#barcodePrice").on("keypress", function (e) {
            if (e.which === 13) { e.preventDefault(); $("#mfgDate").focus().select(); }
        });

        $("#mfgDate").on("input", function () { autoSlashDateInput(this); });
        $("#expDate").on("input", function () { autoSlashDateInput(this); });

        $("#mfgDate").on("keypress", function (e) {
            if (e.which === 13) { e.preventDefault(); $("#expDate").focus().select(); }
        });
        $("#expDate").on("keypress", function (e) {
            if (e.which === 13) { e.preventDefault(); addSelectedProduct(); }
        });

        $("#loadPurchaseInvoiceBtn").on("click", loadPurchaseInvoice);
        $("#purchaseInvoiceNo").on("keypress", function (e) {
            if (e.which === 13) { e.preventDefault(); loadPurchaseInvoice(); }
        });

        $("#barcodeItemBody").on("click", ".remove-item", function () {
            var index = parseInt($(this).data("index"), 10);
            items.splice(index, 1);
            renderTable();
        });

        // NOTE: qty used to trigger a full renderTable() on every keystroke, which
        // kept stealing focus while typing. It now only updates the running total,
        // which also makes the new Enter/Arrow navigation usable.
        $("#barcodeItemBody").on("change keyup", ".item-qty", function () {
            var index = parseInt($(this).data("index"), 10);
            var qty = parseInt($(this).val() || "1", 10);
            if (!qty || qty < 1) qty = 1;
            if (items[index]) items[index].qty = qty;
            recomputeTotals();
        });

        $("#barcodeItemBody").on("change keyup", ".item-price", function () {
            var index = parseInt($(this).data("index"), 10);
            var price = parseFloat($(this).val() || "0");
            if (isNaN(price) || price < 0) price = 0;
            if (items[index]) items[index].price = price;
        });

        $("#barcodeItemBody").on("change keyup", ".item-name", function () {
            var index = parseInt($(this).data("index"), 10);
            if (items[index]) items[index].name = $(this).val();
        });

        $("#barcodeItemBody").on("change keyup", ".item-company", function () {
            var index = parseInt($(this).data("index"), 10);
            if (items[index]) items[index].company = $(this).val();
        });

        $("#barcodeItemBody").on("change keyup", ".item-category", function () {
            var index = parseInt($(this).data("index"), 10);
            if (items[index]) items[index].category = $(this).val();
        });

        $("#barcodeItemBody").on("input", ".date-ddmmyyyy", function () { autoSlashDateInput(this); });

        $("#barcodeItemBody").on("change keyup", ".item-mfg-date", function () {
            var index = parseInt($(this).data("index"), 10);
            if (items[index]) items[index].mfg_date = ($(this).val() || "").trim();
        });

        $("#barcodeItemBody").on("change keyup", ".item-exp-date", function () {
            var index = parseInt($(this).data("index"), 10);
            if (items[index]) items[index].exp_date = ($(this).val() || "").trim();
        });

        $("#barcodeItemBody").on("change", ".item-checked", function () {
            var index = parseInt($(this).data("index"), 10);
            var checked = $(this).is(":checked");
            if (items[index]) items[index].checked = checked;
            $(this).closest("tr").toggleClass("row-unchecked", !checked);
            recomputeTotals();
            syncSelectAllState();
        });

        $("#selectAllItems").on("change", function () {
            var checked = $(this).is(":checked");
            items.forEach(function (item) { item.checked = checked; });
            $("#barcodeItemBody .item-checked").prop("checked", checked);
            $("#barcodeItemBody tr").toggleClass("row-unchecked", !checked);
            recomputeTotals();
            $(this).prop("indeterminate", false);
        });

        $("#printBarcodes").on("click", function () { openBulkPreview(); });

        // ── Deep-link auto-load ──────────────────────────────────────────
        // ?prod_id=123            -> that one product loads, qty 1
        // ?purchase_invoice=1042  -> that invoice's items load (qty = purchased qty)
        // prod_id takes priority; if neither is given the table just starts empty.
        var urlProdId = getQueryParam("prod_id");
        var urlInvoiceNo = getQueryParam("purchase_invoice");

        if (urlProdId) {
            loadProductByProdId(urlProdId);
        } else if (urlInvoiceNo) {
            $("#purchaseInvoiceNo").val(urlInvoiceNo);
            loadPurchaseInvoice(urlInvoiceNo);
        }

        // Default focus -> Search Product, regardless of the above.
        setTimeout(function () { $("#productSelect").select2("open"); }, 300);
    });

})(jQuery);
</script>
{% endblock %}