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

{% block title %}Update product{% endblock title %}
{% block heading %}Update product{% endblock heading %}

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

{% 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>

<div class="row">
  <div class="card col-12">
    <div class="card-body">
      <form id="update-prod"
            action="{% url 'products:products_update' product.id %}"
            method="post">
        {% csrf_token %}

        <!-- Group 1: 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>Product Code</label>
              <input type="text"
                     class="form-control"
                     name="product_code"
                     value="{{ product.product_code }}"
                     required>
            </div>

            <div class="form-group col-12 col-md-8">
              <label for="id_name">Name</label>
              <select id="id_name"
                      name="name"
                      class="form-control"
                      required>
                <option value="{{ product.name }}" selected>{{ product.name }}</option>
              </select>
            </div>
          </div>

          <div class="form-row">
            <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"
                      required>
                <option value="{{ product.prod_company }}" selected>{{ product.prod_company }}</option>
              </select>
            </div>

            <div class="form-group col-12 col-md-4">
              <label>Purchase Price</label>
              <input type="number" step="any"
                     name="purchase_price"
                     class="form-control"
                     value="{{ product.purchase_price }}"
                     required>
            </div>

            <div class="form-group col-12 col-md-4">
              <label>Local Sale Price</label>
              <input type="number" step="any"
                     name="l_sale_price"
                     class="form-control"
                     value="{{ product.l_sale_price }}"
                     required>
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-12 col-md-6">
              <label>Pieces per Pack</label>
              <input type="number"
                     name="pieces_per_pack"
                     class="form-control"
                     value="{{ product.pieces_per_pack }}"
                     required>
            </div>
            <div class="form-group col-12 col-md-6">
              <label>Present Stock</label>
              <input type="number" step="any"
                     id="present_stock"
                     name="present_stock"
                     class="form-control"
                     value="{{ present_stock_display }}"
                     required>

            </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="{{ product.whole_sale_price }}"
                     required>
            </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="{{ product.supplier_price }}"
                     required>
            </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="{{ product.branches_price }}"
                     required>
            </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-4">
              <label for="id_prod_category">Category</label>
              <select id="id_prod_category"
                      name="prod_category"
                      class="form-control">
                <option value="{{ product.prod_category }}" selected>
                  {{ product.prod_category }}
                </option>
              </select>
            </div>

            <div class="form-group col-12 col-md-4">
              <label for="id_prod_department">Department</label>
              <select id="id_prod_department" name="prod_department" class="form-control">
                <option value="{{ product.department_id }}" selected>{{ department_name }}</option>
              </select>
            </div>


            <div class="form-group col-12 col-md-4">
              <label for="id_sale_units">Sale Units</label>
              <select id="id_sale_units"
                      name="sale_units"
                      class="form-control"
                      required>
                {% if product.sale_units %}
                  <option value="{{ product.sale_units }}" selected>{{ product.sale_units }}</option>
                {% endif %}
              </select>
            </div>


            <div class="form-group col-12 col-md-4">
              <label>Labour</label>
              <input type="text"
                     class="form-control"
                     name="packing_cost"
                     value="{{ product.packing_cost }}"
                     required>
            </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="{{ product.stock_limit }}"
                     required>
            </div>
            <div class="form-group col-12 col-md-4">
              <label>GST (%)</label>
              <input type="text"
                     name="gst"
                     class="form-control"
                     value="{{ product.gst }}"
                     required>
            </div>
            <div class="form-group col-12 col-md-4">
              <label>Further Tax (%)</label>
              <input type="text"
                     name="further_tax"
                     class="form-control"
                     value="{{ product.further_tax }}">
            </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="{{ product.disc }}">
            </div>
            <div class="form-group col-12 col-md-4">
              <label>Loading</label>
              <input type="text"
                     name="loading"
                     class="form-control"
                     value="{{ product.loading }}">
            </div>
            <div class="form-group col-12 col-md-4">
              <label>Unloading</label>
              <input type="text"
                     name="unloading"
                     class="form-control"
                     value="{{ product.unloading }}">
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-12  col-md-4">
              <label>Comments</label>
              <input type="text"
                     name="comments"
                     class="form-control"
                     value="{{ product.comments }}">
            </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="{{ product.packets }}"
                     required>
            </div>

            <div class="form-group col-12  col-md-4">
              <label for="is_serial_tracked">Serial Tracking</label>
              <select id="is_serial_tracked" name="is_serial_tracked" class="form-control">
                <option value="false" {% if not product.is_serial_tracked %}selected{% endif %}>False</option>
                <option value="true"  {% if product.is_serial_tracked %}selected{% endif %}>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">
              <option value="false" {% if not product.no_stock_manage %}selected{% endif %}>False</option>
              <option value="true"  {% if product.no_stock_manage %}selected{% endif %}>True</option>
            </select>
            <small class="form-text text-muted">No inventory movement or stock tracking when True.</small>
          </div>
          </div>
        </fieldset>

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


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


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

      // 1️⃣ Enter on product_code → open Name
      document.querySelector('input[name="product_code"]')
        .addEventListener('keydown', function(e) {
          if (e.key === 'Enter') {
            e.preventDefault();
            $('#id_name').select2('open');
          }
        });

      // 2️⃣ Track which Select2 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'; });

      // 3️⃣ Intercept Enter in any Select2 search box
      $(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
            $('#id_prod_company').select2('close');
            document.querySelector('input[name="purchase_price"]').focus();
          }
        }
      });

      // 4️⃣ 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 in Select2 search
    $(document).on('keydown', '.select2-search--dropdown .select2-search__field', function(e) {
      if (e.key === 'Enter' || e.which === 13) {
        e.preventDefault();
        e.stopPropagation();
      }
    });

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

    // Initialize Name (tags + AJAX + move focus)
    $('#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 (AJAX + 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 (AJAX + 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); });


    // --- Sale Units dropdown (Select2) ---
    const SALE_UNIT_CHOICES = [
      { id: '-',     text: '-' },
      { id: 'BAGS - Bag',     text: 'BAGS - Bag' },
      { id: 'BOTTLES - Btl',   text: 'BOTTLES - Btl' },
      { id: 'BOX - Box',    text: 'BOX - Box' },
      { id: 'BUNDLES - Bdl',  text: 'BUNDLES - Bdl' },
      { id: 'CANS - Can',     text: 'CANS - Can' },
      { id: 'CARTONS - Ctn',      text: 'CARTONS - Ctn' },
      { id: 'DOZENS - Dzn',      text: 'DOZENS - Dzn' },
      { id: 'GRAMMES - Gm',     text: 'GRAMMES - Gm' },
      { id: 'KILOGRAMS - Kg',  text: 'KILOGRAMS - Kg' },
      { id: 'LITRE - Ltr',   text: 'LITRE - Ltr' },
      { id: 'METERS - Mtr', text: 'METERS - Mtr' },
      { id: 'MILLILITRE - Ml',    text: 'MILLILITRE - Ml' },
      { id: 'NUMBERS - Nos',    text: 'NUMBERS - Nos' },
      { id: 'PACKS - Pac',    text: 'PACKS - Pac' },
      { id: 'PAIRS - Prs',    text: 'PAIRS - Prs' },
      { id: 'PIECES - Pcs',    text: 'PIECES - Pcs' },
      { id: 'QUINTAL - Qtl',    text: 'QUINTAL - Qtl' },
      { id: 'ROLLS - Rol',    text: 'ROLLS - Rol' },
      { id: 'SQUARE FEET - Sqf',    text: 'SQUARE FEET - Sqf' },
    ];



    $('#id_sale_units').select2({
      // Agar aap ke pass AJAX endpoint hai to is "data" ko comment karke AJAX config use kar sakte hain.
      data: SALE_UNIT_CHOICES,


      tags: true,                       // user naya unit type bhi add kar sake
      tokenSeparators: [','],
      placeholder: 'Select or type a unit',
      allowClear: true,
      width: '100%',
      // New tags ko UPPERCASE bana dein taake consistency rahe
      createTag: params => {
        const t = (params.term || '').trim();
        if (!t) return null;
        return { id: t.toUpperCase(), text: t.toUpperCase(), newTag: true };
      },
      templateResult: data =>
        data.newTag
          ? $('<span style="font-style:italic;color:#666">Add “' + data.text + '”</span>')
          : data.text
    }).on('select2:select', function(e) {
      // same UX: select ke baad next field par focus
      moveFocusFrom(e.target);
    });



    // Fallback Enter handler outside of Select2
    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();
      }
    });


    // --- Non-Stock Item UI enforcement (Update) ---
    const $noStock      = $('#no_stock_manage');
    const $presentStock = $('#present_stock');
    const $isSerial     = $('#is_serial_tracked');

    function applyNonStockUi() {
      const isNonStock = ($noStock.val() === 'true');
      if (isNonStock) {
        $presentStock.val('0').prop('disabled', true);
        $isSerial.val('false').prop('disabled', true);
      } else {
        $presentStock.prop('disabled', false);
        $isSerial.prop('disabled', false);
      }
    }

    $noStock.on('change', applyNonStockUi);
    applyNonStockUi();

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