{% extends "base.html" %}

{% block title %}Wartungs-Plan{% endblock %}
{% block heading %}🔧 Maschinen-Wartungs-Plan{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Wartung</p>{% endblock %}

{% block topbar_actions %}
  {% if due_count and due_count > 0 %}
    <span class="badge"
          style="background:rgba(239,68,68,0.15);color:#dc2626;font-size:0.75rem;padding:0.25rem 0.625rem;">
      ⚠ {{ due_count }} fällig{% if due_count != 1 %}{% endif %}
    </span>
  {% endif %}
  <button type="button" class="btn btn-primary btn-sm"
          onclick="document.getElementById('new-task-form').classList.toggle('hidden')">
    + Wartungs-Task
  </button>
{% endblock %}

{% block content %}
<style>
  table.maint { width:100%; border-collapse:collapse; }
  table.maint th, table.maint td { padding:10px 12px; text-align:left; border-bottom:1px solid var(--card-border-2); }
  table.maint th { font-size:11px; text-transform:uppercase; color:var(--card-text-muted); font-weight:600; letter-spacing:0.05em; }
  .ratio-bar { height:6px; background:rgba(0,0,0,0.10); border-radius:3px; overflow:hidden; max-width:140px; }
  .ratio-bar .fill { height:100%; transition: width 0.2s; }
  .status-pill { display:inline-flex; padding:2px 8px; border-radius:9999px; font-size:11px; font-weight:600; }
  .status-ok { background:rgba(16,185,129,0.15); color:#059669; }
  .status-warn { background:rgba(245,158,11,0.15); color:#b45309; }
  .status-overdue { background:rgba(239,68,68,0.15); color:#dc2626; }
  .status-unknown { background:rgba(115,115,115,0.15); color:#737373; }
</style>

<!-- Filter / Maschinen-Auswahl -->
<div class="card" style="margin-bottom:14px;">
  <div class="card-body" style="padding:12px 16px;">
    <form method="get" action="/maintenance" style="display:flex;gap:12px;align-items:center;">
      <label class="text-xs text-neutral-500">Maschine:</label>
      <select name="machine_id" class="select" style="font-size:12px;width:240px;" onchange="this.form.submit()">
        <option value="">Alle Maschinen</option>
        {% for m in machines %}
          <option value="{{ m.id }}" {% if selected_machine_id == m.id %}selected{% endif %}>{{ m.name }}</option>
        {% endfor %}
      </select>
      <a href="/maintenance" class="text-xs text-blue-700 hover:underline">Filter zurücksetzen</a>
    </form>
  </div>
</div>

<!-- Neuen Task anlegen -->
<div id="new-task-form" class="card hidden" style="margin-bottom:14px;">
  <div class="card-header"><h3>Neuer Wartungs-Task</h3></div>
  <form method="post" action="/maintenance/new" class="card-body" style="padding:18px;">
    {{ csrf_field(request) if csrf_field is defined else '' }}
    <div style="display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:14px 16px;">
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Maschine *</label>
        <select name="machine_id" class="select mt-1 w-full" required>
          <option value="">— wählen —</option>
          {% for m in machines %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Bezeichnung *</label>
        <input class="input mt-1 w-full" type="text" name="name" required
               placeholder="z.B. Ölwechsel, Sicherheits-Check, Spannmittel-Kalibrierung">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Intervall-Typ</label>
        <select name="interval_kind" class="select mt-1 w-full">
          <option value="hours">Betriebsstunden</option>
          <option value="days">Tage</option>
          <option value="months">Monate</option>
          <option value="cycles">Zyklen / Stückzahl</option>
        </select>
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Intervall-Wert *</label>
        <input class="input mt-1 w-full nums" type="number" step="0.1" min="0" name="interval_value" required
               placeholder="z.B. 500 (Stunden)">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Dauer (Min)</label>
        <input class="input mt-1 w-full nums" type="number" min="0" name="estimated_duration_min"
               placeholder="optional">
      </div>
      <div>
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Erw. Kosten (€)</label>
        <input class="input mt-1 w-full nums" type="number" step="0.01" min="0" name="estimated_cost_eur"
               placeholder="optional">
      </div>
      <div style="grid-column: 1 / -1;">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Externer Anbieter</label>
        <input class="input mt-1 w-full" type="text" name="external_provider"
               placeholder="z.B. DEKRA, Heller-Service — leer wenn intern">
      </div>
      <div style="grid-column: 1 / -1;">
        <label class="text-[10px] uppercase tracking-wider font-semibold text-neutral-500">Beschreibung</label>
        <textarea class="input mt-1 w-full" name="description" rows="2"
                  placeholder="z.B. Hydraulik-Öl wechseln · alle 500 Betriebsstunden gemäß Hersteller-Wartungsplan"></textarea>
      </div>
    </div>
    <div style="margin-top:14px;display:flex;gap:8px;justify-content:flex-end;">
      <button type="button" class="btn btn-secondary"
              onclick="document.getElementById('new-task-form').classList.add('hidden')">Abbrechen</button>
      <button type="submit" class="btn btn-primary">Anlegen</button>
    </div>
  </form>
</div>

<!-- Task-Liste -->
<div class="card">
  <div class="card-header">
    <div>
      <h2>{{ tasks|length }} Wartungs-Task{% if tasks|length != 1 %}s{% endif %}</h2>
      <p class="sub">Sortiert nach Fälligkeit · Stunden-basiert wird live aus den time_entries der Maschine gerechnet</p>
    </div>
  </div>
  <table class="maint">
    <thead>
      <tr>
        <th>Maschine</th>
        <th>Task</th>
        <th>Intervall</th>
        <th>Letzter Termin</th>
        <th>Fortschritt</th>
        <th>Status</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {% for t in tasks %}
        {% set st = t.status_info %}
        {% set color = '#10b981' %}
        {% if st.status == 'warn' %}{% set color = '#f59e0b' %}{% endif %}
        {% if st.status == 'overdue' %}{% set color = '#ef4444' %}{% endif %}
        <tr>
          <td><strong>{{ t.machine_name or '?' }}</strong></td>
          <td>
            <a href="/maintenance/{{ t.id }}" class="text-blue-700 hover:underline">{{ t.name }}</a>
            {% if t.external_provider %}<div class="text-[10px] text-neutral-500">extern: {{ t.external_provider }}</div>{% endif %}
          </td>
          <td>
            {% if t.interval_kind == 'hours' %}{{ t.interval_value|round(1) }} h{% endif %}
            {% if t.interval_kind == 'days' %}{{ t.interval_value|round|int }} Tage{% endif %}
            {% if t.interval_kind == 'months' %}{{ t.interval_value|round|int }} Monate{% endif %}
            {% if t.interval_kind == 'cycles' %}{{ t.interval_value|round|int }} Zyklen{% endif %}
          </td>
          <td>
            {% if t.last_done_at %}
              <span class="nums" style="font-size:12px;">{{ t.last_done_at[:10] }}</span>
              {% if t.last_done_value %}
                <div class="text-[10px] text-neutral-500 nums">bei {{ t.last_done_value|round(1) }}</div>
              {% endif %}
            {% else %}
              <span class="text-xs text-neutral-500">— noch nie —</span>
            {% endif %}
          </td>
          <td>
            {% if st.ratio_pct is not none %}
              <div class="ratio-bar">
                <div class="fill" style="width:{{ [st.ratio_pct, 100]|min }}%;background:{{ color }};"></div>
              </div>
              <div class="text-[10px] nums" style="color:{{ color }};font-weight:600;margin-top:2px;">
                {{ st.ratio_pct|round|int }} %
                {% if st.hours_since_done is defined %} · {{ st.hours_since_done|round|int }} h{% endif %}
                {% if st.cycles_since_done is defined %} · {{ st.cycles_since_done }} Zyk{% endif %}
                {% if st.days_to_due is defined %}
                  {% if st.days_to_due > 0 %} · in {{ st.days_to_due|round|int }} T{% else %} · {{ (st.days_to_due*-1)|round|int }} T überfällig{% endif %}
                {% endif %}
              </div>
            {% endif %}
          </td>
          <td>
            <span class="status-pill status-{{ st.status }}">
              {% if st.status == 'ok' %}OK{% endif %}
              {% if st.status == 'warn' %}Bald fällig{% endif %}
              {% if st.status == 'overdue' %}Überfällig{% endif %}
              {% if st.status == 'unknown' %}—{% endif %}
            </span>
          </td>
          <td>
            <details>
              <summary class="btn btn-sm btn-secondary cursor-pointer list-none">Erledigt ✓</summary>
              <form method="post" action="/maintenance/{{ t.id }}/done"
                    style="margin-top:8px;display:flex;flex-direction:column;gap:6px;width:240px;">
                <input class="input" type="number" name="duration_min" placeholder="Dauer (Min)" style="font-size:11px;">
                <input class="input" type="number" step="0.01" name="cost_eur" placeholder="Kosten (€)" style="font-size:11px;">
                <textarea class="input" name="notes" rows="2" placeholder="Notiz"
                          style="font-size:11px;"></textarea>
                <button type="submit" class="btn btn-primary btn-sm">Wartung als erledigt eintragen</button>
              </form>
            </details>
          </td>
        </tr>
      {% else %}
        <tr><td colspan="7" style="text-align:center;padding:30px;color:var(--card-text-muted);">
          Keine Wartungs-Tasks angelegt — oben „+ Wartungs-Task" anklicken um den ersten anzulegen.
        </td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

<p style="margin-top:14px;font-size:11px;color:var(--card-text-muted);">
  <strong>Hinweis:</strong> Stunden-basierte Tasks zählen automatisch alle Arbeits- und
  Rüstzeiten (entry_type=work/setup) auf der Maschine seit der letzten Wartung.
  Zyklen-basierte Tasks summieren parts_good aus production_jobs.
  Tage/Monate-basierte Tasks vergleichen das letzte Wartungs-Datum mit heute.
</p>

<style>.hidden { display: none; }</style>
{% endblock %}