{% extends "base.html" %}
{% from "_macros.html" import app_pill %}

{% block title %}Neue Bestellung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/orders" class="hover:underline">Bestellungen</a> / Neu</p>{% endblock %}
{% block heading %}Neue Bestellung{% endblock %}

{% block content %}

<form method="post" action="/orders/new" class="space-y-6">
  <div class="card">
    <div class="card-header"><div><h2>Kopfdaten</h2></div></div>
    <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">System *</label>
        <select class="select mt-1 w-full" name="source_app" id="source_app" required>
          <option value="tools" {% if source_app=='tools' %}selected{% endif %}>Werkzeug-System</option>
          <option value="management" {% if source_app=='management' %}selected{% endif %}>Lager-System</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestellnummer *</label>
        <input class="input mt-1 w-full nums" type="text" name="ident" id="ident"
               value="{% if source_app=='management' %}{{ default_ident_mg }}{% else %}{{ default_ident_tp }}{% endif %}" required>
        <p class="text-[11px] text-neutral-500 mt-1">automatisch generiert — anpassbar</p>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <div><h2>Positionen</h2><p class="sub">Artikel, Menge, Lieferant je Position</p></div>
      <button class="btn btn-secondary btn-sm" type="button" onclick="addLine()">+ Position</button>
    </div>
    <div id="lines" class="p-3"></div>
  </div>

  <div class="flex items-center justify-between max-w-full">
    <a class="btn btn-secondary" href="/orders">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Bestellung anlegen</button>
  </div>
</form>

<template id="line-template">
  <div class="line-row grid grid-cols-12 gap-3 p-3 rounded-md border border-neutral-100 mb-2 items-end">
    <div class="col-span-6">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Artikel *</label>
      <select class="select mt-1 w-full item-select" name="line___IDX___item_id" required>
        <option value="">— wählen —</option>
        {% for it in items %}
          <option value="{{ it.id }}"
                  data-vendor-id="{{ it.vendor_id or '' }}"
                  data-source="{{ it.source_app }}">
            [{{ it.source_app[:2]|upper }}] {{ it.ident }} — {{ it.description }}
          </option>
        {% endfor %}
      </select>
    </div>
    <div class="col-span-4">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferant</label>
      <select class="select mt-1 w-full vendor-select" name="line___IDX___vendor_id">
        <option value="">— Hauptlieferant —</option>
        {% for v in vendors %}
          <option value="{{ v.id }}">{{ v.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="col-span-1">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Menge *</label>
      <input class="input mt-1 w-full nums" type="number" name="line___IDX___quantity" min="1" value="1" required>
    </div>
    <div class="col-span-1 text-right">
      <button class="btn btn-sm btn-secondary" type="button" onclick="removeLine(this)">✕</button>
    </div>
  </div>
</template>

<script>
let nextIdx = 0;
function addLine() {
  const tpl = document.getElementById('line-template');
  const html = tpl.innerHTML.replaceAll('__IDX__', nextIdx);
  const wrap = document.createElement('div');
  wrap.innerHTML = html;
  document.getElementById('lines').appendChild(wrap.firstElementChild);
  // auto-fill primary vendor when item changes
  const row = document.getElementById('lines').lastElementChild;
  const itemSel = row.querySelector('.item-select');
  const vendorSel = row.querySelector('.vendor-select');
  itemSel.addEventListener('change', () => {
    const opt = itemSel.options[itemSel.selectedIndex];
    const v = opt.dataset.vendorId;
    if (v) vendorSel.value = v;
  });
  nextIdx++;
}
addLine();
function removeLine(btn) {
  const row = btn.closest('.line-row');
  row.parentElement.remove();
  if (document.getElementById('lines').children.length === 0) addLine();
}

// Update default ident when source app changes
const ident = document.getElementById('ident');
const sourceSel = document.getElementById('source_app');
const defaults = { tools: "{{ default_ident_tp }}", management: "{{ default_ident_mg }}" };
let lastDefault = ident.value;
sourceSel.addEventListener('change', () => {
  if (ident.value === lastDefault) {
    ident.value = defaults[sourceSel.value];
    lastDefault = ident.value;
  }
});
</script>
{% endblock %}