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

<div class="page-head">
  <div>
    <h1>{page.title}</h1>
    <p class="muted"><a href="/admin/shop/seo-filters">← К списку правил</a></p>
  </div>
</div>

<form method="post" action="{form_action}" class="form" data-seo-form>
  {csrf}

  <h3 class="cf-section-h">Основное</h3>
  <div class="form-row">
    <div class="form-group">
      <label>Название правила <span class="req">*</span></label>
      <input type="text" name="title" value="{row.title}" placeholder='Например: «Электроника по цвету»' required>
      <small class="help">Видно только в админке. Используйте говорящее название.</small>
    </div>
    <div class="form-group">
      <label>Категория</label>
      <select name="category_id">
        <option value="">— любая категория —</option>
        [foreach var="categories" as="c"]
          <option value="{c.id}" [if {row.category_id}={c.id}]selected[/if]>{c.title}</option>
        [/foreach]
      </select>
      <small class="help">Если выбрана — правило применяется только в этой категории.</small>
    </div>
  </div>

  <h3 class="cf-section-h">Условия (по атрибутам)</h3>
  <div class="form-group">
    <small class="help">Правило сработает, когда пользователь выберет на витрине <b>все</b> указанные значения. Между разными атрибутами — И, между значениями одного атрибута — И тоже (все из списка должны быть выбраны). Пусто = правило применяется только по категории.</small>
    <div class="seo-conds" data-seo-conds></div>
    <button type="button" class="btn btn-secondary" data-seo-cond-add style="margin-top:8px">
      {icon name="plus" size="14"} Добавить условие
    </button>
    <input type="hidden" name="conditions_json" data-seo-conds-json value="{conditions_json}">
  </div>

  <h3 class="cf-section-h">URL (ЧПУ)</h3>
  <div class="form-group">
    <label>URL-сегмент</label>
    <div style="display:flex;align-items:center;gap:8px;flex-wrap:wrap">
      <span class="muted" style="font-size:12px">/shop/category/&lt;категория&gt;/</span>
      <input type="text" name="url_slug" value="{row.url_slug}" placeholder="оставьте пустым — сгенерируется из условий" style="flex:1;min-width:240px">
    </div>
    <small class="help">
      Чистый URL без <code>?</code> и <code>=</code> — лучше индексируется поисковиками. Латиница, цифры, дефисы.
      Доступно только если у правила задана конкретная категория. При оставлении пустым подставится автоматически из условий
      (например <code>color-chervonyi-zhovtyi</code>). Когда пользователь выберет в фильтрах эти точные значения,
      Celena сделает 301-редирект с query-URL на этот ЧПУ.
    </small>
  </div>

  <h3 class="cf-section-h">SEO-тексты</h3>
  <small class="help" style="display:block;margin-bottom:8px">
    Доступные переменные: <code>{{category}</code>, <code>{{count}</code>, <code>{{price_min}</code>, <code>{{price_max}</code>,
    <code>{{attr_<i>slug</i>}</code> — выбранные значения атрибута через запятую (например <code>{{attr_color}</code>).
    <code>{{{</code> — литеральная фигурная скобка.
  </small>
  <div class="form-row">
    <div class="form-group">
      <label>H1 заголовок</label>
      <input type="text" name="h1" value="{row.h1}" placeholder="{category} в цветах: {attr_color}">
    </div>
    <div class="form-group">
      <label>Meta Title</label>
      <input type="text" name="meta_title" value="{row.meta_title}" placeholder="Купить {category} ({attr_color}) — {count} товаров">
    </div>
  </div>
  <div class="form-group">
    <label>Meta Description</label>
    <textarea name="meta_description" rows="3" placeholder="Большой выбор {category} в оттенках {attr_color}. От {price_min} до {price_max} грн.">{row.meta_description}</textarea>
  </div>
  <div class="form-group">
    <label>Meta Keywords</label>
    <input type="text" name="meta_keywords" value="{row.meta_keywords}" placeholder="{category}, {attr_color}, купить">
  </div>
  <div class="form-group">
    <label>Текст описания категории (intro)</label>
    <textarea name="intro_text" rows="4" placeholder="Подборка {category} в оттенках {attr_color} — найдено {count} моделей.">{row.intro_text}</textarea>
    <small class="help">Выводится над сеткой товаров. Поддерживает HTML.</small>
  </div>

  <h3 class="cf-section-h">Поведение</h3>
  <div class="form-row">
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox" name="is_active" value="1" [if {row.is_active}]checked[/if]>
        Правило активно
      </label>
    </div>
    <div class="form-group">
      <label>Приоритет</label>
      <input type="number" name="sort_order" value="{row.sort_order}" min="0">
      <small class="help">Чем выше — тем раньше проверяется. При нескольких подходящих правилах применяется правило с большим приоритетом.</small>
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">Сохранить</button>
    <a href="/admin/shop/seo-filters" class="btn btn-secondary">Отмена</a>
  </div>
</form>

<div data-seo-attrs-json hidden>{attributes_json}</div>

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

  var attrs = [];
  try {
    var holder = document.querySelector('[data-seo-attrs-json]');
    attrs = JSON.parse(holder ? holder.textContent.trim() || '[]' : '[]');
    if (!Array.isArray(attrs)) attrs = [];
  } catch (e) { attrs = []; }

  var attrBySlug = {};
  attrs.forEach(function (a) { attrBySlug[a.slug] = a; });

  var wrap = form.querySelector('[data-seo-conds]');
  var addBtn = form.querySelector('[data-seo-cond-add]');
  var jsonInput = form.querySelector('[data-seo-conds-json]');

  function escapeHtml(s) {
    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  }

  function readConds() {
    var raw = jsonInput.value || '[]';
    try { var p = JSON.parse(raw); return Array.isArray(p) ? p : []; } catch (e) { return []; }
  }
  function writeConds() {
    var out = [];
    wrap.querySelectorAll('[data-seo-cond]').forEach(function (row) {
      var slug = row.querySelector('[data-seo-cond-attr]').value;
      if (!slug) return;
      var vals = [];
      row.querySelectorAll('[data-seo-cond-val]:checked').forEach(function (cb) { vals.push(cb.value); });
      if (vals.length === 0) return;
      out.push({ attr_slug: slug, values: vals });
    });
    jsonInput.value = JSON.stringify(out);
  }

  function valuesHtml(slug, selected) {
    var attr = attrBySlug[slug];
    if (!attr || !attr.values || attr.values.length === 0) {
      return '<div class="muted" style="font-size:12px;padding:6px 0">У атрибута нет фиксированных значений. Это правило применяться не будет.</div>';
    }
    var sel = {};
    (selected || []).forEach(function (v) { sel[v] = true; });
    var html = '<div class="seo-cond-vals">';
    attr.values.forEach(function (v) {
      html +=
        '<label class="seo-cond-val">' +
          '<input type="checkbox" data-seo-cond-val value="' + escapeHtml(v) + '"' + (sel[v] ? ' checked' : '') + '>' +
          '<span>' + escapeHtml(v) + '</span>' +
        '</label>';
    });
    html += '</div>';
    return html;
  }

  function renderCondRow(cond) {
    cond = cond || { attr_slug: '', values: [] };
    var row = document.createElement('div');
    row.className = 'seo-cond-row';
    row.setAttribute('data-seo-cond', '');
    var optionsHtml = '<option value="">— выберите атрибут —</option>';
    attrs.forEach(function (a) {
      optionsHtml += '<option value="' + escapeHtml(a.slug) + '"' + (a.slug === cond.attr_slug ? ' selected' : '') + '>' +
        escapeHtml(a.title) + ' (' + escapeHtml(a.slug) + ')</option>';
    });
    row.innerHTML =
      '<div class="seo-cond-head">' +
        '<select data-seo-cond-attr>' + optionsHtml + '</select>' +
        '<button type="button" class="cf-option-del" data-seo-cond-del title="Удалить условие">' +
          '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18M6 6l12 12"/></svg>' +
        '</button>' +
      '</div>' +
      '<div class="seo-cond-body">' + (cond.attr_slug ? valuesHtml(cond.attr_slug, cond.values) : '') + '</div>';

    var sel = row.querySelector('[data-seo-cond-attr]');
    var body = row.querySelector('.seo-cond-body');
    sel.addEventListener('change', function () {
      body.innerHTML = sel.value ? valuesHtml(sel.value, []) : '';
      writeConds();
    });
    row.addEventListener('change', function (e) {
      if (e.target && e.target.matches('[data-seo-cond-val]')) writeConds();
    });
    row.querySelector('[data-seo-cond-del]').addEventListener('click', function () {
      row.remove();
      writeConds();
    });
    return row;
  }

  function render() {
    wrap.innerHTML = '';
    var conds = readConds();
    if (conds.length === 0) {
      // Пустое состояние — пусть админ добавит явно.
      return;
    }
    conds.forEach(function (c) { wrap.appendChild(renderCondRow(c)); });
  }

  addBtn.addEventListener('click', function () {
    wrap.appendChild(renderCondRow(null));
  });

  form.addEventListener('submit', writeConds);

  render();
})();
</script>

<style>
.seo-conds { display: flex; flex-direction: column; gap: 8px; }
.seo-cond-row {
  border: 1px solid var(--border); border-radius: 6px; padding: 8px;
  background: var(--bg);
}
.seo-cond-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.seo-cond-head select { flex: 1; }
.seo-cond-vals { display: flex; flex-wrap: wrap; gap: 6px 12px; padding-top: 4px; }
.seo-cond-val {
  display: inline-flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--text); cursor: pointer;
}
.seo-cond-val input { margin: 0; }
</style>

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