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

{% block title %}Artikel{% endblock %}
{% block heading %}Artikel{% endblock %}
{% block topbar_actions %}
  <button type="button" id="qr-bulk-print-btn" class="btn btn-secondary btn-sm"
          onclick="printSelectedQrLabels()" title="Markierte Artikel als QR-Etiketten-PDF drucken">
    🖨 QR-Etiketten <span id="qr-bulk-count" style="opacity:0.7">(0)</span>
  </button>
  <a class="btn btn-secondary btn-sm" href="/export/items.csv">CSV-Export</a>
  <a class="btn btn-primary" href="/items/new">+ Neuer Artikel</a>
{% endblock %}

{% block content %}

  <!-- Filter bar -->
  <form method="get" action="/items" class="card">
    <div class="p-4 flex flex-wrap items-end gap-3">
      <div class="flex-1 min-w-[240px]">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Suche</label>
        <input class="input w-full mt-1" type="search" name="q" value="{{ q }}" placeholder="SKU oder Beschreibung...">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">System</label>
        <select class="select mt-1" name="source_app">
          <option value="" {% if not source_app %}selected{% endif %}>Alle</option>
          <option value="tools" {% if source_app=='tools' %}selected{% endif %}>Werkzeug</option>
          <option value="management" {% if source_app=='management' %}selected{% endif %}>Lager</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Typ</label>
        <select class="select mt-1" name="item_type">
          <option value="">Alle</option>
          {% for code, label in item_types.items() %}
          <option value="{{ code }}" {% if item_type==code %}selected{% endif %}>{{ label }}</option>
          {% endfor %}
        </select>
      </div>
      <label class="flex items-center gap-2 text-sm">
        <input type="checkbox" name="low_stock" value="1" {% if low_stock %}checked{% endif %}>
        Nur Mindestbestand
      </label>
      <button class="btn btn-primary" type="submit">Filtern</button>
      <a class="btn btn-secondary" href="/items">Zurücksetzen</a>
    </div>
  </form>

  <div class="card">
    <div class="card-header">
      <div>
        <h2>{{ items|length }} Artikel</h2>
        <p class="sub">Werkzeuge, Messmittel, Material — alles in einer Ansicht</p>
      </div>
    </div>
    {% if items %}
    <div class="overflow-x-auto">
      <table class="data-table">
        <thead>
          <tr>
            <th style="width:32px;">
              <input type="checkbox" id="qr-select-all"
                     onclick="toggleAllQrCheckboxes(this.checked); event.stopPropagation();"
                     title="Alle markieren / abwählen">
            </th>
            <th></th>
            <th>SKU</th>
            <th>Beschreibung</th>
            <th>Typ</th>
            <th class="num">Bestand</th>
            <th class="num">Min</th>
            <th class="num">Verleih</th>
            <th>Lieferant</th>
            <th class="num">Preis</th>
          </tr>
        </thead>
        <tbody>
          {% for it in items %}
          <tr class="cursor-pointer" onclick="location='/items/{{ it.id }}'">
            <td onclick="event.stopPropagation();">
              <input type="checkbox" class="qr-row-cb" data-id="{{ it.id }}"
                     onchange="updateQrBulkCount()"
                     title="Für QR-Etikett auswählen">
            </td>
            <td>{{ app_pill(it.source_app) }}</td>
            <td class="nums font-medium">{{ it.ident }}</td>
            <td class="text-neutral-700" style="max-width:340px">
              <div class="truncate">{{ it.description }}</div>
            </td>
            <td>{{ item_type_badge(it.item_type) }}</td>
            <td class="num">
              {% if it.quantity_total <= it.quantity_min and it.quantity_min > 0 %}
                <span class="text-red-600 font-semibold">{{ it.quantity_total }}</span>
              {% else %}
                {{ it.quantity_total }}
              {% endif %}
            </td>
            <td class="num text-neutral-500">{{ it.quantity_min }}</td>
            <td class="num">{% if it.active_rentals %}<span class="badge badge-blue">{{ it.active_rentals }}</span>{% else %}—{% endif %}</td>
            <td class="text-neutral-600 text-xs truncate" style="max-width:160px">{{ it.vendor_name or '—' }}</td>
            <td class="num">{{ money(it.price) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div class="p-12 text-center text-sm text-neutral-500">Keine Artikel gefunden — Filter zurücksetzen</div>
    {% endif %}
  </div>

<script>
/* ====== Bulk-QR-Etiketten-Druck ======
   Multi-Select-Checkboxen pro Zeile + Topbar-Button öffnet Bulk-PDF in
   neuem Tab. Etiketten-Layout: Avery-L7163 21-up A4.
*/
function getSelectedQrIds() {
  var ids = [];
  document.querySelectorAll('input.qr-row-cb:checked').forEach(function(cb){
    ids.push(cb.dataset.id);
  });
  return ids;
}
function updateQrBulkCount() {
  var ids = getSelectedQrIds();
  var el = document.getElementById('qr-bulk-count');
  if (el) el.textContent = '(' + ids.length + ')';
  var btn = document.getElementById('qr-bulk-print-btn');
  if (btn) btn.disabled = ids.length === 0;
}
function toggleAllQrCheckboxes(checked) {
  document.querySelectorAll('input.qr-row-cb').forEach(function(cb){
    cb.checked = checked;
  });
  updateQrBulkCount();
}
function printSelectedQrLabels() {
  var ids = getSelectedQrIds();
  if (ids.length === 0) {
    alert('Bitte mindestens einen Artikel über die Checkbox auswählen.');
    return;
  }
  if (ids.length > 500) {
    alert('Maximal 500 Etiketten pro PDF — bitte Auswahl reduzieren.');
    return;
  }
  // Bei kleinen Listen: GET. Bei vielen: POST (URL-Limit ~2 KB)
  if (ids.join(',').length > 1500) {
    // CSRF-Token aus Cookie lesen — Double-Submit-Pattern (siehe app/csrf.py)
    var csrf = (document.cookie.match(/(?:^|; )csrf_token=([^;]+)/) || [])[1] || '';
    var f = document.createElement('form');
    f.method = 'POST';
    f.action = '/items/qr-labels-bulk.pdf';
    f.target = '_blank';
    var inp = document.createElement('input');
    inp.type = 'hidden'; inp.name = 'ids'; inp.value = ids.join(',');
    f.appendChild(inp);
    if (csrf) {
      var ct = document.createElement('input');
      ct.type = 'hidden'; ct.name = 'csrf_token'; ct.value = csrf;
      f.appendChild(ct);
    }
    document.body.appendChild(f);
    f.submit();
    document.body.removeChild(f);
  } else {
    window.open('/items/qr-labels-bulk.pdf?ids=' + ids.join(','), '_blank');
  }
}
// Init Counter
document.addEventListener('DOMContentLoaded', updateQrBulkCount);
</script>

{% endblock %}