{% extends "base.html" %}
{% block title %}{{ t('Write Off Stock') }}{% endblock %}
{% block content %}
<div class="page-head"><div><small><a href="{{ url_for('inventory.pickings', kind='scrap') }}">{{ t('Write-offs') }}</a></small>
  <h1>{{ t('Write Off Stock') }}</h1><small>{{ t('Damaged, expired or lost goods leave stock at average cost: Dr Inventory Write-offs, Cr Inventory.') }}</small></div></div>
<form method="post" class="card">
  <div class="grid">
    <div class="field"><label>{{ t('Warehouse') }} *</label>
      <select name="warehouse_id" id="wh" required>
        {% for w in warehouses %}<option value="{{ w.id }}" {{ 'selected' if pre.warehouse_id == w.id }}>{{ w.code }} — {{ nm(w) }} ({{ branches[w.branch_id].code if w.branch_id in branches else '' }})</option>{% endfor %}
      </select></div>
    <div class="field"><label>{{ t('Date') }} *</label><input type="date" name="date" value="{{ today }}" required></div>
    <div class="field"><label>{{ t('Reason') }} *</label>
      <select name="reason" required>{% for k, v in reasons.items() %}<option value="{{ k }}" {{ 'selected' if pre.reason == k }}>{{ t(v) }}</option>{% endfor %}</select></div>
    {% if cost_centres %}<div class="field"><label>{{ t('Cost Centre') }}</label>
      <select name="cost_centre_id"><option value=""></option>{% for c in cost_centres %}<option value="{{ c.id }}">{{ c.code }} {{ nm(c) }}</option>{% endfor %}</select></div>{% endif %}
    <div class="field wide"><label>{{ t('Notes') }}</label><input name="notes" placeholder="{{ t('e.g. Carton crushed in unloading') }}"></div>
  </div>
  <h2 style="margin-top:22px">{{ t('Lines') }}</h2>
  <table class="lines" data-lines data-mode="adjust" data-add="#add-line">
    <thead><tr><th>{{ t('Product') }}</th><th style="width:26%">{{ t('Batch') }}</th><th class="num" style="width:14%">{{ t('On Hand') }}</th><th class="num" style="width:16%">{{ t('Quantity') }}</th><th></th></tr></thead>
    <tbody>
      <tr class="tpl">
        <td><select name="product_id" disabled class="adj-product"><option value=""></option>
          {% for p in products %}<option value="{{ p.id }}">{{ p.code ~ ' ' if p.code }}{{ nm(p) }}</option>{% endfor %}</select></td>
        <td><select name="lot_id" disabled class="lot-pick"><option value="">{{ t('Earliest expiry first') }}</option></select></td>
        <td class="num on-hand">—</td>
        <td><input name="qty" class="num" inputmode="decimal" disabled></td>
        <td><button type="button" class="del">×</button></td>
      </tr>
      {% if pre.product_id %}
      <tr>
        <td><select name="product_id" class="adj-product"><option value=""></option>
          {% for p in products %}<option value="{{ p.id }}" {{ 'selected' if p.id == pre.product_id }}>{{ p.code ~ ' ' if p.code }}{{ nm(p) }}</option>{% endfor %}</select></td>
        <td><select name="lot_id" class="lot-pick" data-pre="{{ pre.lot_id or '' }}"><option value="">{{ t('Earliest expiry first') }}</option></select></td>
        <td class="num on-hand">—</td>
        <td><input name="qty" class="num" inputmode="decimal" value="{{ pre.qty }}"></td>
        <td><button type="button" class="del">×</button></td>
      </tr>{% endif %}
    </tbody>
  </table>
  <button type="button" class="btn ghost small" id="add-line" style="margin-top:10px">+ {{ t('Add line') }}</button>
  <div class="form-actions"><button class="btn danger">{{ t('Write Off') }}</button><a class="btn ghost" href="{{ url_for('insights.inventory') }}">{{ t('Cancel') }}</a></div>
</form>
{% endblock %}
{% block scripts %}
<script>
(function () {
  var onHand = {{ on_hand|tojson }}, lots = {{ lots|tojson }}, chooseFirst = {{ t('Earliest expiry first')|tojson }};
  var wh = document.getElementById('wh');
  function refresh() {
    document.querySelectorAll('table.lines tbody tr:not(.tpl)').forEach(function (tr) {
      var p = tr.querySelector('.adj-product').value, sel = tr.querySelector('.lot-pick');
      var q = (onHand[wh.value] || {})[p];
      tr.querySelector('.on-hand').textContent = p ? (q || 0) : '—';
      var keep = sel.value || sel.getAttribute('data-pre') || '';
      sel.removeAttribute('data-pre');
      sel.innerHTML = '';
      var o = document.createElement('option'); o.value = ''; o.textContent = chooseFirst; sel.appendChild(o);
      ((lots[wh.value] || {})[p] || []).forEach(function (b) {
        var op = document.createElement('option'); op.value = b.id; op.textContent = b.label;
        if (String(b.id) === String(keep)) op.selected = true; sel.appendChild(op);
      });
    });
  }
  document.addEventListener('change', function (e) { if (e.target.matches('.adj-product') || e.target === wh) refresh(); });
  refresh();
})();
</script>
{% endblock %}