{% extends "base.html" %}
{% block content %}
  <div class="toolbar">
    <form class="search" method="get" action="{{ url_for('bp.index') }}">
      <input type="search" name="q" placeholder="Artikel oder Größe suchen…" value="{{ q }}" />
      <select name="sort">
        <option value="gezaehlt" {% if sort == "gezaehlt" %}selected{% endif %}>Bestand</option>
        <option value="soll" {% if sort == "soll" %}selected{% endif %}>Soll</option>
        <option value="artikel" {% if sort == "artikel" %}selected{% endif %}>Artikel</option>
        <option value="groesse" {% if sort == "groesse" %}selected{% endif %}>Größe</option>
        <option value="verkaeufe" {% if sort == "verkaeufe" %}selected{% endif %}>Verkäufe</option>
      </select>
      <select name="dir">
        <option value="desc" {% if direction == "desc" %}selected{% endif %}>↓</option>
        <option value="asc" {% if direction == "asc" %}selected{% endif %}>↑</option>
      </select>
      <button class="btn" type="submit">Filtern</button>
      <a class="btn ghost" href="{{ url_for('bp.index') }}">Zurücksetzen</a>
    </form>
    <div class="stat">
      <div class="label">Artikel gesamt</div>
      <div class="value">{{ total }}</div>
    </div>
    <div class="stat">
      <div class="label">Bestand gesamt</div>
      <div class="value">{{ total_bestand }}</div>
    </div>
    <a class="stat stat-link" href="{{ url_for('bp.orders') }}" title="Offene Bestellungen anzeigen">
      <div class="label">Offene Bestellungen</div>
      <div class="value">{{ open_orders }}</div>
    </a>
  </div>

  <div class="card">
    <table>
      <thead>
        <tr>
          <th>Artikel</th>
          <th>Größe</th>
          <th>Preis</th>
          <th>Soll</th>
          <th>Bestand</th>
          <th>Abweichung</th>
          <th>Fehlbestand</th>
          <th>Verkäufe</th>
          <th class="actions">Aktionen</th>
        </tr>
      </thead>
      <tbody>
        {% if groups %}
          {% for g in groups %}
            <tr class="group-row">
              <td colspan="9"><strong>{{ g.artikel }}</strong></td>
            </tr>
            {% for r in g.rows %}
              {% set diff = (r.gezaehlt or 0) - (r.soll or 0) %}
              {% set fehl = (r.soll or 0) - (r.gezaehlt or 0) %}
              <tr>
                <td></td>
                <td>{{ r.groesse }}</td>
                <td>{{ "%.2f"|format(r.preis or 0) }} €</td>
                <td>{{ r.soll }}</td>
                <td>{{ r.gezaehlt }}</td>
                <td class="{{ 'pos' if diff > 0 else 'neg' if diff < 0 else '' }}">{{ diff }}</td>
                <td>{{ fehl if fehl > 0 else "–" }}</td>
                <td>{{ r.verkaeufe }}</td>
                <td class="actions">
                  <a class="btn icon" href="{{ url_for('bp.edit_item', item_id=r.id) }}" title="Bearbeiten" aria-label="Bearbeiten"><span>✎</span></a>
                  <form method="post" action="{{ url_for('bp.verkauf', item_id=r.id) }}" onsubmit="return confirm('Wirklich 1 Stück als verkauft buchen?');">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button class="btn icon" type="submit" title="Verkauf +1" aria-label="Verkauf +1"><span>🛒</span></button>
                  </form>
                  <a class="btn icon" href="{{ url_for('bp.ausbuchen', item_id=r.id) }}" title="Ausbuchen" aria-label="Ausbuchen"><span>⇩</span></a>
                  <form method="post" action="{{ url_for('bp.delete_item', item_id=r.id) }}" onsubmit="return confirm('Wirklich löschen? Dieser Vorgang kann nicht rückgängig gemacht werden.');">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <button class="btn icon danger" type="submit" title="Löschen" aria-label="Löschen"><span>🗑</span></button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          {% endfor %}
        {% else %}
          <tr>
            <td colspan="9" class="empty">Keine Treffer.</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
{% endblock %}