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

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

{% block content %}
<div class="row ml-0 mb-3">
    <a href="{% url 'products:towns_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-town-form" action="{% url 'products:towns_add' %}" method="post">
                {% csrf_token %}
                <div class="form-row">
                    <div class="form-group col-md-8">
                        <label>Town Name</label>
                        <input type="text" name="name" class="form-control"
                               placeholder="Model Town…" required>
                    </div>
                </div>
                <div class="form-row">
                    <div class="form-group col-md-12">
                        <label>Description</label>
                        <input type="text" name="description" class="form-control"
                               placeholder="Optional description…">
                    </div>
                </div>
                <button class="btn btn-success font-weight-bold">Create Town</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

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

  fields.forEach(function(el, idx) {
    el.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' && this.tagName.toLowerCase() !== 'textarea') {
        e.preventDefault();
        var next = fields[idx + 1];
        if (next) next.focus();
      }
    });
  });
});
document.addEventListener('keydown', function(e) {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    document.getElementById('add-town-form').submit();
  }
});
</script>
{% endblock javascripts %}