{% extends "base.html" %}
{% block title %}Перемещение — C5{% endblock %}
{% block header %}Перемещение{% endblock %}
{% block content %}

<div class="card">
  <label class="field">
    <span>Откуда (ячейка-источник)</span>
    <div id="fromPicker" class="cell-picker">
      <span class="cell-picker-text cell-picker-empty">Не выбрана</span>
      <span class="cell-picker-arrow">›</span>
    </div>
  </label>
</div>

<div id="stockBox" hidden></div>

<div class="card">
  <label class="field">
    <span>Куда (ячейка-получатель)</span>
    <div id="toPicker" class="cell-picker">
      <span class="cell-picker-text cell-picker-empty">Не выбрана</span>
      <span class="cell-picker-arrow">›</span>
    </div>
  </label>
  <label class="field">
    <span>Количество</span>
    <input id="qtyInput" type="number" min="1" inputmode="numeric" disabled>
  </label>
  <button id="goBtn" class="btn btn-primary" disabled>Переместить</button>
  <div id="err" class="error" hidden></div>
</div>

{% endblock %}
{% block scripts %}
<script>
  let fromCell = null;
  let toCell   = null;
  let pickedProduct = null;

  const fromText = document.querySelector('#fromPicker .cell-picker-text');
  const toText   = document.querySelector('#toPicker .cell-picker-text');
  const stockBox = document.getElementById('stockBox');
  const qtyInput = document.getElementById('qtyInput');
  const goBtn    = document.getElementById('goBtn');
  const errBox   = document.getElementById('err');

  (async () => {
    if (!Auth.require()) return;

    document.getElementById('fromPicker').onclick = () => {
      pickCell({
        title: 'Откуда (источник)',
        selectedId: fromCell && fromCell.id,
        onPick: (cell) => {
          fromCell = cell;
          fromText.textContent = cell.address + ' · ' +
            (cell.location_name || cell.location || ('склад ' + cell.location_id));
          fromText.classList.remove('cell-picker-empty');
          pickedProduct = null;
          qtyInput.value = '';
          qtyInput.disabled = true;
          loadStock(cell.id);
          updateGoBtn();
        },
      });
    };

    document.getElementById('toPicker').onclick = () => {
      pickCell({
        title: 'Куда (получатель)',
        selectedId: toCell && toCell.id,
        onPick: (cell) => {
          toCell = cell;
          toText.textContent = cell.address + ' · ' +
            (cell.location_name || cell.location || ('склад ' + cell.location_id));
          toText.classList.remove('cell-picker-empty');
          updateGoBtn();
        },
      });
    };

    qtyInput.addEventListener('input', updateGoBtn);
  })();

  async function loadStock(cellId) {
    stockBox.hidden = true;
    stockBox.innerHTML = '';
    try {
      const items = await api('/cells/' + cellId + '/stock');
      stockBox.hidden = false;
      if (!items.length) {
        stockBox.append(h('div', { class: 'card' },
          h('div', { class: 'empty' }, 'Ячейка пуста')));
        return;
      }

      const list = h('div', { class: 'list' });

      function renderList() {
        list.innerHTML = '';
        for (const row of items) {
          const isSel = pickedProduct && row.product_id === pickedProduct.product_id;
          list.append(h('div', {
            class: 'row' + (isSel ? ' pick-row-current' : ''),
            onclick: () => {
              pickedProduct = row;
              qtyInput.value = String(row.qty);
              qtyInput.max = String(row.qty);
              qtyInput.disabled = false;
              renderList();
              updateGoBtn();
            },
          },
            h('div', { class: 'row-main' },
              h('div', { class: 'row-title' },
                row.name || row.sku || ('#' + row.product_id)),
              h('div', { class: 'row-sub' },
                (row.sku || '') + ' · в ячейке: ' + row.qty),
            ),
            h('div', { class: 'row-badge' }, String(row.qty)),
          ));
        }
      }
      renderList();

      stockBox.append(h('div', { class: 'card' },
        h('div', { class: 'row-sub' }, 'Что переместить:'),
        list));
    } catch (e) {
      stockBox.hidden = false;
      stockBox.append(h('div', { class: 'card' },
        h('div', { class: 'error' }, e.message)));
    }
  }

  function updateGoBtn() {
    errBox.hidden = true;
    const q = parseInt(qtyInput.value, 10) || 0;
    const same = fromCell && toCell && fromCell.id === toCell.id;
    const over = pickedProduct && q > pickedProduct.qty;
    const ok = fromCell && toCell && pickedProduct
            && q > 0 && !same && !over;
    goBtn.disabled = !ok;

    if (same) {
      errBox.textContent = 'Источник и получатель совпадают';
      errBox.hidden = false;
    } else if (over) {
      errBox.textContent = 'Больше, чем есть в ячейке';
      errBox.hidden = false;
    }
  }

  goBtn.onclick = async () => {
    const q = parseInt(qtyInput.value, 10) || 0;
    if (!fromCell || !toCell || !pickedProduct || q <= 0) return;

    goBtn.disabled = true;
    goBtn.textContent = 'Перемещаю…';
    errBox.hidden = true;

    try {
      const res = await api('/documents/move', {
        method: 'POST',
        body: JSON.stringify({
          from_location_id: fromCell.location_id,
          from_cell_id:     fromCell.id,
          to_location_id:   toCell.location_id,
          to_cell_id:       toCell.id,
          items: [{
            product_id: pickedProduct.product_id,
            qty: q,
          }],
        }),
      });
      toast('Перемещено, документ #' + res.id, 'ok');
      setTimeout(() => { location.href = '/m/menu'; }, 900);
    } catch (e) {
      errBox.textContent = e.message;
      errBox.hidden = false;
      goBtn.disabled = false;
      goBtn.textContent = 'Переместить';
    }
  };
</script>
{% endblock %}