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

{% block title %}Bedarfsplanung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/production" class="hover:underline">Werkstatt</a> / Bedarfsplanung</p>{% endblock %}
{% block heading %}Bedarfsplanung — Kundenteile mit offenen Bestellungen{% endblock %}

{% block topbar_actions %}
  <a class="btn btn-secondary btn-sm" href="/production">← Zur Produktion</a>
{% endblock %}

{% block content %}

{% if demand %}
<div class="card" style="margin-bottom: 12px; padding: 14px 18px;
            background: rgba(53,102,146,0.10); border-color: rgba(53,102,146,0.30);">
  <h3 style="margin: 0 0 4px;">{{ demand|length }} Kundenteil(e) mit offenem Bedarf</h3>
  <p style="margin: 0; font-size: 12px; color: var(--card-text-muted);">
    Wenn mehrere Aufträge dasselbe Teil brauchen, kannst du sie in <b>einen Fertigungsauftrag bündeln</b> &mdash;
    spart Rüstzeit und Fertigungsaufwand.
  </p>
</div>

{% for d in demand %}
{% set defizit = d.deficit > 0 %}
<div class="card" style="margin-bottom: 14px; {% if defizit %}border-left: 4px solid #f87171;{% endif %}">
  <div class="card-header" style="display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;">
    <div>
      <h2 style="margin: 0;">
        <a href="/items/{{ d.item_id }}" style="color: var(--card-text); text-decoration: none;">{{ d.item_ident }}</a>
        <span style="color: var(--card-text-muted); font-weight: 400; font-size: 13px;">
          · {{ d.item_desc or '—' }}
        </span>
      </h2>
      <p class="sub">
        Kunde: <b>{{ d.customer_name }}</b> &middot;
        {{ d.order_count }} offene Auftrags-Position(en) &middot;
        Bedarf gesamt: <b>{{ d.total_qty_open }}</b> Stk
      </p>
    </div>
    <div style="display:flex; gap:8px; align-items:center;">
      <div style="text-align: right; font-size: 12px;">
        <div style="color: var(--card-text-muted);">
          Lager: <b style="color: var(--card-text);">{{ d.stock }}</b> &middot;
          In Prod: <b style="color: var(--brand-blue-light);">{{ d.in_production }}</b>
        </div>
        {% if defizit %}
        <div style="color: #f87171; font-weight: 600; margin-top: 2px;">
          Defizit: {{ d.deficit }} Stk
        </div>
        {% endif %}
      </div>
      <button class="btn btn-sm btn-primary bundle-btn"
              data-item-id="{{ d.item_id }}" data-item-ident="{{ d.item_ident }}">
        🔗 Auswahl bündeln
      </button>
    </div>
  </div>

  <table class="data-table">
    <thead>
      <tr>
        <th><input type="checkbox" class="check-all-grp" data-item="{{ d.item_id }}" checked></th>
        <th>Auftrag</th>
        <th>Lieferdatum</th>
        <th>Kunde (Snapshot)</th>
        <th class="num">Offene Menge</th>
      </tr>
    </thead>
    <tbody>
      {% for ln in d.order_lines %}
      <tr>
        <td>
          <input type="checkbox" class="line-cb grp-{{ d.item_id }}"
                 data-item="{{ d.item_id }}" data-line-id="{{ ln.line_id }}"
                 data-qty="{{ ln.qty_open|int }}" checked>
        </td>
        <td class="nums font-semibold">
          <a href="/sales-orders/{{ ln.so_id }}" style="color: var(--brand-blue-light); text-decoration: none;">
            {{ ln.so_no }} ↗
          </a>
        </td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ ln.due_date or '—' }}</td>
        <td>{{ ln.customer_name_snapshot or '—' }}</td>
        <td class="num nums font-semibold">{{ ln.qty_open|int }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endfor %}

<script>
(function () {
  // Check-all per group
  document.querySelectorAll('.check-all-grp').forEach(cb => {
    cb.addEventListener('change', () => {
      const item = cb.dataset.item;
      document.querySelectorAll('.line-cb.grp-' + item).forEach(p => p.checked = cb.checked);
    });
  });

  // Bundle button
  document.querySelectorAll('.bundle-btn').forEach(btn => {
    btn.addEventListener('click', () => {
      const itemId = btn.dataset.itemId;
      const itemIdent = btn.dataset.itemIdent;
      const selectedLines = [...document.querySelectorAll('.line-cb.grp-' + itemId)].filter(cb => cb.checked);
      if (!selectedLines.length) {
        alert('Mindestens eine Auftrags-Position auswählen');
        return;
      }
      const totalQty = selectedLines.reduce((sum, cb) => sum + parseInt(cb.dataset.qty, 10), 0);
      if (!confirm(
        'Sammel-Fertigungsauftrag anlegen?\n\n' +
        'Teil: ' + itemIdent + '\n' +
        'Aufträge: ' + selectedLines.length + '\n' +
        'Gesamt-Menge: ' + totalQty + ' Stk'
      )) return;
      btn.disabled = true; btn.textContent = '… läuft';
      fetch('/api/items/' + itemId + '/create-batched-job', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          sales_order_line_ids: selectedLines.map(cb => parseInt(cb.dataset.lineId, 10)),
        }),
      })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          if (confirm('Job ' + d.ident + ' angelegt (' + d.qty + ' Stk, ' + d.lines_bundled + ' Positionen).\nZur Werkstatt-Planung?')) {
            location = '/production';
          } else {
            location.reload();
          }
        } else {
          alert('Fehler: ' + (d.error || d.detail || 'unbekannt'));
          btn.disabled = false; btn.textContent = '🔗 Auswahl bündeln';
        }
      })
      .catch(err => {
        alert('Netzwerk-Fehler: ' + err);
        btn.disabled = false;
      });
    });
  });
})();
</script>

{% else %}
  {{ empty_state(
      icon='✓',
      title='Keine offenen Bedarfe für Kundenteile',
      description='Aktuell hast du keine offenen Auftragspositionen für Kundenteile. Sobald neue Aufträge eingehen, erscheinen sie hier — du kannst dann mehrere Aufträge in einen einzigen Fertigungsauftrag bündeln.',
      ctas=[
        {'label': '← Zur Produktion', 'href': '/production', 'primary': True},
      ],
  ) }}
{% endif %}

{% endblock %}