{% extends "base.html" %}
{% set heading = 'Receive stock from a supplier' if kind == 'purchase' else 'New sale' %}
{% block title %}{{ heading }}{% endblock %}
{% block content %}
<div class="page-head"><h1>{{ heading }}</h1></div>
<form method="post" class="panel">
  <input type="hidden" name="_csrf" value="{{ csrf_token() }}">
  <div class="row g-3 mb-3">
    <div class="col-md-4"><label class="form-label" for="party_id">{{ label }}</label>
      <select class="form-select" id="party_id" name="party_id" required>
        <option value="">Choose a {{ label.lower() }}</option>
        {% for p in parties %}<option value="{{ p.id }}" {% if request.form.get('party_id') == p.id|string %}selected{% endif %}>{{ p.name }}</option>{% endfor %}
      </select></div>
    <div class="col-md-4"><label class="form-label" for="warehouse_id">{{ 'Receive into' if kind == 'purchase' else 'Sell from' }}</label>
      <select class="form-select" id="warehouse_id" name="warehouse_id" required>
        {% for w in warehouses %}<option value="{{ w.id }}" {% if request.form.get('warehouse_id') == w.id|string %}selected{% endif %}>{{ w.name }}</option>{% endfor %}
      </select></div>
    <div class="col-md-4"><label class="form-label" for="note">Note (optional)</label>
      <input class="form-control" id="note" name="note" value="{{ request.form.get('note', '') }}"></div>
  </div>
  <table class="table align-middle" id="lines">
    <thead><tr><th style="width:46%">Product</th><th>Qty</th><th>Unit price ({{ currency }})</th><th class="num">Line total</th><th></th></tr></thead>
    <tbody>
      <tr>
        <td><select class="form-select prod" name="product_id" aria-label="Product">
          <option value="">Choose a product</option>
          {% for p in products %}<option value="{{ p.id }}" data-price="{{ p.cost_price if kind == 'purchase' else p.sale_price }}">{{ p.sku }} | {{ p.name }}</option>{% endfor %}
        </select></td>
        <td><input class="form-control qty" name="qty" type="number" min="1" value="1" aria-label="Quantity"></td>
        <td><input class="form-control price" name="price" type="number" min="0" step="0.01" value="0" aria-label="Unit price"></td>
        <td class="num lt">0</td>
        <td class="num"><button type="button" class="btn btn-sm btn-outline-danger rm" aria-label="Remove line">Remove</button></td>
      </tr>
    </tbody>
    <tfoot><tr><td colspan="3" class="num fw-semibold">Total ({{ currency }})</td><td class="num fw-bold" id="grand">0</td><td></td></tr></tfoot>
  </table>
  <button type="button" class="btn btn-outline-secondary" id="add">Add another product</button>
  <button class="btn btn-primary">{{ 'Save purchase' if kind == 'purchase' else 'Save sale' }}</button>
  <a class="btn btn-link" href="{{ url_for('doc_list', kind=kind) }}">Cancel</a>
</form>
<script>
const body = document.querySelector('#lines tbody');
function recalc() {
  let total = 0;
  body.querySelectorAll('tr').forEach(row => {
    const line = (+row.querySelector('.qty').value || 0) * (+row.querySelector('.price').value || 0);
    row.querySelector('.lt').textContent = line.toLocaleString();
    total += line;
  });
  document.getElementById('grand').textContent = total.toLocaleString();
}
body.addEventListener('change', e => {
  if (e.target.classList.contains('prod')) {
    e.target.closest('tr').querySelector('.price').value = e.target.selectedOptions[0].dataset.price || 0;
  }
  recalc();
});
body.addEventListener('input', recalc);
body.addEventListener('click', e => {
  if (e.target.classList.contains('rm') && body.rows.length > 1) { e.target.closest('tr').remove(); recalc(); }
});
document.getElementById('add').addEventListener('click', () => {
  const row = body.rows[0].cloneNode(true);
  row.querySelector('.prod').value = '';
  row.querySelector('.qty').value = 1;
  row.querySelector('.price').value = 0;
  body.appendChild(row);
  recalc();
});
</script>
{% endblock %}