{% extends "pos/base.html" %}
{% load static %}
{% block title %}{% if is_edit %}Edit{% else %}Add{% endif %} Settlement{% endblock %}

{% block stylesheets %}

<style>
  .hidden {display:none;}
</style>
{% endblock %}

{% block heading %}{% if is_edit %}Edit{% else %}Add{% endif %} Customer Settlement{% endblock %}

{% block content %}
<form action="" method="post" id="settlement-form" class="needs-validation">
  {% csrf_token %}
  <div class="row">
    <div class="col-md-2">
      <label class="small mb-1">Customer&nbsp;ID</label>
      <input type="number" name="customer_id" id="customer_id" value="{{ payment.name|default_if_none:'' }}" class="form-control" required>
    </div>

    <div class="col-md-4">
      <label class="small mb-1">Customer&nbsp;Name</label>
      <select name="customer_name"
              id="searchbox_customers"
              class="form-control" required>
          {% if is_edit %}
              <option value="{{ payment.name }}" selected>
                  {{ payment.party_descp }}
              </option>
          {% endif %}
      </select>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Previous</label>
      <input type="text" id="due_balance" class="form-control" value="{{ payment.previous_balance|default_if_none:'' }}" readonly>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Amount</label>
      <input
        type="number"
        step="0.01"
        min="0.01"
        name="received_amount"
        value="{% if is_edit %}{{ payment_abs_amount|default_if_none:'' }}{% else %}{{ payment.amount_transaction|default_if_none:'' }}{% endif %}"
        required
        class="form-control">
      <small class="text-muted">Positive amount will reduce customer ledger.</small>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Date</label>
      <input 
        type="date" 
        class="form-control" 
        id="trx_date" 
        name="trx_date"
        value="{{ today|date:'Y-m-d' }}" 
        required
      >
    </div>
  </div>

  <div class="row mt-3">
    <div class="col-md-4">
      <label class="small mb-1">Description</label>
      <input type="text" name="description" class="form-control" value="{{ payment.bill_title_descp|default_if_none:'Balance Adjustment' }}">
    </div>

    <div class="col-md-4">
      <label class="small mb-1 d-flex align-items-center">
        <span>Settlement&nbsp;Type</span>
        <a href="{% url 'products:settlements_add' %}" class="btn btn-sm btn-outline-secondary ml-2" title="Add new type">+</a>
      </label>
      <select name="settlement_t_id" id="settlement_t_id" class="form-control" required>
        <option value="">-- Select Type --</option>
        {% for s in settlement_types %}
          <option value="{{ s.t_id }}"
            {% if meta and meta.settlement_t_id == s.t_id %}selected{% endif %}>
            {{ s.name }}
          </option>
        {% endfor %}
      </select>
    </div>

    <div class="col-md-2">
      <label class="small mb-1">Operator</label>
      <select name="saleman_operator" class="form-control">
        {% for s in salemen %}
          <option value="{{ s.t_id }}"
              {% if is_edit and s.t_id|stringformat:"s" == payment.saleman_name %}selected{% endif %}>{{ s.name }}</option>
        {% endfor %}
      </select>
    </div>
  </div>

  <div class="mt-4">
    <button type="submit"
            name="action"
            value="save"
            class="btn btn-success">
      <i class="fas fa-save mr-1"></i>Save
    </button>

    <button type="submit"
            name="action"
            value="save_share"
            class="btn btn-dark">
      <i class="fas fa-share-alt mr-1"></i>Save &amp; Share
    </button>

    <a href="{% url 'transactions:customer_settlement' %}"
       class="btn btn-secondary">
      Cancel
    </a>
  </div>

</form>
{% endblock %}

{% block javascripts %}

<script>
document.addEventListener('DOMContentLoaded', () => {
  const csrftoken = '{{ csrf_token }}';

  // --- 1) Select2 Customer Search (same as recovery) ---
  const $customerSelect = $('#searchbox_customers');
  $customerSelect.select2({
    theme: 'bootstrap4',
    placeholder: 'Search customer…',
    allowClear: true,
    minimumInputLength: 1,
    ajax: {
      url: "{% url 'customers:get_customers' %}",
      type: 'POST',
      delay: 250,
      data: p => ({ term: p.term }),
      headers: { 'X-CSRFToken': csrftoken },
      processResults: d => ({ results: d })
    },
    templateResult: r => r.loading ? r.text : $('<div>' + r.text + '</div>')
  });

  // Auto-open select2 and focus search field
  setTimeout(() => {
    $customerSelect.select2('open');
    setTimeout(() => {
      const f = document.querySelector('.select2-container--open .select2-search__field');
      if (f) f.focus();
    }, 0);
  }, 200);

  // On customer select: set ID and Due, focus on amount
  $customerSelect.on('select2:select', e => {
    const d = e.params.data;
    $('#customer_id').val(d.id);
    $('#due_balance').val(d.balance || 0);
    $('input[name="received_amount"]').focus();
  });

  // If customer_id typed manually
  $('#customer_id').on('change', function () {
    if (!this.value) return;
    $.post("{% url 'customers:get_customers' %}", { term: this.value }, function (d) {
      const r = d.find(x => x.value == $('#customer_id').val());
      if (r) {
        const newOption = new Option(r.label, r.value, false, true);
        $customerSelect.append(newOption).trigger('change');
        $('#due_balance').val(r.balance || 0);
        $('input[name="received_amount"]').focus();
      }
    });
  });

  // --- 2) Keyboard flow (Enter → next) ---
  $('input[name="received_amount"]').on('keydown', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      $('input[name="description"]').focus();
    }
  });

  // Enter inside select2 search sends focus to amount
  $(document).on('keydown', '.select2-search__field', function (e) {
    if (e.key === 'Enter') {
      e.preventDefault();
      setTimeout(() => {
        $('input[name="received_amount"]').focus();
      }, 100);
    }
  });

  // --- 3) Ctrl + S for Form Submit ---
  $(document).on('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
      e.preventDefault();
      $('#settlement-form').submit();
    }
  });

  // --- 4) Prevent form submit on Enter globally ---
  $('#settlement-form').on('keydown', function (e) {
    if (e.key === 'Enter' && e.target.tagName !== 'TEXTAREA' && !$(e.target).is('.select2-search__field')) {
      e.preventDefault();
    }
  });

  // --- 5) Default Date = today if empty ---
  const today = new Date().toISOString().split("T")[0];
  const $trxDate = $('#trx_date');
  if (!$trxDate.val()) $trxDate.val(today);
});
</script>
{% endblock %}