{% extends "base.html" %}
{% from "_macros.html" import money, pdf_lang_picker %}

{% block title %}{{ order.order_no }}{% endblock %}
{% block body_data %}data-page-type="sales_order" data-page-id="{{ order.id }}" data-page-label="{{ order.order_no }}" data-page-sub="{{ order.customer_name_snapshot }}"{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/sales-orders" class="hover:underline">Aufträge</a> / {{ order.order_no }}</p>{% endblock %}
{% block heading %}{{ order.order_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ order.customer_name_snapshot }}</span>{% endblock %}

{% block topbar_actions %}
  {# ---- Status + Priority badges (klein, links) ---- #}
  <div style="display:inline-flex; gap:6px; align-items:center; margin-right:8px;">
    {% set color = STATUS_COLOR.get(order.status, 'neutral') %}
    <span class="badge badge-{{ color }}">{{ STATUS_LABELS.get(order.status, order.status) }}</span>
    {% if order.priority and order.priority != 'normal' %}
      <span class="badge badge-{{ PRIORITY_COLOR.get(order.priority, 'neutral') }}">{{ PRIORITY_LABELS.get(order.priority, order.priority) }}</span>
    {% endif %}
  </div>
  {# ---- Aktion-Buttons (alle identisch dimensioniert) ---- #}
  <a class="btn btn-sm btn-secondary" href="/sales-orders/{{ order.id }}/edit">Auftrag bearbeiten</a>
  <form method="post" action="/sales-orders/{{ order.id }}/duplicate" class="inline" style="display:inline;">
    <button class="btn btn-sm btn-secondary" type="submit" title="Auftrag mit gleichem Kunden + Positionen duplizieren">Duplizieren</button>
  </form>
  <a class="btn btn-sm btn-secondary" href="#drawings">Zeichnungen</a>
  {{ pdf_lang_picker('sales-orders', order.id, order.lang or 'de') }}
  <a class="btn btn-sm btn-secondary" href="/sales-orders/{{ order.id }}/pdf" target="_blank">AB-PDF</a>
  <a class="btn btn-sm btn-primary"   href="/sales-orders/{{ order.id }}/send">AB senden</a>
  <form method="post" action="/sales-orders/{{ order.id }}/create-production-jobs" style="display:inline;"
        onsubmit="return confirm('Production-Jobs aus den Auftragspositionen erzeugen? (idempotent — bestehende werden nicht doppelt angelegt)')">
    <button class="btn btn-sm btn-secondary" type="submit"
            title="Erzeugt pro Position ein Production-Job (status=queued, machine zuweisbar im Aktions-Dashboard)">
      ⚙️ Production-Jobs
    </button>
  </form>
  {# Mängel-Beseitigung: Storno-Workflow #}
  {% if order.status == 'cancelled' %}
    <a class="btn btn-sm btn-secondary" style="background:rgba(239,68,68,0.20);border-color:#ef4444;color:#fca5a5;"
       href="/sales-orders/{{ order.id }}/cancellation-pdf" target="_blank">📄 Storno-PDF</a>
  {% else %}
    <button type="button" class="btn btn-sm btn-secondary"
            onclick="cancelOrder({{ order.id }})"
            style="color:#fca5a5;border-color:rgba(239,68,68,0.40);">
      🚫 Stornieren
    </button>
    <script>
      window.cancelOrder = function(orderId) {
        const reason = prompt('Stornierungsgrund (wird im PDF erscheinen):', '');
        if (reason === null) return;
        if (!confirm('Auftrag wirklich stornieren?\nOffene Production-Jobs werden ebenfalls cancelled.')) return;
        const f = document.createElement('form');
        f.method = 'POST';
        f.action = '/sales-orders/' + orderId + '/cancel';
        const ri = document.createElement('input');
        ri.type='hidden'; ri.name='reason'; ri.value = reason;
        f.appendChild(ri);
        const ci = document.createElement('input');
        ci.type='hidden'; ci.name='csrf_token';
        ci.value = (document.cookie.split('; ').find(r=>r.startsWith('csrf_token='))||'=').split('=')[1] || '';
        f.appendChild(ci);
        document.body.appendChild(f);
        f.submit();
      };
    </script>
  {% endif %}
{% endblock %}

{% block content %}

{% include "_workflow_stepper.html" %}

{# v1.19.1: Nachkalkulations-Banner — prominent oben wenn signifikante Abweichung. #}
{% if nachkalk and nachkalk.has_plan and nachkalk.variance.hours.pct is not none %}
  {% set pct = nachkalk.variance.hours.pct %}
  {% set abs_pct = pct if pct >= 0 else -pct %}
  {% if abs_pct >= 10 %}
    {% if pct > 0 %}
      {# Über Plan = schlecht (Job lief teurer als geschätzt) #}
      <div style="background:rgba(239,68,68,0.12); border:1.5px solid rgba(239,68,68,0.40); border-left:4px solid #ef4444; border-radius:8px; padding:14px 18px; margin-bottom:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
        <div style="font-size:28px; line-height:1;">⚠️</div>
        <div style="flex:1; min-width:240px;">
          <strong style="color:#fca5a5; font-size:14px;">Job lag {{ "%.0f"|format(pct) }} % über Schätzung</strong>
          <div style="font-size:12px; color:var(--card-text-muted); margin-top:2px;">
            Plan: {{ "%.1f"|format(nachkalk.planned.hours) }} h ·
            Ist: {{ "%.1f"|format(nachkalk.actual.hours) }} h ·
            Mehrkosten: {{ money(nachkalk.variance.hour_cost.diff) }}
            {% if pct >= 30 %} — bei nächstem Angebot diesen Kundentyp 20–30 % Puffer einrechnen{% endif %}
          </div>
        </div>
        <a href="#nachkalk-detail" class="btn btn-sm btn-secondary">↓ Detail anzeigen</a>
      </div>
    {% else %}
      {# Unter Plan = gut (Job lief günstiger als geschätzt) #}
      <div style="background:rgba(34,197,94,0.12); border:1.5px solid rgba(34,197,94,0.40); border-left:4px solid #22c55e; border-radius:8px; padding:14px 18px; margin-bottom:16px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;">
        <div style="font-size:28px; line-height:1;">✅</div>
        <div style="flex:1; min-width:240px;">
          <strong style="color:#86efac; font-size:14px;">Job lag {{ "%.0f"|format(abs_pct) }} % unter Schätzung</strong>
          <div style="font-size:12px; color:var(--card-text-muted); margin-top:2px;">
            Plan: {{ "%.1f"|format(nachkalk.planned.hours) }} h ·
            Ist: {{ "%.1f"|format(nachkalk.actual.hours) }} h ·
            Marge: +{{ money(-nachkalk.variance.hour_cost.diff) }}
          </div>
        </div>
        <a href="#nachkalk-detail" class="btn btn-sm btn-secondary">↓ Detail anzeigen</a>
      </div>
    {% endif %}
  {% endif %}
{% endif %}

<div class="grid grid-cols-3 gap-4">

  {# ---------- LEFT: Header + Lines (2/3) ---------- #}
  <div class="col-span-2 space-y-4">

    <div class="card">
      <div class="card-header"><div><h2>Stammdaten</h2></div></div>
      <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-3 text-sm">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Kunde</p>
          <p class="font-medium">{{ order.customer_name_snapshot }}</p>
          <p class="text-xs text-neutral-600 nums">
            {{ order.customer_country_iso_snapshot or '—' }}
            {% if order.customer_vat_id_snapshot %}· {{ order.customer_vat_id_snapshot }}{% endif %}
            {% if not order.is_business_snapshot %}· B2C{% endif %}
          </p>
          {% if order.customer_contact %}<p class="text-xs text-neutral-500 mt-1">{{ order.customer_contact }} · {{ order.customer_email or '—' }}</p>{% endif %}
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Belegdaten</p>
          <p class="text-xs nums">Auftragsdatum: <span class="font-semibold">{{ order.order_date }}</span></p>
          <p class="text-xs nums">Liefertermin: <span class="font-semibold">{{ order.due_date or '—' }}</span></p>
          {% if order.customer_reference %}<p class="text-xs">Ihre Bestell-Nr.: <span class="nums">{{ order.customer_reference }}</span></p>{% endif %}
          <p class="text-xs">Zahlungsziel: <span class="nums">{{ order.payment_terms_days }} Tage</span></p>
          <p class="text-xs">Format: <span class="font-mono">{{ order.preferred_invoice_format }}</span></p>
        </div>

        {% if order.shipping_address and order.shipping_address != order.billing_address %}
        <div class="col-span-2 mt-2 pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Abweichende Lieferadresse</p>
          <p class="text-xs whitespace-pre-line">{{ order.shipping_address }}</p>
        </div>
        {% endif %}

        <div class="col-span-2 mt-2 pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Tags</p>
          <div class="tag-widget" data-kind="sales_order" data-id="{{ order.id }}"
               data-tags="{{ (order_tags or [])|join(',') }}"></div>
        </div>
        <div class="col-span-2 mt-2 pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Interne Notiz</p>
          <div class="inline-note" data-kind="sales_order" data-id="{{ order.id }}">{{ order.notes or '' }}</div>
        </div>
      </div>
    </div>

    {# ---------- Zeichnungen / Anhänge ---------- #}
    <div class="card" id="drawings">
      <div class="card-header"><div>
        <h2>Zeichnungen &amp; Anhänge</h2>
        <p class="sub">PDF, JPG, PNG, SVG · max. 8 MB</p>
      </div></div>
      <div class="p-5 space-y-3 text-sm">
        {% if drawings %}
        <div class="grid grid-cols-2 md:grid-cols-3 gap-3">
          {% for a in drawings %}
          {% set ext = a.filename.split('.')[-1]|lower %}
          {# v1.5.0: 3D-Files öffnen den Vollbild-Viewer; alle anderen die Original-Datei #}
          {% set click_href = '/3d-viewer?src=' ~ (a.web_path|urlencode) if ext in ['stl','obj','3mf','step','stp','iges','igs'] else a.web_path %}
          <a href="{{ click_href }}" target="_blank" class="border rounded-lg overflow-hidden hover:shadow-md transition" style="border-color: var(--card-border-2); background: var(--card-bg);">
            <div class="aspect-square flex items-center justify-center bg-white p-2 border-b" style="border-color: var(--card-border-2);">
              {% if ext in ['jpg','jpeg','png','gif','webp','svg'] %}
                <img src="{{ a.web_path }}" alt="" style="max-width:100%; max-height:100%; object-fit:contain;">
              {% elif ext in ['dxf','dwg'] %}
                {# v1.4.0: CAD-Vorschau via /api/dxf-preview/<id>.svg (server-side gerendert + gecached) #}
                <img src="/api/dxf-preview/{{ a.id }}.svg" alt="DXF-Vorschau"
                     style="max-width:100%; max-height:100%; object-fit:contain;"
                     loading="lazy">
              {% elif ext in ['stl','obj','3mf','step','stp','iges','igs'] %}
                {# v1.5.0: Inline-3D-Viewer via static/inline-3d-preview.js (lazy-load three.js)
                   v1.6.0: STEP/IGES jetzt auch unterstützt (Klick-zum-Laden, OCCT-WASM lokal) #}
                <canvas class="takoma-3d-preview" width="240" height="240"
                        data-3d-src="{{ a.web_path }}" data-3d-ext="{{ ext }}"
                        style="max-width:100%; max-height:100%; cursor:zoom-in;"
                        title="Klick: Vollbild-3D-Viewer öffnen"></canvas>
              {% elif ext == 'pdf' %}
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="48" height="48" stroke-width="1.5" style="color:#ef4444;">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 2v6h6"/>
                </svg>
              {% else %}
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" width="48" height="48" stroke-width="1.5" style="color:#94a3b8;">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                  <path d="M14 2v6h6"/>
                </svg>
              {% endif %}
            </div>
            <div class="px-2 py-1.5 text-[11px]">
              <div class="truncate" title="{{ a.filename }}">{{ a.filename }}</div>
              <div class="text-neutral-500 nums">{{ (a.size_bytes/1024)|round(0)|int }} KB · {{ a.created_at[:10] }}</div>
            </div>
          </a>
          {% endfor %}
        </div>
        {% else %}
        <p class="text-[11px] text-neutral-500">Noch keine Zeichnungen hochgeladen.</p>
        {% endif %}
        <form method="post" action="/sales-orders/{{ order.id }}/drawings" enctype="multipart/form-data"
              class="flex items-center gap-2 pt-2 border-t" style="border-color: var(--card-border-2);">
          <input type="file" name="file" accept=".pdf,.png,.jpg,.jpeg,.gif,.webp,.svg,.dxf,.dwg,.stl,.obj,.3mf,.step,.stp,.iges,.igs" required class="text-xs flex-1">
          <button class="btn btn-sm btn-primary" type="submit">+ Hochladen</button>
        </form>
      </div>
    </div>

    <div class="card" id="positions-card"
         data-drawings='[{% for a in drawings %}{"path":{{ a.web_path|tojson }},"name":{{ a.filename|tojson }}}{{ "," if not loop.last else "" }}{% endfor %}]'>
      <div class="card-header"><div>
        <h2>Positionen</h2>
        <p class="sub">{{ lines|length }} {% if lines|length == 1 %}Position{% else %}Positionen{% endif %} · <span class="text-neutral-500">Rechtsklick auf Position öffnet Zeichnung</span></p>
      </div></div>
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:30px">#</th>
            <th>Beschreibung</th>
            <th class="num">Menge</th>
            <th>Einh.</th>
            <th class="num">Einzelpr.</th>
            <th class="num">Rabatt</th>
            <th class="num">USt</th>
            <th class="num">Netto</th>
            <th style="width:40px"></th>
          </tr>
        </thead>
        <tbody>
          {% for ln in lines %}
          {% set editable = (ln.qty_invoiced or 0) == 0 and order.status not in ('cancelled', 'paid', 'invoiced') %}
          <tr id="line-row-{{ ln.id }}">
            <td class="nums text-neutral-500">{{ ln.line_no }}</td>
            <td>
              <div>{{ ln.description }}</div>
              {% if ln.item_ident %}<div class="text-[11px] text-neutral-500 nums">{{ ln.item_ident }}</div>{% endif %}
              {% if ln.qty_delivered %}<div class="text-[10px] text-emerald-700 nums mt-0.5">geliefert: {{ "%.0f"|format(ln.qty_delivered) if ln.qty_delivered == ln.qty_delivered|int else "%.2f"|format(ln.qty_delivered) }}</div>{% endif %}
              {% if ln.qty_invoiced %}<div class="text-[10px] text-blue-700 nums">abgerechnet: {{ "%.0f"|format(ln.qty_invoiced) if ln.qty_invoiced == ln.qty_invoiced|int else "%.2f"|format(ln.qty_invoiced) }}</div>{% endif %}
            </td>
            <td class="num nums {% if editable %}il-edit{% endif %}"
                {% if editable %}data-line-id="{{ ln.id }}" data-field="qty_ordered" data-numeric="1" title="Klicken zum Bearbeiten"{% endif %}>{{ "%.0f"|format(ln.qty_ordered) if ln.qty_ordered == ln.qty_ordered|int else "%.2f"|format(ln.qty_ordered) }}</td>
            <td class="text-xs">{{ ln.unit }}</td>
            <td class="num nums {% if editable %}il-edit{% endif %}"
                {% if editable %}data-line-id="{{ ln.id }}" data-field="unit_price" data-numeric="1" title="Klicken zum Bearbeiten"{% endif %}>{{ money(ln.unit_price) }}</td>
            <td class="num nums {% if editable %}il-edit{% endif %}"
                {% if editable %}data-line-id="{{ ln.id }}" data-field="discount_pct" data-numeric="1" title="Klicken zum Bearbeiten"{% endif %}>{{ "%.0f"|format(ln.discount_pct) if ln.discount_pct else '—' }}{% if ln.discount_pct %} %{% endif %}</td>
            <td class="num text-xs nums">
              {% if ln.vat_kind == 'eu_b2b_reverse' %}<span class="badge badge-blue">RC</span>
              {% elif ln.vat_kind == 'export' %}<span class="badge badge-amber">Export</span>
              {% else %}{{ "%.0f"|format(ln.vat_rate) }} %{% endif %}
            </td>
            <td class="num nums font-semibold">{{ money(ln.line_total_net) }}</td>
            <td class="text-right">
              {% if editable %}
              <button type="button" class="btn btn-sm btn-secondary" title="Position bearbeiten"
                      onclick="document.getElementById('line-row-{{ ln.id }}').style.display='none'; document.getElementById('line-edit-{{ ln.id }}').style.display='table-row';">✎</button>
              {% endif %}
            </td>
          </tr>
          {% if editable %}
          <tr id="line-edit-{{ ln.id }}" style="display:none; background:rgba(232, 93, 47, 0.04);">
            <td colspan="9" class="p-3">
              <form method="post" action="/sales-orders/{{ order.id }}/lines/{{ ln.id }}/edit"
                    class="grid grid-cols-12 gap-3 items-end text-sm">
                <div class="col-span-12">
                  <label class="text-[10px] uppercase tracking-wider text-neutral-500">Beschreibung</label>
                  <input class="input w-full" type="text" name="description" value="{{ ln.description }}">
                </div>
                <div class="col-span-3">
                  <label class="text-[10px] uppercase tracking-wider text-neutral-500">Menge ({{ ln.unit }})</label>
                  <input class="input w-full nums num" type="text" name="qty_ordered"
                         value="{{ '%.0f'|format(ln.qty_ordered) if ln.qty_ordered == ln.qty_ordered|int else '%.2f'|format(ln.qty_ordered) }}"
                         style="text-align:right">
                  {% if ln.qty_delivered %}<p class="text-[10px] text-neutral-500 mt-0.5">min: {{ "%.0f"|format(ln.qty_delivered) if ln.qty_delivered == ln.qty_delivered|int else "%.2f"|format(ln.qty_delivered) }}</p>{% endif %}
                </div>
                <div class="col-span-3">
                  <label class="text-[10px] uppercase tracking-wider text-neutral-500">Einzelpr.</label>
                  <input class="input w-full nums num" type="text" name="unit_price"
                         value="{{ '%.2f'|format(ln.unit_price)|replace('.', ',') }}"
                         style="text-align:right">
                </div>
                <div class="col-span-2">
                  <label class="text-[10px] uppercase tracking-wider text-neutral-500">Rabatt %</label>
                  <input class="input w-full nums num" type="text" name="discount_pct"
                         value="{{ '%.0f'|format(ln.discount_pct or 0) }}" style="text-align:right">
                </div>
                <div class="col-span-4">
                  <label class="text-[10px] uppercase tracking-wider text-neutral-500">Lieferzeit (Tage)</label>
                  <input class="input w-full nums num" type="number" min="0" name="lead_time_days"
                         value="{{ ln.lead_time_days or '' }}" style="text-align:right">
                </div>
                <div class="col-span-12 flex gap-2 justify-end pt-2 border-t" style="border-color: var(--card-border-2);">
                  <button type="button" class="btn btn-sm btn-secondary"
                          onclick="document.getElementById('line-edit-{{ ln.id }}').style.display='none'; document.getElementById('line-row-{{ ln.id }}').style.display='';">Abbrechen</button>
                  <button class="btn btn-sm btn-primary" type="submit">Speichern</button>
                </div>
              </form>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
        <tfoot>
          <tr>
            <td colspan="7" class="num text-xs text-neutral-500">Zwischensumme netto</td>
            <td class="num nums font-semibold">{{ money(order.subtotal_net) }}</td>
          </tr>
          {% if order.vat_amount %}
          <tr>
            <td colspan="7" class="num text-xs text-neutral-500">USt</td>
            <td class="num nums">{{ money(order.vat_amount) }}</td>
          </tr>
          {% endif %}
          <tr style="background: var(--card-bg-2);">
            <td colspan="7" class="num text-sm font-semibold">Gesamtbetrag</td>
            <td class="num nums font-bold" style="font-size:1rem;">{{ money(order.total_gross) }} {{ order.currency }}</td>
          </tr>
        </tfoot>
      </table>
      {% set first = lines[0] if lines else None %}
      {% if first and first.vat_kind == 'eu_b2b_reverse' %}
      <div class="px-5 py-3 text-[11px] text-neutral-600" style="background:rgba(43,92,230,0.06); border-top:1px solid var(--card-border-2);">
        <strong>Hinweis Reverse Charge:</strong> Steuerschuldnerschaft des Leistungsempfängers nach anwendbarem Recht.
      </div>
      {% elif first and first.vat_kind == 'export' %}
      <div class="px-5 py-3 text-[11px] text-neutral-600" style="background:rgba(245,158,11,0.06); border-top:1px solid var(--card-border-2);">
        <strong>Hinweis Ausfuhr:</strong> Steuerfreie Ausfuhrlieferung (§ 4 Nr. 1a, § 6 UStG).
      </div>
      {% endif %}
    </div>

    {% if nachkalk %}
    <div class="card" id="nachkalk-detail">
      <div class="card-header"><div>
        <h2>Nachkalkulation · Plan vs. Ist</h2>
        <p class="sub">
          Stundensatz {{ "%.0f"|format(nachkalk.rate) }} €/h
          {% if nachkalk.inquiry_no or nachkalk.quote_no %}
            · Plan aus
            {% if nachkalk.inquiry_no %}<a href="/inquiries" class="text-blue-700">{{ nachkalk.inquiry_no }}</a>{% endif %}
            {% if nachkalk.quote_no %} / {{ nachkalk.quote_no }}{% endif %}
          {% else %}
            · Kein Plan hinterlegt — nur Ist-Werte
          {% endif %}
        </p>
      </div></div>

      <table class="data-table">
        <thead>
          <tr>
            <th>Größe</th>
            <th class="num">Plan</th>
            <th class="num">Ist</th>
            <th class="num">Differenz</th>
            <th class="num">Abw. %</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><b>Stunden</b></td>
            <td class="num nums">{% if nachkalk.has_plan %}{{ "%.1f"|format(nachkalk.planned.hours) }} h{% else %}—{% endif %}</td>
            <td class="num nums font-semibold">{{ "%.1f"|format(nachkalk.actual.hours) }} h</td>
            <td class="num nums {% if nachkalk.variance.hours.diff > 0 %}text-red-600{% elif nachkalk.variance.hours.diff < 0 %}text-emerald-700{% endif %}">
              {% if nachkalk.has_plan %}{% if nachkalk.variance.hours.diff > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.hours.diff) }} h{% else %}—{% endif %}
            </td>
            <td class="num nums">{% if nachkalk.variance.hours.pct is not none %}{% if nachkalk.variance.hours.pct > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.hours.pct) }} %{% else %}—{% endif %}</td>
          </tr>
          <tr>
            <td>Stunden-Kosten</td>
            <td class="num nums">{% if nachkalk.has_plan %}{{ money(nachkalk.planned.hour_cost) }}{% else %}—{% endif %}</td>
            <td class="num nums">{{ money(nachkalk.actual.hour_cost) }}</td>
            <td class="num nums {% if nachkalk.variance.hour_cost.diff > 0 %}text-red-600{% elif nachkalk.variance.hour_cost.diff < 0 %}text-emerald-700{% endif %}">
              {% if nachkalk.has_plan %}{% if nachkalk.variance.hour_cost.diff > 0 %}+{% endif %}{{ money(nachkalk.variance.hour_cost.diff) }}{% else %}—{% endif %}
            </td>
            <td class="num nums">{% if nachkalk.variance.hour_cost.pct is not none %}{% if nachkalk.variance.hour_cost.pct > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.hour_cost.pct) }} %{% else %}—{% endif %}</td>
          </tr>
          <tr>
            <td>Material</td>
            <td class="num nums">{% if nachkalk.has_plan %}{{ money(nachkalk.planned.material) }}{% else %}—{% endif %}</td>
            <td class="num nums">{{ money(nachkalk.actual.material) }}</td>
            <td class="num nums {% if nachkalk.variance.material.diff > 0 %}text-red-600{% elif nachkalk.variance.material.diff < 0 %}text-emerald-700{% endif %}">
              {% if nachkalk.has_plan %}{% if nachkalk.variance.material.diff > 0 %}+{% endif %}{{ money(nachkalk.variance.material.diff) }}{% else %}—{% endif %}
            </td>
            <td class="num nums">{% if nachkalk.variance.material.pct is not none %}{% if nachkalk.variance.material.pct > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.material.pct) }} %{% else %}—{% endif %}</td>
          </tr>
          <tr style="background: var(--card-bg-2);">
            <td><b>Selbstkosten gesamt</b></td>
            <td class="num nums font-semibold">{% if nachkalk.has_plan %}{{ money(nachkalk.planned.total) }}{% else %}—{% endif %}</td>
            <td class="num nums font-semibold">{{ money(nachkalk.actual.total) }}</td>
            <td class="num nums font-semibold {% if nachkalk.variance.total.diff > 0 %}text-red-600{% elif nachkalk.variance.total.diff < 0 %}text-emerald-700{% endif %}">
              {% if nachkalk.has_plan %}{% if nachkalk.variance.total.diff > 0 %}+{% endif %}{{ money(nachkalk.variance.total.diff) }}{% else %}—{% endif %}
            </td>
            <td class="num nums font-semibold">{% if nachkalk.variance.total.pct is not none %}{% if nachkalk.variance.total.pct > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.total.pct) }} %{% else %}—{% endif %}</td>
          </tr>
          <tr>
            <td><b>Verkaufspreis (netto)</b></td>
            <td class="num nums">{% if nachkalk.has_plan %}{{ money(nachkalk.planned.price) }}{% else %}—{% endif %}</td>
            <td class="num nums font-semibold">{{ money(nachkalk.sold) }}</td>
            <td colspan="2"></td>
          </tr>
          <tr style="background: rgba(16, 185, 129, 0.05);">
            <td><b>Marge</b></td>
            <td class="num nums">{% if nachkalk.has_plan %}{{ money(nachkalk.planned.margin) }}{% else %}—{% endif %}</td>
            <td class="num nums font-semibold {% if nachkalk.actual.margin > 0 %}text-emerald-700{% elif nachkalk.actual.margin < 0 %}text-red-600{% endif %}">{{ money(nachkalk.actual.margin) }}</td>
            <td class="num nums {% if nachkalk.variance.margin.diff < 0 %}text-red-600{% elif nachkalk.variance.margin.diff > 0 %}text-emerald-700{% endif %}">
              {% if nachkalk.has_plan %}{% if nachkalk.variance.margin.diff > 0 %}+{% endif %}{{ money(nachkalk.variance.margin.diff) }}{% else %}—{% endif %}
            </td>
            <td class="num nums">{% if nachkalk.variance.margin.pct is not none %}{% if nachkalk.variance.margin.pct > 0 %}+{% endif %}{{ "%.1f"|format(nachkalk.variance.margin.pct) }} %{% else %}—{% endif %}</td>
          </tr>
        </tbody>
      </table>

      {% if not nachkalk.has_plan %}
      <div class="px-5 py-3 text-[11px] text-neutral-600" style="background: rgba(245, 158, 11, 0.06); border-top:1px solid var(--card-border-2);">
        Hinweis: Für eine vollständige Plan-vs-Ist-Auswertung lege im Anfrage-Detail (vor dem Angebot) eine Prozess-Planung mit Stunden + Material an. Die Werte werden dann hier automatisch verglichen.
      </div>
      {% elif nachkalk.actual.hours == 0 %}
      <div class="px-5 py-3 text-[11px] text-neutral-600" style="background: rgba(43, 92, 230, 0.05); border-top:1px solid var(--card-border-2);">
        Noch keine Ist-Stunden auf diesem Auftrag verbucht — sobald Mitarbeiter Zeit auf den Fertigungsauftrag erfassen, erscheinen die Werte hier automatisch.
      </div>
      {% endif %}
    </div>
    {% endif %}

    {# v1.7.0: Arbeitsplan — Detail-Planung vor Werkstatt-Freigabe #}
    {% if workplan_jobs %}
    <div class="card" id="workplan">
      <div class="card-header"><div>
        <h2>📋 Arbeitsplan ({{ workplan_jobs|length }} Position{% if workplan_jobs|length != 1 %}en{% endif %})</h2>
        <p class="sub">Maschine + Rüstplan zuweisen, dann freigeben → Jobs werden im Aktions-Dashboard und Shopfloor sichtbar</p>
      </div></div>
      <table class="data-table" style="font-size:13px;">
        <thead>
          <tr>
            <th>Position</th>
            <th class="num">Stk</th>
            <th>Maschine</th>
            <th>Rüstplan</th>
            <th>Smart-Vorschlag</th>
          </tr>
        </thead>
        <tbody>
          {% for j in workplan_jobs %}
          <tr data-workplan-job="{{ j.id }}">
            <td>
              <strong>{{ j.item_ident or '—' }}</strong>
              {% if j.item_description %}<div class="text-[11px] text-neutral-500">{{ j.item_description[:40] }}</div>{% endif %}
              <div class="text-[10px] text-neutral-400">Job #{{ j.id }} · {{ j.ident }}</div>
            </td>
            <td class="num nums">{{ j.qty_target }}</td>
            <td>
              <select class="select" style="font-size:12px;width:100%;"
                      data-wp-field="machine" data-wp-job="{{ j.id }}">
                <option value="">— Maschine wählen —</option>
                {% for m in machines %}
                <option value="{{ m.id }}" {% if m.id == j.machine_id %}selected{% endif %}>{{ m.name }}</option>
                {% endfor %}
              </select>
            </td>
            <td>
              <select class="select" style="font-size:12px;width:100%;"
                      data-wp-field="setup_plan" data-wp-job="{{ j.id }}">
                <option value="">— kein Rüstplan —</option>
                {% for sp in setup_plans %}
                <option value="{{ sp.id }}" {% if sp.id == j.setup_plan_id %}selected{% endif %}>{{ sp.name }} ({{ sp.est_minutes }} min)</option>
                {% endfor %}
              </select>
            </td>
            <td style="font-size:11px;">
              {% if j.suggested_machine_name %}
              <div>🤖 <strong>{{ j.suggested_machine_name }}</strong> ({{ j.suggested_count }}× in History)</div>
              {% endif %}
              {% if j.suggested_setup_plan_name %}
              <div>📋 Plan: <strong>{{ j.suggested_setup_plan_name }}</strong></div>
              {% endif %}
              {% if j.suggested_machine_id or j.suggested_setup_plan_id %}
              <button type="button" class="btn btn-sm btn-secondary" style="font-size:10px;margin-top:4px;"
                      onclick="applySuggestion({{ j.id }}, {{ j.suggested_machine_id or 'null' }}, {{ j.suggested_setup_plan_id or 'null' }})">
                ✓ Übernehmen
              </button>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {# Tier-A.4: Verfügbarkeits-Check vor Release #}
      <div id="workplan-readiness" style="margin:8px 16px;padding:10px 14px;border-radius:8px;
                                            background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.10);
                                            font-size:12px;display:none;"></div>

      <div class="card-footer flex items-center justify-between" style="padding:12px 16px;">
        <div class="text-[11px] text-neutral-500">
          Änderungen werden automatisch gespeichert (debounced 400ms).
          {# Tier-A.5: Status-Pills statt fester "Planung"-Text #}
          <div style="margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;">
            Status:
            {% set first_job = workplan_jobs[0] if workplan_jobs else none %}
            {% set wstatus = (first_job.workplan_status if first_job and first_job.workplan_status else 'draft') %}
            {% for code, label in {'draft':'✏ Entwurf','in_review':'👁 In Prüfung','approved':'✓ Freigegeben'}.items() %}
              {% set bg = '#356692' if code == wstatus else 'rgba(255,255,255,0.08)' %}
              {% set fg = '#fff' if code == wstatus else 'rgba(255,255,255,0.55)' %}
              <button type="button" onclick="setWorkplanStatus('{{ code }}')"
                      style="padding:3px 10px;border-radius:12px;font-size:11px;
                             background:{{ bg }};color:{{ fg }};border:none;cursor:pointer;">
                {{ label }}
              </button>
            {% endfor %}
          </div>
        </div>
        <form method="post" action="/sales-orders/{{ order.id }}/release-workplan" id="workplan-release-form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token if csrf_token else '' }}">
          <button class="btn btn-primary" type="submit" id="workplan-release-btn"
                  onclick="return checkWorkplanReadiness();">
            ✅ Arbeitsplan freigeben
          </button>
        </form>
        <script>
          // Fallback: CSRF-Token aus Cookie auch in das Form schreiben
          // (wenn der Server-Side-Render das nicht in den Context injected)
          (function () {
            const f = document.getElementById('workplan-release-form');
            const inp = f && f.querySelector('input[name="csrf_token"]');
            if (inp && !inp.value) {
              inp.value = (document.cookie.split('; ').find(r => r.startsWith('csrf_token='))
                          || '=').split('=')[1] || '';
            }
          })();
        </script>
      </div>
      <script>
        // Tier-A.4 + A.5: Readiness-Check + Status-Setzen
        function loadWorkplanReadiness() {
          fetch('/api/sales-orders/{{ order.id }}/workplan/readiness')
            .then(r=>r.json()).then(d => {
              const box = document.getElementById('workplan-readiness');
              if (!d || !d.jobs) return;
              const warnings = d.jobs.filter(j => j.warning);
              if (!warnings.length) {
                box.style.display = 'block';
                box.style.background = 'rgba(16,185,129,0.10)';
                box.style.borderColor = 'rgba(16,185,129,0.30)';
                box.innerHTML = '<strong style="color:#10b981;">✓ Bereit zur Freigabe</strong> — alle Maschinen zugewiesen, qualifiziertes Personal vorhanden.';
              } else {
                box.style.display = 'block';
                box.style.background = 'rgba(245,158,11,0.10)';
                box.style.borderColor = 'rgba(245,158,11,0.40)';
                let html = '<strong style="color:#fcd34d;">⚠ Vor Freigabe prüfen:</strong><ul style="margin:4px 0 0 18px;">';
                warnings.forEach(w => { html += '<li>' + w.warning + (w.machine_name ? ' (' + w.machine_name + ')' : '') + '</li>'; });
                html += '</ul>';
                box.innerHTML = html;
              }
            });
        }
        function checkWorkplanReadiness() {
          // Sofortcheck: wenn Warnings, nochmal nachfragen
          return confirm('Alle Arbeitsplan-Positionen jetzt für die Werkstatt freigeben?');
        }
        function setWorkplanStatus(status) {
          // Status für ALLE Jobs dieses Auftrags setzen
          {% if workplan_jobs %}
          const jobIds = {{ workplan_jobs | map(attribute='id') | list | tojson }};
          Promise.all(jobIds.map(jid =>
            fetch('/api/workplan/' + jid + '/status', {
              method:'POST', headers:{'Content-Type':'application/json'},
              body: JSON.stringify({status: status})
            })
          )).then(()=>location.reload());
          {% endif %}
        }
        loadWorkplanReadiness();
      </script>
    </div>
    <script>
    (function() {
      // Auto-save bei Maschinen-/Rüstplan-Auswahl
      const debouncers = {};
      document.querySelectorAll('[data-wp-job]').forEach(el => {
        el.addEventListener('change', () => {
          const jobId = el.dataset.wpJob;
          clearTimeout(debouncers[jobId]);
          debouncers[jobId] = setTimeout(() => saveWorkplanRow(jobId), 200);
        });
      });
      function saveWorkplanRow(jobId) {
        const row = document.querySelector(`tr[data-workplan-job="${jobId}"]`);
        if (!row) return;
        const machine = row.querySelector('[data-wp-field="machine"]').value;
        const setup   = row.querySelector('[data-wp-field="setup_plan"]').value;
        fetch(`/api/workplan/${jobId}/assign`, {
          method:'POST', headers:{'Content-Type':'application/json'},
          body: JSON.stringify({machine_id: machine || null, setup_plan_id: setup || null}),
        });
      }
      window.applySuggestion = function(jobId, machineId, setupPlanId) {
        const row = document.querySelector(`tr[data-workplan-job="${jobId}"]`);
        if (machineId) row.querySelector('[data-wp-field="machine"]').value = machineId;
        if (setupPlanId) row.querySelector('[data-wp-field="setup_plan"]').value = setupPlanId;
        saveWorkplanRow(jobId);
      };
    })();
    </script>
    {% endif %}

    {% if fa_jobs %}
    <div class="card">
      <div class="card-header"><div>
        <h2>Fertigungsaufträge</h2>
        <p class="sub">Verknüpfte Produktionsjobs</p>
      </div></div>
      <table class="data-table">
        <thead>
          <tr><th>Auftrags-Nr</th><th>Maschine</th><th>Operator</th><th class="num">Fortschritt</th><th>Status</th></tr>
        </thead>
        <tbody>
        {% for j in fa_jobs %}
          <tr>
            <td class="nums">{{ j.ident }}</td>
            <td>{{ j.machine_name or '—' }}</td>
            <td>{{ (j.first_name ~ ' ' ~ j.last_name) if j.first_name else '—' }}</td>
            <td class="num nums">{{ j.qty_done }} / {{ j.qty_target }}</td>
            <td><span class="badge badge-neutral">{{ j.status }}</span></td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
    {% endif %}
  </div>

  {# ---------- RIGHT: Status + Aktionen (1/3) ---------- #}
  <div class="space-y-4">
    {# ---------- Priorität & Material-Status ---------- #}
    <div class="card">
      <div class="card-header"><div><h2>Priorität &amp; Material</h2></div></div>
      <div class="p-5 space-y-3 text-sm">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Priorität</p>
          <form method="post" action="/sales-orders/{{ order.id }}/priority" class="flex items-center gap-2 mt-1">
            <select name="priority" class="select flex-1" style="font-size:0.75rem;">
              {% for code, label in PRIORITY_LABELS.items() %}
                <option value="{{ code }}" {% if order.priority == code %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
            <button class="btn btn-sm btn-primary" type="submit">Setzen</button>
          </form>
        </div>
        <div class="pt-3 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Material-Status</p>
          {% if order.material_status %}
          <p class="mt-1"><span class="badge badge-{{ MATERIAL_STATUS_COLOR.get(order.material_status, 'neutral') }}">{{ MATERIAL_STATUS_LABELS.get(order.material_status, order.material_status) }}</span></p>
          {% endif %}
          {% if order.material_note %}<p class="text-xs text-neutral-600 mt-1">{{ order.material_note }}</p>{% endif %}
          <form method="post" action="/sales-orders/{{ order.id }}/material-status" class="mt-2 space-y-2">
            <select name="material_status" class="select w-full" style="font-size:0.75rem;">
              {% for code, label in MATERIAL_STATUS_LABELS.items() %}
                <option value="{{ code }}" {% if order.material_status == code %}selected{% endif %}>{{ label }}</option>
              {% endfor %}
            </select>
            <input class="input w-full" type="text" name="material_note" placeholder="Notiz (z.B. C45 fehlt)" value="{{ order.material_note or '' }}" style="font-size:0.75rem;">
            <button class="btn btn-sm btn-primary w-full" type="submit">Speichern</button>
          </form>
        </div>
      </div>
    </div>

    {# ---------- Prozess-Schritt (aktueller Stand) ---------- #}
    <div class="card">
      <div class="card-header"><div>
        <h2>Prozess-Status</h2>
        {% if progress.total %}
          <p class="sub">{{ progress.completed }} / {{ progress.total }} Schritte erledigt</p>
        {% else %}
          <p class="sub">Noch kein Routing zugewiesen</p>
        {% endif %}
      </div></div>
      <div class="p-5 space-y-3 text-sm">
        {% if progress.current_step %}
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Aktuelle Stufe</p>
          <p class="mt-1 flex items-center gap-2">
            <span class="dot" style="background:{{ progress.current_step.step_color }}"></span>
            <span class="font-semibold">{{ progress.current_step.step_name }}</span>
            <span class="badge badge-{% if progress.current_step.status == 'running' %}emerald{% else %}neutral{% endif %}" style="font-size:9px;">
              {{ 'läuft' if progress.current_step.status == 'running' else 'wartet' }}
            </span>
          </p>
        </div>
        {% endif %}
        {% if progress.total %}
        {% set pct = (progress.completed * 100 / progress.total) if progress.total else 0 %}
        <div class="relative h-2 bg-neutral-100 rounded-full overflow-hidden">
          <div class="absolute inset-y-0 left-0" style="width:{{ pct|round(0,'common')|int }}%;background:#10b981;"></div>
        </div>
        <p class="text-[10px] text-neutral-500 nums">{{ pct|round(0,'common')|int }} %</p>
        {% endif %}

        {# Graphischer Stage-Flow — alle Stages immer sichtbar #}
        <div class="pt-3 mt-2 border-t" style="border-color: var(--card-border-2);">
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-2">Pipeline</p>
          <div class="op-stages-flow" style="flex-wrap: wrap; row-gap: 6px;">
            {% for s in step_view %}
              {% if not loop.first %}<span class="op-arrow">▸</span>{% endif %}
              <div class="op-stage {% if s.status == 'done' %}is-done{% elif s.status == 'running' %}is-running{% elif s.status == 'pending' %}is-pending{% elif s.status == 'skipped' %}is-skipped{% else %}is-na{% endif %}"
                   title="{{ s.name }} · {{ s.status }}">
                <span class="dot" style="{% if s.status == 'pending' %}border-color:{{ s.color }}{% endif %}"></span>
                <span class="name">{{ s.name }}</span>
              </div>
            {% endfor %}
          </div>
        </div>

        {% if not progress.total and fa_jobs %}
        <div class="pt-3 mt-2 border-t text-xs" style="border-color: var(--card-border-2);">
          <p class="text-neutral-600 mb-2">Routing einem Fertigungsauftrag zuweisen:</p>
          {% for j in fa_jobs %}
          <form method="post" action="/production-jobs/{{ j.id }}/assign-steps" class="inline">
            <button class="btn btn-sm btn-secondary" type="submit">{{ j.ident }} → Standard-Routing</button>
          </form>
          {% endfor %}
        </div>
        {% endif %}

        <a class="btn btn-sm btn-secondary w-full mt-2" href="/pipeline">Zur Werkstatt-Pipeline →</a>
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Status</h2></div></div>
      <div class="p-5 space-y-3 text-sm">
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Aktueller Status</p>
          {% set color = STATUS_COLOR.get(order.status, 'neutral') %}
          <p class="mt-1"><span class="badge badge-{{ color }}">{{ STATUS_LABELS.get(order.status, order.status) }}</span></p>
        </div>
        <form method="post" action="/sales-orders/{{ order.id }}/status" class="flex items-center gap-2">
          <select name="status" class="select flex-1" style="font-size:0.75rem;">
            {% for code, label in STATUS_LABELS.items() %}
              <option value="{{ code }}" {% if code == order.status %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <button class="btn btn-sm btn-primary" type="submit">Setzen</button>
        </form>
        <div class="text-[11px] text-neutral-500 pt-2 border-t" style="border-color: var(--card-border-2);">
          Erstellt: <span class="nums">{{ order.created_at[:16] }}</span><br>
          {% if order.confirmed_at %}Bestätigt: <span class="nums">{{ order.confirmed_at[:16] }}</span><br>{% endif %}
          {% if order.closed_at %}Abgeschlossen: <span class="nums">{{ order.closed_at[:16] }}</span><br>{% endif %}
        </div>
      </div>
    </div>

    {# v1.11.0 Quick-Action: 1-Klick-Komplettabschluss #}
    {% if has_open_qty and order.status not in ('cancelled',) %}
    <div class="card" style="border-left: 3px solid #16a34a;">
      <div class="card-header">
        <div>
          <h2 style="color:#16a34a;">Auftrag in 1 Klick abschlie&szlig;en</h2>
          <p class="sub">Erstellt Lieferschein + Rechnung mit allen offenen Mengen.</p>
        </div>
      </div>
      <div class="p-5 space-y-2 text-sm">
        <form method="post" action="/sales-orders/{{ order.id }}/complete" style="margin:0;">
          {{ csrf_field(request)|safe }}
          <button type="submit" class="btn btn-primary w-full"
                  style="background:#16a34a; color:white;"
                  onclick="return confirm('Auftrag jetzt komplett abschlie&szlig;en?\nLieferschein + Rechnung werden in einem Rutsch erstellt.');">
            &check; Lieferschein + Rechnung in einem Zug
          </button>
          <p class="text-[10px] mt-2" style="color: var(--card-text-muted);">
            Klassischer Workflow (LS einzeln &rarr; Rechnung einzeln) unten weiterhin verf&uuml;gbar.
          </p>
        </form>
      </div>
    </div>
    {% endif %}

    <div class="card">
      <div class="card-header"><div><h2>Lieferscheine</h2></div></div>
      <div class="p-5 space-y-2 text-sm">
        {% if has_open_qty and order.status not in ('cancelled',) %}
          <a class="btn btn-sm btn-primary w-full" href="/sales-orders/{{ order.id }}/ship">+ Lieferschein erstellen</a>
        {% else %}
          <p class="text-[11px] text-neutral-500">Alle Positionen sind ausgeliefert.</p>
        {% endif %}
        {% if delivery_notes %}
          <div class="pt-2 mt-2 space-y-1 border-t" style="border-color: var(--card-border-2);">
            {% for d in delivery_notes %}
              <a href="/delivery-notes/{{ d.id }}" class="flex items-center justify-between text-xs hover:bg-neutral-50 rounded px-2 py-1">
                <span class="nums font-semibold">{{ d.dn_no }}</span>
                <span class="badge badge-{{ DN_STATUS_COLOR.get(d.status, 'neutral') }}" style="font-size:9px; padding:1px 6px;">{{ DN_STATUS_LABELS.get(d.status, d.status) }}</span>
              </a>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Rechnungen</h2></div></div>
      <div class="p-5 space-y-2 text-sm">
        {% if has_invoiceable_qty and order.status not in ('cancelled',) %}
          <a class="btn btn-sm btn-primary w-full" href="/sales-orders/{{ order.id }}/invoice">+ Rechnung erstellen</a>
        {% else %}
          <p class="text-[11px] text-neutral-500">{% if not delivery_notes %}Erst Lieferschein erzeugen, dann Rechnung.{% else %}Alle gelieferten Mengen sind abgerechnet.{% endif %}</p>
        {% endif %}
        {# Anzahlungen — nur sichtbar solange Auftrag offen #}
        {% if order.status not in ('cancelled', 'paid') %}
        <details class="text-xs" style="margin-top: 8px;">
          <summary style="cursor:pointer;color:#fbbf24;font-weight:600;padding:4px 0;">+ Anzahlung erstellen</summary>
          <form method="post" action="/sales-orders/{{ order.id }}/down-payment-invoice"
                class="mt-2 space-y-2">
            <div class="flex gap-2 items-end">
              <div style="flex:1;">
                <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">% vom Total</label>
                <input class="input mt-1 w-full nums" type="text" name="percent"
                       placeholder="z.B. 30" inputmode="decimal">
              </div>
              <span class="text-xs" style="color: var(--card-text-muted);padding-bottom:8px;">oder</span>
              <div style="flex:1;">
                <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Netto-Betrag</label>
                <input class="input mt-1 w-full nums" type="text" name="amount_net"
                       placeholder="z.B. 5000" inputmode="decimal">
              </div>
            </div>
            <button class="btn btn-sm btn-primary w-full" type="submit"
                    style="background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);">
              Anzahlungs-Rechnung erstellen
            </button>
          </form>
        </details>
        {% endif %}
        {# Schlussrechnung — angeboten wenn schon Anzahlungen existieren UND noch Restmenge offen #}
        {% set has_partial = invoices|selectattr('kind', 'equalto', 'partial')|list %}
        {% if has_partial and has_invoiceable_qty %}
        <a class="btn btn-sm btn-secondary w-full" style="border-color:#10b981;color:#6ee7b7;"
           href="/sales-orders/{{ order.id }}/invoice?kind=final">
          Schlussrechnung erstellen
        </a>
        {% endif %}
        {% if invoices %}
          <div class="pt-2 mt-2 space-y-1 border-t" style="border-color: var(--card-border-2);">
            {% for inv in invoices %}
              <a href="/invoices/{{ inv.id }}" class="flex items-center justify-between text-xs hover:bg-neutral-50 rounded px-2 py-1">
                <span class="nums font-semibold">{{ inv.invoice_no }}{% if inv.kind == 'storno' %} <span class="text-red-600">STORNO</span>{% endif %}</span>
                <span class="badge badge-{{ INV_STATUS_COLOR.get(inv.status, 'neutral') }}" style="font-size:9px; padding:1px 6px;">{{ INV_STATUS_LABELS.get(inv.status, inv.status) }}</span>
              </a>
            {% endfor %}
          </div>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<script>
(function () {
  const card = document.getElementById('positions-card');
  if (!card) return;
  let drawings = [];
  try { drawings = JSON.parse(card.dataset.drawings || '[]'); } catch(e) {}

  card.addEventListener('contextmenu', function (e) {
    if (e.target.closest('input, textarea, select, button')) return;
    e.preventDefault();
    e.stopPropagation();
    if (!drawings.length) {
      alert('Für diesen Auftrag wurde noch keine Zeichnung hochgeladen.\n\nLade eine PDF/JPG/PNG in der Karte „Zeichnungen & Anhänge" hoch.');
      return;
    }
    if (drawings.length === 1) {
      window.open(drawings[0].path, '_blank');
      return;
    }
    const choice = prompt(
      'Mehrere Zeichnungen verfügbar — Nummer eingeben:\n\n' +
      drawings.map((d, i) => `${i + 1}. ${d.name}`).join('\n'),
      '1'
    );
    if (choice && /^\d+$/.test(choice)) {
      const idx = parseInt(choice) - 1;
      if (idx >= 0 && idx < drawings.length) {
        window.open(drawings[idx].path, '_blank');
      }
    }
  }, true);
})();
</script>

{% if audit_entries %}
<details class="card" style="margin-top: 14px;">
  <summary style="cursor:pointer; padding: 12px 18px; list-style:none; display:flex; align-items:center; justify-content:space-between;">
    <span><strong>Audit-Log</strong>
          <span class="text-xs text-neutral-500 ml-2">({{ audit_entries|length }} Einträge)</span></span>
    <span class="text-xs text-neutral-500">▾ Aufklappen</span>
  </summary>
  <div class="px-5 pb-4">
    <table class="data-table">
      <thead>
        <tr>
          <th class="num" style="width:140px">Zeit</th>
          <th>Aktion</th>
          <th>Benutzer</th>
          <th>Detail</th>
        </tr>
      </thead>
      <tbody>
        {% for a in audit_entries %}
        <tr>
          <td class="text-xs nums" data-ts="{{ a.created_at }}">{{ a.created_at }}</td>
          <td class="text-xs">{{ a.action }}</td>
          <td class="text-xs">{{ a.user_name or '—' }}</td>
          <td class="text-xs text-neutral-600" style="max-width: 480px; overflow: hidden; text-overflow: ellipsis;">
            {{ a.details or '—' }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</details>
{% endif %}

{# Pro-Stück-Seriennummern für Lines mit item.tracks_serials = 1 #}
{% for ln in lines %}
  {% if ln.item_tracks_serials %}
  <div class="serial-tracker"
       data-line-id="{{ ln.id }}"
       data-item-ident="{{ ln.item_ident or ln.description }}"
       data-qty-ordered="{{ ln.qty_ordered }}"
       data-tracks-serials="1"></div>
  {% endif %}
{% endfor %}

{# v1.12.2: Drag&Drop für Zeichnungen — alle Geräte im WLAN sehen sofort #}
{% with attach_entity_type='sales_order', attach_entity_id=order.id, attach_title='Zeichnungen & Dokumente' %}
  {% include '_attachments_dropzone.html' %}
{% endwith %}

<div class="entity-tasks" data-entity-type="sales_order" data-entity-id="{{ order.id }}"></div>
<div class="entity-comments" data-entity-type="sales_order" data-entity-id="{{ order.id }}"></div>

{% endblock %}