{% extends "base.html" %}

{% block body_class %}{% endblock %}

{% block content %}
<h3 class="text-center">Инвентаризация техники и расходный материалов</h3>
<div class="mt-3">
  <div class="form-text mb-1">Введите инвентарный номер или штрихкод</div>
  <form method="post" action="/issue" id="homeIssueForm">
    <input name="barcode" id="home_barcode" class="form-control" placeholder="Инвентарный номер / штрихкод" autocomplete="off">
    <div class="form-text mt-2" id="home_hint"></div>

    <div class="mt-2 d-none" id="home_card_info">
      <div><strong>Картридж:</strong> <span id="home_card_model">—</span></div>
      <div><strong>Остаток:</strong> <span id="home_card_qty">—</span></div>
    </div>

    <div class="row g-2 align-items-center mt-2 d-none" id="home_issue_controls">
      <div class="col-md-2">
        <div class="form-text mb-1">Количество</div>
        <input name="quantity" class="form-control" placeholder="Кол-во" value="1">
      </div>
      <div class="col-md-4">
        <div class="form-text mb-1">Выберите кабинет</div>
        <select name="cabinet" class="form-select">
          <option value="">Выберите кабинет...</option>
          {% for c in cabinets %}
          <option value="{{ c }}">{{ c }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="col-md-2 d-grid">
        <button class="btn btn-danger">Выдать</button>
      </div>
    </div>
  </form>
</div>

<script>
  (function() {
    const barcodeEl = document.getElementById('home_barcode');
    const hintEl = document.getElementById('home_hint');
    const infoWrap = document.getElementById('home_card_info');
    const modelEl = document.getElementById('home_card_model');
    const qtyEl = document.getElementById('home_card_qty');
    const controls = document.getElementById('home_issue_controls');

    if (!barcodeEl || !hintEl || !infoWrap || !modelEl || !qtyEl || !controls) return;

    let last = '';
    async function lookup() {
      const barcode = (barcodeEl.value || '').trim();
      if (!barcode || barcode === last) return;
      last = barcode;

      hintEl.textContent = 'Ищу...';
      infoWrap.classList.add('d-none');
      controls.classList.add('d-none');

      try {
        const res = await fetch(`/api/cartridge?barcode=${encodeURIComponent(barcode)}`);
        if (!res.ok) {
          hintEl.textContent = 'Ошибка запроса';
          return;
        }
        const data = await res.json();
        if (!data.found) {
          hintEl.textContent = 'Картридж не найден';
          return;
        }
        modelEl.textContent = data.model || '—';
        qtyEl.textContent = data.quantity ?? '—';
        infoWrap.classList.remove('d-none');
        controls.classList.remove('d-none');
        hintEl.textContent = '';
      } catch (e) {
        hintEl.textContent = 'Ошибка сети';
      }
    }

    barcodeEl.addEventListener('input', () => {
      window.clearTimeout(window.__homeBarcodeTimer);
      window.__homeBarcodeTimer = window.setTimeout(lookup, 120);
    });
    barcodeEl.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        lookup();
      }
    });
  })();
</script>
{% endblock %}