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

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

{% block content %}
<form method="post" action="/purchase-orders/new" class="card max-w-3xl space-y-0">
  <div class="card-header"><div>
    <h2>Bestellkopf</h2>
    <p class="sub">Bestellnummer wird automatisch vergeben (BST-{{ '%d'|format(2026) }}-XXXX)</p>
  </div></div>
  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferant *</label>
      <select name="vendor_id" required class="select mt-1 w-full">
        <option value="">— Lieferant wählen —</option>
        {% for v in vendors %}
          {% set vtypes = (v.vendor_types.split(',') if v.vendor_types else []) %}
          {% if 'material' in vtypes or 'tooling' in vtypes or 'consumable' in vtypes or not v.vendor_types %}
          <option value="{{ v.id }}">{{ v.name }}{% if v.city %} · {{ v.city }}{% endif %}</option>
          {% endif %}
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bestelldatum</label>
      <input class="input mt-1 w-full nums" type="date" name="order_date">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Geplanter Wareneingang</label>
      <input class="input mt-1 w-full nums" type="date" name="expected_date">
    </div>
    <div class="col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz / Konditionen</label>
      <textarea class="input mt-1 w-full" rows="2" name="note" placeholder="z.B. Mindestabnahme, Lieferadresse abweichend ..."></textarea>
    </div>
  </div>

  <div class="px-5 py-4 border-t" style="border-color: var(--card-border-2);">
    <p class="text-[11px] uppercase tracking-wider font-semibold mb-2" style="color: var(--brand-blue-light);">Erste Position (optional)</p>
    <div class="grid grid-cols-2 gap-3">
      <div class="col-span-2">
        <input class="input w-full" type="text" name="first_description" placeholder="Beschreibung — z.B. Stahl C45 Rundmaterial Ø 50">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Material (optional)</label>
        <select name="first_material_id" class="select mt-1 w-full">
          <option value="">— freier Text —</option>
          {% for m in materials %}<option value="{{ m.id }}">{{ m.name }} ({{ m.code or '—' }})</option>{% endfor %}
        </select>
      </div>
      <div class="grid grid-cols-3 gap-2">
        <input class="input nums" type="text" name="first_qty" placeholder="Menge">
        <input class="input" type="text" name="first_unit" value="kg">
        <input class="input nums" type="text" name="first_price" placeholder="€/Einheit">
      </div>
    </div>
  </div>

  <div class="px-5 py-4 border-t flex items-center justify-between" style="border-color: var(--card-border-2);">
    <a class="btn btn-secondary" href="/purchase-orders">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Bestellung anlegen</button>
  </div>
</form>
{% endblock %}