{% extends "base.html" %}

{% block title %}Schulungen{% endblock %}
{% block heading %}Schulungs- & Qualifikationsnachweise{% endblock %}
{% block topbar_actions %}
  <div class="tabs">
    <a class="tab {% if not expires_only %}is-active{% endif %}" href="/personal/qualifications">Alle</a>
    <a class="tab {% if expires_only %}is-active{% endif %}" href="/personal/qualifications?expires=1">Bald ablaufend</a>
  </div>
{% endblock %}

{% block content %}

{# ============== ANLEGEN ============== #}
<form method="post" action="/personal/qualifications/new" class="card max-w-4xl mb-4">
  <div class="card-header"><div>
    <h2>Schulung erfassen</h2>
    <p class="sub">Schweißer-Zeugnis · Stapler-Schein · DGUV V3 · Software-Zertifikat etc.</p>
  </div></div>
  <div class="p-5 grid grid-cols-1 md:grid-cols-3 gap-x-6 gap-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Mitarbeiter *</label>
      <select name="user_id" required class="select mt-1 w-full">
        <option value="">— wählen —</option>
        {% for u in users %}
        <option value="{{ u.id }}">{{ u.first_name }} {{ u.last_name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Kategorie</label>
      <select name="category" class="select mt-1 w-full">
        <option value="">— frei lassen —</option>
        {% for c in categories %}<option value="{{ c }}">{{ c }}</option>{% endfor %}
      </select>
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Zertifikat-Nr</label>
      <input class="input mt-1 w-full nums" type="text" name="certificate_no" placeholder="optional">
    </div>
    <div class="md:col-span-2">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Titel *</label>
      <input class="input mt-1 w-full" type="text" name="title" required
             placeholder="z.B. EN ISO 9606-1 — MAG-Schweißer Stahl">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Aussteller</label>
      <input class="input mt-1 w-full" type="text" name="issuer" placeholder="TÜV, DEKRA, IHK, …">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Erworben am</label>
      <input class="input mt-1 w-full nums" type="date" name="awarded_at">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Gültig bis</label>
      <input class="input mt-1 w-full nums" type="date" name="expires_at">
    </div>
    <div class="md:col-span-3">
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz</label>
      <input class="input mt-1 w-full" type="text" name="note">
    </div>
  </div>
  <div class="px-5 py-4 border-t flex justify-end" style="border-color: var(--card-border-2);">
    <button class="btn btn-primary" type="submit">+ Schulung erfassen</button>
  </div>
</form>

{# ============== LISTE ============== #}
<div class="card">
  <div class="card-header"><div>
    <h2>{% if expires_only %}Bald ablaufende{% else %}Alle{% endif %} Qualifikationen
      <span class="text-neutral-400 font-normal text-sm">· {{ qualifications|length }}</span>
    </h2>
  </div></div>
  {% if qualifications %}
  <table class="data-table">
    <thead>
      <tr>
        <th>Mitarbeiter</th>
        <th>Titel</th>
        <th>Kategorie</th>
        <th>Aussteller</th>
        <th>Zertifikat-Nr</th>
        <th class="num">Erworben</th>
        <th class="num">Gültig bis</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for q in qualifications %}
      <tr>
        <td class="font-semibold">{{ q.first_name }} {{ q.last_name }}</td>
        <td>{{ q.title }}</td>
        <td class="text-xs" style="color: var(--card-text-muted);">{{ q.category or '—' }}</td>
        <td class="text-xs">{{ q.issuer or '—' }}</td>
        <td class="text-xs nums">{{ q.certificate_no or '—' }}</td>
        <td class="num text-xs nums">{{ q.awarded_at or '—' }}</td>
        <td class="num text-xs nums">{{ q.expires_at or '—' }}</td>
        <td>
          {% if q.state == 'expired' %}<span class="badge badge-red">Abgelaufen</span>
          {% elif q.state == 'expiring' %}<span class="badge badge-amber">Läuft ab</span>
          {% elif q.state == 'unlimited' %}<span class="badge badge-blue">Unbefristet</span>
          {% else %}<span class="badge badge-emerald">Gültig</span>{% endif %}
        </td>
        <td class="text-right">
          <button type="button" class="btn btn-sm btn-secondary"
                  data-qid="{{ q.id }}" data-action="del-qual"
                  style="color:#ef4444;border-color:#ef4444;">Löschen</button>
        </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" style="color: var(--card-text-muted);">
      {% if expires_only %}Aktuell läuft keine Qualifikation ab.{% else %}Noch keine Schulungen erfasst.{% endif %}
    </p>
  </div>
  {% endif %}
</div>

<script>
document.addEventListener('click', e => {
  const btn = e.target.closest('[data-action=del-qual]');
  if (!btn) return;
  if (!confirm('Qualifikation wirklich löschen?')) return;
  fetch('/api/qualifications/' + btn.dataset.qid + '/delete', { method: 'POST' })
    .then(r => r.json()).then(d => { if (d.ok) location.reload(); });
});
</script>
{% endblock %}