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

{% block title %}Sammelbestellung Normalien{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/purchased-parts" class="hover:underline">Normalien</a> / Sammelbestellung</p>{% endblock %}
{% block heading %}Sammelbestellung — Normalien unter Mindest{% endblock %}

{% block topbar_actions %}
  <a class="btn btn-secondary btn-sm" href="/purchased-parts">← Zur Übersicht</a>
{% endblock %}

{% block content %}

{% if groups %}
<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);">
  <div style="display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
    <div>
      <h3 style="margin: 0 0 4px;">{{ groups|length }} Lieferant(en) zu bestellen</h3>
      <p style="margin: 0; font-size: 12px; color: var(--card-text-muted);">
        Gesamt: <b>{{ groups|sum(attribute='total_items') }}</b> verschiedene Teile &middot;
        <b>{{ groups|sum(attribute='total_qty') }}</b> Stk insgesamt
      </p>
    </div>
  </div>
</div>

{% for g in groups %}
<div class="card" style="margin-bottom: 14px;">
  <div class="card-header" style="display:flex; align-items:center; justify-content:space-between;">
    <div>
      <h2 style="margin: 0;">
        {{ g.vendor_name }}
        <span style="color: var(--card-text-muted); font-weight: 400; font-size: 13px;">
          · {{ g.total_items }} Teile · {{ g.total_qty }} Stk
        </span>
      </h2>
      {% if g.vendor_email %}
      <p class="sub">{{ g.vendor_email }}</p>
      {% endif %}
    </div>
    <div style="display:flex; gap:8px;">
      {% if g.vendor_id %}
      <button class="btn btn-sm btn-primary create-po"
              data-vendor-id="{{ g.vendor_id }}" data-vendor-name="{{ g.vendor_name }}"
              data-parts='{{ g.parts|tojson|forceescape }}'>
        + Bestellung an {{ g.vendor_name }} erstellen
      </button>
      {% else %}
      <span class="text-xs" style="color: var(--card-text-muted); align-self: center;">
        Bei Teilen Standard-Lieferant setzen für 1-Klick-Bestellung
      </span>
      {% endif %}
    </div>
  </div>

  <table class="data-table">
    <thead>
      <tr>
        <th><input type="checkbox" class="check-all" data-group="{{ loop.index }}" checked></th>
        <th>SKU</th>
        <th>Norm</th>
        <th>Bezeichnung</th>
        <th>Hersteller-Nr.</th>
        <th class="num">Lager</th>
        <th class="num">Min</th>
        <th class="num">Defizit</th>
        <th class="num">Bestellmenge</th>
      </tr>
    </thead>
    <tbody>
      {% for p in g.parts %}
      <tr>
        <td><input type="checkbox" class="part-cb group-{{ loop.index0 }}"
                   data-group="{{ loop.index }}" data-item-id="{{ p.id }}"
                   data-qty="{{ p.suggested_qty }}" checked></td>
        <td class="nums font-semibold">{{ p.ident }}</td>
        <td class="nums" style="color: var(--brand-blue-light);">{{ p.norm_reference or '—' }}</td>
        <td>{{ p.description or '—' }}</td>
        <td class="text-xs nums" style="color: var(--card-text-muted);">{{ p.manufacturer_part_no or '—' }}</td>
        <td class="num nums {% if p.stock == 0 %}font-semibold{% endif %}"
            style="{% if p.stock == 0 %}color: #f87171;{% endif %}">{{ p.stock }}</td>
        <td class="num nums text-xs" style="color: var(--card-text-muted);">{{ p.min }}</td>
        <td class="num nums" style="color: #f87171; font-weight: 600;">{{ p.deficit }}</td>
        <td class="num nums" style="color: var(--brand-orange); font-weight: 600;">
          <input type="number" class="input nums qty-input" value="{{ p.suggested_qty }}"
                 min="1" step="1" data-item-id="{{ p.id }}"
                 style="width: 80px; text-align: right; padding: 4px 8px;">
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endfor %}

<script>
(function () {
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }

  // Sync qty-input → data-qty on checkboxes
  document.querySelectorAll('.qty-input').forEach(input => {
    input.addEventListener('input', () => {
      const cb = document.querySelector('.part-cb[data-item-id="' + input.dataset.itemId + '"]');
      if (cb) cb.dataset.qty = input.value;
    });
  });

  // Check-all per group
  document.querySelectorAll('.check-all').forEach(cb => {
    cb.addEventListener('change', () => {
      const grp = cb.dataset.group;
      document.querySelectorAll('.part-cb[data-group="' + grp + '"]').forEach(p => p.checked = cb.checked);
    });
  });

  // Sammelbestellung erstellen
  document.querySelectorAll('.create-po').forEach(btn => {
    btn.addEventListener('click', () => {
      const vendorId = btn.dataset.vendorId;
      const vendorName = btn.dataset.vendorName;
      const allParts = JSON.parse(btn.dataset.parts);
      // Pick only checked parts with valid qty
      const lines = [];
      allParts.forEach(p => {
        const cb = document.querySelector('.part-cb[data-item-id="' + p.id + '"]');
        if (cb && cb.checked) {
          const qty = parseInt(cb.dataset.qty, 10);
          if (qty >= 1) lines.push({ item_id: p.id, qty: qty });
        }
      });
      if (!lines.length) {
        alert('Mindestens ein Teil auswählen');
        return;
      }
      if (!confirm('Bestellung an ' + vendorName + ' anlegen mit ' + lines.length + ' Position(en)?')) return;
      btn.disabled = true; btn.textContent = '… läuft';
      const csrf = getCookie('csrf_token');
      fetch('/api/purchased-parts/create-bulk-po', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
        body: JSON.stringify({ vendor_id: parseInt(vendorId, 10), lines, csrf_token: csrf }),
      })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          if (window.toast) toast('Bestellung ' + (d.po_number || '') + ' angelegt', 'success', { ttl: 3000 });
          setTimeout(() => location.reload(), 800);
        } else {
          alert('Fehler: ' + (d.error || 'unbekannt'));
          btn.disabled = false; btn.textContent = '+ Bestellung an ' + vendorName + ' erstellen';
        }
      })
      .catch(err => {
        alert('Netzwerk-Fehler: ' + err);
        btn.disabled = false;
      });
    });
  });
})();
</script>

{% else %}
  {{ empty_state(
      icon='✓',
      title='Alle Normalien über Mindestbestand',
      description='Aktuell musst du nichts nachbestellen. Wenn der Bestand unter den Mindestbestand fällt, erscheinen hier automatisch Vorschläge — gruppiert nach Lieferant für eine Sammelbestellung.',
      ctas=[
        {'label': '← Zurück zu Normalien', 'href': '/purchased-parts', 'primary': True},
      ],
  ) }}
{% endif %}

{% endblock %}