{% extends "base.html" %}
{% from "_macros.html" import avatar %}

{% block title %}Team & Maschinen{% endblock %}
{% block heading %}Team & Maschinen{% endblock %}
{% block topbar_actions %}
  <a class="btn btn-sm btn-secondary" href="/team/machines/new">+ Maschine</a>
  <a class="btn btn-sm btn-primary"   href="/team/users/new">+ Mitarbeiter</a>
{% endblock %}

{% block content %}

<div class="grid grid-cols-1 gap-6">

  <div class="card">
    <div class="card-header">
      <div>
        <h2>Team</h2>
        <p class="sub">{{ users|length }} Mitarbeiter</p>
      </div>
    </div>
    {% set bal_by_id = {} %}
    {% for b in balances %}{% set _ = bal_by_id.update({b.id: b}) %}{% endfor %}
    <table class="data-table">
      <thead>
        <tr>
          <th>Name</th>
          <th>Position</th>
          <th class="num">Verleihe</th>
          <th class="num">Urlaub</th>
          <th>Urlaubs-Stand</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        {% set b = bal_by_id.get(u.id) %}
        <tr class="cursor-pointer" onclick="if(!event.target.closest('a,button')) location='/team/users/{{ u.id }}'">
          <td>
            <div class="flex items-center gap-2">
              {{ avatar(u.first_name, u.last_name) }}
              <div>
                <div class="font-medium">{{ u.first_name }} {{ u.last_name }}</div>
                <div class="text-xs text-neutral-500 nums">{{ u.username }}{% if u.role_name %} · {{ u.role_name }}{% endif %}</div>
              </div>
            </div>
          </td>
          <td class="text-xs text-neutral-700">{{ (b.position if b else None) or '—' }}</td>
          <td class="num">
            {% if u.open_rentals %}<span class="badge badge-blue">{{ u.open_rentals }}</span>{% else %}—{% endif %}
          </td>
          <td class="num nums">
            {% if b %}
              {% set avail = b.entitled - b.used - b.requested %}
              <span class="font-semibold {% if avail <= 0 %}text-red-600{% elif avail <= 5 %}text-amber-600{% else %}text-emerald-600{% endif %}">{{ avail }}</span>
              <span class="text-neutral-400">/ {{ b.entitled }} T</span>
            {% else %}—{% endif %}
          </td>
          <td>
            {% if b %}
              {% set pct = (b.used * 100 / b.entitled) if b.entitled else 0 %}
              <div class="relative h-2 bg-neutral-100 rounded-full overflow-hidden" style="min-width:120px;">
                <div class="absolute inset-y-0 left-0"
                     style="width:{{ [pct|int, 100]|min }}%; background:{% if pct >= 100 %}#ef4444{% elif pct >= 80 %}#f59e0b{% else %}#10b981{% endif %};"></div>
              </div>
              <p class="text-[10px] text-neutral-500 nums mt-1 whitespace-nowrap">
                {{ b.used }} gen. · {{ b.requested }} beantr.
              </p>
            {% endif %}
          </td>
          <td class="text-right whitespace-nowrap">
            <a class="btn btn-sm btn-secondary" href="/team/users/{{ u.id }}">Akte</a>
            <a class="btn btn-sm btn-secondary" href="/team/users/{{ u.id }}/edit">Login</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <div class="card">
    <div class="card-header">
      <div>
        <h2>Maschinen</h2>
        <p class="sub">{{ machines|length }} Maschinen / Arbeitsplätze</p>
      </div>
    </div>
    <div class="px-5 pt-3 pb-2 text-[11px]" style="color: var(--card-text-muted);">
      <strong style="color: var(--card-text);">Stundensätze nach Stückzahl-Staffel:</strong>
      kleine Mengen (Stufe 1) · mittlere ab Schwelle&nbsp;<em>S₂</em> · große ab&nbsp;<em>S₃</em>.
      Leer lassen = nächst-niedrigerer Tier oder Step-Satz greift.
    </div>
    <table class="data-table">
      <thead>
        <tr>
          <th>Maschine</th>
          <th>Steuerung</th>
          <th>Anbindung</th>
          <th class="num" style="min-width: 90px;">€/h klein<br><span style="font-weight:400;font-size:9px;">Stufe 1</span></th>
          <th class="num" style="min-width: 90px;">€/h mittel<br><span style="font-weight:400;font-size:9px;">ab S₂ Stk</span></th>
          <th class="num" style="min-width: 90px;">€/h groß<br><span style="font-weight:400;font-size:9px;">ab S₃ Stk</span></th>
          <th class="num" style="min-width: 80px;">Schwellen<br><span style="font-weight:400;font-size:9px;">S₂ / S₃</span></th>
          <th class="num">Belegung</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for m in machines %}
        <tr>
          <td>
            <div class="font-medium">{{ m.name }}</div>
            {% if m.controller_model %}<div class="text-[11px] text-neutral-500">{{ m.controller_model }}</div>{% endif %}
          </td>
          <td>
            {% if m.controller_type and m.controller_type != 'none' %}
              <span class="badge badge-blue">{{ controllers.get(m.controller_type, m.controller_type) }}</span>
            {% else %}
              <span class="text-neutral-400 text-xs">—</span>
            {% endif %}
          </td>
          <td class="text-xs">
            {% if m.ip_address %}
              <div class="nums font-mono">{{ m.ip_address }}{% if m.port %}:{{ m.port }}{% endif %}</div>
              {% if m.conn_status == 'online' %}
                <span class="badge badge-emerald">● online</span>
              {% elif m.conn_status == 'offline' %}
                <span class="badge badge-red">● offline</span>
              {% else %}
                <span class="badge badge-neutral">● unbekannt</span>
              {% endif %}
            {% else %}
              <span class="text-neutral-400">nicht angebunden</span>
            {% endif %}
          </td>
          <td class="num">
            <input class="input nums w-24 text-right machine-rate-input" type="text"
                   data-machine-id="{{ m.id }}" data-tier="1"
                   value="{{ '%.2f'|format(m.hourly_rate) if m.hourly_rate is not none else '' }}"
                   placeholder="—" title="Stundensatz für kleine Stückzahlen (Stufe 1)">
          </td>
          <td class="num">
            <input class="input nums w-24 text-right machine-rate-input" type="text"
                   data-machine-id="{{ m.id }}" data-tier="2"
                   value="{{ '%.2f'|format(m.hourly_rate_t2) if m.hourly_rate_t2 is not none else '' }}"
                   placeholder="—" title="Stundensatz für mittlere Mengen (Stufe 2)">
          </td>
          <td class="num">
            <input class="input nums w-24 text-right machine-rate-input" type="text"
                   data-machine-id="{{ m.id }}" data-tier="3"
                   value="{{ '%.2f'|format(m.hourly_rate_t3) if m.hourly_rate_t3 is not none else '' }}"
                   placeholder="—" title="Stundensatz für große Mengen (Stufe 3)">
          </td>
          <td class="num">
            <div class="flex items-center gap-1 justify-end" style="font-size: 11px;">
              <input class="input nums text-right machine-thresh-input" type="number" min="1"
                     data-machine-id="{{ m.id }}" data-thresh="t2"
                     value="{{ m.qty_t2_from or 10 }}"
                     style="width: 56px;" title="Ab welcher Stückzahl gilt Stufe 2">
              <span style="color: var(--card-text-muted);">/</span>
              <input class="input nums text-right machine-thresh-input" type="number" min="1"
                     data-machine-id="{{ m.id }}" data-thresh="t3"
                     value="{{ m.qty_t3_from or 100 }}"
                     style="width: 56px;" title="Ab welcher Stückzahl gilt Stufe 3">
            </div>
          </td>
          <td class="num">
            {% if m.active_uses %}
              <span class="badge badge-blue">{{ m.active_uses }} aktiv</span>
            {% else %}
              <span class="dot dot-grey"></span>
            {% endif %}
          </td>
          <td class="text-right"><a class="btn btn-sm btn-secondary" href="/team/machines/{{ m.id }}/edit">Bearbeiten</a></td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

</div>

<script>
(function () {
  function getCookie(n) { return document.cookie.split('; ').find(r => r.startsWith(n + '='))?.split('=')[1] || ''; }

  // Tier-Stundensatz inline speichern
  document.querySelectorAll('.machine-rate-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/machines/' + inp.dataset.machineId + '/rate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
        body: JSON.stringify({
          tier: parseInt(inp.dataset.tier, 10),
          hourly_rate: inp.value,
          csrf_token: csrf,
        }),
      }).then(r => r.json()).then(d => {
        if (d.ok) {
          if (window.toast) toast(
            'Tier ' + inp.dataset.tier + ' ' +
            (d.hourly_rate == null ? 'zurückgesetzt' : 'gespeichert'),
            'success', { ttl: 1400 });
        } else if (window.toast) toast(d.error || 'Fehler', 'error');
      });
    });
    inp.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); inp.blur(); }
    });
  });

  // Schwellenwerte (immer beide gemeinsam senden, damit Validierung greift)
  document.querySelectorAll('.machine-thresh-input').forEach(inp => {
    let last = inp.value;
    inp.addEventListener('blur', () => {
      if (inp.value === last) return;
      last = inp.value;
      const row = inp.closest('tr');
      const t2 = row.querySelector('.machine-thresh-input[data-thresh="t2"]').value;
      const t3 = row.querySelector('.machine-thresh-input[data-thresh="t3"]').value;
      const csrf = getCookie('csrf_token');
      fetch('/api/machines/' + inp.dataset.machineId + '/thresholds', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-Token': csrf },
        body: JSON.stringify({ qty_t2_from: t2, qty_t3_from: t3, csrf_token: csrf }),
      }).then(r => r.json()).then(d => {
        if (d.ok) {
          if (window.toast) toast('Schwellen gespeichert', 'success', { ttl: 1400 });
        } else if (window.toast) toast(d.error || 'Fehler', 'error');
      });
    });
    inp.addEventListener('keydown', e => {
      if (e.key === 'Enter') { e.preventDefault(); inp.blur(); }
    });
  });
})();
</script>
{% endblock %}