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

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

{% block content %}
<div class="row ml-0 mb-3">
  <a href="{% url 'products:expenses_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="update-expense" method="post" action="{% url 'products:expenses_update' expense.id %}">
        {% csrf_token %}
        <div class="form-row">
          <div class="form-group col-md-8">
            <label>Name</label>
            <input type="text" name="expense_name" class="form-control"
                   value="{{ expense.expense_name }}" 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"
                   value="{{ expense.description }}">
          </div>
        </div>
        <button type="submit" class="btn btn-success font-weight-bold">Update expense</button>
      </form>
    </div>
  </div>
</div>
{% endblock content %}



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

  // Enter → next field (except in textarea)
  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('update-expense').submit();
  }
});
</script>
{% endblock javascripts %}