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

{% block title %}Rack Tags{% endblock %}
{% block heading %}{% endblock %}

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

  .rt-page-title { color: var(--rt-navy); font-weight: 700; margin: 0 0 16px 0; }
  .rt-section { background: #fff; border: 1px solid var(--rt-border); border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
  .rt-section-header { background: var(--rt-bg); border-bottom: 1px solid var(--rt-border); padding: 11px 18px; }
  .rt-section-header h6 { margin: 0; font-weight: 700; color: var(--rt-navy); font-size: 14px; letter-spacing: .2px; }
  .rt-section-header h6 i { width: 18px; text-align: center; margin-right: 6px; }
  .rt-section-body { padding: 18px; }
  .rt-label { font-size: 12.5px; font-weight: 600; color: var(--rt-navy-soft); margin-bottom: 4px; display: block; }

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

  .rt-btn-primary { background: var(--rt-navy); border-color: var(--rt-navy); color: #fff; }
  .rt-btn-primary:hover, .rt-btn-primary:focus { background: var(--rt-navy-soft); border-color: var(--rt-navy-soft); color: #fff; }
  .rt-btn-outline { background: #fff; border: 1px solid var(--rt-border); color: var(--rt-navy); }
  .rt-btn-outline:hover { background: var(--rt-bg); }

  .rt-table thead th {
    background: var(--rt-navy) !important; color: #fff !important; font-size: 11.5px; font-weight: 600;
    letter-spacing: .3px; border-color: var(--rt-navy) !important; vertical-align: middle; white-space: nowrap;
  }
  .rt-table tbody td { vertical-align: middle; font-size: 13px; }
  .rt-table input.form-control-sm { font-size: 12.5px; padding: 4px 6px; height: auto; }
  .rt-table tbody tr.row-unchecked { opacity: .42; }
  .rt-table tbody tr.row-unchecked input { background: #f3f3f3; }

  .rt-summary-bar {
    display: flex; align-items: center; justify-content: space-between; padding: 14px 18px;
    background: var(--rt-bg); border-top: 1px solid var(--rt-border);
  }
  .rt-summary-count { font-size: 14px; font-weight: 700; color: var(--rt-navy); }
  .rt-invoice-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }

  /* Output mode toggle */
  .rt-mode-toggle { display: flex; border: 1px solid var(--rt-navy); border-radius: 8px; overflow: hidden; width: fit-content; }
  .rt-mode-toggle label {
    margin: 0; padding: 9px 20px; font-size: 13.5px; font-weight: 600; color: var(--rt-navy);
    background: #fff; cursor: pointer; user-select: none;
  }
  .rt-mode-toggle input { display: none; }
  .rt-mode-toggle input:checked + label { background: var(--rt-navy); color: #fff; }

  /* Design picker */
  .rt-design-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
  .rt-design-card {
    border: 2px solid var(--rt-border); border-radius: 8px; padding: 10px; cursor: pointer;
    text-align: center; transition: border-color .15s, box-shadow .15s;
  }
  .rt-design-card.active { border-color: var(--rt-navy); box-shadow: 0 0 0 3px rgba(22,36,63,.12); }
  .rt-design-card input { display: none; }
  .rt-design-card .rt-design-name { font-size: 12.5px; font-weight: 700; color: var(--rt-navy); margin-top: 8px; }

  /* Mini schematic thumbnails — pure CSS, no images */
  .rt-thumb { width: 100%; height: 78px; background: #fff; border: 1px solid #ccc; border-radius: 4px; position: relative; overflow: hidden; }
  .rt-thumb .t-line { position: absolute; background: #16243f; border-radius: 1px; }
  .rt-thumb .t-badge { position: absolute; background: #d64545; color: #fff; font-size: 6px; padding: 1px 3px; border-radius: 2px; }

  /* design 1: centered stack, badge top-right */
  .rt-thumb-1 .t-badge { top: 4px; right: 4px; }
  .rt-thumb-1 .t-code { top: 12px; left: 30%; right: 30%; height: 4px; }
  .rt-thumb-1 .t-name { top: 30px; left: 15%; right: 15%; height: 8px; }
  .rt-thumb-1 .t-price { top: 52px; left: 25%; right: 25%; height: 10px; background: #2c4267; }

  /* design 2: split left/right, accent bar, badge top-left */
  .rt-thumb-2 { border-left: 4px solid #16243f; }
  .rt-thumb-2 .t-badge { top: 4px; left: 4px; }
  .rt-thumb-2 .t-code { top: 14px; left: 10px; width: 40px; height: 4px; }
  .rt-thumb-2 .t-name { top: 24px; left: 10px; width: 45px; height: 6px; }
  .rt-thumb-2 .t-price { top: 30px; right: 8px; bottom: 10px; width: 34px; background: #2c4267; }

  /* design 3: compact minimal, divider line, no border */
  .rt-thumb-3 { border-style: dashed; }
  .rt-thumb-3 .t-name { top: 10px; left: 10%; right: 10%; height: 7px; }
  .rt-thumb-3 .t-divider { top: 24px; left: 8px; right: 8px; height: 1px; background: #ccc; }
  .rt-thumb-3 .t-code { top: 34px; left: 8px; width: 30px; height: 5px; }
  .rt-thumb-3 .t-price { top: 34px; right: 8px; width: 30px; height: 5px; background: #2c4267; }
  .rt-thumb-3 .t-badge { top: 34px; right: 44px; }

  .fs-input { width: 72px; }
</style>
{% endblock %}

{% block content %}

<h5 class="rt-page-title"><i class="fas fa-tags mr-2"></i>Rack Tags</h5>

<!-- 1) Tag Settings -->
<div class="rt-section">
  <div class="rt-section-header"><h6><i class="fas fa-sliders-h"></i>Tag Settings</h6></div>
  <div class="rt-section-body">

    <div class="row">
      <div class="col-md-2 mb-3">
        <label class="rt-label">Width (inch)</label>
        <input type="number" step="0.01" min="0.5" class="form-control" id="setTagW" value="2.76">
      </div>
      <div class="col-md-2 mb-3">
        <label class="rt-label">Height (inch)</label>
        <input type="number" step="0.01" min="0.5" class="form-control" id="setTagH" value="1.0">
      </div>
      <div class="col-md-4 mb-3">
        <label class="rt-label">Print On</label><br>
        <div class="rt-mode-toggle">
          <input type="radio" name="printMode" id="modeA4" value="a4" checked>
          <label for="modeA4"><i class="fas fa-file mr-1"></i>A4 Page</label>
          <input type="radio" name="printMode" id="modeThermal" value="thermal">
          <label for="modeThermal"><i class="fas fa-receipt mr-1"></i>Thermal 3"</label>
        </div>
      </div>
    </div>

    <hr>

    <label class="rt-label mb-2">Tag Design</label>
    <div class="rt-design-grid mb-3">
      <label class="rt-design-card active" data-design="1">
        <input type="radio" name="tagDesign" value="1" checked>
        <div class="rt-thumb rt-thumb-1">
          <div class="t-badge">OFF</div>
          <div class="t-line t-code"></div><div class="t-line t-name"></div><div class="t-line t-price"></div>
        </div>
        <div class="rt-design-name">Design 1 — Classic Centered</div>
      </label>

      <label class="rt-design-card" data-design="2">
        <input type="radio" name="tagDesign" value="2">
        <div class="rt-thumb rt-thumb-2">
          <div class="t-badge">OFF</div>
          <div class="t-line t-code"></div><div class="t-line t-name"></div><div class="t-line t-price"></div>
        </div>
        <div class="rt-design-name">Design 2 — Split Accent</div>
      </label>

      <label class="rt-design-card" data-design="3">
        <input type="radio" name="tagDesign" value="3">
        <div class="rt-thumb rt-thumb-3">
          <div class="t-line t-name"></div><div class="t-line t-divider"></div>
          <div class="t-line t-code"></div><div class="t-badge">%</div><div class="t-line t-price"></div>
        </div>
        <div class="rt-design-name">Design 3 — Compact Minimal</div>
      </label>
    </div>

    <hr>

    <div class="row">
      <div class="col-md-3 mb-3">
        <div class="rt-check-item mb-2"><input type="checkbox" id="showCode" checked><label for="showCode">Show Product Code</label></div>
        <label class="rt-label">Font Size (px)</label>
        <input type="number" class="form-control form-control-sm fs-input" id="fsCode" value="9" min="6" max="40">
      </div>
      <div class="col-md-3 mb-3">
        <div class="rt-check-item mb-2"><input type="checkbox" id="showName" checked><label for="showName">Show Product Name</label></div>
        <label class="rt-label">Font Size (px)</label>
        <input type="number" class="form-control form-control-sm fs-input" id="fsName" value="12" min="6" max="60">
      </div>
      <div class="col-md-3 mb-3">
        <div class="rt-check-item mb-2"><input type="checkbox" id="showPrice" checked><label for="showPrice">Show Price</label></div>
        <label class="rt-label">Font Size (px)</label>
        <input type="number" class="form-control form-control-sm fs-input" id="fsPrice" value="11" min="6" max="50">
      </div>
      <div class="col-md-3 mb-3">
        <div class="rt-check-item mb-2"><input type="checkbox" id="showOffPrice" checked><label for="showOffPrice">Show Off Price Badge</label></div>
        <label class="rt-label">Font Size (px)</label>
        <input type="number" class="form-control form-control-sm fs-input" id="fsOffPrice" value="9" min="6" max="40">
      </div>
    </div>

  </div>
</div>

<!-- 2) Load From Purchase Invoice -->
<div class="rt-section">
  <div class="rt-section-header"><h6><i class="fas fa-file-invoice"></i>Load From Purchase Invoice</h6></div>
  <div class="rt-section-body">
    <div class="rt-invoice-row">
      <div class="form-group mb-0">
        <label class="rt-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 rt-btn-primary" id="loadPurchaseInvoiceBtn"><i class="fas fa-download mr-1"></i>Load Items</button>
    </div>
  </div>
</div>

<!-- 3) Add Single Product -->
<div class="rt-section">
  <div class="rt-section-header"><h6><i class="fas fa-plus-circle"></i>Add Product</h6></div>
  <div class="rt-section-body">
    <div class="row align-items-end">
      <div class="col-md-5 mb-3">
        <label class="rt-label">Search Product</label>
        <select id="productSelect" class="form-control"></select>
      </div>
      <div class="col-md-2 mb-3">
        <label class="rt-label">Qty</label>
        <input type="number" id="rtQty" class="form-control" value="1" min="1" step="1">
      </div>
      <div class="col-md-2 mb-3">
        <label class="rt-label">Price</label>
        <input type="number" id="rtPrice" class="form-control" value="0" min="0" step="0.01">
      </div>
      <div class="col-md-2 mb-3">
        <label class="rt-label">Disc %</label>
        <input type="number" id="rtDisc" class="form-control" value="0" min="0" step="0.01">
      </div>
      <div class="col-md-1 mb-3">
        <button type="button" id="clearEntryRow" class="btn rt-btn-outline btn-block" title="Clear"><i class="fas fa-eraser"></i></button>
      </div>
    </div>
  </div>
</div>

<!-- 4) Items table -->
<div class="rt-section">
  <div class="rt-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 rt-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: 120px;">Code</th>
          <th style="width: 100px;">Price</th>
          <th style="width: 90px;">Disc %</th>
          <th style="width: 80px;">Qty</th>
          <th style="width: 56px;">Action</th>
        </tr>
      </thead>
      <tbody id="rtItemBody">
        <tr><td colspan="8" 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="rt-summary-bar">
    <div class="rt-summary-count">Total Tags: <span id="totalTags">0</span></div>
    <button type="button" id="printRackTags" class="btn rt-btn-primary"><i class="fas fa-print mr-1"></i>Preview / Print</button>
  </div>
</div>

<!-- Hidden POST Form -->
<form id="rackTagsForm" method="post" action="/barcode/rack-tags/preview/" target="_blank" style="display:none;">
  {% csrf_token %}
  <input type="hidden" name="w" id="fW">
  <input type="hidden" name="h" id="fH">
  <input type="hidden" name="mode" id="fMode">
  <input type="hidden" name="design" id="fDesign">
  <input type="hidden" name="show_code" id="fShowCode">
  <input type="hidden" name="show_name" id="fShowName">
  <input type="hidden" name="show_price" id="fShowPrice">
  <input type="hidden" name="show_offprice" id="fShowOffPrice">
  <input type="hidden" name="fs_code" id="fFsCode">
  <input type="hidden" name="fs_name" id="fFsName">
  <input type="hidden" name="fs_price" id="fFsPrice">
  <input type="hidden" name="fs_offprice" id="fFsOffPrice">
  <input type="hidden" name="items_json" id="fItemsJson">
</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) { return parseFloat(value || 0).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); }
    }

    // ── Design card selection ────────────────────────────────────────────
    $(".rt-design-card").on("click", function () {
        $(".rt-design-card").removeClass("active");
        $(this).addClass("active");
        $(this).find("input[type=radio]").prop("checked", true);
    });

    // ── Entry row ─────────────────────────────────────────────────────────
    function resetEntryRow() {
        selectedProduct = null;
        $("#productSelect").val(null).trigger("change");
        $("#rtQty").val("1");
        $("#rtPrice").val("0");
        $("#rtDisc").val("0");
    }

    function addSelectedProduct() {
        if (!selectedProduct) { showToast("warning", "Please select product first."); return; }

        var qty = parseInt($("#rtQty").val() || "1", 10);
        var price = parseFloat($("#rtPrice").val() || "0");
        var disc = parseFloat($("#rtDisc").val() || "0");

        if (!qty || qty < 1) { showToast("warning", "Qty must be greater than 0."); return; }

        items.push({
            product_id: selectedProduct.product_id,
            prod_id: selectedProduct.prod_id,
            name: selectedProduct.name,
            product_code: selectedProduct.product_code,
            price: price,
            disc: disc,
            qty: qty,
            checked: true
        });

        renderTable();
        resetEntryRow();
        $("#productSelect").select2("open");
    }

    // ── Table render ──────────────────────────────────────────────────────
    function renderTable() {
        var body = $("#rtItemBody");
        body.empty();

        if (!items.length) {
            body.html('<tr><td colspan="8" class="text-center text-muted py-4">No products added yet. Search above or load a purchase invoice.</td></tr>');
            recomputeTotals();
            return;
        }

        items.forEach(function (item, index) {
            var rowClass = item.checked === false ? "row-unchecked" : "";
            var row =
                '<tr class="' + rowClass + '">' +
                '<td class="text-center"><input type="checkbox" class="item-checked" data-index="' + index + '" ' + (item.checked !== false ? "checked" : "") + '></td>' +
                '<td>' + (index + 1) + '</td>' +
                '<td><input type="text" class="form-control form-control-sm item-name" data-index="' + index + '" value="' + escapeHtml(item.name) + '"></td>' +
                '<td>' + escapeHtml(item.product_code) + '</td>' +
                '<td><input type="number" step="0.01" class="form-control form-control-sm item-price" data-index="' + index + '" value="' + money(item.price) + '"></td>' +
                '<td><input type="number" step="0.01" class="form-control form-control-sm item-disc" data-index="' + index + '" value="' + (item.disc || 0) + '"></td>' +
                '<td><input type="number" min="1" class="form-control form-control-sm item-qty" data-index="' + index + '" value="' + item.qty + '"></td>' +
                '<td class="text-center"><button type="button" class="btn btn-sm btn-outline-danger remove-item" data-index="' + index + '"><i class="fas fa-trash"></i></button></td>' +
                '</tr>';
            body.append(row);
        });

        recomputeTotals();
        syncSelectAllState();
    }

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

    function syncSelectAllState() {
        var all = items.length && items.every(function (i) { return i.checked !== false; });
        var none = items.every(function (i) { return i.checked === false; });
        $("#selectAllItems").prop("checked", all).prop("indeterminate", !all && !none);
    }

    // ── Load Purchase Invoice ───────────────────────────────────────────
    function loadPurchaseInvoice(prefillNo) {
        var invoiceNo = prefillNo || $("#purchaseInvoiceNo").val();
        if (!invoiceNo) { showToast("warning", "Please enter a purchase invoice number."); return; }

        $.ajax({
            url: "/barcode/load-purchase-invoice/",
            method: "GET",
            data: { pur_order_no: invoiceNo },
            success: function (data) {
                if (data.error) { showToast("error", data.error); return; }
                (data.items || []).forEach(function (it) {
                    items.push({
                        product_id: it.product_id, prod_id: it.prod_id, name: it.name,
                        product_code: it.product_code, price: it.price, disc: it.disc || 0,
                        qty: it.qty || 1, checked: true
                    });
                });
                renderTable();
                showToast("success", "Invoice #" + invoiceNo + " items loaded.");
            },
            error: function (xhr) {
                var msg = (xhr.responseJSON && xhr.responseJSON.error) || "Could not load invoice.";
                showToast("error", msg);
            }
        });
    }

    function loadProductByProdId(prodId) {
        $.ajax({
            url: "/barcode/product-lookup/",
            method: "GET",
            data: { prod_id: prodId },
            success: function (data) {
                if (data.error) { showToast("error", data.error); return; }
                items.push({
                    product_id: data.product_id, prod_id: data.prod_id, name: data.name,
                    product_code: data.product_code, price: data.price, disc: data.disc || 0,
                    qty: 1, checked: true
                });
                renderTable();
            }
        });
    }

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

    // ── Preview / Print submission ──────────────────────────────────────
    function openPreview() {
        var selected = items.filter(function (item) { return item.checked !== false; });
        if (!selected.length) { showToast("warning", "Please tick at least one product to print."); return; }

        $("#fW").val($("#setTagW").val() || "1.5");
        $("#fH").val($("#setTagH").val() || "1.0");
        $("#fMode").val($("input[name=printMode]:checked").val() || "a4");
        $("#fDesign").val($("input[name=tagDesign]:checked").val() || "1");
        $("#fShowCode").val($("#showCode").is(":checked") ? "1" : "0");
        $("#fShowName").val($("#showName").is(":checked") ? "1" : "0");
        $("#fShowPrice").val($("#showPrice").is(":checked") ? "1" : "0");
        $("#fShowOffPrice").val($("#showOffPrice").is(":checked") ? "1" : "0");
        $("#fFsCode").val($("#fsCode").val() || "9");
        $("#fFsName").val($("#fsName").val() || "12");
        $("#fFsPrice").val($("#fsPrice").val() || "11");
        $("#fFsOffPrice").val($("#fsOffPrice").val() || "9");
        $("#fItemsJson").val(JSON.stringify(selected));

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

    $(document).ready(function () {
        $("#productSelect").select2({
            theme: "bootstrap4",
            placeholder: "Search product by name, code, company, category",
            allowClear: true,
            minimumInputLength: 1,
            ajax: {
                url: "/barcode/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;
            $("#rtPrice").val(money(selectedProduct.price || 0));
            $("#rtDisc").val(selectedProduct.disc || 0);
            setTimeout(function () { $("#rtQty").focus().select(); }, 100);
        });

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

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

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

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

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

        $("#rtItemBody").on("change keyup", ".item-qty", function () {
            var i = parseInt($(this).data("index"), 10);
            var qty = parseInt($(this).val() || "1", 10);
            if (!qty || qty < 1) qty = 1;
            if (items[i]) items[i].qty = qty;
            recomputeTotals();
        });

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

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

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

        $("#rtItemBody").on("change", ".item-checked", function () {
            var i = parseInt($(this).data("index"), 10);
            var checked = $(this).is(":checked");
            if (items[i]) items[i].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; });
            $("#rtItemBody .item-checked").prop("checked", checked);
            $("#rtItemBody tr").toggleClass("row-unchecked", !checked);
            recomputeTotals();
            $(this).prop("indeterminate", false);
        });

        $("#printRackTags").on("click", openPreview);

        var urlProdId = getQueryParam("prod_id");
        var urlInvoiceNo = getQueryParam("purchase_invoice");
        if (urlProdId) { loadProductByProdId(urlProdId); }
        else if (urlInvoiceNo) { $("#purchaseInvoiceNo").val(urlInvoiceNo); loadPurchaseInvoice(urlInvoiceNo); }

        setTimeout(function () { $("#productSelect").select2("open"); }, 300);
    });

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