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

{% block title %}Add vendor{% endblock %}
{% block heading %}Add vendor{% endblock %}

{% block content %}
  {% include "includes/_field_settings_dialog.html" %}
  <div class="row ml-0 mb-3">
    <a href="{% url 'products:vendors_list' %}">
      <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-8">
      <div class="card-body">
        <form id="add-vendor" data-field-settings="true" method="post" action="{% url 'products:vendors_add' %}">
          {% csrf_token %}

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Name</label>
              <input
                name="name" type="text" class="form-control"
                required autofocus
                value="{{ form_data.name|default:'' }}"
              >
            </div>
            <div class="form-group col-md-6">
              <label>Mobile</label>
              <input
                name="mobile" type="text" class="form-control"
                value="{{ form_data.mobile|default:'' }}"
              >
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Address</label>
              <input
                name="address" type="text" class="form-control"
                value="{{ form_data.address|default:'' }}"
              >
            </div>
            <div class="form-group col-md-6">
              <label>Phone</label>
              <input
                name="phone" type="text" class="form-control"
                value="{{ form_data.phone|default:'' }}"
              >
            </div>
          </div>

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Balance</label>
              <input
                name="balance" type="number" step="0.01" class="form-control"
                value="{{ form_data.balance|default:'' }}"
              >
            </div>
            <div class="form-group col-md-6">
              <label>Max Balance</label>
              <input
                name="max_balance" type="number" class="form-control"
                value="{{ form_data.max_balance|default:'' }}"
              >
            </div>
          </div>

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

{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('add-vendor');
  const fields = Array.from(
    form.querySelectorAll('input:not([type=hidden]), select, textarea')
  ).filter(el => !el.disabled);

  fields.forEach((el, idx) => {
    el.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && this.tagName.toLowerCase() !== 'textarea') {
        e.preventDefault();
        const next = fields[idx + 1];
        if (next) next.focus();
      }
    });
  });
});

// Ctrl+S (or ⌘+S) to submit
document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    document.getElementById('add-vendor').submit();
  }
});
</script>
{% endblock %}