{% extends 'base.html' %}
{% block title %}Wiegen | Filament Manager{% endblock %}
{% block head_extra %}
<link rel="modulepreload" href="{{ url_for('static', filename='js/weighing.js') }}">
<link rel="modulepreload" href="{{ url_for('static', filename='js/modules/weighing_core.js') }}">
{% endblock %}
{% block body_class %}page-weighing{% endblock %}
{% block page_title %}Wiegen{% endblock %}
{% block page_subtitle %}Waagen-Toolbar, Live-Display und direkter Wiege-Flow fuer aktive Spulen.{% endblock %}
{% block page_toolbar %}{% endblock %}
{% block content %}
<section class="weighing-unified-shell">
  <article class="sci-panel weighing-unified-main weighing-unified-main--full">
    <div class="weighing-unified-appbar">
      <div>
        <h2 class="sci-h2">Nexus Scale Station</h2>
        <div class="muted">Oben Waage einstellen/konfigurieren/flashen, darunter Spule auswaehlen, auf Waage setzen, wiegen und speichern.</div>
      </div>
      <div class="weighing-kpi-inline">
        <span class="global-status-pill">Waagen aktiv: {{ scale_stats.active }} / {{ scale_stats.total }}</span>
        <span class="global-status-pill">Spulen in Liste: {{ spools|length }}</span>
      </div>
    </div>

    <div class="weighing-tool-toolbar">
      <button type="button" class="sci-btn small" id="weighing-open-setup-modal">
        <iconify-icon icon="mdi:tune-variant" aria-hidden="true"></iconify-icon>
        Waage einstellen
      </button>
      <button type="button" class="sci-btn subtle small" id="weighing-open-config-modal" data-open-scale-tools data-scale-id="{{ settings.scale_default_device_id or '' }}">
        <iconify-icon icon="mdi:cog-outline" aria-hidden="true"></iconify-icon>
        Waage konfigurieren
      </button>
      <button type="button" class="sci-btn subtle small" data-open-esp32-flasher>
        <iconify-icon icon="mdi:chip" aria-hidden="true"></iconify-icon>
        Firmware flashen
      </button>
    </div>

    <div class="weighing-live-layout">
      <section class="weighing-minimal-display" id="weighing-live-display">
        <div class="weighing-live-head">
          <h3 class="settings-group-title">Waagendisplay</h3>
          <div class="muted tiny">Reale Waage oder Demo-Waage waehlen, danach Spule setzen und direkt wiegen.</div>
        </div>
        <div class="sci-input-group full">
          <label for="weighing-live-device-select">Aktive Waage</label>
          <select class="sci-input" id="weighing-live-device-select"></select>
        </div>
        <article class="weighing-live-card full">
          <div class="weighing-live-top">
            <span>Gemessener Wert</span>
            <strong id="weighing-live-device-name">Demo Waage (Simulator)</strong>
          </div>
          <div class="weighing-live-main">
            <span id="weighing-live-value">0</span>
            <small>g</small>
          </div>
          <div class="weighing-live-subline">
            <span id="weighing-live-connection">Typ: ESP32</span>
            <span id="weighing-live-endpoint">Endpoint: http://127.0.0.1:4711</span>
          </div>
          <div class="weighing-live-spool-meta" id="weighing-live-spool-meta">
            <div><span>Filament ID</span><strong id="weighing-live-filament-id">-</strong></div>
            <div><span>Spulen ID</span><strong id="weighing-live-spool-id">-</strong></div>
            <div><span>Hersteller</span><strong id="weighing-live-brand">-</strong></div>
            <div><span>Material</span><strong id="weighing-live-material">-</strong></div>
          </div>
          <div class="weighing-live-subline status" id="weighing-live-status">Bereit. Spule auswaehlen und zur Waage senden.</div>
        </article>
        <div class="dialog-actions full">
          <button type="button" class="sci-btn subtle small" id="weighing-live-apply-spool">
            <iconify-icon icon="mdi:database-arrow-up-outline" aria-hidden="true"></iconify-icon>
            Filament an Waage senden
          </button>
          <button type="button" class="sci-btn subtle small" id="weighing-live-stop">
            <iconify-icon icon="mdi:stop-circle-outline" aria-hidden="true"></iconify-icon>
            Serial Stop
          </button>
          <button type="button" class="sci-btn" id="weighing-live-measure">
            <iconify-icon icon="mdi:scale-bathroom" aria-hidden="true"></iconify-icon>
            Wiegen und speichern
          </button>
        </div>
      </section>

      <section class="weighing-process-card">
        <h3 class="settings-group-title">Ablauf</h3>
        <ol class="weighing-step-list">
          <li data-weigh-step="1" class="is-active"><strong>1.</strong> Spule unten auswaehlen</li>
          <li data-weigh-step="2"><strong>2.</strong> Spule an Waage senden</li>
          <li data-weigh-step="3"><strong>3.</strong> Wiegen und direkt speichern</li>
        </ol>
        <div class="weighing-selected-summary" id="weighing-selected-summary">
          <span class="muted">Ausgewaehlte Spule</span>
          <strong id="weighing-selected-spool-name">Keine Spule ausgewaehlt</strong>
          <div class="muted tiny" id="weighing-selected-spool-meta">Bitte unten eine Spule anklicken.</div>
        </div>
      </section>
    </div>

    <section class="weighing-spool-section section-gap">
      <div class="section-head compact">
        <h2 class="sci-h2">Filament / Spule auswaehlen</h2>
      </div>
      <form class="page-filter-form compact" method="get">
        <div class="page-filter-main">
          <input class="sci-input filter-search" name="q" id="weighing-spool-filter" placeholder="Suche nach Hersteller, Material, Farbe, SKU, Lager" value="{{ filters.q }}">
          <select class="sci-input" name="warehouse_id">
            <option value="">Alle Lager</option>
            {% for w in warehouses %}
            <option value="{{ w.id }}" {% if filters.warehouse_id == w.id|string %}selected{% endif %}>{{ w.name }}</option>
            {% endfor %}
          </select>
          <select class="sci-input" name="stock_state">
            <option value="">Alle Zustaende</option>
            <option value="ok" {% if filters.stock_state == 'ok' %}selected{% endif %}>OK</option>
            <option value="niedrig" {% if filters.stock_state == 'niedrig' %}selected{% endif %}>Niedrig</option>
            <option value="kritisch" {% if filters.stock_state == 'kritisch' %}selected{% endif %}>Kritisch</option>
            <option value="leer" {% if filters.stock_state == 'leer' %}selected{% endif %}>Leer</option>
          </select>
        </div>
        <div class="page-filter-side">
          <button class="sci-btn small"><iconify-icon icon="mdi:filter-variant" aria-hidden="true"></iconify-icon> Filtern</button>
          <a class="sci-btn subtle small" href="{{ url_for('web.weighing') }}">Reset</a>
        </div>
      </form>
      <div class="table-wrap section-gap">
        <table class="sci-table spool-table-compact">
          <thead>
            <tr>
              <th>Auswahl</th>
              <th>Spule</th>
              <th>Lager</th>
              <th>Filament ID</th>
              <th>Rest / Netto</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            {% for spool in spools %}
            {% set spool_label = (spool.brand ~ ' ' ~ spool.material ~ ' ' ~ spool.color_name)|trim %}
            <tr
              data-weighing-spool-row
              data-spool-id="{{ spool.id }}"
              data-spool-name="{{ spool_label }}"
              data-spool-warehouse="{{ spool.warehouse_name }}"
              data-spool-remaining="{{ spool.remaining_g }}"
              data-spool-search="{{ (spool.brand ~ ' ' ~ spool.material ~ ' ' ~ spool.color_name ~ ' ' ~ spool.warehouse_name ~ ' ' ~ (spool.sku or ''))|lower }}"
            >
              <td>
                <button
                  type="button"
                  class="sci-btn subtle small"
                  data-weighing-select-spool
                  data-id="{{ spool.id }}"
                  data-name="{{ spool_label }}"
                  data-meta="{{ spool.warehouse_name }} | {{ spool.remaining_g }} g"
                >
                  <iconify-icon icon="mdi:cursor-default-click-outline" aria-hidden="true"></iconify-icon>
                  Waehlen
                </button>
              </td>
              <td>
                <strong>{{ spool.brand }}</strong>
                <div class="muted">{{ spool.material }} | {{ spool.color_name }}{% if spool.sku %} | {{ spool.sku }}{% endif %}</div>
              </td>
              <td>{{ spool.warehouse_name }}{% if spool.slot_number %}<div class="muted">Slot {{ spool.slot_number }}</div>{% endif %}</td>
              <td>{{ spool.filament_id or '-' }}</td>
              <td>{{ spool.remaining_g }} g / {{ spool.net_weight_g }} g</td>
              <td><span class="sci-badge {% if spool.stock_state == 'kritisch' %}critical{% elif spool.stock_state == 'niedrig' %}low{% elif spool.stock_state == 'ok' %}ok{% else %}archiviert{% endif %}">{{ spool.stock_state }}</span></td>
            </tr>
            {% else %}
            <tr><td colspan="6" class="empty-cell">Keine aktiven Spulen gefunden.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>

    <section class="weighing-history-section section-gap warehouse-history-compact">
      <div class="section-head compact">
        <h2 class="sci-h2">Wiegehistorie</h2>
        <div class="muted tiny">Bewegungstyp <code>WEIGH</code></div>
      </div>
      <form class="page-filter-form compact" method="get">
        <div class="page-filter-main">
          <input type="hidden" name="q" value="{{ filters.q }}">
          <input type="hidden" name="warehouse_id" value="{{ filters.warehouse_id }}">
          <input type="hidden" name="stock_state" value="{{ filters.stock_state }}">
          <input class="sci-input filter-search" name="history_q" placeholder="Suche in Grund, Spule, Hersteller" value="{{ history_filters.q }}">
          <input class="sci-input" type="number" min="1" step="1" name="history_spool_id" placeholder="Spulen-ID" value="{{ history_filters.spool_id }}">
        </div>
        <div class="page-filter-side">
          <button class="sci-btn small"><iconify-icon icon="mdi:history" aria-hidden="true"></iconify-icon> Historie filtern</button>
        </div>
      </form>
      <div class="table-wrap section-gap">
        <table class="sci-table filament-table-compact">
          <thead>
            <tr>
              <th>Zeitpunkt</th>
              <th>Spule</th>
              <th>Lager</th>
              <th>Differenz</th>
              <th>Grund</th>
            </tr>
          </thead>
          <tbody>
            {% for row in weigh_history %}
            <tr>
              <td>{{ row.created_at }}</td>
              <td>
                <strong>#{{ row.spool_id }}</strong>
                <div class="muted tiny">{{ row.brand }} | {{ row.material }} | {{ row.color_name }}</div>
              </td>
              <td>{{ row.from_name_display or '-' }}</td>
              <td>{{ row.quantity_g or 0 }} g</td>
              <td>{{ row.reason or '-' }}</td>
            </tr>
            {% else %}
            <tr><td colspan="5" class="empty-cell">Noch keine Wiegevorgaenge vorhanden.</td></tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  </article>
</section>

<dialog id="weighing-setup-modal" class="weighing-inline-modal">
  <form method="dialog" class="weighing-inline-modal-card">
    <h3 class="sci-h2">Waage einstellen</h3>
    <div class="muted tiny">Standard-Waage fuer die Wiegestation waehlen. Konfiguration und Flashing bleiben in den eigenen Modals.</div>
    <div class="sci-input-group full section-gap">
      <label for="weighing-default-scale-select">Standard-Waage</label>
      <select class="sci-input" id="weighing-default-scale-select"></select>
    </div>
    <label class="check-line compact section-gap">
      <input type="checkbox" id="weighing-demo-autostart" {% if settings.demo_scale_autostart not in ('0', 'false', 'False', '') %}checked{% endif %}>
      Demo-Waage Worker beim App-Start aktivieren
    </label>
    <div class="muted tiny" id="weighing-setup-status">Keine Aenderung gespeichert.</div>
    <div class="dialog-actions full section-gap">
      <button type="button" class="sci-btn" id="weighing-save-setup">Speichern</button>
      <button type="button" class="sci-btn subtle" id="weighing-close-setup">Schliessen</button>
    </div>
  </form>
</dialog>
{% endblock %}
{% block data_blocks %}
<script id="warehouse-options" type="application/json">{{ warehouses_json|tojson }}</script>
<script id="spool-options" type="application/json">{{ spools_json|tojson }}</script>
<script id="scale-devices" type="application/json">{{ scales_json|tojson }}</script>
<script id="empty-spool-options" type="application/json">{{ empty_spool_profiles_json|tojson }}</script>
<script id="weighing-page-json" type="application/json">{{ {'settings': settings, 'scales': scales, 'warehouses': warehouses_json}|tojson }}</script>
{% endblock %}