{% extends "base.html" %}
{% block title %}Товар — C5{% endblock %}
{% block header %}Товар{% endblock %}
{% block content %}
<div id="root"><div class="loading">Загрузка…</div></div>
{% endblock %}
{% block scripts %}
<script>
  const PID = {{ pid }};

  (async () => {
    if (!Auth.require()) return;
    const root = document.getElementById('root');

    try {
      const [pRes, stRes] = await Promise.all([
        api('/products/' + PID),
        api('/products/' + PID + '/stock'),
      ]);

      if (isOffline(pRes) || isOffline(stRes)) {
        root.innerHTML = '';
        root.append(h('div', { class: 'card' },
          h('div', { class: 'empty' },
            'Нет соединения. Карточка недоступна в офлайне.'),
          h('a', { class: 'btn', href: '/m/menu',
                   style: 'margin-top:8px' }, '← В меню')));
        return;
      }

      const p = pRes;
      const st = stRes;

      root.innerHTML = '';

      // ----- Фото -----
      const img = h('img', {
        src: '/api/v1/products/' + PID + '/photo',
        alt: '',
        style: 'width:100%;max-height:300px;object-fit:contain;'
             + 'background:#f5f6f8;border-radius:10px',
        onerror: (e) => { e.target.style.display = 'none'; },
      });

      root.append(h('div', { class: 'card' },
        img,
        h('div', { class: 'row-title',
                   style: 'margin-top:10px;font-size:18px' },
          p.name || ('#' + p.id)),
        h('div', { class: 'row-sub', style: 'margin-top:6px' },
          'SKU: ' + (p.sku || '—') +
          (p.barcode ? ' · ШК: ' + p.barcode : '')),
      ));

      // ----- Остатки -----
      const stockCard = h('div', { class: 'card' },
        h('div', { class: 'row-title' }, 'Остатки'),
        h('div', { class: 'row-sub', style: 'margin-top:6px' },
          'Физический: ' + (st.total_stock || 0) +
          ' · Резерв: ' + (st.reserved || 0) +
          ' · Доступно: ' + (st.available || 0) +
          ' · В пути: ' + (st.pending_qty || 0)),
      );

      const locs = asArray(st.locations);
      if (locs.length) {
        const list = h('div', { class: 'list', style: 'margin-top:10px' });
        for (const loc of locs) {
          const title = loc.cell_address || loc.cell_code ||
                        ('склад ' + loc.location_id);
          const sub = (loc.location_name || loc.location_code || '') +
                      (loc.cell_id ? '' : ' · нераспр.');
          list.append(h('div', { class: 'row' },
            h('div', { class: 'row-main' },
              h('div', { class: 'row-title' }, title),
              h('div', { class: 'row-sub' }, sub)),
            h('div', { class: 'row-badge' }, String(loc.qty))));
        }
        stockCard.append(list);
      } else {
        stockCard.append(h('div', { class: 'empty',
                                    style: 'margin-top:8px' },
          'Остатков нет'));
      }
      root.append(stockCard);

      // ----- Характеристики -----
      const props = [
        ['Полное наименование', p.full_name],
        ['Группа',              p.category],
        ['Единица',             (p.unit || '') + ' (' + (p.unit_okei || '') + ')'],
        ['Цена',                p.price != null ? p.price + ' ₽' : ''],
        ['НДС',                 p.vat_rate ? p.vat_rate + ' %' : ''],
        ['Мин. запас',          p.min_stock],
        ['Вес',                 p.weight ? p.weight + ' кг' : ''],
        ['Объём',               p.volume ? p.volume + ' м³' : ''],
        ['Производитель',       p.manufacturer],
        ['Код ТНВЭД',           p.tnved_code],
        ['Страна',              p.country_origin],
        ['Описание',            p.description],
      ].filter(([k, v]) => v != null && v !== '');

      if (props.length) {
        const pcard = h('div', { class: 'card' },
          h('div', { class: 'row-title' }, 'Характеристики'));
        for (const [k, v] of props) {
          pcard.append(h('div', { style: 'margin-top:8px' },
            h('div', { class: 'row-sub' }, k),
            h('div', { style: 'font-size:15px' }, String(v)),
          ));
        }
        root.append(pcard);
      }

      root.append(h('div', { class: 'card' },
        h('div', { class: 'row-title' }, 'Действия'),
        h('div', { class: 'row-sub', style: 'margin-top:6px' },
          'Перемещение, списание и отгрузка — в следующих обновлениях.'),
      ));

    } catch (e) {
      root.innerHTML = '';
      root.append(h('div', { class: 'card' },
        h('div', { class: 'error' }, e.message),
        h('a', { class: 'btn', href: '/m/menu',
                 style: 'margin-top:8px' }, '← В меню'),
      ));
    }
  })();
</script>
{% endblock %}