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

{% block title %}Prüfmittel-Kalender · Werkstatt{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Prüfmittel-Kalender (DGUV V3)</p>{% endblock %}
{% block heading %}Prüfmittel-Kalender{% endblock %}

{% block topbar_actions %}
  <a href="/inspections" class="btn btn-secondary btn-sm" title="Office-Sicht mit erweiterten Filtern">Office-Sicht</a>
{% endblock %}

{% block content %}
<style>
  /* TAGE-Spalte auf 120px statt 60px — sonst wird "60 T überfällig" abgeschnitten */
  .cal-row { display:grid; grid-template-columns: 14px 1fr 110px 110px 110px 120px; gap:14px;
             align-items:center; padding:10px 14px; border-bottom:1px solid rgba(255,255,255,0.06); font-size:13px; color:var(--card-text); }
  .cal-row:hover { background:rgba(255,255,255,0.05); }
  .cal-row.head { font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--card-text-muted); background:rgba(255,255,255,0.04); }
  .cal-row .meta-text { font-size:11px; color:var(--card-text-muted); }
  .cal-dot { width:10px; height:10px; border-radius:50%; }
  .cal-dot.red    { background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,0.30); }
  .cal-dot.yellow { background:#facc15; box-shadow:0 0 0 3px rgba(250,204,21,0.30); }
  .cal-dot.green  { background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,0.30); }
  .cal-days { font-family:ui-monospace,monospace; font-weight:600; font-size:12px; }
  .cal-days.overdue { color:#fca5a5; }
  .cal-days.soon    { color:#fcd34d; }
  .cal-days.ok      { color:#86efac; }
  .summary-bar { display:flex; gap:12px; padding:14px; background:rgba(255,255,255,0.04); border-radius:8px; margin-bottom:14px; }
  .sum-pill { padding:10px 14px; border-radius:6px; font-size:12px; font-weight:600; flex:1; text-align:center; color:var(--card-text); }
  .sum-pill.red    { background:rgba(239,68,68,0.15);  color:#fca5a5; border:1.5px solid rgba(239,68,68,0.40); }
  .sum-pill.yellow { background:rgba(250,204,21,0.12); color:#fde68a; border:1.5px solid rgba(250,204,21,0.40); }
  .sum-pill.green  { background:rgba(34,197,94,0.12);  color:#86efac; border:1.5px solid rgba(34,197,94,0.40); }
  .sum-pill .big   { display:block; font-size:22px; line-height:1; margin-bottom:3px; }

  .modal-back { position:fixed; inset:0; background:rgba(0,0,0,0.65); display:none; align-items:center; justify-content:center; z-index:9000; backdrop-filter:blur(4px); }
  .modal-back.is-open { display:flex; }
  .modal-card { background:#1a1a1a; color:var(--card-text); border:1px solid rgba(255,255,255,0.10); border-radius:10px; max-width:420px; width:90%; box-shadow:0 16px 40px rgba(0,0,0,0.50); }
  .modal-head { padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.10); display:flex; justify-content:space-between; }
  .modal-head h3 { color:var(--card-text); }
  .modal-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
  .modal-body label { font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:var(--card-text-muted); font-weight:600; }
  .modal-body input, .modal-body textarea { width:100%; margin-top:4px; padding:7px 10px; border:1px solid rgba(255,255,255,0.20); border-radius:5px; font-size:13px; background:rgba(255,255,255,0.06); color:var(--card-text); }
  .modal-foot { padding:12px 18px; border-top:1px solid rgba(255,255,255,0.10); display:flex; gap:8px; justify-content:flex-end; }
  /* Light-Mode Override */
  body.theme-light .cal-row { border-bottom-color:#f0f0f0; color:#1a1a1a; }
  body.theme-light .cal-row:hover { background:#fafafa; }
  body.theme-light .cal-row.head { color:#737373; background:#fff; }
  body.theme-light .cal-row .meta-text { color:#737373; }
  body.theme-light .summary-bar { background:#fafafa; }
  body.theme-light .sum-pill.red    { background:#fef2f2; color:#b91c1c; border-color:#fca5a5; }
  body.theme-light .sum-pill.yellow { background:#fffbeb; color:#a16207; border-color:#fde68a; }
  body.theme-light .sum-pill.green  { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
  body.theme-light .cal-days.overdue { color:#ef4444; }
  body.theme-light .cal-days.soon    { color:#ca8a04; }
  body.theme-light .cal-days.ok      { color:#16a34a; }
  body.theme-light .modal-card { background:#fff; color:#1a1a1a; border-color:rgba(0,0,0,0.10); }
  body.theme-light .modal-head { border-bottom-color:#e5e5e5; }
  body.theme-light .modal-head h3 { color:#1a1a1a; }
  body.theme-light .modal-body label { color:#737373; }
  body.theme-light .modal-body input, body.theme-light .modal-body textarea { background:#fff; color:#1a1a1a; border-color:#d4d4d4; }
  body.theme-light .modal-foot { border-top-color:#e5e5e5; }
</style>

{% set overdue = items|selectattr('days_until_due','lt',0)|list %}
{% set due_soon = items|selectattr('days_until_due','ge',0)|selectattr('days_until_due','le',30)|list %}
{% set ok = items|selectattr('days_until_due','gt',30)|list %}

<div class="summary-bar">
  <div class="sum-pill red"><span class="big">{{ overdue|length }}</span>überfällig</div>
  <div class="sum-pill yellow"><span class="big">{{ due_soon|length }}</span>fällig in 30 Tagen</div>
  <div class="sum-pill green"><span class="big">{{ ok|length }}</span>im Plan</div>
</div>

<div class="card">
  <div class="card-header">
    <div>
      <h2>Prüfmittel (Mess- und Spannmittel)</h2>
      <p class="sub">DGUV V3 / ISO-9001 Kalibrierungs-Pflicht · Klick auf Eintrag = „heute geprüft" eintragen</p>
    </div>
  </div>
  <div>
    <div class="cal-row head">
      <div></div>
      <div>Bezeichnung</div>
      <div>Typ</div>
      <div>Letzte Prüfung</div>
      <div>Nächste Prüfung</div>
      <div>Tage</div>
    </div>
    {% if not items %}
      <div style="padding:30px; text-align:center; color:var(--card-text-muted); font-style:italic;">
        Keine Prüfmittel mit Intervall im aktuellen Fenster ({{ window_days }} Tage).
      </div>
    {% else %}
      {% for it in items %}
        {% set days = it.days_until_due %}
        {% if days < 0 %}{% set dot='red' %}{% set cls='overdue' %}
        {% elif days <= 30 %}{% set dot='yellow' %}{% set cls='soon' %}
        {% else %}{% set dot='green' %}{% set cls='ok' %}{% endif %}
        <div class="cal-row" style="cursor:pointer;" onclick="openInspectModal({{ it.id }}, '{{ it.ident|e }}', '{{ (it.description or '')|e }}')">
          <div class="cal-dot {{ dot }}"></div>
          <div>
            <strong>{{ it.ident }}</strong>
            {{ app_pill(it.source_app) }}
            {% if it.description %}<br><span class="meta-text">{{ it.description|truncate(60) }}</span>{% endif %}
          </div>
          <div class="meta-text">
            {% if it.item_type == 'measuring_equipment' %}Messmittel{% elif it.item_type == 'clamping' %}Spannmittel{% else %}{{ it.item_type or '—' }}{% endif %}
          </div>
          <div class="meta-text">{{ it.last_inspection_date or '—' }}</div>
          <div class="meta-text">{{ it.next_inspection_date or '—' }}</div>
          <div class="cal-days {{ cls }}">
            {% if days < 0 %}{{ -days }} T überfällig
            {% elif days == 0 %}heute
            {% else %}+{{ days }} T{% endif %}
          </div>
        </div>
      {% endfor %}
    {% endif %}
  </div>
</div>

<div class="modal-back" id="ins-modal">
  <div class="modal-card">
    <div class="modal-head">
      <h3 id="ins-title">Prüfung eintragen</h3>
      <button onclick="closeInspect()" class="btn btn-ghost btn-sm">✕</button>
    </div>
    <div class="modal-body">
      <div>
        <label>Werkzeug</label>
        <input id="ins-ident" disabled>
        <div id="ins-desc" style="font-size:11px; color:#737373; margin-top:4px;"></div>
      </div>
      <div>
        <label>Notiz (Prüfer, Ergebnis, etc.)</label>
        <textarea id="ins-note" rows="3" placeholder="z.B. „Kalibriert · Helmut Müller · innerhalb Toleranz""></textarea>
      </div>
      <p style="font-size:11px; color:#737373;">
        Setzt „letzte Prüfung" auf heute und berechnet „nächste Prüfung" automatisch
        anhand des konfigurierten Intervalls.
      </p>
    </div>
    <div class="modal-foot">
      <button onclick="closeInspect()" class="btn btn-ghost btn-sm">Abbrechen</button>
      <button onclick="saveInspection()" class="btn btn-primary btn-sm">Heute geprüft</button>
    </div>
  </div>
</div>

<script>
let currentItem = null;
function openInspectModal(id, ident, desc) {
  currentItem = id;
  document.getElementById('ins-ident').value = ident;
  document.getElementById('ins-desc').textContent = desc;
  document.getElementById('ins-note').value = '';
  document.getElementById('ins-modal').classList.add('is-open');
}
function closeInspect() {
  document.getElementById('ins-modal').classList.remove('is-open');
  currentItem = null;
}
function saveInspection() {
  if (!currentItem) return;
  const fd = new FormData();
  fd.append('note', document.getElementById('ins-note').value);
  fetch('/api/items/' + currentItem + '/mark-inspected', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}
</script>
{% endblock %}