{% extends "base.html" %}
{% block title %}{{ t('New transfer') }}{% endblock %}
{% block content %}
<div class="page-head"><div><small><a href="{{ url_for('wtransfers.index') }}">{{ t('Warehouse Transfers') }}</a></small><h1>{{ t('New transfer') }}</h1></div></div>
<form method="post" class="card">
  <div class="grid">
    <div class="field"><label>{{ t('From warehouse') }} *</label><select name="from_warehouse_id" id="wfrom" required>{% for w in warehouses %}<option value="{{ w.id }}">{{ w.bcode }} · {{ w.code }} — {{ nm(w) }}</option>{% endfor %}</select></div>
    <div class="field"><label>{{ t('To warehouse') }} *</label><select name="to_warehouse_id" required>{% for w in warehouses %}<option value="{{ w.id }}" {{ 'selected' if loop.index == 2 }}>{{ w.bcode }} · {{ w.code }} — {{ nm(w) }}</option>{% endfor %}</select></div>
    <div class="field"><label>{{ t('Date') }} *</label><input type="date" name="date" value="{{ today }}" required></div>
    <div class="field wide"><label>{{ t('Notes') }}</label><input name="notes"></div>
  </div>
  <table style="margin-top:14px" id="tr-lines"><thead><tr><th>{{ t('Product') }}</th><th class="num">{{ t('On hand') }}</th><th class="num">{{ t('Quantity') }}</th></tr></thead>
    <tbody>{% for i in range(4) %}<tr><td><select name="product_id"><option value=""></option>{% for p in products %}<option value="{{ p.id }}">{{ p.code }} {{ nm(p) }}</option>{% endfor %}</select></td>
      <td class="num onhand"></td><td><input name="quantity" class="num" inputmode="decimal" style="width:110px"></td></tr>{% endfor %}</tbody></table>
  <div class="form-actions">
    <button class="btn" name="action" value="send">{{ t('Save & Send') }}</button>
    <button class="btn ghost" name="action" value="draft">{{ t('Save as Draft') }}</button>
    <a class="btn ghost" href="{{ url_for('wtransfers.index') }}">{{ t('Cancel') }}</a>
  </div>
</form>
{% endblock %}
{% block scripts %}<script>
(function () {
  var stock = {{ stock|tojson }}, from = document.getElementById('wfrom');
  function show() { document.querySelectorAll('#tr-lines tbody tr').forEach(function (r) {
    var p = r.querySelector('select').value, s = stock[from.value] || {};
    r.querySelector('.onhand').textContent = p ? (s[p] || 0) : ''; }); }
  document.getElementById('tr-lines').addEventListener('change', show); from.addEventListener('change', show);
})();
</script>{% endblock %}