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

{% block title %}Update Vehicle{% endblock title %}
{% block stylesheets %}{% endblock stylesheets %}
{% block heading %}Update Vehicle{% endblock heading %}

{% block content %}
<!-- Go back -->
<div class="row ml-0 mb-3">
    <a href="{% url 'products:vehicles_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-8">
        <div class="card-body">
            <form id="update-veh" action="{% url 'products:vehicles_update' vehicle.id %}"  method="post">
                {% csrf_token %}
                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" name="name" value="{{ vehicle.name }}" required>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="inputRent">Rent</label>
                        <input type="number" step="any" class="form-control" name="rent" value="{{ vehicle.rent }}" required>
                    </div>
                    <div class="form-group col-md-3">
                        <label for="inputBalance">Balance</label>
                        <input type="number" step="any" class="form-control" name="balance" value="{{ vehicle.balance }}" required>
                    </div>
                </div>

                <div class="form-row">

                    <!-- Customer (optional) -->
                    <div class="form-group mb-2">
                      <label for="searchbox_customers">Customer (optional)</label>
                      <select id="searchbox_customers" name="customer_tid" style="width:100%">
                        {% if customer_selected %}
                          <option value="{{ customer_selected.t_id }}" selected>{{ customer_selected.name }}</option>
                        {% endif %}
                      </select>
                      <small class="form-text text-muted">Clear to detach, or pick another customer to re-link.</small>
                    </div>


                    <div class="form-group col-md-12">
                        <label for="inputDescp">Description</label>
                        <input type="text" name="descp" class="form-control" value="{{ vehicle.descp }}">
                    </div>
                </div>

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




{% block javascripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('update-veh');
  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-bank').submit();
  }
});
</script>

<script>
(function(){
  if (typeof window.csrftoken === 'undefined') {
    function getCookie(name) {
      const value = `; ${document.cookie}`;
      const parts = value.split(`; ${name}=`);
      if (parts.length === 2) return parts.pop().split(';').shift();
    }
    window.csrftoken = getCookie('csrftoken');
  }

  $('#searchbox_customers').select2({
    theme: 'bootstrap4',
    width: '100%',
    placeholder: 'Search customer…',
    allowClear: true,
    minimumInputLength: 1,
    ajax: {
      url: '{% url "customers:get_customers" %}',
      type: 'POST',
      delay: 250,
      headers: { 'X-CSRFToken': window.csrftoken },
      data: params => ({
        term: params.term || '',
        area_id: window.selectedAreaId || ''
      }),
      processResults: d => ({ results: d })
    }
  })
  .on('select2:open', () => {
    setTimeout(() => {
      const fld = document.querySelector('.select2-container--open .select2-search__field');
      fld && fld.focus();
    }, 0);
  });
})();
</script>



{% endblock javascripts %}