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

{% block title %}Neues Angebot{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/quotes" class="hover:underline">Angebote</a> / Neu{% if inquiry %} (aus {{ inquiry.inquiry_no }}){% endif %}</p>{% endblock %}
{% block heading %}Neues Angebot{% endblock %}

{% block content %}
<form method="post" action="/quotes/new" class="space-y-4" data-autosave="quote_new" style="max-width:1500px;">
  {% if inquiry %}<input type="hidden" name="inquiry_id" value="{{ inquiry.id }}">{% endif %}

  {% if inquiry %}
  <div class="card" style="background: rgba(43, 92, 230, 0.04); border-color: rgba(43, 92, 230, 0.18);">
    <div class="p-4 text-sm">
      <p class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aus Anfrage</p>
      <p class="font-medium nums mt-1">{{ inquiry.inquiry_no }} · {{ inquiry.subject }}</p>
      {% if inq_items %}
        <p class="text-xs mt-2 text-emerald-700">
          <b>✓ {{ inq_items|length }} Position{% if inq_items|length != 1 %}en{% endif %} aus Anfrage übernommen</b>
          — anpassen, Zeilen löschen oder weitere hinzufügen
        </p>
      {% endif %}
      {% if inquiry.body %}<p class="text-xs text-neutral-600 mt-2 whitespace-pre-wrap">{{ inquiry.body[:400] }}{% if inquiry.body|length > 400 %}…{% endif %}</p>{% endif %}
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="card-header"><div><h2>Kopfdaten</h2></div></div>
    <div class="p-5 grid grid-cols-3 gap-x-6 gap-y-4">
      <div class="col-span-2">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kunde *</label>
        <select name="customer_id" required class="select mt-1 w-full">
          <option value="">— Kunde wählen —</option>
          {% set sel_cust = preselect_customer_id or (inquiry.customer_id if inquiry else None) %}
          {% for c in customers %}
          <option value="{{ c.id }}" {% if sel_cust == c.id %}selected{% endif %}>
            {{ c.name }} ({{ c.country_iso or 'DE' }}{% if c.vat_id %} · {{ c.vat_id }}{% endif %})
          </option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Status</label>
        <select name="status" class="select mt-1 w-full">
          <option value="draft" selected>Entwurf</option>
          <option value="sent">Versendet</option>
        </select>
      </div>

    </div>

    {# v1.12.0: Optionale Felder eingeklappt — User wird nicht erschlagen #}
    <details class="form-advanced" style="margin: 0 14px 14px;">
      <summary>Weitere Optionen anzeigen (Datum, Referenz, Notiz, Lieferzeit)</summary>
      <div class="form-advanced-body">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Angebotsdatum</label>
          <input class="input mt-1 w-full nums" type="date" name="quote_date">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Gültig bis</label>
          <input class="input mt-1 w-full nums" type="date" name="valid_until">
          <p class="text-[10px] text-neutral-500 mt-1">Default: 30 Tage</p>
        </div>
        <div style="grid-column: span 3;">
          {# v1.19.1: Capacity-Hinweis — Industriestandard. Schätzt machbaren Liefertermin. #}
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferzeit-Schätzung (Capacity-Forecast)</label>
          <div style="display:grid;grid-template-columns:1fr 2fr;gap:10px;margin-top:4px;">
            <div>
              <input class="input w-full nums" type="number" id="capacity-hours" placeholder="Bearbeitungs-Std. (geschätzt)" min="0" step="0.5" style="width:100%;">
              <p class="text-[10px] text-neutral-500 mt-1">z.B. 4h Rüsten + 30×0.5h = 19h</p>
            </div>
            <div id="capacity-result" style="padding:10px 12px;background:rgba(53,102,146,0.10);border:1px solid rgba(53,102,146,0.30);border-radius:6px;font-size:12px;color:var(--card-text);min-height:38px;display:flex;align-items:center;">
              <span style="color:var(--card-text-muted);font-style:italic;">Stunden eingeben → frühestmöglicher Liefertermin wird berechnet …</span>
            </div>
          </div>
        </div>
        <div>
          {{ field("Kunden-Referenz", "customer_reference", "", placeholder="z.B. RFQ-2026-12", attrs='data-suggest="customer_reference"') }}
        </div>
        <div style="grid-column: span 2;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz / Konditionen</label>
          <textarea name="notes" class="input mt-1 w-full" rows="2" placeholder="z.B. Lieferzeit ab Auftragsbestätigung · Werkzeugkosten anteilig"></textarea>
        </div>
      </div>
    </details>
  </div>

  <div class="card">
    <div class="card-header"><div>
      <h2>Positionen</h2>
      <p class="sub">Steuer wird automatisch nach Kundenland berechnet</p>
    </div></div>
    <div class="overflow-x-auto">
      <style>
        /* Kompakte Linien-Tabelle: weniger Cell-Padding, schmalere Inputs damit
           in die Spalten alles reinpasst. Wirkt nur auf #lines-table. */
        #lines-table td { padding: 4px 6px !important; }
        #lines-table th { padding: 8px 6px !important; }
        #lines-table input.input,
        #lines-table select.select {
          padding: 6px 8px !important;
          font-size: 0.85rem !important;
        }
      </style>
      <table class="data-table" id="lines-table" style="table-layout:fixed;width:100%;">
        <thead>
          <tr>
            <th style="width:30px">#</th>
            <th>Beschreibung *</th>
            <th style="width:160px;">Artikel</th>
            <th class="num" style="width:90px">Menge</th>
            <th style="width:100px">Einheit</th>
            <th class="num" style="width:140px">Einzelpr. (netto)</th>
            <th class="num" style="width:80px">Rabatt %</th>
            <th class="num" style="width:90px">Lieferzeit</th>
            <th class="num" style="width:160px">Zwischensumme</th>
            <th style="width:40px"></th>
          </tr>
        </thead>
        <tbody id="lines-body"></tbody>
      </table>
    </div>
    <div class="px-5 py-3 border-t flex items-center justify-between gap-4" style="border-color: var(--card-border-2);">
      <div>
        <button type="button" class="btn btn-primary" id="add-line">+ Position hinzufügen</button>
        <span class="text-[11px] text-neutral-600 ml-2">Mit dem ✕-Button rechts in der Tabelle einzelne Zeilen entfernen</span>
      </div>
      <div id="totals-box" class="text-right" style="font-size: 13px;">
        <div>Netto: <b class="nums" id="t-net">0,00 €</b></div>
        <div class="text-neutral-500" style="font-size: 11px;">USt (<span id="t-vat-pct">19</span> %): <span class="nums" id="t-vat">0,00 €</span></div>
        <div style="font-size: 15px; margin-top: 2px;">Brutto: <b class="nums" id="t-gross">0,00 €</b></div>
      </div>
    </div>

    {# v1.8.0 Frachtkostenschätzung #}
    <div class="px-5 py-3 border-t" style="border-color: var(--card-border-2); background: rgba(245, 158, 11, 0.06);">
      <div class="flex items-center gap-3 flex-wrap">
        <div class="text-[11px] uppercase tracking-wider font-semibold text-neutral-500">
          📦 Frachtkostenschätzung
        </div>
        <input id="freight-weight" type="number" step="0.1" min="0.1" value="2.0"
               class="input nums" style="width: 90px; font-size: 12px;" placeholder="kg">
        <span class="text-xs text-neutral-500">kg</span>
        <select id="freight-carrier" class="select" style="font-size: 12px; width: 100px;">
          <option value="">(Auto)</option>
          <option value="dhl">DHL</option>
          <option value="ups">UPS</option>
          <option value="dpd">DPD</option>
          <option value="gls">GLS</option>
        </select>
        <button type="button" id="freight-calc-btn" class="btn btn-sm btn-secondary">Schätzen</button>
        <span id="freight-result" class="text-xs nums text-neutral-600"></span>
        <button type="button" id="freight-add-line" class="btn btn-sm btn-primary"
                style="display:none;">→ Als Position übernehmen</button>
      </div>
      <p class="text-[10px] text-neutral-500 mt-1">
        Lookup in Tarif-Tabelle (DHL-Geschäftskunden 2026 als Default-Seed). Tarife in Settings anpassbar.
      </p>
    </div>
  </div>

  <script>
  (function() {
    var btn   = document.getElementById('freight-calc-btn');
    var add   = document.getElementById('freight-add-line');
    var out   = document.getElementById('freight-result');
    var w     = document.getElementById('freight-weight');
    var car   = document.getElementById('freight-carrier');
    if (!btn) return;
    var lastCost = null;
    var lastZone = null;

    function pickCountry() {
      // Greift sich das Land aus dem ausgewählten Kunden-Option-Label, format "Name (XX · ...)"
      var sel = document.querySelector('select[name="customer_id"]');
      if (!sel || !sel.selectedOptions[0]) return 'DE';
      var m = sel.selectedOptions[0].textContent.match(/\(([A-Z]{2})/);
      return m ? m[1] : 'DE';
    }

    btn.addEventListener('click', function() {
      var country = pickCountry();
      var weight = parseFloat((w.value || '0').replace(',', '.')) || 0.1;
      var carrier = car.value || '';
      var url = '/api/freight/quote?country=' + encodeURIComponent(country)
              + '&weight_kg=' + weight
              + (carrier ? '&carrier=' + encodeURIComponent(carrier) : '');
      out.textContent = '...';
      add.style.display = 'none';
      fetch(url).then(function(r){ return r.json(); }).then(function(d) {
        if (d.match === 'no_match' || !d.cost) {
          out.textContent = 'Keine passende Tarif-Zone (Land ' + country + ', ' + weight + ' kg).';
          return;
        }
        lastCost = d.cost;
        lastZone = d.zone;
        var fmt = d.cost.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2});
        out.innerHTML = '<b>' + fmt + ' € netto</b> · '
                      + d.zone + ' · ' + (d.carrier || '').toUpperCase()
                      + (d.match === 'fallback' ? ' <span class="text-amber-600">(Welt-Tarif, kein Direkt-Match)</span>' : '');
        add.style.display = 'inline-flex';
      }).catch(function() {
        out.textContent = 'Fehler bei Schätzung.';
      });
    });

    add.addEventListener('click', function() {
      if (lastCost === null) return;
      // Trigger der bestehenden „Position hinzufügen"-Logik
      document.getElementById('add-line').click();
      var tbody = document.getElementById('lines-tbody') || document.querySelector('tbody');
      var tr = tbody && tbody.lastElementChild;
      if (!tr) return;
      var desc = tr.querySelector('[name=line_description]');
      var qty  = tr.querySelector('[name=line_qty]');
      var unit = tr.querySelector('[name=line_unit]');
      var pr   = tr.querySelector('[name=line_price]');
      if (desc) desc.value = 'Versandkosten ' + (lastZone || '');
      if (qty)  qty.value = '1';
      if (unit) unit.value = 'Pos';
      if (pr)   pr.value = String(lastCost).replace('.', ',');
      // Trigger Recalc
      tr.dispatchEvent(new Event('input', { bubbles: true }));
      add.style.display = 'none';
      out.textContent += ' ✓ als Position übernommen';
    });
  })();
  </script>

  <div class="flex items-center justify-between max-w-5xl">
    <a class="btn btn-secondary" href="/quotes">Abbrechen</a>
    <button class="btn btn-primary" type="submit">Angebot anlegen</button>
  </div>
</form>

<script type="application/json" id="items-data">
[
  {% for it in items %}
  {"id": {{ it.id }}, "ident": {{ it.ident|tojson }}, "description": {{ it.description|tojson }},
   "price": {{ it.price or 0 }}, "unit": "Stk",
   "item_type": {{ it.item_type|tojson }}, "customer_id": {{ it.customer_id or 'null' }}}{{ "," if not loop.last else "" }}
  {% endfor %}
]
</script>
<script>window.takomaFeatureQuoteAvailability = {{ 'true' if feature_quote_availability else 'false' }};</script>
<script type="application/json" id="prefill-data">
[
  {% for ln in inq_items or [] %}
  {"description": {{ (ln.description or '')|tojson }}, "qty": {{ ln.qty or 1 }}, "unit": {{ (ln.unit or 'Stk')|tojson }}, "unit_price": {{ ln.unit_price or 0 }}, "item_code": {{ (ln.item_code or '')|tojson }}, "notes": {{ (ln.notes or '')|tojson }}}{{ "," if not loop.last else "" }}
  {% endfor %}
]
</script>

<script>
(function () {
  const tbody = document.getElementById('lines-body');
  const addBtn = document.getElementById('add-line');
  const items = JSON.parse(document.getElementById('items-data').textContent || '[]');
  function rowHTML(idx) {
    const itemOpts = ['<option value="">— freie Position —</option>']
      .concat(items.map(it => `<option value="${it.id}" data-price="${it.price}" data-unit="${it.unit}" data-desc="${escapeHtml(it.description || '')}" data-type="${it.item_type || ''}" data-customer-id="${it.customer_id || ''}">${escapeHtml(it.ident)} — ${escapeHtml((it.description||'').slice(0,60))}</option>`))
      .join('');
    return `
      <tr data-row="${idx}">
        <td class="nums text-neutral-500">${idx + 1}</td>
        <td><input class="input w-full" type="text" name="line_description" placeholder="z.B. Drehteil Stahl C45 nach Zg." required></td>
        <td><select class="select w-full line-item-select" name="line_item_id">${itemOpts}</select></td>
        <td><input class="input w-full nums num" type="text" name="line_qty" placeholder="0" required style="text-align:right"></td>
        <td><input class="input w-full" type="text" name="line_unit" value="Stk"></td>
        <td><input class="input w-full nums num" type="text" name="line_price" placeholder="0,00" required style="text-align:right"></td>
        <td><input class="input w-full nums num" type="text" name="line_discount" value="0" style="text-align:right"></td>
        <td><input class="input w-full nums num" type="number" min="0" max="365" name="line_lead_time" placeholder="—" style="text-align:right"></td>
        <td class="num nums line-subtotal text-neutral-500">—</td>
        <td class="text-right"><button type="button" class="btn btn-sm btn-secondary line-remove">×</button></td>
      </tr>
      <tr class="availability-row" data-row-for="${idx}" style="display:none;">
        <td colspan="10" style="padding: 6px 12px; background: rgba(248,113,113,0.05); border-top: none;">
          <div class="availability-msg" style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;"></div>
        </td>
      </tr>`;
  }
  function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c])); }
  function addRow() {
    const mainRows = [...tbody.children].filter(tr => !tr.classList.contains('availability-row'));
    tbody.insertAdjacentHTML('beforeend', rowHTML(mainRows.length));
    renumber();
  }
  function renumber() {
    let i = 0;
    [...tbody.children].forEach(tr => {
      if (tr.classList.contains('availability-row')) { tr.dataset.rowFor = i - 1; return; }
      tr.dataset.row = i;
      tr.firstElementChild.textContent = i + 1;
      i++;
    });
  }
  function recalcRow(tr) {
    const qty = parseFloat((tr.querySelector('[name=line_qty]').value || '0').replace(',', '.')) || 0;
    const price = parseFloat((tr.querySelector('[name=line_price]').value || '0').replace(',', '.')) || 0;
    const disc = parseFloat((tr.querySelector('[name=line_discount]').value || '0').replace(',', '.')) || 0;
    const sub = qty * price * (1 - disc / 100);
    tr.querySelector('.line-subtotal').textContent = sub > 0 ? sub.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' €' : '—';
    tr.dataset.subtotal = sub.toFixed(2);
    recalcTotals();
  }
  function currentVatRate() {
    const sel = document.querySelector('select[name="customer_id"]');
    if (!sel) return 19;
    const opt = sel.selectedOptions[0];
    if (!opt || !opt.value) return 19;
    const text = (opt.textContent || '').toUpperCase();
    // Reverse Charge / 3rd country heuristic from option label "(DE · DE123…)"
    if (/\(DE/.test(text)) return 19;
    return 0; // EU/3rd-country → assume reverse-charge default for quote preview
  }
  function recalcTotals() {
    let net = 0;
    [...tbody.children].forEach(tr => { net += parseFloat(tr.dataset.subtotal || '0') || 0; });
    const rate = currentVatRate();
    const vat = net * rate / 100;
    const gross = net + vat;
    const fmt = n => n.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2}) + ' €';
    const elNet = document.getElementById('t-net'),
          elVat = document.getElementById('t-vat'),
          elGross = document.getElementById('t-gross'),
          elPct = document.getElementById('t-vat-pct');
    if (elNet)   elNet.textContent   = fmt(net);
    if (elVat)   elVat.textContent   = fmt(vat);
    if (elGross) elGross.textContent = fmt(gross);
    if (elPct)   elPct.textContent   = String(rate);
  }
  // Recalc on customer change
  document.querySelectorAll('select[name="customer_id"]').forEach(s => {
    s.addEventListener('change', recalcTotals);
  });

  // Last-used customer pre-fill (shared with sales-order form)
  (function () {
    const KEY = 'takoma_last_customer';
    const sel = document.querySelector('select[name="customer_id"]');
    const form = sel?.closest('form');
    if (!sel || !form) return;
    if (!sel.value) {
      try {
        const last = localStorage.getItem(KEY);
        if (last) {
          [...sel.options].forEach(o => { if (o.value === last) o.selected = true; });
          recalcTotals();
        }
      } catch(e) {}
    }
    form.addEventListener('submit', () => {
      try { if (sel.value) localStorage.setItem(KEY, sel.value); } catch(e) {}
    });
  })();
  addBtn.addEventListener('click', addRow);

  // Prefill rows from inquiry items if provided
  const prefill = JSON.parse(document.getElementById('prefill-data').textContent || '[]');
  if (prefill.length) {
    prefill.forEach(p => {
      addRow();
      const tr = tbody.lastElementChild;
      tr.querySelector('[name=line_description]').value = p.description || '';
      tr.querySelector('[name=line_qty]').value = String(p.qty || 1).replace('.', ',');
      tr.querySelector('[name=line_unit]').value = p.unit || 'Stk';
      if (p.unit_price) tr.querySelector('[name=line_price]').value = (Number(p.unit_price) || 0).toFixed(2).replace('.', ',');
      // Auto-Match auf Artikel-Dropdown wenn item_code aus Anfrage bekannt
      if (p.item_code) {
        const sel = tr.querySelector('select[name=line_item_id]');
        if (sel) {
          const codeLow = String(p.item_code).toLowerCase().trim();
          const match = [...sel.options].find(o => {
            const txt = (o.textContent || '').toLowerCase();
            return o.value && txt.startsWith(codeLow + ' ') || txt.startsWith(codeLow + ' —');
          });
          if (match) sel.value = match.value;
        }
      }
      recalcRow(tr);
    });
  } else {
    addRow();
  }
  tbody.addEventListener('input', e => {
    const tr = e.target.closest('tr');
    if (tr) recalcRow(tr);
    // v1.12.1: Verfügbarkeits-Recheck bei Mengen-Änderung
    if (e.target.name === 'line_qty' && window.takomaFeatureQuoteAvailability) {
      clearTimeout(tr._availTimer);
      tr._availTimer = setTimeout(() => checkAvailability(tr), 400);
    }
  });
  tbody.addEventListener('change', e => {
    if (e.target.classList && e.target.classList.contains('line-item-select')) {
      const opt = e.target.selectedOptions[0]; if (!opt || !opt.value) return;
      const tr = e.target.closest('tr');
      if (opt.dataset.desc && !tr.querySelector('[name=line_description]').value) tr.querySelector('[name=line_description]').value = opt.dataset.desc;
      const price = parseFloat(opt.dataset.price || '0') || 0;
      if (price > 0 && !tr.querySelector('[name=line_price]').value) tr.querySelector('[name=line_price]').value = price.toFixed(2).replace('.', ',');
      if (opt.dataset.unit) tr.querySelector('[name=line_unit]').value = opt.dataset.unit;
      recalcRow(tr);
      // v1.10.5: Wenn das Item eine Baugruppe ist → Selbstkosten holen
      // und Vorschlagspreis (40 % Marge) anzeigen.
      fetchAssemblyBreakdown(tr, opt.value);
      // v1.12.1: Verfügbarkeits-Check (wenn Feature aktiv)
      if (window.takomaFeatureQuoteAvailability) {
        setTimeout(() => checkAvailability(tr), 50);
      }
    }
  });

  // v1.12.1: Live-Verfügbarkeits-Check (gated via Settings-Toggle)
  async function checkAvailability(tr) {
    if (!window.takomaFeatureQuoteAvailability) return;
    const sel = tr.querySelector('.line-item-select');
    const itemId = sel?.value;
    const availRow = tr.nextElementSibling;
    if (!availRow || !availRow.classList.contains('availability-row')) return;
    const msg = availRow.querySelector('.availability-msg');
    if (!msg) return;
    if (!itemId) { availRow.style.display = 'none'; return; }
    const opt = sel.selectedOptions[0];
    const itemType = opt?.dataset.type || '';
    if (itemType !== 'customer_part') { availRow.style.display = 'none'; return; }
    const qtyStr = tr.querySelector('[name=line_qty]').value || '0';
    const qty = Math.floor(parseFloat(qtyStr.replace(',', '.')) || 0);
    if (qty < 1) { availRow.style.display = 'none'; return; }
    try {
      const r = await fetch(`/api/items/${itemId}/availability`);
      const d = await r.json();
      if (!d.ok) { availRow.style.display = 'none'; return; }
      const a = d.availability;
      const ident = opt?.textContent?.split('—')[0]?.trim() || `Artikel #${itemId}`;
      const newAvailable = a.available - qty;
      const newDeficit = newAvailable < 0 ? -newAvailable : 0;
      if (newDeficit > 0) {
        availRow.style.display = '';
        msg.innerHTML = `
          <span style="color:#f87171; font-weight:600;">⚠ Verfügbarkeits-Engpass</span>
          <span style="font-size: 12px; color: var(--card-text-muted);">
            Lager: <b style="color:var(--card-text);">${a.stock}</b> &middot;
            Reserviert: <b style="color:#fbbf24;">${a.reserved}</b> &middot;
            In Produktion: <b style="color:#7dd3fc;">${a.in_production}</b> &middot;
            <b>Mit diesem Angebot fehlen ${newDeficit} Stk</b>
          </span>
          <button type="button" class="btn btn-sm btn-primary create-prod-job"
                  data-item-id="${itemId}" data-qty="${newDeficit}" data-ident="${escapeHtml(ident)}">
            + Fertigungsauftrag für ${newDeficit} Stk
          </button>`;
      } else if (a.below_min) {
        availRow.style.display = '';
        msg.innerHTML = `
          <span style="color:#fbbf24; font-weight:600;">ℹ Lager wird durch dieses Angebot knapp</span>
          <span style="font-size: 12px; color: var(--card-text-muted);">
            Nach Angebot noch <b>${newAvailable} Stk</b> verfügbar &middot; Mindest: ${a.min}
          </span>
          <button type="button" class="btn btn-sm btn-secondary create-prod-job"
                  data-item-id="${itemId}" data-qty="${Math.max(1, a.min - newAvailable)}" data-ident="${escapeHtml(ident)}">
            + Fertigungsauftrag (vorsorglich)
          </button>`;
      } else {
        availRow.style.display = '';
        msg.innerHTML = `
          <span style="color:#4ade80; font-weight:600;">✓ Verfügbar</span>
          <span style="font-size: 12px; color: var(--card-text-muted);">
            ${a.available} Stk lieferbar &middot; nach Angebot noch ${newAvailable} Stk
          </span>`;
      }
    } catch (err) {
      availRow.style.display = 'none';
    }
  }
  // Quick-Action: Fertigungsauftrag aus dem Warning anlegen
  tbody.addEventListener('click', e => {
    if (e.target.classList && e.target.classList.contains('create-prod-job')) {
      const btn = e.target;
      const itemId = btn.dataset.itemId;
      const qty = parseInt(btn.dataset.qty, 10);
      const ident = btn.dataset.ident;
      if (!confirm(`Fertigungsauftrag für ${qty}× "${ident}" anlegen?`)) return;
      btn.disabled = true; btn.textContent = '… läuft';
      fetch(`/api/items/${itemId}/create-production-job`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ qty, note: 'Quick-Action aus Angebots-Formular' }),
      })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          if (window.toast) toast(`Fertigungsauftrag ${d.ident} angelegt (${d.qty} Stk)`, 'success', { ttl: 3000 });
          const tr = btn.closest('.availability-row')?.previousElementSibling;
          if (tr) setTimeout(() => checkAvailability(tr), 200);
        } else {
          alert('Fehler: ' + (d.error || d.detail || 'unbekannt'));
          btn.disabled = false; btn.textContent = `+ Fertigungsauftrag für ${qty} Stk`;
        }
      })
      .catch(err => { alert('Netzwerk-Fehler: ' + err); btn.disabled = false; });
    }
  });

  function fetchAssemblyBreakdown(tr, itemId) {
    const qtyVal = parseFloat((tr.querySelector('[name=line_qty]').value || '1').replace(',', '.')) || 1;
    // v1.11.0: Parallel auch Smart-Price-Suggestion holen (Kunde + Item-Historie)
    const custId = (document.querySelector('select[name="customer_id"]')?.value) || '';
    fetch(`/api/items/${itemId}/price-suggestion?customer_id=${custId}&qty=${qtyVal}`)
      .then(r => r.json())
      .then(s => {
        if (!s || s.source === 'none' || s.source === 'bom_cost') return;  // bom wird via breakdown gezeigt
        const old = tr.querySelector('.price-history-badge');
        if (old) old.remove();
        const descCell = tr.children[1];
        const badge = document.createElement('div');
        badge.className = 'price-history-badge';
        const srcLabel = s.source === 'customer_history' ? 'Diesem Kunden zuletzt:' : 'Item-Historie:';
        badge.style.cssText = 'margin-top: 4px; padding: 5px 8px;' +
          ' background: #eff6ff; border-left: 3px solid #2b5ce6;' +
          ' border-radius: 4px; font-size: 11px; line-height: 1.4;';
        badge.innerHTML =
          `<b style="color:#2b5ce6;">${srcLabel}</b> ` +
          `<button type="button" class="apply-suggested-price"` +
          ` data-price="${s.suggested_price.toFixed(2)}" ` +
          ` style="background:#2b5ce6; color:white; border:none; padding:2px 8px;` +
          ` border-radius:3px; cursor:pointer; font-weight:600;">` +
          `${s.suggested_price.toLocaleString('de-DE', {minimumFractionDigits: 2})} €/Stk übernehmen</button>` +
          ` <span style="color:#475569; margin-left: 6px;">${s.note || ''}</span>`;
        descCell.appendChild(badge);
        badge.querySelector('.apply-suggested-price')?.addEventListener('click', (ev) => {
          tr.querySelector('[name=line_price]').value = ev.target.dataset.price.replace('.', ',');
          recalcRow(tr);
        });
      })
      .catch(() => { });
    fetch(`/api/items/${itemId}/breakdown?qty=1`)
      .then(r => r.json())
      .then(d => {
        // Remove any previous badge from this row
        const old = tr.querySelector('.assembly-badge');
        if (old) old.remove();
        if (!d.ok || !d.breakdown) return;  // nicht-Baugruppe → still
        const b = d.breakdown;
        const selfCostPerStk = b.total;  // qty=1 → pro Stk
        const marginPct = 40;            // Default-Marge (später aus Settings)
        const suggestedPrice = selfCostPerStk * (1 + marginPct / 100);

        // Badge unter Beschreibung
        const descCell = tr.children[1];  // 2. Zelle = description
        const badge = document.createElement('div');
        badge.className = 'assembly-badge';
        badge.style.cssText = 'margin-top: 4px; padding: 6px 8px;' +
          ' background: #f0fdf4; border-left: 3px solid #16a34a;' +
          ' border-radius: 4px; font-size: 11px; line-height: 1.4;';
        const subInfo = b.sub_cost > 0
          ? ` · Sub-BAS: <b>${b.sub_cost.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})} €</b>`
          : '';
        badge.innerHTML =
          `<b style="color:#16a34a;">Baugruppe erkannt</b> — ` +
          `Selbstkosten: <b>${selfCostPerStk.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})} €/Stk</b>` +
          subInfo +
          `<br>Vorschlag bei ${marginPct}% Marge: ` +
          `<button type="button" class="apply-suggested-price"` +
          ` data-price="${suggestedPrice.toFixed(2)}" ` +
          ` style="background:#16a34a; color:white; border:none; padding:2px 8px;` +
          ` border-radius:3px; cursor:pointer; font-weight:600;">` +
          `${suggestedPrice.toLocaleString('de-DE', {minimumFractionDigits: 2, maximumFractionDigits: 2})} €/Stk übernehmen</button>` +
          ` <a href="/items/${itemId}/bom" target="_blank" ` +
          `style="margin-left:8px; color:#2b5ce6; text-decoration:underline;">→ Stückliste ansehen</a>`;
        descCell.appendChild(badge);

        // Click-Handler für „Übernehmen"-Button
        badge.querySelector('.apply-suggested-price')?.addEventListener('click', (ev) => {
          const p = parseFloat(ev.target.dataset.price);
          tr.querySelector('[name=line_price]').value = p.toFixed(2).replace('.', ',');
          recalcRow(tr);
        });
      })
      .catch(() => { /* silent: nicht-Baugruppen-Items haben kein breakdown */ });
  }
  tbody.addEventListener('click', e => {
    if (e.target.classList && e.target.classList.contains('line-remove')) {
      const tr = e.target.closest('tr');
      if (tbody.children.length > 1) tr.remove(); else tr.querySelectorAll('input').forEach(i => i.value = i.name === 'line_unit' ? 'Stk' : (i.name === 'line_discount' ? '0' : ''));
      renumber();
    }
  });
})();

// v1.19.1: Capacity-Forecast — Live-Schaetzung des fruehestmoeglichen Liefertermins.
(function(){
  const hoursInput = document.getElementById('capacity-hours');
  const resultBox  = document.getElementById('capacity-result');
  if (!hoursInput || !resultBox) return;

  let debounceTimer = null;
  function update() {
    const hours = parseFloat(hoursInput.value);
    if (!hours || hours <= 0) {
      resultBox.innerHTML = '<span style="color:var(--card-text-muted);font-style:italic;">Stunden eingeben → frühestmöglicher Liefertermin wird berechnet …</span>';
      return;
    }
    resultBox.innerHTML = '<span style="color:var(--card-text-muted);">⏳ Berechne …</span>';
    fetch('/api/capacity/estimate-delivery?hours=' + encodeURIComponent(hours))
      .then(r => r.json())
      .then(d => {
        const loadBars = (d.load_per_week || []).slice(0, 6).map(w => {
          const pct = Math.min(100, w.load_pct);
          const col = pct > 90 ? '#fca5a5' : pct > 70 ? '#fcd34d' : '#86efac';
          return '<div style="display:inline-flex;flex-direction:column;align-items:center;font-size:10px;margin-right:6px;min-width:34px;">'
               + '<div style="height:30px;width:18px;background:rgba(255,255,255,0.08);border-radius:2px;position:relative;overflow:hidden;">'
               + '<div style="position:absolute;bottom:0;left:0;right:0;height:'+pct+'%;background:'+col+';"></div>'
               + '</div>'
               + '<div style="color:var(--card-text-muted);margin-top:2px;">KW'+w.week+'</div>'
               + '</div>';
        }).join('');
        const icon = d.weeks_until > 8 ? '⚠️' : d.weeks_until > 4 ? '📅' : '✅';
        resultBox.innerHTML =
          '<div style="display:flex;flex-direction:column;gap:6px;width:100%;">'
          + '<div style="display:flex;align-items:center;gap:8px;">'
          +   '<span style="font-size:16px;">'+icon+'</span>'
          +   '<strong style="color:var(--brand-orange);">'+d.message+'</strong>'
          + '</div>'
          + '<div style="font-size:10px;color:var(--card-text-muted);">'
          +   d.available_machines + ' Maschinen · ' + d.hours_needed + ' h benötigt · Auslastung pro KW:'
          + '</div>'
          + '<div style="display:flex;align-items:flex-end;margin-top:2px;">' + loadBars + '</div>'
          + '</div>';
        // Auto-fill "Gültig bis" auf earliest + 14 Tage falls leer
        const valid = document.querySelector('input[name="valid_until"]');
        if (valid && !valid.value) {
          const dt = new Date(d.earliest_iso);
          dt.setDate(dt.getDate() + 14);
          valid.value = dt.toISOString().slice(0, 10);
        }
      })
      .catch(e => {
        resultBox.innerHTML = '<span style="color:#fca5a5;">Fehler bei Berechnung: ' + e + '</span>';
      });
  }

  hoursInput.addEventListener('input', () => {
    clearTimeout(debounceTimer);
    debounceTimer = setTimeout(update, 400);
  });
})();
</script>
{% endblock %}