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

{% block title %}Add Product / Service{% endblock title %}
{% block heading %}Add Product / Service{% endblock heading %}

{% block stylesheets %}
  {{ block.super }}

<style>
  /* ensure every select2 fits 100% of its parent col */
  .select2-container {
    width: 100% !important;
  }
</style>
 
{% endblock %}

{% block content %}
  {% 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>

  {# <-- here is the fix: drop the invalid default filter #}
  {% with fd=form_data %}
  <div class="row">
    <div class="card col-12">
      <div class="card-body">
        <form
          id="add-product-form"
          action="{% url 'products:products_add' %}"
          method="post"
        >
          {% csrf_token %}


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

  <!-- Row 1: Code | Name | Company -->
  <div class="form-row">
    <!-- Product Code -->
    <div class="form-group col-12 col-md-4">
      <label for="product_code">Product Code</label>
      <input
        type="text"
        class="form-control"
        id="product_code"
        name="product_code"
        placeholder="Leave empty for auto-generated code"
        autocomplete="off"
        autofocus
        {% if fd.product_code %}value="{{ fd.product_code }}"{% endif %}
      />
      <small class="form-text text-muted">
        Enter code + Enter to load an existing product. Leave empty and press Enter to auto-generate on save.
      </small>
    </div>

    <!-- Name -->
    <div class="form-group col-12 col-md-4">
      <label for="id_name">Name</label>
      <select id="id_name" name="name" class="form-control" required>
        <option></option>
      </select>
    </div>

    <!-- Company -->
    <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>

  <!-- Row 2: Purchase | Local Sale | Pieces per Pack | Present Stock -->
  <div class="form-row">
    <div class="form-group col-12 col-md-3">
      <label for="purchase_price">Purchase Price</label>
      <input
        type="number"
        step="any"
        name="purchase_price"
        id="purchase_price"
        class="form-control"
        required
        value="{{ fd.purchase_price|default:'' }}"
      />
    </div>
    <div class="form-group col-12 col-md-3">
      <label for="l_sale_price">Local Sale Price</label>
      <input
        type="number"
        step="any"
        name="l_sale_price"
        id="l_sale_price"
        class="form-control"
        required
        value="{{ fd.l_sale_price|default:'' }}"
      />
    </div>
    <div class="form-group col-12 col-md-3">
      <label for="present_stock">Present Stock</label>
      <input
        type="number"
        step="any"
        name="present_stock"
        id="present_stock"
        class="form-control"
        required
        value="{{ fd.present_stock|default:'' }}"
      />
    </div>
    <div class="form-group col-12 col-md-3">
      <label for="pieces_per_pack">Pieces per Pack</label>
      <input
        type="number"
        name="pieces_per_pack"
        id="pieces_per_pack"
        class="form-control"
        min="1"
        value="{{ fd.pieces_per_pack|default:1 }}"
      />
    </div>
  </div>



</fieldset>


          <!-- Group 2: 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"
                  value="{{ fd.whole_sale_price|default:'' }}"
                />
              </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"
                  value="{{ fd.supplier_price|default:'' }}"
                />
              </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"
                  value="{{ fd.branches_price|default:'' }}"
                />
              </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"
                  value="{{ fd.fbr_hs_code|default:'' }}"
                />
              </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="" {% if not fd.fbr_sale_type %}selected{% endif %}>— Select Sale Type —</option>
                  <option value="Goods at Standard Rate (default)" {% if fd.fbr_sale_type == "Goods at Standard Rate (default)" %}selected{% endif %}>Goods at Standard Rate (default)</option>
                  <option value="3rd Schedule Goods" {% if fd.fbr_sale_type == "3rd Schedule Goods" %}selected{% endif %}>3rd Schedule Goods</option>
                  <option value="Goods at Reduced Rate" {% if fd.fbr_sale_type == "Goods at Reduced Rate" %}selected{% endif %}>Goods at Reduced Rate</option>
                  <option value="Goods at zero-rate" {% if fd.fbr_sale_type == "Goods at zero-rate" %}selected{% endif %}>Goods at zero-rate</option>
                  <option value="Exempt Goods" {% if fd.fbr_sale_type == "Exempt Goods" %}selected{% endif %}>Exempt Goods</option>
                </select>
              </div>
            </div>
          </fieldset>

          <!-- Group 3: 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="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"
                  value="{{ fd.packing_cost|default:'' }}"
                />
              </div>


            <!-- Row 3: Serial Tracking (True/False) -->
              <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" selected>False</option>
                  <option value="true">True</option>
                </select>
                <small class="form-text text-muted">IMEI/Serial wise tracking enable/disable.</small>
              </div>
              <!-- Non-Stock Item -->
              <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">
                  {# default False; if server returned form_data, prefer it #}
                  <option value="false" {% if fd.no_stock_manage != 'true' %}selected{% endif %}>False</option>
                  <option value="true"  {% if fd.no_stock_manage == 'true' %}selected{% endif %}>True</option>
                </select>
                <small class="form-text text-muted">No inventory movement or stock tracking 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"
                  value="{{ fd.stock_limit|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>GST (%)</label>
                <input
                  type="text"
                  name="gst"
                  class="form-control"
                  value="{{ fd.gst|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Further Tax (%)</label>
                <input
                  type="text"
                  name="further_tax"
                  class="form-control"
                  value="{{ fd.further_tax|default:'' }}"
                />
              </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"
                  value="{{ fd.disc|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Loading</label>
                <input
                  type="text"
                  name="loading"
                  class="form-control"
                  value="{{ fd.loading|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Unloading</label>
                <input
                  type="text"
                  name="unloading"
                  class="form-control"
                  value="{{ fd.unloading|default:'' }}"
                />
              </div>
            </div>

            <div class="form-row">
              <div class="form-group col-12">
                <label>Discount Amount</label>
                <input
                  type="text"
                  name="comments"
                  class="form-control"
                  value="{{ fd.comments|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Item Weight / Meters</label>
                <input
                  type="text"
                  name="item_weight"
                  class="form-control"
                  value="{{ fd.item_weight|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Minumim Rate Lock</label>
                <input
                  type="text"
                  name="minimum_rate_lock"
                  class="form-control"
                  value="{{ fd.minimum_rate_lock|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Urdu Name</label>
                <input
                  type="text"
                  name="urdu_name_ent"
                  class="form-control"
                  value="{{ fd.urdu_name_ent|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Cotton Size</label>
                <input
                  type="text"
                  name="cotton_size"
                  class="form-control"
                  value="{{ fd.cotton_size|default:'' }}"
                />
              </div>
              <div class="form-group col-12 col-md-4">
                <label>Cotton Barcode</label>
                <input
                  type="text"
                  name="cotton_barcode"
                  class="form-control"
                  value="{{ fd.cotton_barcode|default:'' }}"
                />
              </div>
            </div>
          </fieldset>

          <button type="submit" class="btn btn-success font-weight-bold">
            Create product
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endwith %}
{% endblock content %}

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

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const form = document.getElementById('add-product-form');


      const $codeInput  = $('#product_code');
      const $nameSelect = $('#id_name');

      // fill a select2 field the same way the existing "re-inject on error"
      // code below does (value == text)
      function setSelect2Value($el, text) {
        if (!text) { $el.val(null).trigger('change'); return; }
        const opt = new Option(text, text, true, true);
        $el.empty().append(opt).trigger('change');
      }

      // populate the whole form from a looked-up product
      function populateProductFields(p) {
        setSelect2Value($nameSelect, p.name);
        setSelect2Value($('#id_prod_company'), p.prod_company);
        setSelect2Value($('#id_prod_category'), p.prod_category);

        $('#purchase_price').val(p.purchase_price);
        $('#l_sale_price').val(p.l_sale_price);
        $('#present_stock').val(p.present_stock);
        $('#pieces_per_pack').val(p.pieces_per_pack);
        $('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_hs_code"]').val(p.fbr_hs_code);
        $('select[name="fbr_sale_type"]').val(p.fbr_sale_type);
        $('input[name="packing_cost"]').val(p.packing_cost);
        $('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="minimum_rate_lock"]').val(p.minimum_rate_lock);
        $('input[name="urdu_name_ent"]').val(p.urdu_name_ent);
        $('input[name="cotton_size"]').val(p.cotton_size);
        $('input[name="cotton_barcode"]').val(p.cotton_barcode);

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

        const $su = $('#sale_units');
        if (p.sale_units && !$su.find('option[value="' + p.sale_units + '"]').length) {
          $su.prepend(new Option(p.sale_units, p.sale_units));
        }
        $su.val(p.sale_units || '-');
      }

      // Enter on product_code:
      //  - empty   -> open Name select2 (fresh product entry, auto code on save)
      //  - filled  -> lookup; found = load its data, not found = open Name select2
      $codeInput.on('keydown', function(e) {
        if (e.key !== 'Enter') return;
        e.preventDefault();
        e.stopPropagation();

        const code = $codeInput.val().trim();
        if (!code) {
          $nameSelect.select2('open');
          return;
        }

        $.ajax({
          url: '{% url "products:product_lookup" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': '{{ csrf_token }}' },
          data: { product_code: code },
        }).done(function(res) {
          if (res && res.ok) {
            populateProductFields(res.product);
          } else {
            $nameSelect.select2('open');
          }
        }).fail(function() {
          $nameSelect.select2('open');
        });
      });

      // page load: focus stays on Product Code (autofocus attribute handles it,
      // this is just a safety net for browsers that ignore it after redirects)
      $codeInput.trigger('focus');

      // 2️⃣ After selecting Name, Enter in its search → open Company
      //    We track which dropdown is open
      let lastOpened = null;
      $('#id_name')          .on('select2:open', () => { lastOpened = 'name'; });
      $('#id_prod_company')  .on('select2:open', () => { lastOpened = 'company'; });
      $('#id_prod_category') .on('select2:open', () => { lastOpened = 'category'; });

      // Intercept Enter in *any* Select2 search field:
      $(document).on('keydown', '.select2-search--dropdown .select2-search__field', function(e) {
        if (e.key === 'Enter' || e.which === 13) {
          e.preventDefault();
          e.stopPropagation();

          if (lastOpened === 'name') {
            // after Name → open Company
            $('#id_prod_company').select2('open');

          } else if (lastOpened === 'company') {
            // after Company → move to Purchase Price
            // close the dropdown (optional)
            $('#id_prod_company').select2('close');
            document.querySelector('input[name="purchase_price"]').focus();
          }
          // we do *not* jump to Category here
        }
      });

      // 3️ Also catch a “select” on Company (in case user clicks instead of typing Enter)
      $('#id_prod_company').on('select2:select', function() {
        document.querySelector('input[name="purchase_price"]').focus();
      });

      // 4️ Finally: Enter on Branches Price → open Category
      document.querySelector('input[name="branches_price"]')
        .addEventListener('keydown', function(e) {
          if (e.key === 'Enter') {
            e.preventDefault();
            $('#id_prod_category').select2('open');
          }
        });


      // — Ctrl+S to save —
      document.addEventListener('keydown', function(e) {
        if ((e.ctrlKey || e.metaKey) && e.key === 's') {
          e.preventDefault();
          form.submit();
        }
      });

      // — helpers —
      const getFields = () => Array.from(
        form.querySelectorAll('input, select, textarea')
      ).filter(el =>
        !el.disabled &&
        el.type !== 'hidden' &&
        el.type !== 'submit' &&
        el.tagName.toLowerCase() !== 'button'
      );
      const moveFocusFrom = el => {
        const fields = getFields();
        const idx = fields.indexOf(el);
        if (idx > -1 && idx + 1 < fields.length) {
          fields[idx + 1].focus();
        }
      };

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

      // — autofocus the search box when a dropdown opens —
      $(document).on('select2:open', () => {
        setTimeout(() => {
          document.querySelector('.select2-container--open .select2-search__field')?.focus();
        }, 0);
      });

      // — Initialize Name with tags + AJAX + move focus on select —
      $('#id_name').select2({
        tags: true,
        tokenSeparators: [','],
        ajax: {
          url: '{% url "products:get_products" %}',
          type: 'POST',
          headers: { 'X-CSRFToken': '{{ csrf_token }}' },
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data })
        },
        placeholder: 'Type or select a product name',
        minimumInputLength: 1,
        createTag: params => ({
          id: params.term,
          text: params.term,
          newTag: true
        }),
        templateResult: data =>
          data.newTag
            ? $('<span style="font-style:italic;color:#666">Add “' + data.text + '”</span>')
            : data.text
      }).on('select2:select', function(e) {
        moveFocusFrom(e.target);
      });

      // — Initialize Company autocomplete + move focus —
      $('#id_prod_company').select2({
        ajax: {
          url: '{% url "products:companies_autocomplete" %}',
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data })
        },
        placeholder: 'Search or add a company',
        allowClear: true,
        minimumInputLength: 1
      }).on('select2:select', function(e) {
        moveFocusFrom(e.target);
      });

      // — Initialize Category autocomplete + move focus —
      $('#id_prod_category').select2({
        ajax: {
          url: '{% url "products:categories_autocomplete" %}',
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data })
        },
        placeholder: 'Search or add a category',
        allowClear: true,
        minimumInputLength: 1
      }).on('select2:select', function(e) {
        moveFocusFrom(e.target);
      });

      $('#id_prod_department').select2({
        ajax: {
          url: '{% url "products:departments_autocomplete" %}',
          data: params => ({ term: params.term }),
          processResults: data => ({ results: data })
        },
        placeholder: 'Search a department',
        allowClear: true,
        minimumInputLength: 0
      }).on('select2:select', function(e) { moveFocusFrom(e.target); });


      // — Fallback: Enter in any other field moves focus or submits —
      form.addEventListener('keydown', function(e) {
        if (e.key !== 'Enter') return;
        if (document.querySelector('.select2-container--open')) {
          e.preventDefault();
          return;
        }
        e.preventDefault();
        moveFocusFrom(e.target);
        const fields = getFields();
        const idx = fields.indexOf(e.target);
        if (idx === fields.length - 1) {
          form.submit();
        }
      });

      // — Re-inject previously chosen Select2 values on error —
      {% if form_data.name %}
      const nameOption = new Option(
        "{{ form_data.name }}",
        "{{ form_data.name }}",
        true, true
      );
      $('#id_name').append(nameOption).trigger('change');
      {% endif %}
      {% if form_data.prod_company %}
      const compOption = new Option(
        "{{ form_data.prod_company }}",
        "{{ form_data.prod_company }}",
        true, true
      );
      $('#id_prod_company').append(compOption).trigger('change');
      {% endif %}
      {% if form_data.prod_category %}
      const catOption = new Option(
        "{{ form_data.prod_category }}",
        "{{ form_data.prod_category }}",
        true, true
      );
      $('#id_prod_category').append(catOption).trigger('change');
      {% endif %}

      {% if form_data.prod_department %}
      const deptOption = new Option("{{ form_data.prod_department }}", "{{ form_data.prod_department }}", true, true);
      $('#id_prod_department').append(deptOption).trigger('change');
      {% endif %}


      // on change: toggle + focus appropriate field
      $autoCode.on('change', function() {
        toggleCodeField();
        if (this.checked) {
          $nameSelect.select2('open');
        } else {
          $codeInput.focus();
        }
      });
      
      // --- Non-Stock Item UI enforcement ---
      const $noStock      = $('#no_stock_manage');
      const $presentStock = $('#present_stock');
      const $isSerial     = $('#is_serial_tracked');

      function applyNonStockUi() {
        const isNonStock = ($noStock.val() === 'true');
        if (isNonStock) {
          // force no stock, disable stock & serial tracking
          $presentStock.val('0').prop('disabled', true);
          $isSerial.val('false').prop('disabled', true);
        } else {
          $presentStock.prop('disabled', false);
          $isSerial.prop('disabled', false);
        }
      }

      // init + bind
      $noStock.on('change', applyNonStockUi);
      applyNonStockUi();

      // on change: toggle + focus appropriate field
      $autoCode.on('change', function() {
        toggleCodeField();
        if (this.checked) {
          $nameSelect.select2('open');
        } else {
          $codeInput.focus();
        }
      });




    });

  (function() {
    // get backend value safely ('' if None)
    var val = "{{ fd.sale_units|default_if_none:''|escapejs }}";
    if (!val) { val = "-"; }

    var el = document.getElementById("sale_units");
    if (!el) return;

    // if value not in options, prepend it so we don’t lose existing data
    var exists = Array.prototype.some.call(el.options, function(o){ return o.value === val; });
    if (!exists && val) {
      var opt = document.createElement("option");
      opt.value = val;
      opt.textContent = val;
      el.insertBefore(opt, el.firstChild);
    }
    el.value = val;
  })();
</script>


{% endblock javascripts %}