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

{% block title %}{{ quote.quote_no }}{% endblock %}
{% block body_data %}data-page-type="quote" data-page-id="{{ quote.id }}" data-page-label="{{ quote.quote_no }}" data-page-sub="{{ quote.customer_name_snapshot }}"{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/quotes" class="hover:underline">Angebote</a> / {{ quote.quote_no }}</p>{% endblock %}
{% block heading %}{{ quote.quote_no }} <span class="text-neutral-400 font-normal text-base ml-2">· {{ quote.customer_name_snapshot }}</span>{% endblock %}

{% block topbar_actions %}
  <span class="badge badge-{{ STATUS_COLOR.get(quote.status, 'neutral') }}" style="font-size:0.75rem; padding:0.25rem 0.625rem;">{{ STATUS_LABELS.get(quote.status, quote.status) }}</span>
  {{ pdf_lang_picker('quotes', quote.id, quote.lang or 'de') }}
  <a class="btn btn-sm btn-secondary" href="/quotes/{{ quote.id }}/pdf" target="_blank">Angebot PDF</a>
  <form method="post" action="/quotes/{{ quote.id }}/duplicate" class="inline" style="display:inline;">
    <button class="btn btn-sm btn-secondary" type="submit" title="Angebot duplizieren">Duplizieren</button>
  </form>
  <a class="btn btn-sm btn-primary" href="/quotes/{{ quote.id }}/send">Per Mail senden</a>
  {% if quote.status in ('draft', 'sent') and not quote.converted_sales_order_id %}
    <form method="post" action="/quotes/{{ quote.id }}/convert" class="inline" onsubmit="return confirm('Angebot in einen Auftrag umwandeln?');">
      <button class="btn btn-sm btn-primary" type="submit">→ In Auftrag wandeln</button>
    </form>
  {% elif quote.converted_sales_order_id %}
    <a class="btn btn-sm btn-primary" href="/sales-orders/{{ quote.converted_sales_order_id }}">Auftrag {{ quote.converted_order_no or '' }} öffnen</a>
  {% endif %}
{% endblock %}

{% block content %}
{% include "_workflow_stepper.html" %}
<div class="grid grid-cols-3 gap-4">

  <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">{{ quote.customer_name_snapshot }}</p>
          <p class="text-xs text-neutral-600 nums">
            {{ quote.customer_country_iso_snapshot or '—' }}
            {% if quote.customer_vat_id_snapshot %}· {{ quote.customer_vat_id_snapshot }}{% endif %}
            {% if not quote.is_business_snapshot %}· B2C{% endif %}
          </p>
        </div>
        <div>
          <p class="text-[10px] uppercase tracking-wider text-neutral-500 font-semibold mb-1">Belegdaten</p>
          <p class="text-xs nums">Datum: <span class="font-semibold">{{ quote.quote_date }}</span></p>
          <p class="text-xs nums">Gültig bis: <span class="font-semibold">{{ quote.valid_until or '—' }}</span></p>
          {% if quote.customer_reference %}<p class="text-xs">Ihre Anfrage-Nr.: <span class="nums">{{ quote.customer_reference }}</span></p>{% endif %}
          {% if quote.source_inquiry_no %}<p class="text-xs"><a href="#" class="text-blue-700">aus Anfrage {{ quote.source_inquiry_no }}</a></p>{% endif %}
        </div>
        {% if quote.notes %}
        <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">Notiz / Konditionen</p>
          <p class="text-xs whitespace-pre-line">{{ quote.notes }}</p>
        </div>
        {% endif %}
      </div>
    </div>

    <div class="card">
      <div class="card-header"><div><h2>Positionen</h2><p class="sub">{{ lines|length }} {% if lines|length == 1 %}Position{% else %}Positionen{% endif %}</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">Lieferzeit</th>
            <th class="num">USt</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>
              <div>{{ ln.description }}</div>
              {% if ln.item_ident %}
              <div class="text-[11px] text-neutral-500 nums" style="display:flex; align-items:center; gap:8px;">
                {{ ln.item_ident }}
                <button type="button" class="breakdown-btn"
                        data-item-id="{{ ln.item_id }}" data-qty="{{ ln.qty|int or 1 }}"
                        data-line-no="{{ ln.line_no }}"
                        style="background:none; border:1px solid #2b5ce6; color:#2b5ce6;
                               padding: 1px 6px; border-radius: 4px; font-size: 10px;
                               cursor: pointer;">
                  Stückliste &amp; Selbstkosten anzeigen
                </button>
              </div>
              {% endif %}
            </td>
            <td class="num nums">{{ "%.0f"|format(ln.qty) if ln.qty == ln.qty|int else "%.2f"|format(ln.qty) }}</td>
            <td class="text-xs">{{ ln.unit }}</td>
            <td class="num nums">{{ money(ln.unit_price) }}</td>
            <td class="num nums">{{ "%.0f"|format(ln.discount_pct) if ln.discount_pct else '—' }}{% if ln.discount_pct %} %{% endif %}</td>
            <td class="num text-xs">{% if ln.lead_time_days %}{{ ln.lead_time_days }} T{% else %}—{% 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>
          </tr>
          {# Lazy-loaded breakdown row — wird via JS gefüllt #}
          {% if ln.item_id %}
          <tr id="breakdown-row-{{ ln.line_no }}" style="display:none;">
            <td colspan="9" style="background: #f9fafb; padding: 8px 16px;">
              <div id="breakdown-content-{{ ln.line_no }}"
                   style="font-family: ui-monospace, monospace; font-size: 12px;">
                <em>… lade</em>
              </div>
            </td>
          </tr>
          {% endif %}
          {% endfor %}
        </tbody>
        <tfoot>
          <tr><td colspan="8" class="num text-xs text-neutral-500">Zwischensumme netto</td>
              <td class="num nums font-semibold">{{ money(quote.subtotal_net) }}</td></tr>
          {% if quote.vat_amount %}
          <tr><td colspan="8" class="num text-xs text-neutral-500">USt</td>
              <td class="num nums">{{ money(quote.vat_amount) }}</td></tr>
          {% endif %}
          <tr style="background: var(--card-bg-2);">
            <td colspan="8" class="num text-sm font-semibold">Gesamtbetrag</td>
            <td class="num nums font-bold" style="font-size:1rem;">{{ money(quote.total_gross) }} {{ quote.currency }}</td>
          </tr>
        </tfoot>
      </table>
    </div>

    {# ============== PDF-VORSCHAU ============== #}
    <div class="card">
      <div class="card-header flex items-center justify-between">
        <div>
          <h2>PDF-Vorschau</h2>
          <p class="sub">Live-Rendering aus den Belegdaten — wird mit jedem Status-Wechsel aktualisiert</p>
        </div>
        <div class="flex gap-2">
          <a href="/quotes/{{ quote.id }}/pdf" target="_blank" class="btn btn-sm btn-secondary">In neuem Tab öffnen</a>
          <a href="/quotes/{{ quote.id }}/pdf" download="Angebot_{{ quote.quote_no }}.pdf" class="btn btn-sm btn-primary">Download</a>
        </div>
      </div>
      <div class="p-3" style="background: rgba(0,0,0,0.20);">
        <iframe src="/quotes/{{ quote.id }}/pdf#toolbar=0&navpanes=0"
                style="width:100%; height:900px; border:1px solid var(--card-border-2); border-radius:6px; background:white;"
                title="Angebots-PDF Vorschau"></iframe>
      </div>
    </div>
  </div>

  <div class="space-y-4">
    <div class="card">
      <div class="card-header"><div><h2>Status</h2></div></div>
      <div class="p-5 space-y-3 text-sm">
        <p><span class="badge badge-{{ STATUS_COLOR.get(quote.status, 'neutral') }}">{{ STATUS_LABELS.get(quote.status, quote.status) }}</span></p>
        {% if not quote.converted_sales_order_id %}
        <form method="post" action="/quotes/{{ quote.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 == quote.status %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
          <button class="btn btn-sm btn-primary" type="submit">Setzen</button>
        </form>
        {% endif %}
        <div class="text-[11px] text-neutral-500 pt-2 border-t" style="border-color: var(--card-border-2);">
          Erstellt: <span class="nums">{{ quote.created_at[:16] }}</span><br>
          {% if quote.sent_at %}Versendet: <span class="nums">{{ quote.sent_at[:16] }}</span><br>{% endif %}
          {% if quote.accepted_at %}Angenommen: <span class="nums">{{ quote.accepted_at[:16] }}</span><br>{% endif %}
          {% if quote.rejected_at %}Abgelehnt: <span class="nums">{{ quote.rejected_at[:16] }}</span><br>{% endif %}
        </div>
      </div>
    </div>

    {% if quote.converted_sales_order_id %}
    <div class="card" style="background: rgba(16, 185, 129, 0.05); border-color: rgba(16, 185, 129, 0.20);">
      <div class="p-4 text-sm">
        <p class="text-[10px] uppercase tracking-wider font-semibold text-emerald-700">Konvertiert</p>
        <p class="font-semibold mt-1">→ Auftrag {{ quote.converted_order_no or '#'~quote.converted_sales_order_id }}</p>
        <a class="btn btn-sm btn-primary mt-2" href="/sales-orders/{{ quote.converted_sales_order_id }}">Auftrag öffnen</a>
      </div>
    </div>
    {% endif %}
  </div>
</div>

<script>
// Hierarchische Stücklisten-Aufschlüsselung mit Sub-Baugruppen
(function() {
  function fmt(n) {
    return (Number(n) || 0).toFixed(2).replace('.', ',') + ' €';
  }
  function renderBreakdown(b, depth) {
    depth = depth || 0;
    var indent = depth * 24;
    var html = '';
    html += '<div style="padding: 6px 0 6px ' + indent + 'px; border-left: 3px solid ' +
            (depth === 0 ? '#2b5ce6' : depth === 1 ? '#10b981' : '#f59e0b') +
            '; margin-left: ' + (depth * 8) + 'px;">';
    html += '<div style="font-weight: 700; color: #111;">' +
            '<span style="color: #2b5ce6;">' + (b.ident || '—') + '</span>' +
            ' · ' + (b.description || '') +
            ' · BOM v' + (b.bom_version || '?') +
            ' · qty=' + b.qty + '</div>';
    html += '<div style="margin: 4px 0; color: #444;">';
    if (b.material_cost > 0)  html += '<span style="margin-right: 12px;">Material: <b>' + fmt(b.material_cost) + '</b></span>';
    if (b.operation_cost > 0) html += '<span style="margin-right: 12px;">Operationen: <b>' + fmt(b.operation_cost) + '</b></span>';
    if (b.tool_cost > 0)      html += '<span style="margin-right: 12px;">Werkzeuge: <b>' + fmt(b.tool_cost) + '</b></span>';
    if (b.sub_cost > 0)       html += '<span style="margin-right: 12px;">Sub-Baugruppen: <b>' + fmt(b.sub_cost) + '</b></span>';
    html += '<span style="margin-right: 12px; color:#16a34a;">Gesamt: <b>' + fmt(b.total) + '</b></span>';
    html += '</div>';
    if (b.lines && b.lines.length) {
      html += '<details style="margin-top: 4px;"><summary style="cursor: pointer; color: #2b5ce6; font-size: 11px;">' +
              b.lines.length + ' Positionen anzeigen</summary>';
      html += '<table style="width: 100%; margin-top: 4px; font-size: 11px;">';
      b.lines.forEach(function(ln) {
        var label = ln.line_type === 'material' ? '[Material] ' + (ln.name || '—')
                  : ln.line_type === 'operation' ? '[Operation] ' + (ln.name || '—') + (ln.machine ? ' auf ' + ln.machine : '')
                  : ln.line_type === 'tool' ? '[Werkzeug] ' + (ln.name || '—')
                  : ln.line_type === 'sub_assembly' ? '[Sub-Baugruppe] ' + (ln.name || '—') + (ln.sub_unit_cost ? ' (' + fmt(ln.sub_unit_cost) + '/Stk)' : '')
                  : ln.line_type;
        var qtyLabel = ln.line_type === 'operation'
                       ? ((ln.setup_min || 0) + ' min Rüst + ' + (ln.cycle_min || 0) + ' min/Stk · ' + fmt(ln.rate || 0) + '/h')
                       : ((ln.qty || 0) + (ln.line_type === 'material' ? ' kg/Stk' : ' Stk'));
        html += '<tr>';
        html += '<td style="padding: 2px 4px; color:#555;">' + label + '</td>';
        html += '<td style="padding: 2px 4px; text-align: right; color: #777;">' + qtyLabel + '</td>';
        html += '<td style="padding: 2px 4px; text-align: right; font-weight: 600;">' + fmt(ln.cost || 0) + '</td>';
        html += '</tr>';
        // Rekursiv für Sub-Baugruppen
        if (ln.breakdown) {
          html += '<tr><td colspan="3" style="padding: 0;">';
          html += renderBreakdown(ln.breakdown, depth + 1);
          html += '</td></tr>';
        }
      });
      html += '</table></details>';
    }
    html += '</div>';
    return html;
  }

  document.querySelectorAll('.breakdown-btn').forEach(function(btn) {
    btn.addEventListener('click', async function() {
      var itemId = btn.dataset.itemId;
      var qty = btn.dataset.qty || 1;
      var lineNo = btn.dataset.lineNo;
      var row = document.getElementById('breakdown-row-' + lineNo);
      var content = document.getElementById('breakdown-content-' + lineNo);
      if (!row || !content) return;
      // Toggle
      if (row.style.display === 'table-row') {
        row.style.display = 'none';
        return;
      }
      row.style.display = 'table-row';
      content.innerHTML = '<em>… lade Stückliste</em>';
      try {
        var r = await fetch('/api/items/' + itemId + '/breakdown?qty=' + qty);
        var d = await r.json();
        if (d.ok && d.breakdown) {
          content.innerHTML = renderBreakdown(d.breakdown, 0);
        } else {
          content.innerHTML = '<span style="color: #b91c1c;">Keine Stückliste vorhanden — Item ist keine Baugruppe.</span>';
        }
      } catch (e) {
        content.innerHTML = '<span style="color: #b91c1c;">Fehler: ' + e.message + '</span>';
      }
    });
  });
})();
</script>

{# v1.12.2: Drag&Drop für Anhänge #}
{% with attach_entity_type='quote', attach_entity_id=quote.id, attach_title='Zeichnungen & Beilagen' %}
  {% include '_attachments_dropzone.html' %}
{% endwith %}
{% endblock %}