{% extends "base.html" %}
{% block title %}Globaler Preisvergleich{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-4">
  <h1 class="page-title">Globaler Preisvergleich</h1>
</div>

<form method="get"
      hx-get="{% url 'preisvergleich' %}"
      hx-target="#ergebnis-bereich"
      hx-swap="innerHTML"
      class="card mb-4 flex flex-wrap gap-3 items-end">
  <div>
    <label class="form-label">Leistungstyp</label>
    <input type="text" name="leistungstyp" value="{{ leistungstyp }}" list="lt-list" class="form-input">
    <datalist id="lt-list">{% for lt in alle_leistungstypen %}<option value="{{ lt }}">{% endfor %}</datalist>
  </div>
  <div>
    <label class="form-label">Gewonnen</label>
    <select name="gewonnen" class="form-select">
      <option value="">Alle</option>
      <option value="ja" {% if filter_gewonnen == 'ja' %}selected{% endif %}>Ja</option>
      <option value="nein" {% if filter_gewonnen == 'nein' %}selected{% endif %}>Nein</option>
    </select>
  </div>
  <div>
    <label class="form-label">Von</label>
    <input type="date" name="von" value="{{ von }}" class="form-input">
  </div>
  <div>
    <label class="form-label">Bis</label>
    <input type="date" name="bis" value="{{ bis }}" class="form-input">
  </div>
  <button type="submit" class="btn-secondary text-xs">Auswerten</button>
</form>

<div id="ergebnis-bereich">
{% if ergebnis %}
<div class="grid grid-cols-3 gap-3 mb-6">
  <div class="card text-center">
    <p class="text-xs text-slate-500 mb-1">Gewichteter Durchschnitt</p>
    <p class="text-2xl font-bold text-blue-700">{{ ergebnis.wert|floatformat:2 }}</p>
  </div>
  <div class="card text-center">
    <p class="text-xs text-slate-500 mb-1">Ungewichteter Durchschnitt</p>
    <p class="text-2xl font-bold text-slate-700">{% if ungewichtet %}{{ ungewichtet|floatformat:2 }}{% else %}—{% endif %}</p>
  </div>
  <div class="card text-center">
    <p class="text-xs text-slate-500 mb-1">Messpunkte</p>
    <p class="text-2xl font-bold text-slate-700">{{ ergebnis.anzahl }}</p>
  </div>
  <div class="card text-center">
    <p class="text-xs text-slate-500 mb-1">Minimum</p>
    <p class="text-xl font-semibold text-green-700">{{ ergebnis.minimum|floatformat:2 }}</p>
  </div>
  <div class="card text-center">
    <p class="text-xs text-slate-500 mb-1">Maximum</p>
    <p class="text-xl font-semibold text-red-700">{{ ergebnis.maximum|floatformat:2 }}</p>
  </div>
</div>

{% if ergebnis_gewonnen or ergebnis_verloren %}
<div class="grid grid-cols-2 gap-3 mb-6">
  {% if ergebnis_gewonnen %}
  <div class="card">
    <p class="text-xs font-medium text-green-700 uppercase tracking-wide mb-2">Ø bei Gewinn</p>
    <p class="text-xl font-bold text-green-700">{{ ergebnis_gewonnen.wert|floatformat:2 }}</p>
    <p class="text-xs text-slate-500 mt-1">{{ ergebnis_gewonnen.anzahl }} Messpunkte</p>
  </div>
  {% endif %}
  {% if ergebnis_verloren %}
  <div class="card">
    <p class="text-xs font-medium text-red-600 uppercase tracking-wide mb-2">Ø bei Verlust</p>
    <p class="text-xl font-bold text-red-600">{{ ergebnis_verloren.wert|floatformat:2 }}</p>
    <p class="text-xs text-slate-500 mt-1">{{ ergebnis_verloren.anzahl }} Messpunkte</p>
  </div>
  {% endif %}
</div>
{% endif %}

{% elif leistungstyp %}
<div class="card text-center py-6 text-sm text-slate-500 mb-6">Keine Daten für "{{ leistungstyp }}".</div>
{% else %}
<div class="card text-center py-6 text-sm text-slate-500 mb-6">Leistungstyp eingeben, um Vergleich zu starten.</div>
{% endif %}

{% if preispunkte %}
<div class="card overflow-hidden">
  <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mb-3">Einzelmesspunkte ({{ preispunkte.count }})</p>
  <table class="w-full text-sm">
    <thead>
      <tr class="border-b border-slate-200 text-left text-xs text-slate-500">
        <th class="pb-2 pr-3">Ausschreibung</th>
        <th class="pb-2 pr-3">Leistung</th>
        <th class="pb-2 pr-3 text-right">Einzelpreis</th>
        <th class="pb-2 pr-3 text-center">Gewicht</th>
        <th class="pb-2 text-center">Gew.</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-slate-100">
      {% for pp in preispunkte %}
      <tr class="hover:bg-slate-50">
        <td class="py-2 pr-3 text-xs text-slate-600">{{ pp.ausschreibung.titel|truncatechars:30 }}</td>
        <td class="py-2 pr-3 text-xs">{{ pp.konkrete_leistung }}</td>
        <td class="py-2 pr-3 text-right text-xs">{{ pp.einzelpreis|floatformat:2 }} {{ pp.waehrung }}</td>
        <td class="py-2 pr-3 text-center text-xs">{{ pp.vergleichsgewicht }}</td>
        <td class="py-2 text-center text-xs">
          {% if pp.ausschreibung_gewonnen == True %}<span class="text-green-600">✓</span>
          {% elif pp.ausschreibung_gewonnen == False %}<span class="text-red-500">✗</span>
          {% else %}<span class="text-slate-400">?</span>{% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
</div>

{% endblock %}