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

{% block title %}Lieferantenbewertung{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vendors" class="hover:underline">Lieferanten</a> / Scorecard</p>{% endblock %}
{% block heading %}Lieferantenbewertung — letzte {{ months }} Monate{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if months == 3 %}is-active{% endif %}" href="/vendors/scorecard?months=3">3M</a>
    <a class="tab {% if months == 6 %}is-active{% endif %}" href="/vendors/scorecard?months=6">6M</a>
    <a class="tab {% if months == 12 %}is-active{% endif %}" href="/vendors/scorecard?months=12">12M</a>
    <a class="tab {% if months == 24 %}is-active{% endif %}" href="/vendors/scorecard?months=24">24M</a>
  </div>
{% endblock %}

{% block content %}
<div class="card mb-4">
  <div class="card-header"><div>
    <h2>4 Kennzahlen pro Lieferant</h2>
    <p class="sub">
      <span style="color:#6ee7b7;">A</span> = alle Werte gut ·
      <span style="color:#fbbf24;">B</span> = ein Wert ausreißend ·
      <span style="color:#fca5a5;">C</span> = mehrere Probleme
    </p>
  </div></div>

  {% if cards %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Klasse</th>
        <th>Lieferant</th>
        <th>Typ</th>
        <th class="num">Bestellungen</th>
        <th class="num">Volumen</th>
        <th class="num">Wareneingänge</th>
        <th class="num">On-Time</th>
        <th class="num">Qualität</th>
        <th class="num">Preisindex</th>
        <th class="num">NCR-Quote</th>
      </tr>
    </thead>
    <tbody>
      {% for c in cards %}
      <tr class="cursor-pointer" onclick="location='/vendors/{{ c.vendor_id }}'">
        <td>
          {% if c.klasse == 'A' %}<span class="badge badge-emerald" style="font-size:13px;width:32px;text-align:center;">A</span>
          {% elif c.klasse == 'B' %}<span class="badge badge-amber" style="font-size:13px;width:32px;text-align:center;">B</span>
          {% elif c.klasse == 'C' %}<span class="badge badge-red" style="font-size:13px;width:32px;text-align:center;">C</span>
          {% else %}<span class="badge badge-neutral" style="font-size:13px;width:32px;text-align:center;">—</span>{% endif %}
        </td>
        <td class="font-semibold">{{ c.vendor_name }}</td>
        <td class="text-xs" style="color: var(--card-text-muted);">{{ c.vendor_type or '—' }}</td>
        <td class="num nums">{{ c.po_count }}</td>
        <td class="num nums font-medium">{{ money(c.po_volume) }}</td>
        <td class="num nums">{{ c.gr_count }}</td>
        <td class="num nums">
          {% if c.ontime_pct is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif c.ontime_pct >= 95 %}<span style="color:#6ee7b7;font-weight:700;">{{ c.ontime_pct }}%</span>
          {% elif c.ontime_pct >= 85 %}<span style="color:#fbbf24;font-weight:700;">{{ c.ontime_pct }}%</span>
          {% else %}<span style="color:#fca5a5;font-weight:700;">{{ c.ontime_pct }}%</span>{% endif %}
        </td>
        <td class="num nums">
          {% if c.quality_pct is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif c.quality_pct >= 99 %}<span style="color:#6ee7b7;font-weight:700;">{{ c.quality_pct }}%</span>
          {% elif c.quality_pct >= 95 %}<span style="color:#fbbf24;font-weight:700;">{{ c.quality_pct }}%</span>
          {% else %}<span style="color:#fca5a5;font-weight:700;">{{ c.quality_pct }}%</span>{% endif %}
        </td>
        <td class="num nums">
          {% if c.price_index is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif c.price_index < 95 %}<span style="color:#6ee7b7;font-weight:700;" title="Günstiger als Stammpreis">{{ c.price_index }}</span>
          {% elif c.price_index <= 110 %}<span style="color:var(--card-text);">{{ c.price_index }}</span>
          {% else %}<span style="color:#fca5a5;font-weight:700;" title="Teurer als Stammpreis">{{ c.price_index }}</span>{% endif %}
        </td>
        <td class="num nums">
          {% if c.ncr_rate is none %}<span style="color: var(--card-text-muted);">—</span>
          {% elif c.ncr_rate == 0 %}<span style="color:#6ee7b7;font-weight:700;">0%</span>
          {% elif c.ncr_rate < 5 %}<span style="color:#fbbf24;">{{ c.ncr_rate }}%</span>
          {% else %}<span style="color:#fca5a5;font-weight:700;">{{ c.ncr_rate }}%</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% else %}
  <div class="p-12 text-center">
    <div style="font-size: 48px; line-height: 1; opacity: 0.20; margin-bottom: 12px;">📊</div>
    <p class="text-sm" style="color: var(--card-text-muted);">
      Noch keine Bestellungen im gewählten Zeitraum.
    </p>
  </div>
  {% endif %}
</div>

<div class="card">
  <div class="card-header"><div>
    <h2>Lese-Hilfe</h2>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-2 gap-4 text-xs" style="color: var(--card-text);">
    <div>
      <p class="font-semibold mb-1" style="color: var(--brand-blue-light);">On-Time-Liefertreue</p>
      <p style="color: var(--card-text-muted);">% der Wareneingänge mit Eingangsdatum ≤ bestätigtem (oder erwartetem) Liefertermin. Über 95 % gilt als sehr gut.</p>
    </div>
    <div>
      <p class="font-semibold mb-1" style="color: var(--brand-blue-light);">Qualitäts-Quote</p>
      <p style="color: var(--card-text-muted);">% der Wareneingänge mit Häkchen „Qualität OK". 99 % oder besser gilt als sehr gut, &lt; 95 % ist Anlass für ein Lieferanten-Gespräch.</p>
    </div>
    <div>
      <p class="font-semibold mb-1" style="color: var(--brand-blue-light);">Preisindex</p>
      <p style="color: var(--card-text-muted);">Durchschnittlicher Bestellpreis pro Material relativ zum Stamm-Preis. 100 = Stamm, &gt;110 = systematisch zu teuer, &lt;95 = günstig.</p>
    </div>
    <div>
      <p class="font-semibold mb-1" style="color: var(--brand-blue-light);">NCR-Quote</p>
      <p style="color: var(--card-text-muted);">Reklamationen / Bestellungen. Über 5 % bedeutet ernste Probleme.</p>
    </div>
  </div>
</div>
{% endblock %}