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

{% block title %}Neuer Auftrag{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/sales-orders" class="hover:underline">Aufträge</a> / Neu</p>{% endblock %}
{% block heading %}Neuer Auftrag{% endblock %}

{% block content %}
{% if then_label %}
<div style="background:linear-gradient(135deg,rgba(53,102,146,0.10),rgba(242,88,27,0.06));border-left:3px solid var(--brand-orange);padding:14px 18px;border-radius:8px;margin-bottom:18px;display:flex;align-items:center;gap:12px;">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--brand-orange)" stroke-width="2">
    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
  </svg>
  <div>
    <strong style="color:var(--brand-blue);">Express-Modus: Direkt {{ then_label }}</strong>
    <div style="font-size:12px;color:#525252;">Nach Speichern wird automatisch der {{ then_label }} aus diesem Auftrag erzeugt — Sie landen direkt auf der {{ then_label }}-Seite.</div>
  </div>
</div>
{% endif %}
<form method="post" action="/sales-orders/new{% if then %}?then={{ then }}{% endif %}" class="space-y-4" data-autosave="sales_order_new" style="max-width:1500px;">
  {% if then %}<input type="hidden" name="then" value="{{ then }}">{% endif %}

  {# ---------- Kopfdaten ---------- #}
  <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" id="customer-select">
          <option value="">— Kunde wählen —</option>
          {% for c in customers %}
          <option value="{{ c.id }}"
                  data-vat-id="{{ c.vat_id or '' }}"
                  data-country="{{ c.country_iso or 'DE' }}"
                  data-business="{{ c.is_business or 0 }}"
                  data-payment="{{ c.payment_terms_days or 14 }}">
            {{ c.name }} ({{ c.country_iso or 'DE' }}{% if c.vat_id %} · {{ c.vat_id }}{% endif %})
          </option>
          {% endfor %}
        </select>
        <p id="customer-hint" class="text-[11px] text-neutral-500 mt-1"></p>
      </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="confirmed" selected>Bestätigt</option>
          <option value="draft">Entwurf</option>
        </select>
      </div>

    </div>

    {# v1.12.0: Optionale Daten + Adressen eingeklappt #}
    <details class="form-advanced" style="margin: 0 14px 14px;">
      <summary>Weitere Optionen (Daten, Referenz, Adresse, Notizen)</summary>
      <div class="form-advanced-body">
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Auftragsdatum</label>
          <input class="input mt-1 w-full nums" type="date" name="order_date">
        </div>
        <div>
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Liefertermin</label>
          <input class="input mt-1 w-full nums" type="date" name="due_date">
        </div>
        <div style="grid-column: span 2;">
          {{ field("Kunden-Referenz / Bestell-Nr", "customer_reference", "", placeholder="z.B. PO-12345", attrs='data-suggest="customer_reference"') }}
        </div>
        <div style="grid-column: span 2;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Lieferadresse (abweichend)</label>
          <textarea name="shipping_address" class="input mt-1 w-full" rows="2"
                    placeholder="Wenn leer, wird die Rechnungsadresse des Kunden verwendet."></textarea>
        </div>
        <div style="grid-column: span 2;">
          <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notizen (intern)</label>
          <textarea name="notes" class="input mt-1 w-full" rows="2"></textarea>
        </div>
      </div>
    </details>
  </div>

  {# ---------- Positionen ---------- #}
  <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>
        #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:180px;">Artikel</th>
            <th class="num" style="width:100px">Menge</th>
            <th style="width:110px">Einheit</th>
            <th class="num" style="width:160px">Einzelpr. (netto)</th>
            <th class="num" style="width:90px">Rabatt %</th>
            <th class="num" style="width:170px">Zwischensumme</th>
            <th style="width:40px"></th>
          </tr>
        </thead>
        <tbody id="lines-body">
          {# Initial empty row, JS clones it #}
        </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-sm btn-secondary" id="add-line">+ Position hinzufügen</button>
        <span class="text-[11px] text-neutral-500 ml-3">Mengen mit Komma oder Punkt</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>
  </div>

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

{# ---------- Item lookup data for autocomplete ---------- #}
<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>
(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. Spannfutter SK40" 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 line-qty-input" 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 class="num nums line-subtotal text-neutral-500">—</td>
        <td class="text-right">
          <button type="button" class="btn btn-sm btn-secondary line-remove" title="Entfernen">×</button>
        </td>
      </tr>
      <tr class="availability-row" data-row-for="${idx}" style="display:none;">
        <td colspan="9" 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() {
    // Count only main rows (not availability sub-rows) to determine new idx
    const mainRows = [...tbody.children].filter(tr => !tr.classList.contains('availability-row'));
    const idx = mainRows.length;
    tbody.insertAdjacentHTML('beforeend', rowHTML(idx));
    renumber();
  }
  function renumber() {
    let i = 0;
    [...tbody.children].forEach(tr => {
      if (tr.classList.contains('availability-row')) {
        tr.dataset.rowFor = i - 1;  // belongs to the row just above
        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() {
    // Read from #customer-hint message — fallback 19 (DE)
    const hint = document.getElementById('customer-hint');
    const txt = hint ? (hint.textContent || '') : '';
    if (/Reverse Charge|steuerfrei/i.test(txt)) return 0;
    const m = txt.match(/(\d{1,2})\s*%/);
    return m ? parseInt(m[1], 10) : 19;
  }

  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');
    const elVat = document.getElementById('t-vat');
    const elGross = document.getElementById('t-gross');
    const 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);
  }

  addBtn.addEventListener('click', addRow);
  addRow();  // start with one row

  tbody.addEventListener('input', e => {
    const tr = e.target.closest('tr');
    if (tr) recalcRow(tr);
  });
  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');
      const desc = opt.dataset.desc || '';
      const price = parseFloat(opt.dataset.price || '0') || 0;
      const unit = opt.dataset.unit || 'Stk';
      if (desc && !tr.querySelector('[name=line_description]').value) {
        tr.querySelector('[name=line_description]').value = desc;
      }
      if (price > 0 && !tr.querySelector('[name=line_price]').value) {
        tr.querySelector('[name=line_price]').value = price.toFixed(2).replace('.', ',');
      }
      if (unit) tr.querySelector('[name=line_unit]').value = unit;
      recalcRow(tr);
    }
  });
  tbody.addEventListener('click', e => {
    if (e.target.classList && e.target.classList.contains('line-remove')) {
      const tr = e.target.closest('tr');
      // Also remove the availability sub-row right after it
      const next = tr.nextElementSibling;
      const mainRows = [...tbody.children].filter(r => !r.classList.contains('availability-row'));
      if (mainRows.length > 1) {
        if (next && next.classList.contains('availability-row')) next.remove();
        tr.remove();
      } else {
        tr.querySelectorAll('input').forEach(i => i.value = i.name === 'line_unit' ? 'Stk' : (i.name === 'line_discount' ? '0' : ''));
        if (next && next.classList.contains('availability-row')) next.style.display = 'none';
        recalcRow(tr);
      }
      renumber();
    }
  });

  // v1.12.1: Live-Verfügbarkeits-Check für Kundenteile.
  // Wird getriggert beim Item-Auswählen + bei Mengenänderung.
  async function checkAvailability(tr) {
    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 || '';
    // Nur für customer_part oder allgemeine Artikel mit Bestand prüfen
    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}`;

      // available after this new line: a.available - qty (a.reserved bezieht offene
      // Aufträge mit ein, NICHT diesen neuen Auftrag — also Defizit wenn qty > a.available)
      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 Auftrag 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 diesen Auftrag knapp</span>
          <span style="font-size: 12px; color: var(--card-text-muted);">
            Nach Auftrag noch <b>${newAvailable} Stk</b> verfügbar &middot; Mindestbestand: ${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 im Lager &middot; nach diesem Auftrag noch ${newAvailable} Stk
          </span>
        `;
      }
    } catch (err) {
      availRow.style.display = 'none';
    }
  }

  // Trigger check beim Item-Auswählen und bei Mengen-Änderung
  tbody.addEventListener('change', e => {
    if (e.target.classList && e.target.classList.contains('line-item-select')) {
      const tr = e.target.closest('tr');
      if (tr) setTimeout(() => checkAvailability(tr), 50);
    }
  });
  tbody.addEventListener('input', e => {
    if (e.target.name === 'line_qty') {
      const tr = e.target.closest('tr');
      if (tr) {
        clearTimeout(tr._availTimer);
        tr._availTimer = setTimeout(() => checkAvailability(tr), 400);
      }
    }
  });
  // Quick-Action: Fertigungsauftrag direkt 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 Auftragsformular' }),
      })
      .then(r => r.json())
      .then(d => {
        if (d.ok) {
          if (window.toast) toast(`Fertigungsauftrag ${d.ident} angelegt (${d.qty} Stk)`, 'success', { ttl: 3000 });
          // Re-check availability — Defizit sollte jetzt 0 sein
          const tr = btn.closest('.availability-row')?.previousElementSibling;
          if (tr) setTimeout(() => checkAvailability(tr), 200);
        } else {
          alert('Fehler: ' + (d.error || 'unbekannt'));
          btn.disabled = false; btn.textContent = `+ Fertigungsauftrag für ${qty} Stk`;
        }
      })
      .catch(err => {
        alert('Netzwerk-Fehler: ' + err);
        btn.disabled = false;
      });
    }
  });

  // Last-used customer pre-fill (only for new orders, not when redirected from elsewhere)
  (function () {
    const KEY = 'takoma_last_customer';
    const sel = document.getElementById('customer-select');
    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; });
          sel.dispatchEvent(new Event('change'));
        }
      } catch(e) {}
    }
    form.addEventListener('submit', () => {
      try { if (sel.value) localStorage.setItem(KEY, sel.value); } catch(e) {}
    });
  })();

  // Customer hint — show what tax verdict will apply
  const sel = document.getElementById('customer-select');
  const hint = document.getElementById('customer-hint');
  sel.addEventListener('change', () => {
    const opt = sel.selectedOptions[0];
    if (!opt || !opt.value) { hint.textContent = ''; return; }
    const country = opt.dataset.country || 'DE';
    const isBiz = opt.dataset.business === '1';
    const vat = opt.dataset.vatId || '';
    let msg = '';
    if (country === 'DE') {
      msg = 'Inland: 19 % USt';
    } else if (['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE'].includes(country)) {
      msg = (isBiz && vat) ? 'EU-B2B: Reverse Charge (0 %)' : 'EU-B2C: USt nach Lieferland';
    } else {
      msg = 'Drittland: steuerfreie Ausfuhrlieferung (0 %)';
    }
    msg += ` · Zahlungsziel ${opt.dataset.payment} Tage`;
    hint.textContent = msg;
    recalcTotals();
  });
})();
</script>
{% endblock %}