{% extends "portal_base.html" %}
{% set active = 'orders' %}
{% block title %}{{ order.order_no }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/portal/{{ token }}/orders" class="hover:underline">Aufträge</a> / {{ order.order_no }}</p>{% endblock %}
{% block heading %}{{ order.order_no }}{% endblock %}
{% block topbar_actions %}
  {% set sc = 'amber' %}
  {% if order.status in ['delivered','completed'] %}{% set sc = 'emerald' %}{% endif %}
  {% if order.status == 'cancelled' %}{% set sc = 'red' %}{% endif %}
  {% if order.status in ['in_production','released'] %}{% set sc = 'blue' %}{% endif %}
  <span class="badge badge-{{ sc }}" style="font-size:0.75rem;padding:0.25rem 0.625rem;">{{ order.status }}</span>
{% endblock %}

{% block content %}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
  <!-- Stammdaten -->
  <div class="card md:col-span-2">
    <div class="card-header"><div><h2>Auftrags-Daten</h2></div></div>
    <div class="px-5 py-4 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">Auftragsdatum</p>
        <p class="nums">{{ order.order_date }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Liefertermin</p>
        <p class="nums">{{ order.due_date or '—' }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Ihre Bestell-Nr</p>
        <p>{{ order.customer_reference or '—' }}</p>
      </div>
      <div>
        <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold">Währung</p>
        <p>{{ order.currency or 'EUR' }}</p>
      </div>
    </div>
  </div>

  <!-- Summe-Karte -->
  <div class="card">
    <div class="card-header"><div><h2>Summe</h2></div></div>
    <div class="px-5 py-4 text-sm space-y-2">
      <div class="flex justify-between text-neutral-500">
        <span>Netto:</span>
        <span class="nums">{{ "{:,.2f}".format(order.subtotal_net or 0).replace(",","X").replace(".",",").replace("X",".") }} {{ order.currency or 'EUR' }}</span>
      </div>
      {% if order.vat_amount %}
      <div class="flex justify-between text-neutral-500">
        <span>USt:</span>
        <span class="nums">{{ "{:,.2f}".format(order.vat_amount or 0).replace(",","X").replace(".",",").replace("X",".") }} {{ order.currency or 'EUR' }}</span>
      </div>
      {% endif %}
      <div class="flex justify-between text-lg font-bold pt-2 border-t" style="border-color:var(--card-border-2);">
        <span>Brutto:</span>
        <span class="nums">{{ "{:,.2f}".format(order.total_gross or 0).replace(",","X").replace(".",",").replace("X",".") }} {{ order.currency or 'EUR' }}</span>
      </div>
    </div>
  </div>
</div>

<!-- Positionen -->
<div class="card mt-4">
  <div class="card-header">
    <div>
      <h2>Positionen</h2>
      <p class="sub">{{ lines|length }} Position{% if lines|length != 1 %}en{% endif %}</p>
    </div>
  </div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Pos.</th>
        <th>Beschreibung</th>
        <th class="num">Menge</th>
        <th>Einh.</th>
        <th class="num">Einzelpreis</th>
        <th class="num">Netto</th>
      </tr>
    </thead>
    <tbody>
      {% for ln in lines %}
      <tr>
        <td class="nums text-neutral-500">{{ ln.line_no }}</td>
        <td>
          {{ ln.description }}
          {% if ln.item_ident %}<div class="text-[11px] text-neutral-500 nums">{{ ln.item_ident }}</div>{% endif %}
        </td>
        <td class="num nums">{{ ln.qty_ordered }}</td>
        <td class="text-xs">{{ ln.unit }}</td>
        <td class="num nums">{{ "{:,.2f}".format(ln.unit_price or 0).replace(",","X").replace(".",",").replace("X",".") }}</td>
        <td class="num nums font-semibold">{{ "{:,.2f}".format(ln.line_total_net or 0).replace(",","X").replace(".",",").replace("X",".") }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{# v1.12.2: Dokumente/Zeichnungen — Liste + Upload für Nachreichen #}
<div class="card mt-4">
  <div class="card-header"><div>
    <h2>Dokumente &amp; Zeichnungen</h2>
    <p class="sub">Hier sehen Sie alle Anhänge zu Ihrem Auftrag — Sie können auch neue Versionen nachreichen</p>
  </div></div>
  <div class="p-5">
    <div id="portal-att-list"></div>
    {% if order.status not in ['delivered','completed','cancelled'] %}
    <div id="portal-att-dz" style="margin-top: 14px; border: 2px dashed var(--card-border);
                                    border-radius: 8px; padding: 18px; text-align: center;
                                    cursor: pointer; background: rgba(255,255,255,0.02);">
      <div style="font-size: 28px; opacity: 0.6;">📎</div>
      <div style="margin-top: 4px;"><b>Datei hierher ziehen</b> oder klicken zum Auswählen</div>
      <div style="font-size: 12px; color: var(--card-text-muted); margin-top: 4px;">
        Neue Versionen werden automatisch erkannt
      </div>
      <input id="portal-att-fi" type="file" multiple style="display: none;">
    </div>
    {% endif %}
  </div>
</div>

<script>
(function () {
  const ORDER_ID = {{ order.id }};
  const list = document.getElementById('portal-att-list');
  const dz = document.getElementById('portal-att-dz');
  const fi = document.getElementById('portal-att-fi');
  function loadList() {
    fetch('/api/attachments/sales_order/' + ORDER_ID)
      .then(r => r.json()).then(d => {
        if (!d.ok || !d.attachments.length) {
          list.innerHTML = '<p style="color: var(--card-text-muted); font-size: 13px;">Noch keine Dokumente vorhanden.</p>';
          return;
        }
        list.innerHTML = '<div style="display: grid; gap: 8px;">' + d.attachments.map(a => {
          const sizeKb = Math.round((a.size_bytes || 0) / 1024);
          const ext = (a.filename.split('.').pop() || '').toLowerCase();
          const ico = ['pdf'].includes(ext) ? '📄' : (['dxf','dwg','step','stp','iges','stl'].includes(ext) ? '📐' : (['png','jpg','jpeg'].includes(ext) ? '🖼' : '📎'));
          return `<div style="display:flex; align-items:center; gap:10px; padding:10px; background: var(--card-bg-2); border-radius: 6px;">
            <span style="font-size:22px;">${ico}</span>
            <div style="flex:1; min-width:0;"><b>${a.filename}</b>${(a.revision||1)>1?` <span style="background:rgba(74,222,128,0.2);color:#4ade80;padding:1px 6px;border-radius:4px;font-size:10px;margin-left:4px;">Rev. ${a.revision}</span>`:''}<div style="font-size:11px;color:var(--card-text-muted);">${sizeKb} KB · ${(a.created_at||'').slice(0,16)}</div></div>
            <a href="${a.web_path}" target="_blank" class="btn btn-sm btn-secondary">↓ Download</a>
          </div>`;
        }).join('') + '</div>';
      });
  }
  if (dz && fi) {
    dz.addEventListener('click', () => fi.click());
    fi.addEventListener('change', () => upload(fi.files));
    dz.addEventListener('dragover', e => { e.preventDefault(); dz.style.borderColor='#f2581b'; dz.style.background='rgba(242,88,27,0.08)'; });
    dz.addEventListener('dragleave', () => { dz.style.borderColor=''; dz.style.background='rgba(255,255,255,0.02)'; });
    dz.addEventListener('drop', e => { e.preventDefault(); dz.style.borderColor=''; dz.style.background='rgba(255,255,255,0.02)'; upload(e.dataTransfer.files); });
    function upload(files) {
      if (!files || !files.length) return;
      const fd = new FormData();
      fd.append('entity_type', 'sales_order');
      fd.append('entity_id', String(ORDER_ID));
      for (const f of files) fd.append('files', f);
      fetch('/api/attachments/upload', { method: 'POST', body: fd })
        .then(r => r.json()).then(d => {
          if (d.ok) {
            alert(d.count + ' Datei(en) hochgeladen' + (d.created.some(c=>c.is_new_version) ? ' (neue Version)' : ''));
            loadList();
          } else alert('Fehler: ' + (d.error || 'unbekannt'));
        });
    }
  }
  loadList();
})();
</script>

{% if order.status not in ['delivered','completed','cancelled'] %}
<div class="card mt-4" style="border-left:4px solid #f59e0b;">
  <div class="px-5 py-4 flex items-center justify-between flex-wrap gap-3">
    <div>
      <h3 class="font-semibold text-base">Fragen zum Auftrag?</h3>
      <p class="text-sm text-neutral-600">Schreiben Sie uns über die Anfrage-Funktion — wir antworten innerhalb von 1-2 Werktagen.</p>
    </div>
    <a href="/portal/{{ token }}/inquiry/new?ref={{ order.order_no }}" class="btn btn-primary">+ Anfrage zu diesem Auftrag</a>
  </div>
</div>
{% endif %}
{% endblock %}