{% extends "base.html" %}

{% block title %}Rüstpläne · Werkstatt{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500">Werkstatt / Rüstpläne</p>{% endblock %}
{% block heading %}Rüstpläne / Tool-Setups{% endblock %}

{% block topbar_actions %}
  <button onclick="openNewModal()" class="btn btn-primary btn-sm">+ Neuer Rüstplan</button>
{% endblock %}

{% block content %}
<style>
  .setup-card { border:1px solid var(--subcard-border); border-radius:8px; padding:12px 14px; margin-bottom:8px; background:var(--subcard-bg); cursor:pointer; transition:all 120ms; color:var(--card-text); }
  .setup-card:hover { border-color:var(--brand-orange); background:var(--subcard-bg-hover); box-shadow:0 2px 8px rgba(242,88,27,0.20); }
  .setup-meta { font-size:11px; color:var(--card-text-muted); margin-top:3px; }
  .badge { display:inline-block; padding:2px 7px; border-radius:3px; font-size:10px; font-weight:600; margin-right:4px; background:rgba(255,255,255,0.10); color:var(--card-text); }
  .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:480px; 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; color:var(--card-text); }
  .modal-body { padding:18px; display:flex; flex-direction:column; gap:12px; }
  .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 select, .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 .setup-card { border-color:#e5e5e5; background:#fff; color:#1a1a1a; }
  body.theme-light .setup-meta { color:#737373; }
  body.theme-light .badge { background:#f5f5f5; color:#525252; }
  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; color:#1a1a1a; }
  body.theme-light .modal-body label { color:#737373; }
  body.theme-light .modal-body input, body.theme-light .modal-body select, body.theme-light .modal-body textarea { background:#fff; color:#1a1a1a; border-color:#d4d4d4; }
  body.theme-light .modal-foot { border-top-color:#e5e5e5; }
</style>

<div class="card">
  <div class="card-header">
    <div>
      <h2>Wiederverwendbare Werkzeug-Setups</h2>
      <p class="sub">Komplette Magazin-Belegungen für wiederkehrende Bearbeitungen — beim Rüsten mit einem Klick laden</p>
    </div>
    {% if machines %}
    <form method="get" class="ml-auto">
      <select name="machine_id" onchange="this.form.submit()" class="select" style="padding:5px 9px; border:1px solid #d4d4d4; border-radius:5px; font-size:12px;">
        <option value="">Alle Maschinen</option>
        {% for m in machines %}
        <option value="{{ m.id }}" {% if filter_machine_id == m.id %}selected{% endif %}>{{ m.name }}</option>
        {% endfor %}
      </select>
    </form>
    {% endif %}
  </div>
  <div class="p-5">
    {% if not setups %}
      <p class="text-sm text-neutral-500 italic">Noch keine Rüstpläne angelegt. „+ Neuer Rüstplan" oben rechts erstellt einen.</p>
    {% else %}
      {% for s in setups %}
      <div class="setup-card" onclick="location.href='/werkstatt/rüstpläne/{{ s.id }}'">
        <div style="display:flex; justify-content:space-between; align-items:flex-start;">
          <div style="flex:1;">
            <strong>{{ s.name }}</strong>
            <div class="setup-meta">
              {% if s.machine_name %}<span class="badge">{{ s.machine_name }}</span>{% endif %}
              {% if s.machine_group %}<span class="badge">{{ s.machine_group }}</span>{% endif %}
              {% if s.material %}<span class="badge">{{ s.material }}</span>{% endif %}
              {% if s.process_type %}<span class="badge">{{ s.process_type }}</span>{% endif %}
              <span class="badge">{{ s.item_count }} Werkzeug{% if s.item_count != 1 %}e{% endif %}</span>
            </div>
            {% if s.description %}<div class="setup-meta">{{ s.description }}</div>{% endif %}
          </div>
        </div>
      </div>
      {% endfor %}
    {% endif %}
  </div>
</div>

<!-- Modal: Neuer Rüstplan -->
<div class="modal-back" id="new-modal">
  <div class="modal-card">
    <div class="modal-head">
      <h3>Neuer Rüstplan</h3>
      <button onclick="closeNewModal()" class="btn btn-ghost btn-sm">✕</button>
    </div>
    <form id="new-form" onsubmit="return saveNew(event)">
      <div class="modal-body">
        <div>
          <label>Name *</label>
          <input name="name" required placeholder="z.B. Aluminium-2-spannig">
        </div>
        <div style="display:flex; gap:10px;">
          <div style="flex:1;">
            <label>Maschine</label>
            <select name="machine_id">
              <option value="">— wählen —</option>
              {% for m in machines %}<option value="{{ m.id }}">{{ m.name }}</option>{% endfor %}
            </select>
          </div>
          <div style="flex:1;">
            <label>Gruppe</label>
            <input name="machine_group" placeholder="Fräsen / Drehen">
          </div>
        </div>
        <div style="display:flex; gap:10px;">
          <div style="flex:1;">
            <label>Material</label>
            <input name="material" placeholder="z.B. 1.0503">
          </div>
          <div style="flex:1;">
            <label>Bearbeitung</label>
            <input name="process_type" placeholder="z.B. Schruppen">
          </div>
        </div>
        <div>
          <label>Beschreibung</label>
          <textarea name="description" rows="2" placeholder="optional"></textarea>
        </div>
      </div>
      <div class="modal-foot">
        <button type="button" onclick="closeNewModal()" class="btn btn-ghost btn-sm">Abbrechen</button>
        <button type="submit" class="btn btn-primary btn-sm">Anlegen</button>
      </div>
    </form>
  </div>
</div>

<script>
function openNewModal() { document.getElementById('new-modal').classList.add('is-open'); }
function closeNewModal() { document.getElementById('new-modal').classList.remove('is-open'); }
function saveNew(e) {
  e.preventDefault();
  const fd = new FormData(document.getElementById('new-form'));
  fetch('/api/tool-setups/new', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (d.ok) location.href = '/werkstatt/rüstpläne/' + d.setup_id; });
  return false;
}
</script>
{% endblock %}