{% extends "pos/base.html" %}
{% block title %}Edit Commission{% endblock %}

{% block extra_head %}
  <!-- jQuery UI CSS (for Autocomplete) -->

{% endblock %}
{% block heading %}Edit Commission (Invoice #{{ invoice_no }}){% endblock %}
{% block content %}
  <form method="post" id="commissionEditForm" class="mt-3">
    {% csrf_token %}

    <!-- Staff Autocomplete Field (pre‐populated) -->
    <div class="mb-3 row">
      <label for="staff_name" class="col-sm-2 col-form-label">Staff</label>
      <div class="col-sm-6">
        <input
          type="text"
          id="staff_name"
          class="form-control"
          placeholder="Type to search staff..."
          autocomplete="off"
          value="{{ staff_name }}" 
          required
        >
        <input 
          type="hidden"
          id="staff_id"
          name="staff_id"
          value="{{ staff_t_id }}"
        >
      </div>
    </div>

    <!-- Date Field (prefilled) -->
    <div class="mb-3 row">
      <label for="date" class="col-sm-2 col-form-label">Date</label>
      <div class="col-sm-4">
        <input
          type="date"
          id="date"
          name="date"
          value="{{ txn_date }}"
          class="form-control"
          required
        >
      </div>
    </div>

    <!-- Amount Field (prefilled) -->
    <div class="mb-3 row">
      <label for="amount" class="col-sm-2 col-form-label">Amount</label>
      <div class="col-sm-4">
        <input
          type="number"
          step="0.01"
          id="amount"
          name="amount"
          class="form-control"
          value="{{ amount }}"
          required
        >
      </div>
    </div>

    <!-- Remarks Field (prefilled) -->
    <div class="mb-3 row">
      <label for="remarks" class="col-sm-2 col-form-label">Remarks</label>
      <div class="col-sm-6">
        <input
          type="text"
          id="remarks"
          name="remarks"
          class="form-control"
          value="{{ remarks }}"
        >
      </div>
    </div>

    <button type="submit" class="btn btn-primary">Save Changes</button>
    <a href="{% url 'payroll:commission_list' %}" class="btn btn-secondary">Cancel</a>
  </form>
{% endblock %}

{% block extra_js %}
  <!-- jQuery (required for jQuery UI) -->

  <script>
    $(function() {
      $("#staff_name").autocomplete({
        source: function(request, response) {
          $.ajax({
            url: "{% url 'payroll:staff_autocomplete' %}",
            dataType: "json",
            data: { term: request.term },
            success: function(data) {
              response(data);
            }
          });
        },
        minLength: 1,
        select: function(event, ui) {
          $("#staff_name").val(ui.item.label);
          $("#staff_id").val(ui.item.id);
          return false;
        }
      });
    });
  </script>
{% endblock %}