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

{% block title %}Angebote{% endblock %}
{% block heading %}Angebote{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not status_filter %}is-active{% endif %}" href="/quotes">Alle</a>
    {% for code, label in STATUS_LABELS.items() %}
      <a class="tab {% if status_filter==code %}is-active{% endif %}" href="/quotes?status={{ code }}">{{ label }}</a>
    {% endfor %}
  </div>
  <a class="btn btn-primary" href="/quotes/new">+ Neues Angebot</a>
{% endblock %}

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

{% if quotes %}
<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 flex-wrap">
    <span class="text-sm font-semibold"><span id="bulk-count">0</span> Angebote ausgewählt</span>
    <span class="text-neutral-400">·</span>
    <span class="text-sm">Status:</span>
    {% for code, label in STATUS_LABELS.items() %}
      <button type="button" class="btn btn-sm btn-secondary" data-bulk-status="{{ code }}">{{ label }}</button>
    {% endfor %}
    <button type="button" id="bulk-clear" class="btn btn-sm btn-secondary" style="margin-left:auto;">Leeren</button>
  </div>
</div>
{% endif %}

{% if quotes %}
<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>Angebots-Nr</th>
        <th>Datum</th>
        <th>Kunde</th>
        <th>Land</th>
        <th class="num">Gültig bis</th>
        <th class="num">Pos.</th>
        <th class="num">Brutto</th>
        <th>Status</th>
        <th>Konvertiert</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for q in quotes %}
      <tr class="cursor-pointer" data-status="{{ q.status }}" onclick="location='/quotes/{{ q.id }}'">
        <td onclick="event.stopPropagation()" style="text-align:center;">
          <input type="checkbox" class="bulk-cb" data-id="{{ q.id }}">
        </td>
        <td class="nums font-semibold">{{ q.quote_no }}</td>
        <td class="text-xs nums text-neutral-600">{{ q.quote_date }}</td>
        <td class="font-medium">{{ q.customer_name_snapshot }}</td>
        <td class="text-xs nums">{{ q.customer_country_iso_snapshot or '—' }}</td>
        <td class="num text-xs nums">{{ q.valid_until or '—' }}</td>
        <td class="num nums">{{ q.line_count }}</td>
        <td class="num nums font-semibold">{{ money(q.total_gross) }} {{ q.currency }}</td>
        <td>
          <span class="badge badge-{{ STATUS_COLOR.get(q.status, 'neutral') }}">{{ STATUS_LABELS.get(q.status, q.status) }}</span>
        </td>
        <td class="text-xs nums text-neutral-600">
          {% if q.converted_sales_order_id %}<span class="text-emerald-700">→ #{{ q.converted_sales_order_id }}</span>{% else %}—{% endif %}
        </td>
        <td class="text-right" onclick="event.stopPropagation()">
          <a class="btn btn-sm btn-secondary" href="/quotes/{{ q.id }}">Öffnen</a>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
  {% from "_macros.html" import empty_state %}
  {% if status_filter %}
    {{ empty_state(
      icon='🔍',
      title='Keine Angebote mit Status „' ~ STATUS_LABELS.get(status_filter, status_filter) ~ '"',
      description='Mit dem aktuellen Filter sind keine Angebote sichtbar.',
      ctas=[
        {'label': 'Filter zurücksetzen', 'href': '/quotes', 'primary': True},
        {'label': '+ Neues Angebot',     'href': '/quotes/new'},
      ],
    ) }}
  {% else %}
    {{ empty_state(
      icon='💼',
      title='Noch keine Angebote',
      description='Aus einer Anfrage erstellst du ein Angebot — mit Positionen, Preisen, Lieferzeit und Konditionen. Per PDF an den Kunden senden, bei Annahme: in einen Auftrag wandeln.',
      workflow='📥 Anfrage → 💼 Angebot → 📋 Auftrag → 🏭 Werkstatt → 📦 Versand → 🧾 Rechnung',
      ctas=[
        {'label': '+ Erstes Angebot anlegen',   'href': '/quotes/new', 'primary': True},
        {'label': 'Aus Anfrage erstellen',      'href': '/inquiries'},
        {'label': '📚 Handbuch (DE)',            'href': '/handbuch/de/pdf', 'external': True},
      ],
    ) }}
  {% endif %}
{% endif %}

{% if quotes %}
<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/quotes/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 + ' Angebot(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', () => postBulk(btn.dataset.bulkStatus));
  });
  update();
})();
</script>
{% endif %}
{% endblock %}