{% extends "base.html" %}

{% block title %}{{ setup.name }} · Rüstplan{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/werkstatt/rüstpläne" class="hover:underline">Rüstpläne</a> / {{ setup.name }}</p>{% endblock %}
{% block heading %}Rüstplan: {{ setup.name }}{% endblock %}

{% block topbar_actions %}
  <select id="apply-machine" class="select" style="padding:5px 9px; border:1px solid #d4d4d4; border-radius:5px; font-size:12px;">
    <option value="">Maschine wählen…</option>
    {% for m in machines %}<option value="{{ m.id }}" {% if setup.machine_id == m.id %}selected{% endif %}>{{ m.name }}</option>{% endfor %}
  </select>
  <button onclick="applyToMachine()" class="btn btn-primary btn-sm">📦 In Magazin laden</button>
{% endblock %}

{% block content %}
<style>
  .meta-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; padding:14px; background:#fafafa; border-radius:8px; margin-bottom:14px; }
  .meta-item { font-size:11px; }
  .meta-item label { display:block; color:#737373; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; font-size:10px; }
  .meta-item span { font-size:13px; color:#1a1a1a; }

  .slot-table { width:100%; border-collapse:collapse; }
  .slot-table th { text-align:left; padding:8px 12px; font-size:10px; font-weight:600; color:#737373; text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid #e5e5e5; }
  .slot-table td { padding:10px 12px; border-bottom:1px solid #f0f0f0; font-size:12.5px; }
  .slot-table tr:hover { background:#fafafa; }
  .slot-no-cell { font-family:ui-monospace, monospace; font-weight:700; color:var(--brand-orange); }
  .add-row { padding:12px; background:var(--brand-orange-tint); border-radius:6px; display:flex; gap:8px; align-items:flex-end; }
  .add-row input, .add-row select { padding:6px 10px; border:1px solid #d4d4d4; border-radius:5px; font-size:12px; }
  .add-row label { font-size:10px; color:#737373; font-weight:600; }
  .item-search-box { position:relative; flex:1; }
  .item-search-results { position:absolute; top:100%; left:0; right:0; max-height:160px; overflow-y:auto; border:1px solid #e5e5e5; border-radius:5px; background:#fff; z-index:10; display:none; box-shadow:0 4px 12px rgba(0,0,0,0.10); }
  .item-search-result { padding:6px 10px; border-bottom:1px solid #f0f0f0; cursor:pointer; font-size:12px; }
  .item-search-result:hover { background:var(--brand-orange-tint); }
</style>

<div class="card">
  <div class="meta-grid">
    {% if setup.machine_name %}<div class="meta-item"><label>Maschine</label><span>{{ setup.machine_name }}</span></div>{% endif %}
    {% if setup.machine_group %}<div class="meta-item"><label>Gruppe</label><span>{{ setup.machine_group }}</span></div>{% endif %}
    {% if setup.material %}<div class="meta-item"><label>Material</label><span>{{ setup.material }}</span></div>{% endif %}
    {% if setup.process_type %}<div class="meta-item"><label>Bearbeitung</label><span>{{ setup.process_type }}</span></div>{% endif %}
    <div class="meta-item"><label>Werkzeuge</label><span>{{ setup['items']|length }}</span></div>
  </div>
  {% if setup.description %}<div style="padding:0 14px 14px; color:#525252; font-size:13px;">{{ setup.description }}</div>{% endif %}

  <div class="p-5">
    <h3 style="font-size:13px; font-weight:600; margin-bottom:10px;">Slots</h3>

    <div class="add-row" style="margin-bottom:14px;">
      <div>
        <label>Slot</label><br>
        <input type="number" id="add-slot" min="1" value="1" style="width:70px;">
      </div>
      <div class="item-search-box">
        <label>Werkzeug suchen</label><br>
        <input type="text" id="add-item-search" placeholder="VHM-Fräser Ø10, …" oninput="searchItems()" style="width:100%;">
        <div class="item-search-results" id="add-item-results"></div>
        <input type="hidden" id="add-item-id">
      </div>
      <div>
        <label>Menge</label><br>
        <input type="number" id="add-qty" value="1" min="1" style="width:70px;">
      </div>
      <button onclick="addItem()" class="btn btn-primary btn-sm">+ Hinzufügen</button>
    </div>

    {% if setup['items'] %}
    <table class="slot-table">
      <thead>
        <tr><th>Slot</th><th>Werkzeug</th><th>Beschreibung</th><th>Menge</th><th>Notiz</th><th></th></tr>
      </thead>
      <tbody>
        {% for it in setup['items'] %}
        <tr>
          <td class="slot-no-cell">{{ "%02d"|format(it.slot_no) }}</td>
          <td><strong>{{ it.item_ident or it.tool_ident or '—' }}</strong></td>
          <td>{{ it.item_description or it.tool_name or '' }}</td>
          <td>{{ it.quantity }}</td>
          <td style="color:#737373;">{{ it.note or '' }}</td>
          <td style="text-align:right;">
            <button onclick="removeItem({{ it.slot_no }})" class="btn btn-ghost btn-sm" style="color:#dc2626;">✕</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
      <p class="text-sm text-neutral-500 italic">Noch keine Werkzeuge in diesem Rüstplan.</p>
    {% endif %}
  </div>
</div>

<script>
const SETUP_ID = {{ setup.id }};

let searchTimer = null;
function searchItems() {
  clearTimeout(searchTimer);
  const q = document.getElementById('add-item-search').value.trim();
  if (q.length < 2) {
    document.getElementById('add-item-results').style.display = 'none';
    return;
  }
  searchTimer = setTimeout(() => {
    fetch('/api/shopfloor/items/search?q=' + encodeURIComponent(q) + '&types=tool,measuring_equipment&limit=20')
      .then(r => r.json())
      .then(items => {
        const box = document.getElementById('add-item-results');
        if (!items || items.length === 0) {
          box.innerHTML = '<div style="padding:8px 10px;color:#737373;font-style:italic;">Keine Treffer</div>';
        } else {
          box.innerHTML = items.map(i =>
            '<div class="item-search-result" data-id="' + i.id + '" data-text="' +
            ((i.ident || '') + ' — ' + (i.description || '').substring(0,40)).replace(/"/g, '&quot;') +
            '">' +
            '<strong>' + escHtml(i.ident || '?') + '</strong>' +
            (i.description ? ' — ' + escHtml(i.description.substring(0,50)) : '') +
            '</div>'
          ).join('');
          box.querySelectorAll('.item-search-result').forEach(el => {
            el.onclick = function() {
              document.getElementById('add-item-id').value = el.dataset.id;
              document.getElementById('add-item-search').value = el.dataset.text;
              box.style.display = 'none';
            };
          });
        }
        box.style.display = 'block';
      });
  }, 250);
}
function escHtml(s) {
  return String(s == null ? '' : s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}
function addItem() {
  const itemId = document.getElementById('add-item-id').value;
  const slot = document.getElementById('add-slot').value;
  const qty = document.getElementById('add-qty').value;
  if (!itemId || !slot) { alert('Slot und Werkzeug erforderlich.'); return; }
  const fd = new FormData();
  fd.append('slot_no', slot);
  fd.append('item_id', itemId);
  fd.append('quantity', qty);
  fetch('/api/tool-setups/' + SETUP_ID + '/items', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}
function removeItem(slot) {
  if (!confirm('Slot ' + slot + ' aus diesem Rüstplan entfernen?')) return;
  fetch('/api/tool-setups/' + SETUP_ID + '/items/' + slot + '/delete', { method:'POST' })
    .then(r => r.json())
    .then(d => { if (d.ok) location.reload(); });
}
function applyToMachine() {
  const mid = document.getElementById('apply-machine').value;
  if (!mid) { alert('Bitte eine Maschine wählen.'); return; }
  if (!confirm('Rüstplan in Magazin der gewählten Maschine laden? Bestehende Belegung wird überschrieben.')) return;
  const fd = new FormData();
  fd.append('machine_id', mid);
  fetch('/api/tool-setups/' + SETUP_ID + '/apply', { method:'POST', body: fd })
    .then(r => r.json())
    .then(d => {
      if (d.ok) {
        if (confirm(d.slots_filled + ' Slots geladen. Zum Magazin springen?')) {
          location.href = '/werkstatt/maschinen/' + mid + '/magazin';
        }
      }
    });
}
</script>
{% endblock %}