{% extends "base.html" %}
{% block title %}{{ t('Bill of materials') }}{% endblock %}
{% block content %}
<div class="page-head"><h1>{{ t('Bill of materials') }}</h1></div>
<form class="card" method="post">
  <div class="grid">
    <div class="field"><label>{{ t('Product made') }} *</label>
      <select name="product_id" required><option value=""></option>{% for p in products if p.type == 'stock' %}<option value="{{ p.id }}" {{ 'selected' if bom and p.id|string == bom.product_id|string }}>{{ p.code }} — {{ nm(p) }}</option>{% endfor %}</select></div>
    <div class="field"><label>{{ t('Batch quantity') }} *</label><input type="number" step="any" min="0" name="quantity" value="{{ bom.quantity if bom else 1 }}" required>
      <div class="help">{{ t('The components and times below make this many units.') }}</div></div>
    <div class="field"><label>{{ t('Reference') }}</label><input name="code" value="{{ bom.code if bom and bom.code else '' }}" placeholder="BOM-HELMET-V2"></div>
    <div class="field wide"><label>{{ t('Notes') }}</label><textarea name="notes">{{ bom.notes if bom and bom.notes else '' }}</textarea></div>
  </div>

  <h2 style="margin-top:20px">{{ t('Components') }}</h2>
  <table class="rows" id="comp-rows">
    <thead><tr><th>{{ t('Component') }}</th><th class="num" style="width:140px">{{ t('Quantity') }}</th><th class="num" style="width:120px">{{ t('Scrap %') }}</th><th style="width:40px"></th></tr></thead>
    <tbody>
    {% for ln in (lines or [{}]) %}
      <tr><td><select name="c_product" aria-label="{{ t('Component') }}"><option value=""></option>{% for p in products %}<option value="{{ p.id }}" {{ 'selected' if ln.product_id == p.id }}>{{ p.code }} — {{ nm(p) }}{% if p.uom %} ({{ p.uom }}){% endif %}</option>{% endfor %}</select></td>
        <td><input type="number" step="any" min="0" name="c_qty" value="{{ ln.quantity if ln.quantity is defined else '' }}" aria-label="{{ t('Quantity') }}" style="text-align:end"></td>
        <td><input type="number" step="any" min="0" name="c_scrap" value="{{ ln.scrap_pct if ln.scrap_pct else 0 }}" aria-label="{{ t('Scrap %') }}" style="text-align:end"></td>
        <td><button type="button" class="icon-btn" onclick="this.closest('tr').remove()" aria-label="{{ t('Remove') }}">×</button></td></tr>
    {% endfor %}
    </tbody>
  </table>
  <button type="button" class="btn ghost" onclick="addRow('comp-rows')" style="margin-top:8px">+ {{ t('Add component') }}</button>

  <h2 style="margin-top:24px">{{ t('Operations') }}</h2>
  <p class="muted" style="margin-top:0"><small>{{ t('The steps on the shop floor and the time each takes for one batch. Their cost comes from the work centre\'s hourly rate.') }}</small></p>
  <table class="rows" id="op-rows">
    <thead><tr><th style="width:240px">{{ t('Work centre') }}</th><th>{{ t('Operation') }}</th><th class="num" style="width:140px">{{ t('Minutes') }}</th><th style="width:40px"></th></tr></thead>
    <tbody>
    {% for op in (ops or [{}]) %}
      <tr><td><select name="o_wc" aria-label="{{ t('Work centre') }}"><option value=""></option>{% for w in work_centres %}<option value="{{ w.id }}" {{ 'selected' if op.work_centre_id == w.id }}>{{ w.code }} — {{ nm(w) }}</option>{% endfor %}</select></td>
        <td><input name="o_name" value="{{ op.name or '' }}" aria-label="{{ t('Operation') }}"></td>
        <td><input type="number" step="any" min="0" name="o_minutes" value="{{ op.minutes if op.minutes is defined else '' }}" aria-label="{{ t('Minutes') }}" style="text-align:end"></td>
        <td><button type="button" class="icon-btn" onclick="this.closest('tr').remove()" aria-label="{{ t('Remove') }}">×</button></td></tr>
    {% endfor %}
    </tbody>
  </table>
  <button type="button" class="btn ghost" onclick="addRow('op-rows')" style="margin-top:8px">+ {{ t('Add operation') }}</button>
  {% if not work_centres %}<p class="muted"><small>{{ t('Create work centres first:') }} <a href="{{ url_for('setup.list_view', model='work_centres') }}">{{ t('Work Centres') }}</a></small></p>{% endif %}

  <div class="form-actions"><button class="btn">{{ t('Save') }}</button>
    <a class="btn ghost" href="{{ url_for('manufacturing.boms') }}">{{ t('Cancel') }}</a></div>
</form>
<script>
function addRow(id) {
  var tb = document.querySelector('#' + id + ' tbody'), tr = tb.rows[tb.rows.length - 1].cloneNode(true);
  tr.querySelectorAll('input').forEach(function (i) { i.value = i.name === 'c_scrap' ? '0' : ''; });
  tr.querySelectorAll('select').forEach(function (s) { s.selectedIndex = 0; });
  tb.appendChild(tr);
}
</script>
{% endblock %}