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

{% block title %}{% if mode == "add" %}New Paid Voucher{% else %}Edit Paid Voucher{% endif %}{% endblock %}
{% block heading %}{% if mode == "add" %}New Paid Voucher{% else %}Edit — {{ txn.voucher_no }}{% endif %}{% endblock %}

{% block content %}
<div class="card shadow">
  <div class="card-body">
    <form method="post">
      {% csrf_token %}

      <div class="form-row">
        <div class="form-group col-md-3">
          <label>Voucher Date <span class="text-danger">*</span></label>
          <input type="date" name="voucher_date" class="form-control"
                 value="{{ txn.voucher_date|default:today|date:'Y-m-d' }}" required>
        </div>
        <div class="form-group col-md-3">
          <label>Reference No</label>
          <input type="text" name="reference_no" class="form-control" value="{{ txn.reference_no|default:'' }}">
        </div>
        <div class="form-group col-md-3">
          <label>Amount <span class="text-danger">*</span></label>
          <input type="number" step="0.01" name="amount" class="form-control"
                 value="{{ amount|default:'' }}" required>
        </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label>Paid To (Party) <span class="text-danger">*</span></label>
          <select name="party_id" id="id_party" class="form-control select2-party" required>
            {% if txn.party %}<option value="{{ txn.party.id }}" selected>{{ txn.party.name }}</option>{% endif %}
          </select>
        </div>
        <div class="form-group col-md-6">
          <label>Pay From (Cash/Bank) <span class="text-danger">*</span></label>
          <select name="cash_bank_id" id="id_cashbank" class="form-control select2-cashbank" required>
            {% if txn.cash_bank_account %}<option value="{{ txn.cash_bank_account.id }}" selected>{{ txn.cash_bank_account.account_name }}</option>{% endif %}
          </select>
        </div>
      </div>

      <div class="form-group">
        <label>Narration</label>
        <textarea name="narration" class="form-control" rows="2">{{ txn.description|default:'' }}</textarea>
      </div>

      <button type="submit" class="btn btn-danger">
        {% if mode == "add" %}Post Voucher{% else %}Save Changes{% endif %}
      </button>
      <a href="{% url 'coa:pv_list' %}" class="btn btn-secondary">Cancel</a>
    </form>
  </div>
</div>
{% endblock %}

{% block javascripts %}
<script>
$(document).ready(function(){
  $('.select2-party').select2({
    width: '100%',
    ajax: {
      url: "{% url 'coa:ajax_party_search' %}",
      dataType: 'json',
      delay: 250,
      data: function (params) { return { q: params.term }; },
      processResults: function (data) { return { results: data.results }; }
    },
    minimumInputLength: 1
  });

  $('.select2-cashbank').select2({
    width: '100%',
    ajax: {
      url: "{% url 'coa:ajax_cashbank_search' %}",
      dataType: 'json',
      delay: 250,
      data: function (params) { return { q: params.term }; },
      processResults: function (data) { return { results: data.results }; }
    },
    minimumInputLength: 0
  });
});
</script>
{% endblock %}