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

{% block title %}Vendor Quick Edit{% endblock title %}
{% block heading %}Vendor Quick Edit{% endblock heading %}

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

{% endblock stylesheets %}

{% block content %}
<div class="row ml-0 mb-3">
  <a href="{% url 'products:vendors_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-md-10">
    <div class="card-body">

      <div id="msg_box" class="alert d-none" role="alert"></div>

      <!-- TOP LOAD BAR -->
      <form id="vendor-quick-form" onsubmit="return false;">
        {% csrf_token %}
        <input type="hidden" id="id_vendor_pk" name="vendor_pk">

        <div class="form-row align-items-end">
          <div class="form-group col-md-3">
            <label>Vendor Code (t_id)</label>
            <input type="text" class="form-control" id="id_vendor_tid" name="vendor_tid" placeholder="e.g. 1001">
          </div>

          <div class="form-group col-md-5">
            <label>Search Vendor (Name)</label>
            <select id="id_vendor_name" class="form-control" style="width:100%;">
              <option value="">Type to search…</option>
            </select>
          </div>

          <div class="form-group col-md-4">
            <button type="button" id="btn_load" class="btn btn-primary font-weight-bold mr-2">
              Load
            </button>
            <button type="button" id="btn_save" class="btn btn-success font-weight-bold">
              Save
            </button>
          </div>
        </div>

        <hr>

        <!-- EDITABLE FIELDS (BOTTOM) -->
        <h6 class="mb-3">Edit Vendor</h6>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label>Vendor Name (editable)</label>
            <input type="text" class="form-control" id="id_edit_name" name="name">
          </div>
          <div class="form-group col-md-6">
            <label>Mobile</label>
            <input type="text" class="form-control" id="id_mobile" name="mobile">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label>Address</label>
            <input type="text" class="form-control" id="id_address" name="address">
          </div>
          <div class="form-group col-md-6">
            <label>Phone</label>
            <input type="text" class="form-control" id="id_phone" name="phone">
          </div>
        </div>

        <div class="form-row">
          <div class="form-group col-md-6">
            <label>Balance</label>
            <input type="number" step="0.01" class="form-control" id="id_balance" name="balance">
          </div>
          <div class="form-group col-md-6">
            <label>Max Balance</label>
            <input type="number" class="form-control" id="id_max_balance" name="max_balance">
          </div>
        </div>

      </form>
    </div>
  </div>
</div>
{% endblock content %}

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


  <script>
  jQuery(function($){
    const csrf = $('input[name=csrfmiddlewaretoken]').val();

    const $tid  = $('#id_vendor_tid');
    const $name = $('#id_vendor_name');
    const $pk   = $('#id_vendor_pk');
    const $msg  = $('#msg_box');
    const $form = $('#vendor-quick-form');

    function showMsg(type, text){
      $msg.removeClass('d-none alert-success alert-danger alert-warning')
          .addClass('alert-' + type)
          .text(text);
    }
    function clearMsg(){ $msg.addClass('d-none').text(''); }

    function focusSelect2Search(){
      setTimeout(() => {
        document.querySelector('.select2-container--open .select2-search__field')?.focus();
      }, 0);
    }
    $(document).on('select2:open', focusSelect2Search);

    // Select2 vendor search (simple name search)
    $name.select2({
      ajax: {
        url: "{% url 'products:vendor_quick_load' %}",
        type: "POST",
        headers: { "X-CSRFToken": csrf },
        data: params => ({ term: params.term }),
        processResults: resp => {
          // resp.ok true => single vendor, but Select2 expects list
          // so we simulate list by returning one item when found
          if(!resp.ok) return { results: [] };
          const v = resp.vendor;
          return { results: [{ id: v.t_id, text: v.name }] };
        }
      },
      placeholder: "Type vendor name...",
      minimumInputLength: 1,
      width: "100%",
      allowClear: true
    });

    function fillForm(v){
      $pk.val(v.pk);
      $tid.val(v.t_id);

      // top select2 is only for load → clear it
      $name.val(null).trigger('change');

      // bottom editable fields
      $('#id_edit_name').val(v.name || '');
      $('#id_address').val(v.address || '');
      $('#id_mobile').val(v.mobile || '');
      $('#id_phone').val(v.phone || '');
      $('#id_balance').val(v.balance);
      $('#id_max_balance').val(v.max_balance);
    }

    function clearForm(){
      $pk.val('');
      $tid.val('');
      $name.val(null).trigger('change');

      $('#id_edit_name').val('');
      $('#id_address').val('');
      $('#id_mobile').val('');
      $('#id_phone').val('');
      $('#id_balance').val('');
      $('#id_max_balance').val('');

      clearMsg();
      $tid.focus().select();
    }

    function ajaxLoad(payload){
      clearMsg();
      $.post("{% url 'products:vendor_quick_load' %}", payload)
       .done(function(resp){
         if(!resp.ok){ showMsg('danger', resp.message || 'Not found'); return; }
         fillForm(resp.vendor);
         showMsg('success', 'Loaded: ' + resp.vendor.name);
         $('#id_edit_name').focus().select();
       })
       .fail(function(){ showMsg('danger','Load failed'); });
    }

    function ajaxSave(){
      clearMsg();
      const payload = {
        csrfmiddlewaretoken: csrf,
        vendor_pk: $pk.val(),
        vendor_tid: $tid.val(),

        name: ($('#id_edit_name').val() || '').trim(),
        address: ($('#id_address').val() || '').trim(),
        mobile: ($('#id_mobile').val() || '').trim(),
        phone: ($('#id_phone').val() || '').trim(),
        balance: $('#id_balance').val(),
        max_balance: $('#id_max_balance').val(),
      };

      $.post("{% url 'products:vendor_quick_save' %}", payload)
       .done(function(resp){
         if(!resp.ok){ showMsg('danger', resp.message || 'Update failed'); return; }
         showMsg('success', resp.message || 'Updated');
         setTimeout(clearForm, 200);
       })
       .fail(function(){ showMsg('danger','Save failed'); });
    }

    // Load button
    $('#btn_load').on('click', function(){
      const tid = ($tid.val() || '').trim();
      if(tid){
        ajaxLoad({ csrfmiddlewaretoken: csrf, vendor_tid: tid });
        return;
      }
      $name.select2('open');
      focusSelect2Search();
    });

    // Save button
    $('#btn_save').on('click', ajaxSave);

    // when select2 picks → load by t_id
    $name.on('select2:select', function(e){
      const tid = e.params.data.id;
      ajaxLoad({ csrfmiddlewaretoken: csrf, vendor_tid: tid });
    });

    // ✅ t_id Enter = load (priority)
    $tid.on('keydown', function(e){
      if(e.key !== 'Enter') return;
      e.preventDefault();
      e.stopPropagation();

      const v = ($(this).val() || '').trim();
      if(!v){
        $name.select2('open');
        focusSelect2Search();
        return;
      }
      ajaxLoad({ csrfmiddlewaretoken: csrf, vendor_tid: v });
    });

    // Enter → next field (skip t_id because it loads)
    function getFields(){
      return Array.from($form[0].querySelectorAll('input, select, textarea'))
        .filter(el => !el.disabled && el.type !== 'hidden' && el.type !== 'submit');
    }
    function moveNext(fromEl){
      const fields = getFields();
      const idx = fields.indexOf(fromEl);
      const next = fields[idx + 1];
      if(!next) return;

      if(next.id === 'id_vendor_name'){
        $name.select2('open'); focusSelect2Search(); return;
      }
      next.focus();
      if(next.select) next.select();
    }

    $form.on('keydown', 'input, select, textarea', function(e){
      if(e.key !== 'Enter') return;

      if(this.id === 'id_vendor_tid') return; // ⭐ let t_id handler work
      if(this.tagName.toLowerCase() === 'textarea') return;

      if($('.select2-container--open').length){
        e.preventDefault();
        return;
      }

      e.preventDefault();
      moveNext(this);
    });

    // Ctrl+S save
    $(document).on('keydown', function(e){
      if((e.ctrlKey||e.metaKey) && e.key.toLowerCase()==='s'){
        e.preventDefault();
        ajaxSave();
      }
    });

    // initial focus
    $tid.focus();
  });
  </script>
{% endblock javascripts %}