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

{% block title %}Aufträge{% endblock %}
{% block heading %}Aufträge{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/sales-orders">Alle</a>
    <a class="tab {% if status_filter=='confirmed' %}is-active{% endif %}" href="/sales-orders?status=confirmed">Bestätigt</a>
    <a class="tab {% if status_filter=='in_production' %}is-active{% endif %}" href="/sales-orders?status=in_production">In Produktion</a>
    <a class="tab {% if status_filter=='ready_to_ship' %}is-active{% endif %}" href="/sales-orders?status=ready_to_ship">Versandbereit</a>
    <a class="tab {% if status_filter=='shipped' %}is-active{% endif %}" href="/sales-orders?status=shipped">Versendet</a>
    <a class="tab {% if status_filter=='invoiced' %}is-active{% endif %}" href="/sales-orders?status=invoiced">Abgerechnet</a>
    <a class="tab {% if status_filter=='paid' %}is-active{% endif %}" href="/sales-orders?status=paid">Bezahlt</a>
  </div>
  <a class="btn btn-primary" href="/sales-orders/new">+ Neuer Auftrag</a>
{% endblock %}

{% block content %}
<div id="recent-items" data-page-type="sales_order"></div>

{% if orders %}
<div id="bulk-bar" class="card" style="display:none;background:rgba(232,93,47,0.08);border-color:rgba(232,93,47,0.30);margin-bottom:8px;">
  <div class="px-4 py-3 flex items-center gap-3">
    <span class="text-sm font-semibold"><span id="bulk-count">0</span> Aufträge ausgewählt</span>
    <span class="text-neutral-400">·</span>
    <span class="text-sm">Status:</span>
    <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="confirmed">Bestätigt</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="in_production">In Produktion</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="ready_to_ship">Versandbereit</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="shipped">Versendet</button>
    <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="cancelled" style="margin-left:auto;color:#b91c1c;">Stornieren</button>
    <button type="button" id="bulk-clear" class="btn btn-sm btn-secondary">Leeren</button>
  </div>
</div>
{% endif %}

{% if orders %}
<div class="card">
  <table class="data-table">
    <thead>
      <tr>
        <th style="width:30px"><input type="checkbox" id="bulk-toggle-all" title="Alle auswählen"></th>
        <th>Auftrags-Nr.</th>
        <th>Datum</th>
        <th>Kunde</th>
        <th>Land</th>
        <th>Referenz</th>
        <th class="num">Liefertermin</th>
        <th class="num">Pos.</th>
        <th class="num">Netto</th>
        <th class="num">Brutto</th>
        <th>Status</th>
        <th style="min-width:180px;">Produktion</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for o in orders %}
      {# v1.12.1: Fallback auf aktuellen Kundennamen falls Snapshot leer #}
      {% set cust_name = o.customer_name_snapshot or o.customer_current_name or '—' %}
      {% set cust_is_biz = o.is_business_snapshot if o.is_business_snapshot is not none else o.customer_current_is_business %}
      {% set cust_iso = o.customer_country_iso_snapshot or o.customer_country_iso or '—' %}
      {# v1.12.1: Produktions-Fortschritt #}
      {% set p_total = o.prod_steps_total or 0 %}
      {% set p_done = o.prod_steps_done or 0 %}
      {% set p_pct = (100 * p_done / p_total)|round(0, 'floor')|int if p_total else 0 %}
      <tr class="cursor-pointer" data-order-id="{{ o.id }}" data-status="{{ o.status }}" onclick="location='/sales-orders/{{ o.id }}'" title="Rechtsklick: Vorschau mit Zeichnung + Pipeline">
        <td onclick="event.stopPropagation()" style="text-align:center;">
          <input type="checkbox" class="bulk-cb" data-id="{{ o.id }}">
        </td>
        <td class="nums font-semibold">{{ o.order_no }}</td>
        <td class="text-xs nums text-neutral-600">{{ o.order_date }}</td>
        <td class="font-medium">
          {{ cust_name }}
          {% if cust_is_biz == 0 %}<span class="badge badge-neutral ml-1">B2C</span>{% endif %}
        </td>
        <td class="text-xs nums">{{ cust_iso }}</td>
        <td class="text-xs nums text-neutral-600">{{ o.customer_reference or '—' }}</td>
        <td class="num text-xs nums">{{ o.due_date or '—' }}</td>
        <td class="num nums">{{ o.line_count }}</td>
        <td class="num nums">{{ money(o.subtotal_net) }}</td>
        <td class="num nums font-semibold">{{ money(o.total_gross) }} {{ o.currency }}</td>
        <td onclick="event.stopPropagation()">
          {% set color = STATUS_COLOR.get(o.status, 'neutral') %}
          <span class="badge badge-{{ color }} status-edit"
                data-kind="sales_order" data-id="{{ o.id }}" data-current="{{ o.status }}"
                title="Klicken zum Ändern" style="cursor: pointer;">{{ STATUS_LABELS.get(o.status, o.status) }} ▾</span>
        </td>
        <td onclick="event.stopPropagation()">
          {% if p_total == 0 %}
            <span class="text-xs" style="color: var(--card-text-muted);">— kein Plan</span>
          {% else %}
            <div style="display:flex; align-items:center; gap:8px;">
              <div style="flex:1; background: var(--card-border); border-radius: 6px; height: 8px; overflow:hidden; min-width:80px;">
                <div style="background: {% if p_pct >= 100 %}#4ade80{% elif o.prod_current_step %}var(--brand-orange){% else %}var(--brand-blue-light){% endif %};
                            height:100%; width: {{ p_pct }}%; transition: width 300ms;"></div>
              </div>
              <span class="text-xs nums" style="color: var(--card-text-muted); min-width:38px;">{{ p_done }}/{{ p_total }}</span>
            </div>
            <div class="text-xs" style="color: var(--card-text-muted); margin-top:2px;">
              {% if p_pct >= 100 %}
                <span style="color:#4ade80;">✓ Fertig</span>
              {% elif o.prod_current_step %}
                <span style="color: var(--brand-orange);">▶ {{ o.prod_current_step }}</span>
              {% elif o.prod_next_step %}
                → {{ o.prod_next_step }}
              {% else %}
                wartet
              {% endif %}
            </div>
          {% endif %}
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/sales-orders/{{ o.id }}">Öffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  {% from "_macros.html" import empty_state %}
  {% if status_filter %}
    {{ empty_state(
      icon='🔍',
      title='Keine Aufträge mit Status „' ~ STATUS_LABELS.get(status_filter, status_filter) ~ '"',
      description='Mit dem aktuellen Filter sind keine Aufträge sichtbar.',
      ctas=[
        {'label': 'Filter zurücksetzen', 'href': '/sales-orders', 'primary': True},
        {'label': '+ Neuer Auftrag',     'href': '/sales-orders/new'},
      ],
    ) }}
  {% else %}
    {{ empty_state(
      icon='📋',
      title='Noch keine Aufträge',
      description='Aus einem angenommenen Angebot wird ein Auftrag — verbindlich, mit Liefertermin und Arbeitsplan. Dann freigabe an die Werkstatt → Jobs erscheinen im Aktions-Dashboard und Shopfloor.',
      workflow='📥 Anfrage → 💼 Angebot → 📋 Auftrag → 🏭 Werkstatt → 📦 Versand → 🧾 Rechnung',
      ctas=[
        {'label': '+ Auftrag manuell anlegen', 'href': '/sales-orders/new', 'primary': True},
        {'label': 'Aus Angebot wandeln',       'href': '/quotes'},
        {'label': '📚 Handbuch (DE)',           'href': '/handbuch/de/pdf', 'external': True},
      ],
    ) }}
  {% endif %}
{% endif %}

{% if orders %}
<script>
(function () {
  const bar    = document.getElementById('bulk-bar');
  const count  = document.getElementById('bulk-count');
  const toggle = document.getElementById('bulk-toggle-all');
  const cbs    = () => document.querySelectorAll('.bulk-cb');
  const checked = () => [...cbs()].filter(cb => cb.checked);

  function update() {
    const n = checked().length;
    count.textContent = n;
    bar.style.display = n ? '' : 'none';
    if (toggle) toggle.indeterminate = n > 0 && n < cbs().length;
  }

  if (toggle) toggle.addEventListener('change', () => {
    cbs().forEach(cb => cb.checked = toggle.checked);
    update();
  });
  document.addEventListener('change', e => {
    if (e.target.classList && e.target.classList.contains('bulk-cb')) update();
  });
  document.getElementById('bulk-clear')?.addEventListener('click', () => {
    cbs().forEach(cb => cb.checked = false);
    if (toggle) toggle.checked = false;
    update();
  });

  function getCookie(n) {
    return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || '';
  }
  function postBulk(status) {
    const ids = checked().map(cb => parseInt(cb.dataset.id, 10));
    if (!ids.length) return;
    const csrf = getCookie('csrf_token');
    fetch('/api/sales-orders/bulk-status', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
      body: JSON.stringify({ ids, status, csrf_token: csrf }),
    })
    .then(r => r.json())
    .then(d => {
      if (window.toast) toast(d.updated + ' Auftrag(e) aktualisiert', 'success', { ttl: 2000 });
      setTimeout(() => location.reload(), 600);
    })
    .catch(() => { if (window.toast) toast('Fehler beim Bulk-Update', 'error'); });
  }
  document.querySelectorAll('[data-bulk-status]').forEach(btn => {
    btn.addEventListener('click', () => {
      const s = btn.dataset.bulkStatus;
      if (s === 'cancelled' && !confirm(checked().length + ' Aufträge wirklich stornieren?')) return;
      postBulk(s);
    });
  });
  update();
})();
</script>
{% endif %}
{% endblock %}