{% extends "base.html" %}
{% block title %}{{ vendor.name }}{% endblock %}
{% block heading %}{{ vendor.name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/vendors" class="hover:underline">Lieferanten</a> / {{ vendor.name }}</p>{% endblock %}

{% block topbar_actions %}
  <a href="/vendors/{{ vendor.id }}/edit" class="btn btn-sm btn-secondary">Bearbeiten</a>
{% endblock %}

{% block content %}
<style>
  .stars { color:#f59e0b; font-size:18px; letter-spacing:1px; }
  .stars-empty { color:#d6d3d1; }
  .star-input label { cursor:pointer; padding:2px 6px; border-radius:4px; }
  .star-input input { display:none; }
  .star-input input:checked ~ label,
  .star-input label:hover { background:rgba(245,158,11,0.15); }
</style>

<div class="grid grid-cols-3 gap-4">
  <!-- Stammdaten -->
  <div class="card col-span-1">
    <div class="card-header"><h2>Stammdaten</h2></div>
    <div class="p-5 text-sm space-y-2">
      {% if vendor.contact_name %}<p><strong>Kontakt:</strong> {{ vendor.contact_name }}</p>{% endif %}
      {% if vendor.email %}<p><strong>E-Mail:</strong> <a href="mailto:{{ vendor.email }}" class="text-blue-700">{{ vendor.email }}</a></p>{% endif %}
      {% if vendor.phone %}<p><strong>Telefon:</strong> <span class="nums">{{ vendor.phone }}</span></p>{% endif %}
      {% if vendor.address %}<p>{{ vendor.address }}<br>{{ vendor.postcode or '' }} {{ vendor.city or '' }}</p>{% endif %}
      {% if vendor.vat_id %}<p><strong>USt-IdNr:</strong> <span class="font-mono text-xs">{{ vendor.vat_id }}</span></p>{% endif %}
      {% if vendor.iban %}<p><strong>IBAN:</strong> <span class="font-mono text-xs">{{ vendor.iban }}</span></p>{% endif %}
    </div>
  </div>

  <!-- Bewertungs-Übersicht -->
  <div class="card col-span-2">
    <div class="card-header"><div>
      <h2>⭐ Lieferanten-Bewertung</h2>
      <p class="sub">Durchschnitt aus {{ rating_summary.count }} Bewertung{% if rating_summary.count != 1 %}en{% endif %}</p>
    </div></div>
    {% if rating_summary.count > 0 %}
    <div class="p-5">
      <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:14px;">
        <div>
          <div class="text-[10px] uppercase font-semibold text-neutral-500">Pünktlichkeit</div>
          <div class="text-3xl font-bold nums">{{ rating_summary.avg_punctuality }}</div>
          <div class="stars">{% for i in range(5) %}{% if i < rating_summary.avg_punctuality|round|int %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase font-semibold text-neutral-500">Qualität</div>
          <div class="text-3xl font-bold nums">{{ rating_summary.avg_quality }}</div>
          <div class="stars">{% for i in range(5) %}{% if i < rating_summary.avg_quality|round|int %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase font-semibold text-neutral-500">Preis-Leistung</div>
          <div class="text-3xl font-bold nums">{{ rating_summary.avg_price }}</div>
          <div class="stars">{% for i in range(5) %}{% if i < rating_summary.avg_price|round|int %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</div>
        </div>
        <div>
          <div class="text-[10px] uppercase font-semibold text-neutral-500">Gesamt</div>
          <div class="text-3xl font-bold nums" style="color:{% if rating_summary.avg_total >= 4 %}#059669{% elif rating_summary.avg_total >= 3 %}#b45309{% else %}#dc2626{% endif %};">{{ rating_summary.avg_total }}</div>
          <div class="stars">{% for i in range(5) %}{% if i < rating_summary.avg_total|round|int %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</div>
        </div>
      </div>
    </div>
    {% else %}
    <p style="padding:24px;text-align:center;color:var(--card-text-muted);">
      Noch keine Bewertungen. Erstes Rating unten erfassen.
    </p>
    {% endif %}
  </div>
</div>

<!-- Neue Bewertung -->
<div class="card" style="margin-top:14px;">
  <div class="card-header"><h2>Neue Bewertung erfassen</h2></div>
  <form method="post" action="/vendors/{{ vendor.id }}/ratings/new" class="p-5">
    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;">
      <div>
        <label class="text-[10px] uppercase font-semibold text-neutral-500">Bezugs-Bestellung</label>
        <select name="po_id" class="select mt-1 w-full">
          <option value="">— Allgemein, ohne PO —</option>
          {% for po in purchase_orders %}
            <option value="{{ po.id }}">{{ po.po_no }} ({{ po.order_date or '?' }})</option>
          {% endfor %}
        </select>
      </div>
      {% for field, label in [('punctuality', 'Pünktlichkeit'), ('quality', 'Qualität'), ('price', 'Preis-Leistung')] %}
      <div>
        <label class="text-[10px] uppercase font-semibold text-neutral-500">{{ label }} *</label>
        <div class="star-input mt-1" style="display:flex;gap:2px;">
          {% for v in [1, 2, 3, 4, 5] %}
            <input type="radio" name="{{ field }}" value="{{ v }}" id="{{ field }}-{{ v }}" {% if v == 4 %}required checked{% endif %}>
            <label for="{{ field }}-{{ v }}" class="stars">★</label>
          {% endfor %}
        </div>
      </div>
      {% endfor %}
    </div>
    <div style="margin-top:12px;">
      <label class="text-[10px] uppercase font-semibold text-neutral-500">Notiz</label>
      <textarea class="input mt-1 w-full" name="note" rows="2" placeholder="z.B. Lieferung 3 Tage zu spät, Material aber OK"></textarea>
    </div>
    <button class="btn btn-primary mt-3" type="submit">Bewertung speichern</button>
  </form>
</div>

<!-- Bewertungs-Historie -->
{% if ratings %}
<div class="card" style="margin-top:14px;">
  <div class="card-header"><div><h2>Bewertungs-Historie</h2></div></div>
  <table class="data-table">
    <thead>
      <tr>
        <th>Datum</th>
        <th>PO</th>
        <th>Pünktlichkeit</th>
        <th>Qualität</th>
        <th>Preis</th>
        <th>Notiz</th>
        <th>Bewerter</th>
      </tr>
    </thead>
    <tbody>
      {% for r in ratings %}
      <tr>
        <td class="text-xs nums">{{ r.received_at[:10] }}</td>
        <td class="nums">{{ r.po_no or '—' }}</td>
        <td class="stars">{% for i in range(5) %}{% if i < r.punctuality %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</td>
        <td class="stars">{% for i in range(5) %}{% if i < r.quality %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</td>
        <td class="stars">{% for i in range(5) %}{% if i < r.price %}★{% else %}<span class="stars-empty">★</span>{% endif %}{% endfor %}</td>
        <td class="text-xs">{{ r.note or '—' }}</td>
        <td class="text-xs">{% if r.first_name %}{{ r.first_name }} {{ r.last_name }}{% else %}—{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
{% endblock %}