{% extends "base.html" %}

{% block title %}Stückliste · {{ item.ident or item.id }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/items" class="hover:underline">Artikel</a> / <a href="/items/{{ item.id }}" class="hover:underline">{{ item.ident or item.id }}</a> / Stückliste</p>{% endblock %}
{% block heading %}Stückliste · {{ item.ident or item.id }}{% endblock %}

{% block content %}
<div class="card max-w-5xl">
  <div class="card-header" style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
    <div>
      <h2>{{ item.description or 'Stückliste' }}</h2>
      <p class="sub">
        {% if active_bom %}Version: {{ active_bom.version }}{% if active_bom.note %} · {{ active_bom.note }}{% endif %}{% else %}Noch keine Stückliste angelegt{% endif %}
      </p>
    </div>
    {% if active_bom %}
    <form method="get" action="" class="flex items-center gap-2" style="margin:0;">
      <label style="font-size:11px; color: var(--card-text-muted);">Stückzahl:</label>
      <input class="input nums" type="number" name="qty" min="1" value="{{ qty }}" style="width:80px;">
      <button class="btn btn-sm btn-secondary" type="submit">Neu berechnen</button>
    </form>
    {% endif %}
  </div>

  {% if not active_bom %}
  <div class="p-6">
    <form method="post" action="/items/{{ item.id }}/bom/new" class="flex items-end gap-3">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Version</label>
        <input class="input mt-1" type="text" name="version" value="v1">
      </div>
      <div class="flex-1">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz</label>
        <input class="input mt-1 w-full" type="text" name="note" placeholder="z.B. Vorserie · neue Werkzeuggeometrie">
      </div>
      <button class="btn btn-primary" type="submit">+ Stückliste anlegen</button>
    </form>
  </div>
  {% else %}

  <table class="data-table">
    <thead>
      <tr>
        <th style="width:36px">#</th>
        <th>Typ</th>
        <th>Bezeichnung</th>
        <th class="num">Menge / Zeit</th>
        <th class="num">Plan-Kosten ({{ qty }} Stk)</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for ln in costing.lines %}
      <tr>
        <td class="nums" style="color: var(--card-text-muted);">{{ loop.index }}</td>
        <td>
          {% if ln.line_type == 'material' %}<span class="badge badge-blue">Material</span>
          {% elif ln.line_type == 'operation' %}<span class="badge badge-orange">Operation</span>
          {% elif ln.line_type == 'sub_assembly' %}<span class="badge badge-emerald">Sub-Baugruppe</span>
          {% elif ln.line_type == 'purchased_part' %}<span class="badge badge-purple">Zukaufteil</span>
          {% else %}<span class="badge badge-amber">Werkzeug</span>{% endif %}
        </td>
        <td>
          {% if ln.line_type == 'material' %}
            <div class="font-medium">{{ ln.material_name or '—' }}</div>
            {% if ln.material_code %}<div class="text-xs" style="color: var(--card-text-muted);">{{ ln.material_code }} · {{ '%.2f'|format(ln.price_per_kg or 0) }} €/kg</div>{% endif %}
          {% elif ln.line_type == 'operation' %}
            <div class="font-medium">{{ ln.step_name or '—' }}</div>
            <div class="text-xs" style="color: var(--card-text-muted);">
              {% if ln.machine_name %}auf {{ ln.machine_name }} · {% endif %}{{ '%.2f'|format(ln.computed_rate or 0) }} €/h
            </div>
          {% elif ln.line_type == 'sub_assembly' %}
            <div class="font-medium">
              <a href="/assemblies/{{ ln.sub_item_id }}" style="color: var(--brand-blue-light); text-decoration: none;">
                {{ ln.sub_ident or '—' }} ↗
              </a>
            </div>
            <div class="text-xs" style="color: var(--card-text-muted);">
              {{ ln.sub_desc or 'Sub-Baugruppe' }}
              {% if ln.sub_unit_cost %} · {{ '%.2f'|format(ln.sub_unit_cost) }} €/Stk Selbstkosten{% endif %}
            </div>
          {% elif ln.line_type == 'purchased_part' %}
            <div class="font-medium">
              <a href="/items/{{ ln.sub_item_id }}" style="color: #c4b5fd; text-decoration: none;">
                {{ ln.sub_ident or '—' }} ↗
              </a>
              {% if ln.sub_norm_reference %}
                <span class="badge" style="background: rgba(173,213,244,0.15); color: var(--brand-blue-light); margin-left: 6px; font-size: 10px;">{{ ln.sub_norm_reference }}</span>
              {% endif %}
            </div>
            <div class="text-xs" style="color: var(--card-text-muted);">
              {{ ln.sub_desc or 'Zukaufteil' }}
              {% if ln.sub_manufacturer %} · {{ ln.sub_manufacturer }}{% endif %}
              {% set need_total = (ln.qty * qty)|int %}
              {% if ln.sub_quantity_total is not none and need_total > ln.sub_quantity_total %}
                · <span style="color: #f87171; font-weight: 600;">⚠ nur {{ ln.sub_quantity_total }} im Lager ({{ need_total }} benötigt)</span>
              {% elif ln.sub_quantity_total is not none %}
                · Bestand: {{ ln.sub_quantity_total }}
              {% endif %}
            </div>
          {% else %}
            <div class="font-medium">{{ ln.tool_ident or '—' }}</div>
            <div class="text-xs" style="color: var(--card-text-muted);">{{ ln.tool_desc or '' }}</div>
          {% endif %}
        </td>
        <td class="num nums">
          {% if ln.line_type == 'material' %}{{ '%.3f'|format(ln.qty or 0) }} kg/Stk
          {% elif ln.line_type == 'operation' %}{{ '%.1f'|format(ln.setup_min or 0) }} min Rüst · {{ '%.2f'|format(ln.cycle_min or 0) }} min/Stk
          {% elif ln.line_type == 'sub_assembly' %}{{ '%.0f'|format(ln.qty or 0) }} Stk/Stk
          {% elif ln.line_type == 'purchased_part' %}{{ '%.0f'|format(ln.qty or 0) }} Stk/Stk
          {% else %}{{ '%.0f'|format(ln.qty or 0) }} Stk
          {% endif %}
        </td>
        <td class="num nums font-semibold">{{ '%.2f'|format(ln.computed_cost or 0) }} €</td>
        <td class="text-right">
          <button class="btn btn-sm btn-secondary bom-del" data-line-id="{{ ln.id }}" type="button">×</button>
        </td>
      </tr>
      {% else %}
      <tr><td colspan="6" class="p-6 text-center" style="color: var(--card-text-muted);">Noch keine Zeilen — füge unten welche hinzu.</td></tr>
      {% endfor %}
    </tbody>
    {% if costing.lines %}
    <tfoot>
      <tr>
        <td colspan="4" class="text-right font-semibold">Material:</td>
        <td class="num nums">{{ '%.2f'|format(costing.material_cost) }} €</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4" class="text-right font-semibold">Rüstkosten (einmalig):</td>
        <td class="num nums">{{ '%.2f'|format(costing.setup_cost) }} €</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4" class="text-right font-semibold">Stückzeit-Kosten:</td>
        <td class="num nums">{{ '%.2f'|format(costing.cycle_cost) }} €</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4" class="text-right font-semibold">Werkzeugkosten:</td>
        <td class="num nums">{{ '%.2f'|format(costing.tool_cost) }} €</td>
        <td></td>
      </tr>
      {% if costing.sub_cost %}
      <tr>
        <td colspan="4" class="text-right font-semibold">Sub-Baugruppen:</td>
        <td class="num nums">{{ '%.2f'|format(costing.sub_cost) }} €</td>
        <td></td>
      </tr>
      {% endif %}
      {% if costing.purchased_cost is defined and costing.purchased_cost %}
      <tr>
        <td colspan="4" class="text-right font-semibold" style="color: #c4b5fd;">
          Zukaufteile / Normalien:
          {% if not costing.feature_pp_cost_enabled %}
            <span class="text-xs" style="color: var(--card-text-muted); font-weight: 400;">
              (Feature deaktiviert &mdash; <a href="/settings#features" style="color: var(--brand-orange);">aktivieren</a>)
            </span>
          {% endif %}
        </td>
        <td class="num nums">{{ '%.2f'|format(costing.purchased_cost) }} €</td>
        <td></td>
      </tr>
      {% endif %}
      <tr>
        <td colspan="4" class="text-right font-semibold">Gemeinkosten:</td>
        <td class="num nums">{{ '%.2f'|format(costing.overhead) }} €</td>
        <td></td>
      </tr>
      <tr style="font-size:1.05rem;">
        <td colspan="4" class="text-right font-bold">Summe ({{ qty }} Stk):</td>
        <td class="num nums font-bold" style="color: var(--brand-orange);">{{ '%.2f'|format(costing.total) }} €</td>
        <td></td>
      </tr>
      <tr>
        <td colspan="4" class="text-right text-xs" style="color: var(--card-text-muted);">davon pro Stück:</td>
        <td class="num nums text-xs" style="color: var(--card-text-muted);">{{ '%.2f'|format(costing.total / qty) }} €</td>
        <td></td>
      </tr>
    </tfoot>
    {% endif %}
  </table>

  <!-- Add-Line-Form -->
  <div class="px-5 py-4 border-t" style="border-color: var(--card-border-2);">
    <p class="text-[10px] uppercase tracking-wider font-semibold mb-2" style="color: var(--card-text-muted);">Neue Zeile hinzufügen</p>
    <div class="grid grid-cols-5 gap-3">
      <!-- Material -->
      <div class="card" style="padding: 12px; border-radius: 10px;">
        <p class="text-[11px] uppercase font-semibold mb-2" style="color: var(--brand-blue-light);">Material</p>
        <select id="bom-mat" class="select w-full" style="margin-bottom: 6px;">
          <option value="">— Werkstoff wählen —</option>
          {% for m in materials %}
          <option value="{{ m.id }}">{{ m.name }}{% if m.code %} ({{ m.code }}){% endif %}</option>
          {% endfor %}
        </select>
        <input id="bom-mat-qty" class="input nums w-full" type="text" placeholder="Gewicht in kg pro Stück (z.B. 0,250)">
        <button class="btn btn-sm btn-primary mt-2 w-full" id="bom-add-mat" type="button">Hinzufügen</button>
      </div>

      <!-- Operation -->
      <div class="card" style="padding: 12px; border-radius: 10px;">
        <p class="text-[11px] uppercase font-semibold mb-2" style="color: var(--brand-orange);">Operation</p>
        <select id="bom-op-step" class="select w-full" style="margin-bottom: 6px;">
          <option value="">— Process-Step —</option>
          {% for s in process_steps %}
          <option value="{{ s.id }}">{{ s.name }}{% if s.hourly_rate %} · {{ '%.2f'|format(s.hourly_rate) }} €/h{% endif %}</option>
          {% endfor %}
        </select>
        <select id="bom-op-machine" class="select w-full" style="margin-bottom: 6px;">
          <option value="">— Maschine (optional) —</option>
          {% for m in machines %}
          <option value="{{ m.id }}">{{ m.name }}</option>
          {% endfor %}
        </select>
        <div class="grid grid-cols-2 gap-2">
          <input id="bom-op-setup" class="input nums" type="text" placeholder="Rüstzeit min">
          <input id="bom-op-cycle" class="input nums" type="text" placeholder="Stückzeit min">
        </div>
        <button class="btn btn-sm btn-primary mt-2 w-full" id="bom-add-op" type="button">Hinzufügen</button>
      </div>

      <!-- Tool -->
      <div class="card" style="padding: 12px; border-radius: 10px;">
        <p class="text-[11px] uppercase font-semibold mb-2" style="color: #fcd34d;">Werkzeug-Verbrauch</p>
        <p class="text-[10px] mb-2" style="color: var(--card-text-muted);">Werkzeug aus Stammdaten + Stk pro Werkstück</p>
        <input id="bom-tool-ident" class="input w-full" type="text" placeholder="Werkzeug-Nr (z.B. WZ-001)" style="margin-bottom: 6px;">
        <input id="bom-tool-qty" class="input nums w-full" type="text" placeholder="Stk pro Werkstück (z.B. 0,1)">
        <button class="btn btn-sm btn-primary mt-2 w-full" id="bom-add-tool" type="button">Hinzufügen</button>
      </div>

      <!-- Sub-Assembly (mehrstufige Baugruppe) -->
      <div class="card" style="padding: 12px; border-radius: 10px;">
        <p class="text-[11px] uppercase font-semibold mb-2" style="color: #10b981;">Sub-Baugruppe</p>
        <p class="text-[10px] mb-2" style="color: var(--card-text-muted);">
          Andere Baugruppe als Komponente einbinden (mehrstufige Stückliste)
        </p>
        <select id="bom-sub-item" class="select w-full" style="margin-bottom: 6px;">
          <option value="">— Baugruppe wählen —</option>
          {% for s in sub_candidates %}
          <option value="{{ s.id }}">{{ s.ident }}{% if s.description %} · {{ s.description[:50] }}{% endif %}</option>
          {% endfor %}
        </select>
        <input id="bom-sub-qty" class="input nums w-full" type="text" placeholder="Stk pro Werkstück (z.B. 2)">
        <button class="btn btn-sm btn-primary mt-2 w-full" id="bom-add-sub" type="button"
                {% if not sub_candidates %}disabled{% endif %}>
          {% if sub_candidates %}Hinzufügen{% else %}— keine andere Baugruppe vorhanden —{% endif %}
        </button>
      </div>

      <!-- v1.12.1: Zukaufteil / Normalie -->
      <div class="card" style="padding: 12px; border-radius: 10px;">
        <p class="text-[11px] uppercase font-semibold mb-2" style="color: #c4b5fd;">Zukaufteil</p>
        <p class="text-[10px] mb-2" style="color: var(--card-text-muted);">
          DIN-/ISO-Norm-Teil aus dem Lager. Wird beim Fertigen automatisch abgezogen.
        </p>
        <select id="bom-pp-item" class="select w-full" style="margin-bottom: 6px;">
          <option value="">— Zukaufteil wählen —</option>
          {% for p in purchased_parts %}
          <option value="{{ p.id }}">{{ p.ident }}{% if p.norm_reference %} · {{ p.norm_reference }}{% endif %}{% if p.description %} — {{ p.description[:40] }}{% endif %}</option>
          {% endfor %}
        </select>
        <input id="bom-pp-qty" class="input nums w-full" type="text" placeholder="Stk pro Werkstück (z.B. 4)">
        <button class="btn btn-sm btn-primary mt-2 w-full" id="bom-add-pp" type="button"
                {% if not purchased_parts %}disabled{% endif %}>
          {% if purchased_parts %}Hinzufügen{% else %}— keine Zukaufteile angelegt —{% endif %}
        </button>
      </div>
    </div>
  </div>
  {% endif %}
</div>

{% if active_bom %}
<script>
(function () {
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
  const BOM_ID = {{ active_bom.id }};
  function post(url, body) {
    const csrf = getCookie('csrf_token');
    return fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ ...body, csrf_token: csrf }),
    }).then(r => r.json());
  }
  function reload() { setTimeout(() => location.reload(), 250); }

  document.getElementById('bom-add-mat')?.addEventListener('click', () => {
    const mat = document.getElementById('bom-mat').value;
    const qty = document.getElementById('bom-mat-qty').value.replace(',', '.');
    if (!mat || !qty) { if (window.toast) toast('Material + Menge erforderlich', 'error'); return; }
    post('/api/bom/' + BOM_ID + '/lines/add', { line_type: 'material', material_id: mat, qty })
      .then(d => { if (d.ok) reload(); else toast(d.error || 'Fehler', 'error'); });
  });

  document.getElementById('bom-add-op')?.addEventListener('click', () => {
    const step = document.getElementById('bom-op-step').value;
    const machine = document.getElementById('bom-op-machine').value;
    const setup = document.getElementById('bom-op-setup').value.replace(',', '.') || '0';
    const cycle = document.getElementById('bom-op-cycle').value.replace(',', '.') || '0';
    if (!step) { if (window.toast) toast('Step erforderlich', 'error'); return; }
    post('/api/bom/' + BOM_ID + '/lines/add', { line_type: 'operation', step_id: step,
      machine_id: machine || null, setup_min: setup, cycle_min: cycle })
      .then(d => { if (d.ok) reload(); else toast(d.error || 'Fehler', 'error'); });
  });

  document.getElementById('bom-add-tool')?.addEventListener('click', () => {
    const ident = document.getElementById('bom-tool-ident').value.trim();
    const qty = document.getElementById('bom-tool-qty').value.replace(',', '.');
    if (!ident || !qty) { if (window.toast) toast('Werkzeug-Nr + Menge erforderlich', 'error'); return; }
    // Einfacher Lookup: erst nach ident POSTen — falls API existiert
    fetch('/api/search?q=' + encodeURIComponent(ident))
      .then(r => r.json()).then(d => {
        const hit = (d.results || []).find(r => r.kind === 'Artikel' && (r.title || '').includes(ident));
        if (!hit) { if (window.toast) toast('Werkzeug nicht gefunden — bitte zuerst anlegen', 'error'); return; }
        const id = (hit.url || '').match(/\/items\/(\d+)/)?.[1];
        if (!id) return;
        post('/api/bom/' + BOM_ID + '/lines/add', { line_type: 'tool', tool_item_id: id, qty })
          .then(d => { if (d.ok) reload(); else toast(d.error || 'Fehler', 'error'); });
      });
  });

  document.getElementById('bom-add-sub')?.addEventListener('click', () => {
    const subId = document.getElementById('bom-sub-item').value;
    const qty = document.getElementById('bom-sub-qty').value.replace(',', '.');
    if (!subId || !qty) {
      if (window.toast) toast('Sub-Baugruppe + Menge erforderlich', 'error');
      return;
    }
    post('/api/bom/' + BOM_ID + '/lines/add', {
      line_type: 'sub_assembly', sub_item_id: subId, qty,
    }).then(d => {
      if (d.ok) reload();
      else if (window.toast) toast(d.error || 'Fehler', 'error');
      else alert(d.error || 'Fehler');
    });
  });

  // v1.12.1: Zukaufteil zur BOM hinzufügen
  document.getElementById('bom-add-pp')?.addEventListener('click', () => {
    const ppId = document.getElementById('bom-pp-item').value;
    const qty = document.getElementById('bom-pp-qty').value.replace(',', '.');
    if (!ppId || !qty) {
      if (window.toast) toast('Zukaufteil + Menge erforderlich', 'error');
      return;
    }
    post('/api/bom/' + BOM_ID + '/lines/add', {
      line_type: 'purchased_part', sub_item_id: ppId, qty,
    }).then(d => {
      if (d.ok) reload();
      else if (window.toast) toast(d.error || 'Fehler', 'error');
      else alert(d.error || 'Fehler');
    });
  });

  document.querySelectorAll('.bom-del').forEach(btn => {
    btn.addEventListener('click', () => {
      if (!confirm('Zeile entfernen?')) return;
      post('/api/bom/lines/' + btn.dataset.lineId + '/delete', {}).then(() => reload());
    });
  });
})();
</script>
{% endif %}
{% endblock %}