{% extends "base.html" %}

{% block title %}Messung erfassen — {{ tpl.name }}{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/measurements" class="hover:underline">Messprotokolle</a> / Messung erfassen</p>{% endblock %}
{% block heading %}Messung erfassen{% endblock %}

{% block content %}

<form method="post" action="/measurements/records/new" class="card max-w-4xl">
  <input type="hidden" name="template_id" value="{{ tpl.id }}">

  <div class="card-header"><div>
    <h2>{{ tpl.name }}</h2>
    <p class="sub">{{ tpl.description or '' }}</p>
  </div></div>

  <div class="p-5 grid grid-cols-2 gap-x-6 gap-y-4">
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Seriennummer / Charge</label>
      <input class="input mt-1 w-full nums" type="text" name="serial_no" placeholder="z.B. 2026-0042">
    </div>
    <div>
      <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Geprüft von</label>
      <input class="input mt-1 w-full" type="text" disabled
             value="{% if current_user %}{{ current_user.first_name }} {{ current_user.last_name }}{% else %}— anonym —{% endif %}"
             style="background:#f5f5f5;">
      <p class="text-[11px] text-neutral-500 mt-1">automatisch der angemeldete Mitarbeiter</p>
    </div>
  </div>

  <div class="card-header" style="border-top:1px solid #e5e5e5;">
    <div>
      <h2>Maße eintragen</h2>
      <p class="sub">Live-Validierung: grün = i.O., rot = außer Toleranz</p>
    </div>
  </div>
  <table class="data-table">
    <thead>
      <tr>
        <th>#</th>
        <th>Maß</th>
        <th class="num">Soll</th>
        <th class="num">Toleranz</th>
        <th class="num">Min</th>
        <th class="num">Max</th>
        <th class="num">Ist-Wert *</th>
        <th>OK?</th>
      </tr>
    </thead>
    <tbody>
      {% for p in points %}
      {% set min_v = p.nominal + p.tol_minus %}
      {% set max_v = p.nominal + p.tol_plus %}
      <tr id="row-{{ loop.index0 }}">
        <td class="num text-neutral-500">{{ loop.index }}</td>
        <td>
          <div class="font-medium">{{ p.name }}</div>
        </td>
        <td class="num nums">{{ p.nominal }} {{ p.unit }}</td>
        <td class="num nums text-xs text-neutral-500">+{{ p.tol_plus }} / {{ p.tol_minus }}</td>
        <td class="num nums text-xs text-neutral-600">{{ "%.4f"|format(min_v) }}</td>
        <td class="num nums text-xs text-neutral-600">{{ "%.4f"|format(max_v) }}</td>
        <td class="num">
          <input class="input nums w-32 text-right meas-input"
                 type="text" inputmode="decimal" name="value_{{ loop.index0 }}"
                 data-min="{{ min_v }}" data-max="{{ max_v }}" data-row="row-{{ loop.index0 }}"
                 placeholder="—">
        </td>
        <td><span class="meas-status badge badge-neutral" id="status-{{ loop.index0 }}">offen</span></td>
      </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="p-5 border-t border-neutral-100">
    <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Notiz (optional)</label>
    <textarea class="input mt-1 w-full" rows="2" name="note"
              placeholder="z.B. Erstmuster, Maschine: DMG NLX 2500, Programm: %4100-02"></textarea>
  </div>

  <div class="px-5 py-4 border-t border-neutral-100 flex items-center justify-between">
    <a class="btn btn-secondary" href="/measurements">Abbrechen</a>
    <div class="flex items-center gap-3">
      <span id="summary" class="text-sm font-medium">noch keine Werte eingetragen</span>
      <button class="btn btn-primary" type="submit">Messprotokoll speichern</button>
    </div>
  </div>
</form>

<script>
function parseNum(v) {
  if (v == null || v === '') return null;
  const x = parseFloat(String(v).replace(',', '.'));
  return isNaN(x) ? null : x;
}
function check(input) {
  const min = parseFloat(input.dataset.min);
  const max = parseFloat(input.dataset.max);
  const row = document.getElementById(input.dataset.row);
  const idx = input.dataset.row.split('-')[1];
  const status = document.getElementById('status-' + idx);
  const v = parseNum(input.value);
  if (v == null) {
    status.className = 'meas-status badge badge-neutral'; status.textContent = 'offen';
    row.style.background = '';
    return 'open';
  }
  if (v >= min && v <= max) {
    status.className = 'meas-status badge badge-emerald'; status.textContent = '✓ i.O.';
    row.style.background = 'rgba(16, 185, 129, 0.06)';
    return 'pass';
  }
  status.className = 'meas-status badge badge-red'; status.textContent = '✗ n.i.O.';
  row.style.background = 'rgba(239, 68, 68, 0.07)';
  return 'fail';
}
function updateSummary() {
  const inputs = document.querySelectorAll('.meas-input');
  let p = 0, f = 0, o = 0;
  inputs.forEach(i => {
    const r = check(i);
    if (r === 'pass') p++; else if (r === 'fail') f++; else o++;
  });
  const sum = document.getElementById('summary');
  if (o === inputs.length) sum.textContent = 'noch keine Werte eingetragen';
  else if (f === 0 && o === 0) { sum.textContent = `✓ Alle ${p} Maße i.O.`; sum.style.color = '#047857'; }
  else if (f > 0) { sum.textContent = `${f} Maß(e) außer Toleranz!`; sum.style.color = '#b91c1c'; }
  else { sum.textContent = `${p} ✓ · ${o} offen`; sum.style.color = '#b45309'; }
}
document.querySelectorAll('.meas-input').forEach(i => i.addEventListener('input', updateSummary));
</script>

{# RS232-Live-Werte-Widget — fügt Werte vom Messmittel direkt ins fokussierte Feld ein #}
{% include '_serial_live_widget.html' ignore missing %}

{% endblock %}