{% extends "pos/base.html" %}
{% block title %}Edit Product{% endblock title %}
{% block heading %}Edit Product{% endblock heading %}

{% block stylesheets %}
  {{ block.super }}
  <style>.select2-container{width:100%!important;}</style>
{% endblock %}

{% block content %}
  {# ── Field-visibility settings dialog (same as Add page) ── #}
  {% include "includes/_field_settings_dialog.html" %}

  <div class="row ml-0 mb-3">
    <a href="{% url 'products:products_list' %}">
      <button type="button" class="btn btn-info font-weight-bold">
        <i class="fas fa-long-arrow-alt-left mr-2"></i> Go back
      </button>
    </a>
  </div>

  <!-- ═══════ TOP SEARCH BAR ═══════ --> 
  <div class="card mb-3">
    <div class="card-body">
      <div class="form-row">
        <div class="form-group col-12 col-md-4 mb-0">
          <label>Product Code</label>
          <input type="text" id="qe_product_code" class="form-control"
                 placeholder="Type code and press Enter">
          <small class="text-muted">Enter = load product. Blank Enter = open name search.</small>
        </div>
        <div class="form-group col-12 col-md-8 mb-0">
          <label>Product Name</label>
          <select id="qe_product_name" class="form-control"><option></option></select>
        </div>
      </div>
    </div>
  </div>

  <!-- ═══════ EDIT FORM ═══════ -->
  <div class="row">
    <div class="card col-12">
      <div class="card-body">
        <form id="quick-edit-form" method="post">
          {% csrf_token %}
          <input type="hidden" id="qe_product_id" name="product_id" value="">

          <!-- ─── Necessary Fields ─── -->
          <fieldset class="border p-2 mb-4">
            <legend class="w-auto px-2">Necessary Fields</legend>

            <div class="form-row">
              <div class="form-group col-12 col-md-4">
                <label for="product_code">Product Code</label>
                <input type="text" class="form-control" name="product_code"
                       id="product_code" required>
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="id_name">Name</label>
                <input type="text" class="form-control" name="name"
                       id="id_name" required>
              </div>
              <div class="form-group col-12 col-md-4">
                <label for="id_prod_company">Company</label>
                <select id="id_prod_company" name="prod_company"
                        class="form-control"><option></option></select>
                <small>
                  <a href="{% url 'products:companies_add' %}" target="_blank">
                    + Add New Company
                  </a>
                </small>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-12 col-md-3">
                <label>Purchase Price</label>
                <input type="number" step="any" name="purchase_price"
                       class="form-control" required>
              </div>
              <div class="form-group col-12 col-md-3">
                <label>Local Sale Price</label>
                <input type="number" step="any" name="l_sale_price"
                       class="form-control" required>
              </div>
              <div class="form-group col-12 col-md-3">
                <label>Pieces per Pack</label>
                <input type="number" name="pieces_per_pack"
                       class="form-control" required>
              </div>
              <div class="form-group col-12 col-md-3">
                <label>Present Stock</label>
                <input type="number" step="any" id="present_stock"
                       name="present_stock" class="form-control" required>
              </div>
            </div>
          </fieldset>

          <!-- ─── Custom Rates ─── -->
          <fieldset class="border p-2 mb-4">
            <legend class="w-auto px-2">Custom Rates</legend>
            <div class="form-row">
              <div class="form-group col-12 col-md-4">
                <label>Whole Sale Price</label>
                <input type="number" step="any" name="whole_sale_price"
                       class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Supplier Price</label>
                <input type="number" step="any" name="supplier_price"
                       class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Branches Price</label>
                <input type="number" step="any" name="branches_price"
                       class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>MRP</label>
                <input type="number" step="any" name="fbr_mrp"
                       class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>FBR HS Code</label>
                <input type="text" name="fbr_hs_code"
                       class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>FBR Sale Type</label>
                <select name="fbr_sale_type" class="form-control">
                  <option value="">— Select Sale Type —</option>
                  <option value="Goods at Standard Rate (default)">Goods at Standard Rate (default)</option>
                  <option value="3rd Schedule Goods">3rd Schedule Goods</option>
                  <option value="Goods at Reduced Rate">Goods at Reduced Rate</option>
                  <option value="Goods at zero-rate">Goods at zero-rate</option>
                  <option value="Exempt Goods">Exempt Goods</option>
                </select>
              </div>
            </div>
          </fieldset>

          <!-- ─── Others ─── -->
          <fieldset class="border p-2 mb-4">
            <legend class="w-auto px-2">Others</legend>

            <div class="form-row">
              <div class="form-group col-12 col-md-6">
                <label for="id_prod_category">Category</label>
                <select id="id_prod_category" name="prod_category"
                        class="form-control"><option></option></select>
                <small>
                  <a href="{% url 'products:categories_add' %}" target="_blank">
                    + Add New Category
                  </a>
                </small>
              </div>

              <div class="form-group col-12 col-md-6">
                <label for="id_prod_department">Department</label>
                <select id="id_prod_department" name="prod_department" class="form-control"><option></option></select>
                <small>
                  <a href="{% url 'products:department_add' %}" target="_blank">+ Add New Department</a>
                </small>
              </div>

              <div class="form-group col-12 col-md-6">
                <label for="id_vendor">Vendor</label>
                <select id="id_vendor" name="vendor_id" class="form-control"><option></option></select>
                <small class="text-muted">Last vendor this product was purchased from</small>
              </div>


              <div class="form-group col-12 col-md-6">
                <label for="sale_units">Sale Units</label>
                <select id="sale_units" name="sale_units" class="form-control">
                  <option value="-">-</option>
                  <option value="BAGS - Bag">BAGS - Bag</option>
                  <option value="BOTTLES - Btl">BOTTLES - Btl</option>
                  <option value="BOX - Box">BOX - Box</option>
                  <option value="BUNDLES - Bdl">BUNDLES - Bdl</option>
                  <option value="CANS - Can">CANS - Can</option>
                  <option value="CARTONS - Ctn">CARTONS - Ctn</option>
                  <option value="DOZENS - Dzn">DOZENS - Dzn</option>
                  <option value="GRAMMES - Gm">GRAMMES - Gm</option>
                  <option value="KILOGRAMS - Kg">KILOGRAMS - Kg</option>
                  <option value="LITRE - Ltr">LITRE - Ltr</option>
                  <option value="METERS - Mtr">METERS - Mtr</option>
                  <option value="MILLILITRE - Ml">MILLILITRE - Ml</option>
                  <option value="NUMBERS - Nos">NUMBERS - Nos</option>
                  <option value="PACKS - Pac">PACKS - Pac</option>
                  <option value="PAIRS - Prs">PAIRS - Prs</option>
                  <option value="PIECES - Pcs">PIECES - Pcs</option>
                  <option value="QUINTAL - Qtl">QUINTAL - Qtl</option>
                  <option value="ROLLS - Rol">ROLLS - Rol</option>
                  <option value="SQUARE FEET - Sqf">SQUARE FEET - Sqf</option>
                  <option value="ft">FEET</option>
                </select>
              </div>

              <div class="form-group col-12 col-md-6">
                <label>Labour</label>
                <input type="text" class="form-control" name="packing_cost">
              </div>

              <div class="form-group col-12 col-md-6">
                <label for="is_serial_tracked">Serial Tracking</label>
                <select id="is_serial_tracked" name="is_serial_tracked"
                        class="form-control">
                  <option value="false">False</option>
                  <option value="true">True</option>
                </select>
                <small class="form-text text-muted">IMEI / Serial wise tracking.</small>
              </div>

              <div class="form-group col-12 col-md-6">
                <label for="no_stock_manage">Non-Stock Item</label>
                <select id="no_stock_manage" name="no_stock_manage"
                        class="form-control">
                  <option value="false" selected>False</option>
                  <option value="true">True</option>
                </select>
                <small class="form-text text-muted">No inventory when True.</small>
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-12 col-md-4">
                <label>Stock Limit</label>
                <input type="text" name="stock_limit" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>GST (%)</label>
                <input type="text" name="gst" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Further Tax (%)</label>
                <input type="text" name="further_tax" class="form-control">
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-12 col-md-4">
                <label>Discount (%)</label>
                <input type="text" name="disc" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Loading</label>
                <input type="text" name="loading" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Unloading</label>
                <input type="text" name="unloading" class="form-control">
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-12">
                <label>Discount Amount</label>
                <input type="text" name="comments" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Item Weight / Meters</label>
                <input type="text" name="item_weight" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Minumum Rate Lock</label>
                <input type="text" name="minimum_rate_lock" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Urdu Name</label>
                <input type="text" name="urdu_name_ent" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Cotton Size</label>
                <input type="text" name="cotton_size" class="form-control">
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Cotton Barcode</label>
                <input type="text" name="cotton_barcode" class="form-control">
              </div>
              
            </div>
          </fieldset>

          <!-- ═══ BUTTONS ═══ -->
          <div class="d-flex justify-content-between align-items-center">
            <button type="button" id="qe_save_btn"
                    class="btn btn-success font-weight-bold">
              <i class="fas fa-save mr-1"></i> Update product
              <small class="ml-1">(Ctrl+S)</small>
            </button>
            <button type="button" id="qe_delete_btn"
                    class="btn btn-danger font-weight-bold">
              <i class="fas fa-trash-alt mr-1"></i> Delete product
              <small class="ml-1">(Ctrl+D)</small>
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <!-- ═══ LINKED PRODUCTS ═══ -->
  <div class="row" id="lpSectionWrapper" style="display:none;">
    <div class="card col-12">
      <div class="card-body">
        <h5 class="mb-3"><i class="fas fa-link mr-2"></i>Linked Products</h5>

        <table class="table table-sm table-bordered" id="lpChildrenTable">
          <thead>
            <tr>
              <th>Code</th>
              <th>Name</th>
              <th style="width:110px">Pieces/Pack</th>
              <th style="width:120px">Price</th>
              <th style="width:100px">Ratio</th>
              <th style="width:70px"></th>
            </tr>
          </thead>
          <tbody id="lpChildrenBody"></tbody>
          <tfoot>
            <tr id="lpNewRow">
              <td><input type="text" class="form-control form-control-sm" id="lpNewCode" placeholder="Auto"></td>
              <td><input type="text" class="form-control form-control-sm" id="lpNewName" placeholder="Name"></td>
              <td><input type="number" min="1" class="form-control form-control-sm" id="lpNewPpp" value="1"></td>
              <td><input type="number" step="any" class="form-control form-control-sm" id="lpNewPrice" placeholder="Price"></td>
              <td class="align-middle text-muted" id="lpNewRatio">—</td>
              <td>
                <button type="button" class="btn btn-success btn-sm" id="lpAddRowBtn" title="Add">
                  <i class="fas fa-plus"></i>
                </button>
              </td>
            </tr>
          </tfoot>
        </table>

        <button type="button" id="lpSaveChangesBtn" class="btn btn-primary btn-sm">
          <i class="fas fa-save mr-1"></i> Save Changes
        </button>
        <div id="lpFeedback" class="mt-2"></div>
      </div>
    </div>
  </div>

  <!-- ═══ DELETE CONFIRMATION MODAL ═══ -->
  <div class="modal fade" id="deleteConfirmModal" tabindex="-1" role="dialog"
       aria-labelledby="deleteConfirmLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
      <div class="modal-content">
        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title" id="deleteConfirmLabel">
            <i class="fas fa-exclamation-triangle mr-2"></i>Confirm Delete
          </h5>
          <button type="button" class="close text-white" data-dismiss="modal"
                  aria-label="Close"><span aria-hidden="true">&times;</span></button>
        </div>
        <div class="modal-body">
          <p class="mb-1">Do you want to <strong>Delete</strong> this product?</p>
          <p class="text-danger font-weight-bold mb-0" id="delete_product_name"></p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">
            <i class="fas fa-times mr-1"></i> No, Cancel
          </button>
          <button type="button" class="btn btn-danger font-weight-bold"
                  id="confirm_delete_btn">
            <i class="fas fa-trash-alt mr-1"></i> Yes, Delete
          </button>
        </div>
      </div>
    </div>
  </div>
{% endblock content %}


{% block javascripts %}
  {{ block.super }}

  <script>
  /* ================================================================
     QUICK-EDIT  —  full JS
     ================================================================ */
  $(document).on('select2:open', function() {
    setTimeout(function() {
      document.querySelector('.select2-container--open .select2-search__field')?.focus();
    }, 0);
  });

  document.addEventListener('DOMContentLoaded', function() {

    const $codeTop  = $('#qe_product_code');
    const $nameTop  = $('#qe_product_name');
    const $form     = $('#quick-edit-form');
    const $pid      = $('#qe_product_id');

    const LP_LIST_URL_TEMPLATE = "{% url 'products:linked_products_list' 0 %}";
    let lpParentPpp = 1;

    function lpComputeRatio(childPpp) {
      var p = parseFloat(childPpp) || 0;
      return lpParentPpp ? (p / lpParentPpp) : 1;
    }

    function csrf() { return '{{ csrf_token }}'; }

    /* ── tiny toast helper ─────────────────────────────────────────── */
    function showToast(msg, type) {
      type = type || 'success';
      var $t = $(
        '<div class="alert alert-' + type +
        ' alert-dismissible fade show position-fixed" ' +
        'style="top:70px;right:20px;z-index:9999;min-width:320px;">' +
        msg +
        '<button type="button" class="close" data-dismiss="alert">&times;</button>' +
        '</div>'
      );
      $('body').append($t);
      setTimeout(function(){ $t.alert('close'); }, 2500);
    }

    /* ── Enter = next field ────────────────────────────────────────── */
    var $editForm = $('#quick-edit-form');

    function getFields() {
      return Array.from($editForm[0].querySelectorAll('input, select, textarea'))
        .filter(function(el) {
          return !el.disabled &&
                 el.type !== 'hidden' &&
                 el.type !== 'submit' &&
                 el.tagName.toLowerCase() !== 'button';
        });
    }

    function moveFocusFrom(el) {
      var fields = getFields();
      var idx = fields.indexOf(el);
      if (idx > -1 && idx + 1 < fields.length) {
        var next = fields[idx + 1];
        if (next.tagName.toLowerCase() === 'select' && $(next).data('select2')) {
          $(next).select2('open');
          setTimeout(function() {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
          }, 0);
          return;
        }
        next.focus();
      }
    }

    $(document).on('keydown',
      '.select2-search--dropdown .select2-search__field',
      function(e) {
        if (e.key === 'Enter' || e.which === 13) {
          e.preventDefault();
          e.stopPropagation();
        }
      }
    );

    $editForm.on('keydown', function(e) {
      if (e.key !== 'Enter') return;
      if (document.querySelector('.select2-container--open')) {
        e.preventDefault();
        return;
      }
      e.preventDefault();
      moveFocusFrom(e.target);
    });

    $('#id_prod_company, #id_prod_category').on('select2:select', function(e) {
      moveFocusFrom(e.target);
    });

    /* ── Select2: Name search (top bar) ───────────────────────────── */
    $nameTop.select2({
      ajax: {
        url: '{% url "products:search_products_for_edit" %}',
        type: 'POST',
        headers: { 'X-CSRFToken': csrf() },
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search product by name…',
      allowClear: true,
      minimumInputLength: 1
    });

    /* ── Company + Category Select2 ───────────────────────────────── */
    $('#id_prod_company').select2({
      ajax: {
        url: '{% url "products:companies_autocomplete" %}',
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search company…',
      allowClear: true,
      minimumInputLength: 1
    });

    $('#id_prod_category').select2({
      ajax: {
        url: '{% url "products:categories_autocomplete" %}',
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search category…',
      allowClear: true,
      minimumInputLength: 1
    });

    $('#id_prod_department').select2({
      ajax: {
        url: '{% url "products:departments_autocomplete" %}',
        data: function(params) { return { term: params.term }; },
        processResults: function(data) { return { results: data }; }
      },
      placeholder: 'Search department…',
      allowClear: true,
      minimumInputLength: 0
    });

    $('#id_vendor').select2({
      ajax: {
        url: '{% url "purchases:get_vendors" %}',
        method: 'POST',
        headers: { 'X-CSRFToken': csrf() },
        data: function(params) { return { term: params.term || '' }; },
        processResults: function(data) { return { results: data.results }; }
      },
      placeholder: 'Search vendor…',
      allowClear: true,
      minimumInputLength: 0
    });


    /* ── helpers ───────────────────────────────────────────────────── */
    function setSelect2Value($sel, value) {
      if (!value) { $sel.val(null).trigger('change'); return; }
      var opt = new Option(value, value, true, true);
      $sel.append(opt).trigger('change');
    }

    function applyNonStockUi() {
      var isNonStock = ($('#no_stock_manage').val() === 'true');
      if (isNonStock) {
        $('#present_stock').val('0').prop('disabled', true);
        $('#is_serial_tracked').val('false').prop('disabled', true);
      } else {
        $('#present_stock').prop('disabled', false);
        $('#is_serial_tracked').prop('disabled', false);
      }
    }
    $('#no_stock_manage').on('change', applyNonStockUi);

    /* ── fillForm: populate ALL fields ────────────────────────────── */
    function fillForm(p) {
      $pid.val(p.id);
      lpLoadChildren(p.id);
      $codeTop.val(p.product_code || '');               // search bar

      $('#product_code').val(p.product_code || '');
      $('#id_name').val(p.name || '');
      setSelect2Value($('#id_prod_company'), p.prod_company || '');

      $('input[name="purchase_price"]').val(p.purchase_price ?? '');
      $('input[name="l_sale_price"]').val(p.l_sale_price ?? '');
      $('input[name="pieces_per_pack"]').val(p.pieces_per_pack ?? 1);
      $('#present_stock').val(p.present_stock ?? 0);

      $('input[name="whole_sale_price"]').val(p.whole_sale_price ?? '');
      $('input[name="supplier_price"]').val(p.supplier_price ?? '');
      $('input[name="branches_price"]').val(p.branches_price ?? '');
      $('input[name="fbr_mrp"]').val(p.fbr_mrp ?? '');
      $('input[name="fbr_hs_code"]').val(p.fbr_hs_code ?? '');
      $('select[name="fbr_sale_type"]').val(p.fbr_sale_type ?? '');

      setSelect2Value($('#id_prod_category'), p.prod_category || '');
      if (p.department_id) {
        var deptOpt = new Option(p.prod_department || '', p.department_id, true, true);
        $('#id_prod_department').empty().append(deptOpt).trigger('change');
      } else {
        $('#id_prod_department').val(null).trigger('change');
      }

      // Last vendor this product was purchased from (Vendor Product Catalog)
      if (p.vendor_id) {
        var vendorOpt = new Option(p.vendor_name || '', p.vendor_id, true, true);
        $('#id_vendor').empty().append(vendorOpt).trigger('change');
      } else {
        $('#id_vendor').val(null).trigger('change');
      }

      $('#sale_units').val(p.sale_units || '-');
      $('input[name="packing_cost"]').val(p.packing_cost ?? '');

      $('#is_serial_tracked').val(p.is_serial_tracked ? 'true' : 'false');
      $('#no_stock_manage').val(p.no_stock_manage ? 'true' : 'false');

      $('input[name="stock_limit"]').val(p.stock_limit ?? '');
      $('input[name="gst"]').val(p.gst ?? '');
      $('input[name="further_tax"]').val(p.further_tax ?? '');
      $('input[name="disc"]').val(p.disc ?? '');
      $('input[name="loading"]').val(p.loading ?? '');
      $('input[name="unloading"]').val(p.unloading ?? '');

      $('input[name="comments"]').val(p.comments ?? '');
      $('input[name="item_weight"]').val(p.packets ?? '');
      $('input[name="urdu_name_ent"]').val(p.urdu_name_ent ?? '');
      $('input[name="minimum_rate_lock"]').val(p.minimum_rate_lock ?? '');
      $('input[name="cotton_size"]').val(p.cotton_size ?? '');
      $('input[name="cotton_barcode"]').val(p.cotton_barcode ?? '');

      applyNonStockUi();
    }

    /* ── clearAll ─────────────────────────────────────────────────── */
    function clearAll() {
      $pid.val('');
      $('#lpSectionWrapper').hide();
      $('#lpChildrenBody').empty();
      $codeTop.val('');
      $nameTop.val(null).trigger('change');
      $form[0].reset();
      $('#id_prod_company').val(null).trigger('change');
      $('#id_prod_category').val(null).trigger('change');
      $('#id_prod_department').val(null).trigger('change');   // ← NEW
      $('#id_vendor').val(null).trigger('change');             // ← NEW
      $('#sale_units').val('-');
      $('#is_serial_tracked').val('false').prop('disabled', false);
      $('#no_stock_manage').val('false');
      $('#present_stock').prop('disabled', false);
    }

    /* ── Linked Products ───────────────────────────────────────────── */
    function lpRenderRow(c) {
      return (
        '<tr data-id="' + c.id + '">' +
          '<td class="align-middle">' + (c.product_code || '') + '</td>' +
          '<td><input type="text" class="form-control form-control-sm lp-f" data-field="name" value="' + (c.name || '') + '"></td>' +
          '<td><input type="number" min="1" class="form-control form-control-sm lp-f" data-field="pieces_per_pack" value="' + c.pieces_per_pack + '"></td>' +
          '<td><input type="number" step="any" class="form-control form-control-sm lp-f" data-field="l_sale_price" value="' + c.l_sale_price + '"></td>' +
          '<td class="lp-ratio align-middle">' + lpComputeRatio(c.pieces_per_pack).toFixed(4) + '</td>' +
          '<td><button type="button" class="btn btn-danger btn-sm lp-unlink">Unlink</button></td>' +
        '</tr>'
      );
    }

    function lpLoadChildren(parentId) {
      if (!parentId) { $('#lpSectionWrapper').hide(); return; }
      var url = LP_LIST_URL_TEMPLATE.replace('/0/', '/' + parentId + '/');
      $.get(url, function(resp) {
        if (!resp.ok) return;
        lpParentPpp = parseFloat(resp.parent.pieces_per_pack) || 1;
        var $tbody = $('#lpChildrenBody').empty();
        resp.children.forEach(function(c) { $tbody.append(lpRenderRow(c)); });
        $('#lpFeedback').empty();
        $('#lpSectionWrapper').show();
      });
    }

    $(document).on('input', '#lpChildrenBody .lp-f[data-field="pieces_per_pack"]', function() {
      var $row = $(this).closest('tr');
      $row.find('.lp-ratio').text(lpComputeRatio($(this).val()).toFixed(4));
    });

    $('#lpNewPpp').on('input', function() {
      $('#lpNewRatio').text(lpComputeRatio($(this).val()).toFixed(4));
    });

    $('#lpSaveChangesBtn').on('click', function() {
      var changes = [];
      $('#lpChildrenBody tr').each(function() {
        var id = $(this).data('id');
        var fields = {};
        $(this).find('.lp-f').each(function() {
          fields[$(this).data('field')] = $(this).val();
        });
        fields['linked_conversion_qty'] = fields['pieces_per_pack'];
        changes.push({ id: id, fields: fields });
      });
      if (!changes.length) return;

      $.ajax({
        url: '{% url "products:linked_products_bulk_save" %}',
        method: 'POST',
        contentType: 'application/json',
        headers: { 'X-CSRFToken': csrf() },
        data: JSON.stringify({ changes: changes }),
        success: function() {
          $('#lpFeedback').html('<div class="alert alert-success mt-2 py-1">Changes saved.</div>');
          lpLoadChildren($pid.val());
        },
        error: function() {
          $('#lpFeedback').html('<div class="alert alert-danger mt-2 py-1">Save failed.</div>');
        }
      });
    });

    $(document).on('click', '#lpChildrenBody .lp-unlink', function() {
      var linkedId = $(this).closest('tr').data('id');
      if (!confirm('Ye product unlink karna hai?')) return;
      $.ajax({
        url: '{% url "products:linked_product_unlink" %}',
        method: 'POST',
        data: { linked_id: linkedId },
        headers: { 'X-CSRFToken': csrf() },
        success: function() { lpLoadChildren($pid.val()); }
      });
    });

    $('#lpAddRowBtn').on('click', function() {
      var parentId = ($pid.val() || '').trim();
      if (!parentId) {
        showToast('Pehlay parent product load karein.', 'warning');
        return;
      }
      var name = ($('#lpNewName').val() || '').trim();
      if (!name) {
        showToast('Linked product ka Name required hai.', 'warning');
        return;
      }
      var ppp = $('#lpNewPpp').val() || 1;

      $.ajax({
        url: '{% url "products:linked_product_create" %}',
        method: 'POST',
        data: {
          parent_id: parentId,
          name: name,
          product_code: $('#lpNewCode').val(),
          pieces_per_pack: ppp,
          l_sale_price: $('#lpNewPrice').val() || 0,
          linked_conversion_qty: ppp
        },
        headers: { 'X-CSRFToken': csrf() },
        success: function(resp) {
          $('#lpFeedback').html(
            '<div class="alert alert-' + (resp.ok ? 'success' : 'danger') + ' mt-2 py-1">' + resp.message + '</div>'
          );
          if (resp.ok) {
            $('#lpNewCode, #lpNewName, #lpNewPrice').val('');
            $('#lpNewPpp').val(1);
            $('#lpNewRatio').text('—');
            lpLoadChildren(parentId);
          }
        },
        error: function() {
          $('#lpFeedback').html('<div class="alert alert-danger mt-2 py-1">Server error.</div>');
        }
      });
    });

    /* ── AJAX lookup helper ───────────────────────────────────────── */
    function lookup(payload) {
      return $.ajax({
        url:     '{% url "products:product_lookup" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    payload
      });
    }

    /* ── Top code: Enter ──────────────────────────────────────────── */
    $codeTop.on('keydown', function(e) {
      if (e.key !== 'Enter') return;
      e.preventDefault();
      var code = ($codeTop.val() || '').trim();
      if (!code) {
        $nameTop.select2('open');
        setTimeout(function() {
          document.querySelector('.select2-container--open .select2-search__field')?.focus();
        }, 0);
        return;
      }
      lookup({ product_code: code }).done(function(res) {
        if (!res.ok) { showToast(res.message || 'Not found', 'warning'); return; }
        fillForm(res.product);
        $('input[name="purchase_price"]').focus();
      });
    });

    /* ── Top name select ──────────────────────────────────────────── */
    $nameTop.on('select2:select', function(e) {
      var pid = e.params.data.id;
      lookup({ product_id: pid }).done(function(res) {
        if (!res.ok) { showToast(res.message || 'Not found', 'warning'); return; }
        fillForm(res.product);
        $('input[name="purchase_price"]').focus();
      });
    });

    /* ═══════════════════════════════════════════════════════════════
       SAVE
       ═══════════════════════════════════════════════════════════════ */
    function saveQuick() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) {
        showToast('Pehlay product load karein (code ya name se).', 'warning');
        return;
      }
      var formData = $form.serialize();
      $.ajax({
        url:     '{% url "products:product_quick_save" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    formData
      }).done(function(res) {
        if (!res.ok) { showToast(res.message || 'Save failed', 'danger'); return; }
        showToast(res.message || 'Saved!', 'success');
        clearAll();
        $codeTop.focus();
      }).fail(function() {
        showToast('Server error during save.', 'danger');
      });
    }

    $('#qe_save_btn').on('click', saveQuick);

    /* ═══════════════════════════════════════════════════════════════
       DELETE
       ═══════════════════════════════════════════════════════════════ */
    function triggerDelete() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) {
        showToast('Pehlay product load karein (code ya name se).', 'warning');
        return;
      }
      var pName = $('#id_name').val() || 'this product';
      $('#delete_product_name').text(pName);
      $('#deleteConfirmModal').modal('show');

      $('#deleteConfirmModal').off('shown.bs.modal').on('shown.bs.modal', function() {
        $('#confirm_delete_btn').focus();
      });
    }

    $('#qe_delete_btn').on('click', triggerDelete);

    $('#confirm_delete_btn').on('click', function() {
      var pidVal = ($pid.val() || '').trim();
      if (!pidVal) return;

      $.ajax({
        url:     '{% url "products:product_quick_delete" %}',
        method:  'POST',
        headers: { 'X-CSRFToken': csrf() },
        data:    { product_id: pidVal }
      }).done(function(res) {
        $('#deleteConfirmModal').modal('hide');
        if (!res.ok) {
          showToast(res.message || 'Delete failed', 'danger');
          return;
        }
        showToast(res.message || 'Deleted!', 'success');
        clearAll();
        setTimeout(function() {
          $nameTop.select2('open');
          setTimeout(function() {
            document.querySelector('.select2-container--open .select2-search__field')?.focus();
          }, 50);
        }, 300);
      }).fail(function() {
        $('#deleteConfirmModal').modal('hide');
        showToast('Server error during delete.', 'danger');
      });
    });

    /* ═══════════════════════════════════════════════════════════════
       KEYBOARD SHORTCUTS
       ═══════════════════════════════════════════════════════════════ */
    document.addEventListener('keydown', function(e) {
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
        e.preventDefault();
        saveQuick();
      }
      if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'd') {
        e.preventDefault();
        triggerDelete();
      }
    });

    $('#deleteConfirmModal').on('keydown', function(e) {
      if (e.key === 'Enter') {
        e.preventDefault();
        $('#confirm_delete_btn').click();
      }
    });

    /* ═══════════════════════════════════════════════════════════════
       AUTO-LOAD from URL  (e.g. /products/edit/42)
       ═══════════════════════════════════════════════════════════════ */
    {% if auto_load_product_id %}
    (function() {
      var autoId = '{{ auto_load_product_id|escapejs }}';
      if (!autoId) return;
      lookup({ product_id: autoId }).done(function(res) {
        if (!res.ok) {
          showToast(res.message || 'Product not found for auto-load.', 'warning');
          $codeTop.focus();
          return;
        }
        fillForm(res.product);
        $('input[name="purchase_price"]').focus();
      }).fail(function() {
        showToast('Server error while auto-loading product.', 'danger');
        $codeTop.focus();
      });
    })();
    {% else %}
    $codeTop.focus();
    {% endif %}

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