{include file="_partials/head.tpl"}

<main class="main">
  <nav class="breadcrumbs">
    <a href="/shop">Магазин</a>
    [if {category}] → <a href="/shop/category/{category.slug}">{category.title}</a>[/if]
    → <span>{product.title}</span>
  </nav>

  <article class="product-full card"
    data-product-page
    data-product-id="{product.id}"
    data-product-title="{product.title}"
    data-product-cover="{product.cover}"
    data-product-options="{product.options}"
    data-product-variations="{product.variations}"
    data-product-base-price="{product.price}">
    <div class="product-gallery">
      <img class="product-gallery-img" data-gallery-img
        [if {product.cover}]src="{product.cover|large}"[/if]
        alt="{product.title}"
        [if {product.cover}][else]style="display:none"[/if]>
      [if {product.cover}][else]<div class="no-cover">Нет изображения</div>[/if]
    </div>
    <div class="product-info">
      <h1>{product.title}</h1>
      <p class="muted product-sku-line" data-sku-line>
        [if {product.sku}]Артикул: <code data-sku>{product.sku}</code>[else]<span data-sku></span>[/if]
      </p>

      <div class="product-price-big">
        <span data-price>{price amount="{product.price}"}</span>
        [if {product.old_price_fmt}]<span class="old" data-old-price>{price amount="{product.old_price}"}</span>[else]<span class="old" data-old-price style="display:none"></span>[/if]
      </div>

      [if {product.short}]<p class="short">{product.short}</p>[/if]

      <!-- Селекторы опций — рисуются JS из data-product-options -->
      <div class="variation-options" data-variation-options></div>

      <div class="add-to-cart">
        <input type="number" name="quantity" value="1" min="1" data-qty>
        <button type="button" class="btn-primary"
          data-add-to-cart="1"
          data-pid="{product.id}"
          data-ptitle="{product.title}"
          data-pprice="{product.price}"
          data-pcover="{product.cover}"
          data-psku="{product.sku}"
          data-add-cart-btn>В корзину</button>
      </div>
      <p class="muted out-of-stock" data-out-of-stock style="display:none">Нет в наличии</p>

      [if {product.body}]
        <div class="product-body">{product.body|raw}</div>
      [/if]
    </div>
  </article>
</main>

<script>
(function () {
  var page = document.querySelector('[data-product-page]');
  if (!page) return;

  var optsJson = page.getAttribute('data-product-options') || '';
  var varsJson = page.getAttribute('data-product-variations') || '';
  var baseTitle = page.getAttribute('data-product-title') || '';
  var baseCover = page.getAttribute('data-product-cover') || '';
  var basePrice = parseFloat(page.getAttribute('data-product-base-price')) || 0;

  function safeParse(raw) {
    try {
      var p = JSON.parse(raw);
      return Array.isArray(p) ? p : [];
    } catch (e) { return []; }
  }
  var options = safeParse(optsJson);
  var variations = safeParse(varsJson);

  var optsBox = page.querySelector('[data-variation-options]');
  var priceEl = page.querySelector('[data-price]');
  var oldEl = page.querySelector('[data-old-price]');
  var skuEl = page.querySelector('[data-sku]');
  var skuLine = page.querySelector('[data-sku-line]');
  var galleryImg = page.querySelector('[data-gallery-img]');
  var addBtn = page.querySelector('[data-add-cart-btn]');
  var outBox = page.querySelector('[data-out-of-stock]');
  var qtyInput = page.querySelector('[data-qty]');

  // Используем общий форматтер из shop.js (window.CelenaShop.price).
  function fmt(n) {
    if (window.CelenaShop && typeof window.CelenaShop.price === 'function') {
      return window.CelenaShop.price(n);
    }
    return (parseFloat(n) || 0).toFixed(2);
  }

  // Если опций нет — ничего не делаем, оставляем базовое поведение.
  if (!options.length || !variations.length) return;

  var selected = options.map(function (o) { return o.values[0] || ''; });

  function findVariation() {
    for (var i = 0; i < variations.length; i++) {
      var v = variations[i];
      if (!v.values || v.values.length !== selected.length) continue;
      var match = true;
      for (var j = 0; j < selected.length; j++) {
        if (v.values[j] !== selected[j]) { match = false; break; }
      }
      if (match) return v;
    }
    return null;
  }

  function renderSelectors() {
    optsBox.innerHTML = '';
    options.forEach(function (opt, idx) {
      var wrap = document.createElement('div');
      wrap.className = 'variation-option';
      var label = document.createElement('label');
      label.className = 'variation-option-name';
      label.textContent = opt.name;
      wrap.appendChild(label);
      var sel = document.createElement('select');
      opt.values.forEach(function (val) {
        var o = document.createElement('option');
        o.value = val;
        o.textContent = val;
        if (val === selected[idx]) o.selected = true;
        sel.appendChild(o);
      });
      sel.addEventListener('change', function () {
        selected[idx] = sel.value;
        applyVariation();
      });
      wrap.appendChild(sel);
      optsBox.appendChild(wrap);
    });
  }

  function applyVariation() {
    var v = findVariation();
    if (!v) {
      // Нет такой комбинации — disable add to cart
      addBtn.disabled = true;
      addBtn.textContent = 'Комбинация недоступна';
      outBox.style.display = '';
      outBox.textContent = 'Эта комбинация недоступна';
      return;
    }
    // Цена
    if (priceEl) priceEl.textContent = fmt(v.price || basePrice);
    // Старая цена
    if (oldEl) {
      if (v.old_price && parseFloat(v.old_price) > 0) {
        oldEl.textContent = fmt(v.old_price);
        oldEl.style.display = '';
      } else {
        oldEl.style.display = 'none';
      }
    }
    // SKU
    if (v.sku && skuEl) {
      skuEl.textContent = v.sku;
      skuLine.style.display = '';
    } else if (skuLine) {
      // оставим базовый SKU из товара, если есть
    }
    // Изображение вариации (если задано)
    if (galleryImg && v.image) {
      galleryImg.src = v.image;
      galleryImg.style.display = '';
    }
    // Стоки
    var inStock = (parseInt(v.stock, 10) || 0) > 0;
    addBtn.disabled = !inStock;
    addBtn.textContent = inStock ? 'В корзину' : 'Нет в наличии';
    outBox.style.display = inStock ? 'none' : '';
    outBox.textContent = inStock ? '' : 'Нет в наличии';
    if (qtyInput) qtyInput.max = inStock ? (v.stock || 999) : 1;

    // Прокидываем выбранную вариацию на кнопку добавления в корзину.
    addBtn.setAttribute('data-pprice', String(v.price || basePrice));
    addBtn.setAttribute('data-psku', v.sku || '');
    addBtn.setAttribute('data-pcover', v.image || baseCover);
    addBtn.setAttribute('data-variation-id', String(v.id));
    var labelParts = options.map(function (opt, i) { return opt.name + ': ' + selected[i]; });
    addBtn.setAttribute('data-variation-label', labelParts.join(' · '));
  }

  renderSelectors();
  applyVariation();
})();
</script>

{include file="_partials/foot.tpl"}
