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

{% block title %}Unzugeordnete Fächer · Werkzeug-Schränke{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/werkstatt/lager/schraenke" class="hover:underline">Schränke</a> / Unzugeordnete Fächer</p>{% endblock %}
{% block heading %}Unzugeordnete Fächer ({{ data.total }}){% endblock %}

{% block content %}
<style>
  .un-table { width:100%; border-collapse:collapse; font-size:12px; }
  .un-table th { text-align:left; padding:8px 10px; font-size:10px; font-weight:600; color:var(--card-text-muted); text-transform:uppercase; letter-spacing:0.06em; border-bottom:1px solid rgba(255,255,255,0.10); background:rgba(255,255,255,0.04); position:sticky; top:0; z-index:5; }
  .un-table td { padding:9px 10px; border-bottom:1px solid rgba(255,255,255,0.06); color:var(--card-text); vertical-align:middle; }
  .un-table tr:hover td { background:rgba(255,255,255,0.04); }
  .un-table tr.selected td { background:rgba(242,88,27,0.12); }
  .code-cell { font-family:ui-monospace,monospace; font-weight:600; color:var(--card-text); font-size:11.5px; }
  .inhalt-cell { color:var(--card-text-muted); font-size:11px; }
  .count-badge { background:var(--brand-orange); color:#fff; font-size:10px; padding:2px 7px; border-radius:8px; font-weight:600; }
  .pager { display:flex; gap:6px; justify-content:center; padding:14px; align-items:center; }
  .pager a, .pager span { padding:5px 12px; border:1px solid rgba(255,255,255,0.15); border-radius:5px; font-size:11px; text-decoration:none; color:var(--card-text); }
  .pager a:hover { background:rgba(242,88,27,0.20); border-color:var(--brand-orange); }
  .pager .current { background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
  body.theme-light .un-table th { color:#737373; border-bottom-color:#e5e5e5; background:#fff; }
  body.theme-light .un-table td { color:#1a1a1a; border-bottom-color:#f0f0f0; }
  body.theme-light .un-table tr:hover td { background:#fafafa; }
  body.theme-light .code-cell { color:#525252; }
  body.theme-light .inhalt-cell { color:#525252; }

  /* Bulk-Action-Bar */
  .bulk-bar { display:flex; gap:10px; align-items:center; padding:12px 14px; background:rgba(53,102,146,0.20); border:1.5px solid var(--brand-blue); border-radius:8px; margin-bottom:14px; flex-wrap:wrap; }
  .bulk-bar.has-selection { background:rgba(242,88,27,0.20); border-color:var(--brand-orange); }
  .bulk-count { font-weight:700; font-size:14px; color:var(--card-text); }
  .bulk-target { padding:7px 11px; border:1px solid rgba(255,255,255,0.20); background:rgba(255,255,255,0.06); color:var(--card-text); border-radius:6px; font-size:13px; min-width:240px; }
  .info-banner { background:rgba(53,102,146,0.15); border-left:3px solid var(--brand-blue); padding:12px 16px; border-radius:6px; margin-bottom:14px; font-size:13px; color:var(--card-text); }

  .sel-checkbox { width:16px; height:16px; cursor:pointer; accent-color:var(--brand-orange); }
</style>

{% set _moved = request.query_params.get('moved') if request else '' %}
{% if _moved %}
<div style="background:rgba(34,197,94,0.15);border:1.5px solid #22c55e;color:#86efac;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;">
  ✓ {{ _moved }} Fächer erfolgreich in die Schublade verschoben.
</div>
{% endif %}

{% set _err = request.query_params.get('error') if request else '' %}
{% if _err %}
<div style="background:rgba(239,68,68,0.15);border:1.5px solid #ef4444;color:#fca5a5;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;">
  {{ _err }}
</div>
{% endif %}

<div class="info-banner">
  <strong>So funktionierts:</strong> Diese Fächer wurden aus dem Import übernommen, sind aber noch keinem Schrank zugeordnet.
  Wähle die Fächer (Checkbox) und verschiebe sie unten in eine passende Schublade.
  <strong>Tipp:</strong> Werkzeuge (WK) und Material (LG) sollten getrennt in eigene Schränke — wähle den Tab oben, dann zeigt das Dropdown nur Schubladen die passen.
</div>

{# --- Filter-Tabs nach Quell-Typ --- #}
<div style="display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap;">
  <a href="/werkstatt/lager/schraenke/0" class="filter-tab {% if not src_filter %}active{% endif %}">
    Alle <span class="tab-count">{{ data.total_all }}</span>
  </a>
  <a href="/werkstatt/lager/schraenke/0?src=tools" class="filter-tab {% if src_filter=='tools' %}active{% endif %}">
    Werkzeuge (WK) <span class="tab-count">{{ data.per_source.get('tools', 0) }}</span>
  </a>
  <a href="/werkstatt/lager/schraenke/0?src=management" class="filter-tab {% if src_filter=='management' %}active{% endif %}">
    Material / Lager (LG) <span class="tab-count">{{ data.per_source.get('management', 0) }}</span>
  </a>
</div>
<style>
  .filter-tab { padding:8px 16px; border-radius:6px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.10); color:var(--card-text); text-decoration:none; font-size:13px; font-weight:500; display:flex; align-items:center; gap:8px; transition:all 120ms; }
  .filter-tab:hover { background:rgba(255,255,255,0.10); border-color:var(--brand-orange); }
  .filter-tab.active { background:var(--brand-orange); color:#fff; border-color:var(--brand-orange); }
  .tab-count { background:rgba(0,0,0,0.30); padding:1px 8px; border-radius:10px; font-size:11px; font-weight:700; }
  .filter-tab.active .tab-count { background:rgba(255,255,255,0.25); }
  body.theme-light .filter-tab { background:#fff; border-color:#e5e5e5; color:#1a1a1a; }
  body.theme-light .filter-tab:hover { background:#fafafa; }
</style>

{% if not drawers %}
<div style="background:rgba(245,158,11,0.15);border:1.5px solid #f59e0b;color:#fcd34d;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;">
  ⚠ Es gibt noch keine Schubladen. Lege zuerst <a href="/werkstatt/lager/schraenke" style="color:var(--brand-orange);text-decoration:underline;">einen Schrank mit Schubladen</a> an, dann kannst du Fächer hierhin verschieben.
</div>
{% endif %}

{# --- Code-Prefix-Filter + Auto-Sort --- #}
<div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:14px; align-items:center;">
  <form method="get" action="/werkstatt/lager/schraenke/0" style="display:flex; gap:6px; align-items:center; flex:1; min-width:280px;">
    {% if src_filter %}<input type="hidden" name="src" value="{{ src_filter }}">{% endif %}
    <label style="font-size:11px;font-weight:600;color:var(--card-text-muted);text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap;">Code-Prefix:</label>
    <input type="text" name="prefix" value="{{ code_prefix }}" placeholder="z.B. A-01 oder TP-1000" style="padding:7px 11px;border:1px solid rgba(255,255,255,0.20);background:rgba(255,255,255,0.06);color:var(--card-text);border-radius:6px;font-size:13px;flex:1;font-family:ui-monospace,monospace;">
    <button type="submit" class="btn btn-sm btn-secondary">Filter</button>
    {% if code_prefix %}<a href="/werkstatt/lager/schraenke/0{% if src_filter %}?src={{ src_filter }}{% endif %}" class="btn btn-sm btn-secondary">× Zurücksetzen</a>{% endif %}
  </form>

  {% if auto_sort_total > 0 %}
  <form method="post" action="/werkstatt/lager/schraenke/auto-sort" style="display:flex;align-items:center;gap:6px;" onsubmit="return confirm('Auto-Sort verschiebt {{ auto_sort_total }} Fächer in {{ auto_sort_plan|length }} passende Schubladen. Bestätigen?')">
    <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
    <button type="submit" class="btn btn-primary" title="Sortiert automatisch Fächer in Schubladen mit passendem Namens-Prefix">
      ⚡ Auto-Sort ({{ auto_sort_total }} Fächer → {{ auto_sort_plan|length }} Schubladen)
    </button>
  </form>
  {% endif %}
</div>

{% if auto_sort_plan %}
<details style="margin-bottom:14px;background:rgba(53,102,146,0.10);border:1px solid rgba(53,102,146,0.30);border-radius:6px;padding:10px 14px;">
  <summary style="cursor:pointer;font-size:12px;color:var(--card-text);font-weight:600;">📋 Auto-Sort-Vorschau — welche Fächer wohin wandern</summary>
  <table style="margin-top:10px;width:100%;font-size:11px;border-collapse:collapse;">
    <thead><tr style="text-align:left;color:var(--card-text-muted);"><th style="padding:6px 8px;">Pattern</th><th>Ziel-Schublade</th><th style="text-align:right;">Anzahl</th></tr></thead>
    <tbody>
    {% for p in auto_sort_plan %}
    <tr style="border-top:1px solid rgba(255,255,255,0.06);">
      <td style="padding:6px 8px;font-family:ui-monospace,monospace;color:var(--brand-orange);">{{ p.match_prefix }}-*</td>
      <td style="color:var(--card-text);">{{ p.zone_name or '?' }} / {{ p.group_name }}</td>
      <td style="text-align:right;color:var(--card-text);font-weight:600;">{{ p.matching_count }}</td>
    </tr>
    {% endfor %}
    </tbody>
  </table>
</details>
{% endif %}

<form method="post" action="/werkstatt/lager/schraenke/bulk-assign-locations" id="bulkForm">
  <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">

  <div class="bulk-bar" id="bulkBar">
    <span class="bulk-count"><span id="selCount">0</span> Fächer ausgewählt</span>
    <span style="color:var(--card-text-muted);">→</span>
    <select name="target_group_id" class="bulk-target" required {% if not drawers %}disabled{% endif %}>
      <option value="">— Ziel-Schublade wählen —</option>
      {% for d in drawers %}
      <option value="{{ d.id }}">
        {% if d.zone_source == 'tools' %}[WK]{% elif d.zone_source == 'management' %}[LG]{% else %}[—]{% endif %}
        {{ d.zone_name or '?' }} / {{ d.name }}
      </option>
      {% endfor %}
    </select>
    <button type="submit" class="btn btn-primary" id="moveBtn" disabled>In Schublade verschieben</button>
  </div>

  <div class="card">
    <div class="card-header" style="display:flex;justify-content:space-between;align-items:center;">
      <div>
        <h2>Locations ohne Schubladen-Zuordnung</h2>
        <p class="sub">Aus dem Werkzeug-Import übernommen — können hier in Schränke sortiert werden</p>
      </div>
      <div style="font-size:12px;color:var(--card-text-muted);">Seite {{ page }} von {{ total_pages }}</div>
    </div>
    <div style="max-height:65vh; overflow-y:auto;">
      {% if not data.locations %}
      <div class="p-5 text-sm" style="color:var(--card-text-muted); font-style:italic;">Keine unzugeordneten Fächer in diesem Bereich.</div>
      {% else %}
      <table class="un-table">
        <thead>
          <tr>
            <th style="width:38px;"><input type="checkbox" class="sel-checkbox" id="selAll" title="Alle auf dieser Seite"></th>
            <th style="width:50px;">Quelle</th>
            <th style="width:30%;">Code</th>
            <th style="width:8%;">Items</th>
            <th>Inhalt</th>
          </tr>
        </thead>
        <tbody>
          {% for l in data.locations %}
          <tr data-loc-id="{{ l.id }}">
            <td><input type="checkbox" class="sel-checkbox loc-check" name="loc_id" value="{{ l.id }}"></td>
            <td>{{ app_pill(l.source_app) }}</td>
            <td class="code-cell">{{ l.code }}</td>
            <td>{% if l.item_count %}<span class="count-badge">{{ l.item_count }}</span>{% else %}<span style="color:var(--card-text-muted);">—</span>{% endif %}</td>
            <td class="inhalt-cell">{{ (l.items_short or '—')|truncate(80) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% endif %}
    </div>
    {% if total_pages > 1 %}
    <div class="pager">
      {% if page > 1 %}<a href="?page=1">«</a><a href="?page={{ page - 1 }}">‹ Vor</a>{% endif %}
      <span class="current">{{ page }} / {{ total_pages }}</span>
      {% if page < total_pages %}<a href="?page={{ page + 1 }}">Nach ›</a><a href="?page={{ total_pages }}">»</a>{% endif %}
    </div>
    {% endif %}
  </div>
</form>

<script>
(function(){
  const selAll = document.getElementById('selAll');
  const checks = document.querySelectorAll('.loc-check');
  const countSpan = document.getElementById('selCount');
  const moveBtn = document.getElementById('moveBtn');
  const bulkBar = document.getElementById('bulkBar');

  function update() {
    const n = document.querySelectorAll('.loc-check:checked').length;
    countSpan.textContent = n;
    moveBtn.disabled = n === 0;
    bulkBar.classList.toggle('has-selection', n > 0);
    checks.forEach(c => {
      const tr = c.closest('tr');
      if (tr) tr.classList.toggle('selected', c.checked);
    });
  }

  if (selAll) {
    selAll.addEventListener('change', () => {
      checks.forEach(c => c.checked = selAll.checked);
      update();
    });
  }
  checks.forEach(c => c.addEventListener('change', update));
  update();
})();
</script>
{% endblock %}