{% extends "base.html" %}

{% block title %}{{ zone.name }} · Schrank{% endblock %}
{% block breadcrumb %}<p class="text-xs text-neutral-500"><a href="/werkstatt/lager/schraenke" class="hover:underline">Schränke</a> / {{ zone.name }}</p>{% endblock %}
{% block heading %}{{ zone.name }}{% endblock %}

{% block content %}
<style>
  .draw-card { border:1px solid rgba(255,255,255,0.10); border-radius:10px; margin-bottom:14px; background:var(--card-bg); overflow:hidden; }
  .draw-head { padding:12px 16px; background:rgba(255,255,255,0.03); border-bottom:1px solid rgba(255,255,255,0.06); display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; }
  .draw-head strong { font-size:13px; color:var(--card-text); }
  .draw-actions { display:flex; gap:6px; align-items:center; }
  .loc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; padding:14px; }
  .loc-cell { border:1.5px solid rgba(255,255,255,0.10); border-radius:6px; padding:8px 10px; min-height:62px; background:rgba(255,255,255,0.03); font-size:11px; transition:all 120ms; cursor:pointer; text-decoration:none; color:inherit; display:block; }
  .loc-cell:hover { border-color:var(--brand-orange); box-shadow:0 2px 8px rgba(242,88,27,0.20); transform:translateY(-1px); }
  .loc-cell.empty { opacity:0.7; }
  .loc-cell.has-items { border-color:var(--brand-orange); background:linear-gradient(180deg, rgba(242,88,27,0.12) 0%, rgba(242,88,27,0.04) 100%); }
  .loc-code { font-family:ui-monospace,monospace; font-weight:700; color:var(--card-text); font-size:11px; letter-spacing:0.03em; display:flex; justify-content:space-between; }
  .loc-items { margin-top:4px; color:var(--card-text); font-weight:500; line-height:1.3; word-break:break-word; font-size:10px; }
  .loc-count { background:var(--brand-orange); color:#fff; font-size:10px; padding:1px 6px; border-radius:8px; font-weight:600; }

  .meta-pill { display:inline-block; padding:2px 8px; background:rgba(53,102,146,0.18); color:rgba(255,255,255,0.85); border-radius:12px; font-size:11px; font-weight:500; margin-right:4px; }
  .empty-wizard { background:linear-gradient(135deg,rgba(53,102,146,0.10),rgba(242,88,27,0.06)); border:1.5px dashed var(--brand-orange); border-radius:12px; padding:28px; margin-bottom:14px; }
  .wizard-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
  @media (max-width:700px) { .wizard-grid { grid-template-columns:1fr; } }
  .wizard-form { background:rgba(0,0,0,0.25); padding:18px; border-radius:8px; }
  .wizard-form h4 { margin:0 0 6px 0; font-size:14px; color:var(--brand-orange); }
  .wizard-form .hint { font-size:11px; color:rgba(255,255,255,0.55); margin-bottom:12px; line-height:1.5; }
  .wizard-form .row { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:8px; }
  .wizard-form label { font-size:10px; text-transform:uppercase; letter-spacing:0.04em; color:rgba(255,255,255,0.65); font-weight:600; display:block; margin-bottom:2px; }

  .modal-bg { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:1000; align-items:center; justify-content:center; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
  .modal-bg.open { display:flex; }
  .modal-card { background:#1a1a1a; color:rgba(255,255,255,0.95); border-radius:12px; padding:28px; width:min(480px, 92vw); box-shadow:0 20px 50px rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.10); }
  .modal-card h3 { margin:0 0 6px 0; font-size:17px; color:var(--brand-orange); }
  .modal-card .hint { font-size:12px; color:rgba(255,255,255,0.55); margin-bottom:18px; line-height:1.5; }
  .form-field { display:flex; flex-direction:column; gap:6px; margin-bottom:14px; }
  .form-field label { font-size:11px; font-weight:600; color:rgba(255,255,255,0.75); text-transform:uppercase; letter-spacing:0.04em; }
  .modal-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:8px; }
  body.theme-light .modal-card { background:#fff; color:#1a1a1a; border-color:rgba(0,0,0,0.10); }
  body.theme-light .modal-card h3 { color:var(--brand-blue); }
  body.theme-light .modal-card .hint { color:#737373; }
  body.theme-light .form-field label { color:#525252; }
</style>

<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px;">
  <div>
    {% if zone.capacity %}<span class="meta-pill">Kapazität: {{ zone.capacity }} Plätze</span>{% endif %}
    <span class="meta-pill">{{ zone.source_app }}</span>
    <span class="meta-pill">{{ zone['groups']|length }} Schubladen · {{ zone['groups']|sum(attribute='location_count') }} Fächer</span>
  </div>
  <button type="button" class="btn btn-primary" onclick="document.getElementById('mNewDrawer').classList.add('open')">
    + Neue Schublade
  </button>
</div>

{% set _err = request.query_params.get('error') if request else '' %}
{% if _err %}
<div style="background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;padding:10px 14px;border-radius:6px;margin-bottom:14px;font-size:13px;">
  {{ _err }}
</div>
{% endif %}

{% if not zone['groups'] %}
  <div class="empty-wizard">
    <h3 style="margin:0 0 4px 0;color:var(--brand-orange);font-size:18px;">Schrank ist leer — Schnell-Start</h3>
    <p style="margin:0;font-size:13px;color:rgba(255,255,255,0.75);">Legen Sie zuerst eine <strong>Schublade</strong> an. In der Schublade können Sie dann <strong>Fächer</strong> (Plätze) einzeln oder per Bulk-Anlage erzeugen.</p>
    <div class="wizard-grid">
      <form class="wizard-form" method="post" action="/werkstatt/lager/schraenke/{{ zone.id }}/drawer/new">
        <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
        <h4>Schritt 1 · Schublade anlegen</h4>
        <p class="hint">Beispiel: „Schublade 1", „Oberer Bereich", „Reihe A". Bei einem 60-Platz-Schrank z.B. 6 Schubladen à 10 Plätze.</p>
        <div class="row">
          <div><label>Name *</label><input type="text" name="name" required maxlength="80" placeholder="Schublade 1"></div>
          <div><label>Plätze (optional)</label><input type="number" name="capacity" min="0" max="999" placeholder="10"></div>
        </div>
        <button type="submit" class="btn btn-primary" style="width:100%;margin-top:6px;">Schublade anlegen</button>
      </form>
      <div class="wizard-form" style="opacity:0.7;">
        <h4>Schritt 2 · Fächer befüllen</h4>
        <p class="hint">Nach Anlage der Schublade erscheint pro Schublade ein Button <strong>„+ Plätze anlegen"</strong> — dort gibst du Code-Prefix („A", „1-") und Anzahl ein, alle Fächer werden auf einmal generiert.</p>
        <p class="hint">Anschließend ein Klick auf ein Fach → Werkzeug zuweisen, Min-Bestand setzen, Größe eingeben.</p>
      </div>
    </div>
  </div>
{% else %}
  {% for g in zone['groups'] %}
  <div class="draw-card">
    <div class="draw-head">
      <strong>{{ g.name }}</strong>
      <div class="draw-actions">
        <span style="font-size:11px; color:rgba(255,255,255,0.55);">{{ g.location_count }} Fach{% if g.location_count != 1 %}er{% endif %}{% if g.capacity %} · max. {{ g.capacity }}{% endif %}</span>
        <button type="button" class="btn btn-sm btn-secondary" onclick="document.getElementById('mBulk-{{ g.id }}').classList.add('open')">+ Plätze anlegen</button>
        {% if g.location_count == 0 %}
        <form method="post" action="/werkstatt/lager/schraenke/drawer/{{ g.id }}/delete" style="display:inline;" onsubmit="return confirm('Schublade „{{ g.name }}\' löschen?')">
          <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
          <button type="submit" class="btn btn-sm btn-secondary" title="Schublade löschen (nur wenn leer)">×</button>
        </form>
        {% endif %}
      </div>
    </div>
    {% if g['locations'] %}
    <div class="loc-grid">
      {% for l in g['locations'] %}
      <a class="loc-cell {% if l.item_count and l.item_count > 0 %}has-items{% else %}empty{% endif %}"
         href="/werkstatt/lager/location/{{ l.id }}"
         title="{{ l.item_idents or 'Leeres Fach — klick zum Befüllen' }}">
        <div class="loc-code">
          <span>{{ l.code }}</span>
          {% if l.item_count %}<span class="loc-count">{{ l.item_count }}</span>{% endif %}
        </div>
        <div class="loc-items">{{ (l.item_idents or 'leer · klick zum Befüllen')|truncate(40) }}</div>
      </a>
      {% endfor %}
    </div>
    {% else %}
    <div style="padding:18px; font-size:12px; color:rgba(255,255,255,0.55); font-style:italic; text-align:center;">
      Schublade ist noch leer — Button <strong>+ Plätze anlegen</strong> oben rechts klicken.
    </div>
    {% endif %}
  </div>

  {# Modal: Bulk-Fach-Anlage für diese Schublade #}
  <div class="modal-bg" id="mBulk-{{ g.id }}" onclick="if(event.target===this) this.classList.remove('open')">
    <form class="modal-card" method="post" action="/werkstatt/lager/schraenke/drawer/{{ g.id }}/bulk-locations">
      <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
      <h3>Plätze in „{{ g.name }}" anlegen</h3>
      <p class="hint">Codes werden automatisch erzeugt. Beispiel: Prefix „A", Anzahl 10, Pad 2 → A01, A02, … A10.<br>Leer-Prefix + Pad 2 → 01, 02, … 10.</p>
      <div class="form-field">
        <label>Code-Prefix (optional)</label>
        <input type="text" name="prefix" maxlength="20" placeholder="A oder leer">
      </div>
      <div style="display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:14px;">
        <div class="form-field">
          <label>Anzahl Plätze *</label>
          <input type="number" name="count" min="1" max="999" value="10" required>
        </div>
        <div class="form-field">
          <label>Start-Nr.</label>
          <input type="number" name="start" min="0" max="999" value="1">
        </div>
        <div class="form-field">
          <label>Ziffern</label>
          <input type="number" name="pad" min="1" max="4" value="2" title="01, 001, etc.">
        </div>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn btn-secondary" onclick="document.getElementById('mBulk-{{ g.id }}').classList.remove('open')">Abbrechen</button>
        <button type="submit" class="btn btn-primary">Plätze anlegen</button>
      </div>
    </form>
  </div>
  {% endfor %}
{% endif %}

{# Modal: Neue Schublade #}
<div class="modal-bg" id="mNewDrawer" onclick="if(event.target===this) this.classList.remove('open')">
  <form class="modal-card" method="post" action="/werkstatt/lager/schraenke/{{ zone.id }}/drawer/new">
    <input type="hidden" name="csrf_token" value="{{ request.cookies.get('csrf_token','') }}">
    <h3>Neue Schublade</h3>
    <p class="hint">Schubladen gruppieren die Fächer. Z.B. „Schublade 1", „Reihe A", „Oberer Bereich".</p>
    <div class="form-field">
      <label>Name *</label>
      <input type="text" name="name" required maxlength="80" placeholder="Schublade 1" autofocus>
    </div>
    <div class="form-field">
      <label>Kapazität (optional, Anzahl Fächer)</label>
      <input type="number" name="capacity" min="0" max="999" placeholder="10">
    </div>
    <div class="modal-actions">
      <button type="button" class="btn btn-secondary" onclick="document.getElementById('mNewDrawer').classList.remove('open')">Abbrechen</button>
      <button type="submit" class="btn btn-primary">Anlegen</button>
    </div>
  </form>
</div>
{% endblock %}