{% extends "base.html" %}

{% block title %}Materialliste{% endblock %}
{% block heading %}Materialliste{% endblock %}
{% block topbar_actions %}
  <form action="/materials" method="get" class="flex items-center gap-2" style="margin-right:8px;">
    <input class="input" type="search" name="q" value="{{ search_query }}" placeholder="Suche Werkstoff, Code, Kategorie …" style="min-width:260px;">
    <button class="btn btn-sm btn-secondary" type="submit">Suchen</button>
  </form>
  <a class="btn btn-primary" href="/materials/new">+ Neues Material</a>
{% endblock %}

{% block content %}
<div class="card">
  {% if materials %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Code</th>
        <th>Werkstoff</th>
        <th>Kategorie</th>
        <th class="num">Preis pro kg</th>
        <th class="num">Dichte (g/cm³)</th>
        <th>Lieferant</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for m in materials %}
      <tr>
        <td class="nums font-semibold">{{ m.code or '—' }}</td>
        <td>{{ m.name }}</td>
        <td class="text-xs">{% if m.category %}<span class="badge badge-blue">{{ m.category }}</span>{% else %}—{% endif %}</td>
        <td class="num nums">
          <input class="input nums w-32 text-right material-price-input" type="text"
                 data-material-id="{{ m.id }}"
                 value="{{ '%.2f'|format(m.price_per_kg or 0) }}"
                 style="margin-left:auto; display:block;">
        </td>
        <td class="num text-xs nums">{% if m.density %}{{ '%.2f'|format(m.density) }}{% else %}—{% endif %}</td>
        <td class="text-xs">{{ m.supplier_name or '—' }}</td>
        <td>
          {% if m.is_active %}
            <span class="badge badge-emerald">Aktiv</span>
          {% else %}
            <span class="badge badge-neutral">Inaktiv</span>
          {% endif %}
        </td>
        <td class="text-right">
          <a class="btn btn-sm btn-secondary" href="/materials/{{ m.id }}/edit">Bearbeiten</a>
        </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 mb-4" style="color: var(--card-text-muted);">
      {% if search_query %}Keine Treffer für „{{ search_query }}".{% else %}Noch keine Werkstoffe angelegt.{% endif %}
    </p>
    <div class="flex gap-2 justify-center">
      <a class="btn btn-primary btn-sm" href="/materials/new">+ Erstes Material anlegen</a>
      {% if search_query %}<a class="btn btn-secondary btn-sm" href="/materials">Suche löschen</a>{% endif %}
    </div>
  </div>
  {% endif %}
</div>

<script>
(function () {
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }
  document.querySelectorAll('.material-price-input').forEach(inp => {
    let last = inp.value;
    inp.addEventListener('blur', () => {
      if (inp.value === last) return;
      last = inp.value;
      const csrf = getCookie('csrf_token');
      fetch('/api/materials/' + inp.dataset.materialId + '/price', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
        body: JSON.stringify({ price_per_kg: inp.value, csrf_token: csrf }),
      }).then(r => r.json()).then(d => {
        if (d.ok) {
          inp.value = (Number(d.price_per_kg) || 0).toFixed(2);
          last = inp.value;
          if (window.toast) toast('Preis gespeichert', 'success', { ttl: 1500 });
        } else if (window.toast) toast(d.error || 'Fehler', 'error');
      });
    });
    inp.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); inp.blur(); }
    });
  });
})();
</script>
{% endblock %}