{% extends "pos/base.html" %}
{% block title %}Settle Order #{{ order.order_no }}{% endblock %}
{% block heading %}Settle Order #{{ order.order_no }}{% endblock %}
{% block content %}
<form method="post">{% csrf_token %}
  <div class="row">
    <div class="col-md-4"><div class="card"><div class="card-body">
      <div><b>Subtotal:</b> Rs {{ subtotal|floatformat:2 }}</div>
      <div><b>Tax:</b> Rs {{ tax_value|floatformat:2 }}</div>
      <div><b>Grand:</b> Rs {{ grand_total|floatformat:2 }}</div>
    </div></div></div>
    <div class="col-md-8"><div class="card"><div class="card-body">
      <input type="hidden" name="tenders_count" id="tenders_count" value="1">
      <div id="tenders">
        <div class="form-row tender" data-index="0">
          <div class="col-3">
            <label class="small">Type</label>
            <select name="tender[0][type]" class="form-control">
              <option value="Cash">Cash</option><option value="Digital">Digital</option>
            </select>
          </div>
          <div class="col-5">
            <label class="small">Bank</label>
            <select name="tender[0][bank_tid]" class="form-control">
              <option value="0">—</option>
              {% for b in banks %}<option value="{{ b.t_id }}">{{ b.name }}</option>{% endfor %}
            </select>
          </div>
          <div class="col-3">
            <label class="small">Amount</label>
            <input type="number" step="0.01" min="0" name="tender[0][amount]" class="form-control" value="{{ grand_total|floatformat:2 }}">
          </div>
          <div class="col-1 d-flex align-items-end">
            <button type="button" class="btn btn-light btn-sm remove-tender">&times;</button>
          </div>
        </div>
      </div>
      <button type="button" id="add-tender" class="btn btn-outline-primary btn-sm mt-2">+ Add Tender</button>
    </div></div></div>
  </div>
  <div class="mt-3 text-right">
    <button class="btn btn-success">Settle Now</button>
    <a href="{% url 'hotel:resto_edit' order.order_no %}" class="btn btn-secondary">Cancel</a>
  </div>
</form>
{% endblock %}
{% block javascripts %}
<script>
(function(){
  var addBtn = document.getElementById('add-tender');
  var wrap = document.getElementById('tenders');
  var cnt = document.getElementById('tenders_count');
  function bindRemove(btn){
    btn.addEventListener('click', function(){
      var row = this.closest('.tender'); row.parentNode.removeChild(row);
      var rows = document.querySelectorAll('#tenders .tender');
      cnt.value = rows.length;
      for (var i=0;i<rows.length;i++){
        rows[i].dataset.index=i;
        rows[i].querySelector('[name^="tender["]').name='tender['+i+'][type]';
        rows[i].querySelector('[name*="[bank_tid]"]').name='tender['+i+'][bank_tid]';
        rows[i].querySelector('[name*="[amount]"]').name='tender['+i+'][amount]';
      }
    });
  }
  bindRemove(document.querySelector('.remove-tender'));
  addBtn.addEventListener('click', function(){
    var idx = parseInt(cnt.value||'0',10);
    var div = document.createElement('div');
    div.className='form-row tender';
    div.dataset.index=idx;
    div.innerHTML = `
      <div class="col-3"><label class="small">Type</label>
        <select name="tender[${idx}][type]" class="form-control">
          <option value="Cash">Cash</option><option value="Digital">Digital</option>
        </select></div>
      <div class="col-5"><label class="small">Bank</label>
        <select name="tender[${idx}][bank_tid]" class="form-control">
          <option value="0">—</option>
          {% for b in banks %}<option value="{{ b.t_id }}">{{ b.name }}</option>{% endfor %}
        </select></div>
      <div class="col-3"><label class="small">Amount</label>
        <input type="number" step="0.01" min="0" name="tender[${idx}][amount]" class="form-control" value="0">
      </div>
      <div class="col-1 d-flex align-items-end"><button type="button" class="btn btn-light btn-sm remove-tender">&times;</button></div>`;
    wrap.appendChild(div); cnt.value = idx + 1;
    bindRemove(div.querySelector('.remove-tender'));
  });
})();
</script>
{% endblock %}