{% extends "base.html" %}

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

{% block content %}
<form method="post" action="/purchase-orders/suggestions/create">

  {# ============== AUS AUFTRAGSBEDARF ============== #}
  <div class="card mb-4">
    <div class="card-header"><div>
      <h2>Aus offenen Aufträgen (MRP)</h2>
      <p class="sub">
        BOM × offene Auftragsmengen − vorhandener Lagerbestand − bereits laufende Bestellungen.
        Nur Materialien mit Netto-Bedarf &gt; 0 werden vorgeschlagen.
      </p>
    </div></div>

    {% if demand %}
    <table class="data-table">
      <thead>
        <tr>
          <th style="width:30px">
            <input type="checkbox" id="sel-all-demand" title="Alle wählen">
          </th>
          <th>Material</th>
          <th>Verwendet in</th>
          <th class="num">Brutto-Bedarf</th>
          <th class="num">Bestand</th>
          <th class="num">In Bestellung</th>
          <th class="num">Netto-Bedarf</th>
          <th class="num">Bestellmenge</th>
          <th>Lieferant</th>
          <th class="num">€/kg</th>
        </tr>
      </thead>
      <tbody>
        {% for d in demand %}
        <tr>
          <td>
            <input type="checkbox" name="select_{{ d.material_id }}" class="sel-demand"
                   {% if d.net_demand > 0 %}checked{% endif %}>
          </td>
          <td>
            <div class="font-medium">{{ d.material_name }}</div>
            {% if d.code %}<div class="text-xs nums" style="color: var(--card-text-muted);">{{ d.code }}</div>{% endif %}
          </td>
          <td class="text-xs nums" style="color: var(--card-text-muted);">
            {% for o in d.orders[:3] %}{{ o }}{% if not loop.last %}, {% endif %}{% endfor %}
            {% if d.orders|length > 3 %} <span style="color:#fbbf24;">+{{ d.orders|length - 3 }}</span>{% endif %}
          </td>
          <td class="num nums">{{ '%.2f'|format(d.demand_qty) }} {{ d.unit }}</td>
          <td class="num nums" style="color: {% if d.stock_qty > 0 %}#6ee7b7{% else %}var(--card-text-muted){% endif %};">
            {{ '%.2f'|format(d.stock_qty) }}
          </td>
          <td class="num nums" style="color: {% if d.on_order_qty > 0 %}#fbbf24{% else %}var(--card-text-muted){% endif %};">
            {{ '%.2f'|format(d.on_order_qty) }}
          </td>
          <td class="num nums font-bold" style="color: {% if d.net_demand > 0 %}#f2581b{% else %}#6ee7b7{% endif %};">
            {{ '%.2f'|format(d.net_demand) }}
          </td>
          <td class="num">
            <input class="input nums w-24 text-right" type="text"
                   name="qty_{{ d.material_id }}"
                   value="{{ '%.2f'|format(d.suggested_qty) }}">
          </td>
          <td class="text-xs">
            {% if d.vendor_id %}
              <input type="hidden" name="vendor_{{ d.material_id }}" value="{{ d.vendor_id }}">
              {{ d.vendor_name }}
            {% else %}
              <span style="color:#fbbf24;">— bitte zuordnen —</span>
            {% endif %}
          </td>
          <td class="num text-xs nums">
            {% if d.last_unit_price %}{{ '%.2f'|format(d.last_unit_price) }}€<br><span style="color:var(--card-text-muted);font-size:9px;">letzter EK</span>
            {% elif d.price_per_kg %}{{ '%.2f'|format(d.price_per_kg) }}€<br><span style="color:var(--card-text-muted);font-size:9px;">stamm</span>
            {% else %}—{% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-12 text-center">
      <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">📦</div>
      <p class="text-sm" style="color: var(--card-text-muted);">
        Aktuell kein Material-Bedarf aus offenen Aufträgen.
      </p>
      <p class="text-xs mt-2" style="color: var(--card-text-muted);">
        Voraussetzung: Aufträge im Status „bestätigt" / „in Produktion" mit Artikeln,
        die eine aktive Stückliste haben.
      </p>
    </div>
    {% endif %}
  </div>

  {# ============== AUS MINDESTBESTAND (alte Logik, optional) ============== #}
  {% if low_stock %}
  <div class="card mb-4">
    <div class="card-header"><div>
      <h2>Unter Mindestbestand</h2>
      <p class="sub">{{ low_stock|length }} Artikel — wird unabhängig vom Auftragsbedarf gemeldet</p>
    </div></div>
    <table class="data-table">
      <thead>
        <tr>
          <th>Artikel</th>
          <th class="num">Bestand</th>
          <th class="num">Min</th>
          <th class="num">Bestellt</th>
          <th>Lieferant</th>
        </tr>
      </thead>
      <tbody>
        {% for it in low_stock[:20] %}
        <tr class="cursor-pointer" onclick="location='/items/{{ it.id }}'">
          <td>
            <div class="font-medium">{{ it.ident }}</div>
            <div class="text-xs" style="color: var(--card-text-muted);">{{ it.description }}</div>
          </td>
          <td class="num text-red-600 font-semibold nums">{{ it.quantity_total }}</td>
          <td class="num text-xs nums" style="color:var(--card-text-muted);">{{ it.quantity_min }}</td>
          <td class="num text-xs">{% if it.on_order %}<span class="badge badge-amber">{{ it.on_order }}</span>{% else %}—{% endif %}</td>
          <td class="text-xs">{{ it.vendor_name or '—' }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}

  {% if demand %}
  <div class="flex items-center justify-end gap-2 max-w-5xl">
    <a class="btn btn-secondary" href="/purchase-orders">Abbrechen</a>
    <button class="btn btn-primary" type="submit">
      Bestellung(en) erzeugen — pro Lieferant
    </button>
  </div>
  {% endif %}

</form>

<script>
(function () {
  const all = document.getElementById('sel-all-demand');
  if (all) {
    all.addEventListener('change', () => {
      document.querySelectorAll('.sel-demand').forEach(c => c.checked = all.checked);
    });
  }
})();
</script>
{% endblock %}