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

<div class="page-head">
  <div>
    <h1>{page.title}</h1>
    <p class="muted"><a href="/admin/shop/attributes">{lang key="shop.attribute.back_to_list"}</a></p>
  </div>
</div>

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

  <h3 class="cf-section-h">{lang key="shop.attribute.section_name"}</h3>
  <div class="form-row">
    <div class="form-group">
      <label>{lang key="shop.common.title"} <span class="req">*</span></label>
      <input type="text" name="title" value="{row.title}" placeholder="{lang key="shop.attribute.title_placeholder"}" required data-attr-label>
      <small class="help">{lang key="shop.attribute.title_help"}</small>
    </div>
    <div class="form-group">
      <label>{lang key="shop.attribute.slug_label"}</label>
      <input type="text" name="slug" value="{row.slug}" placeholder="{lang key="shop.attribute.slug_placeholder"}" data-attr-slug>
      <small class="help">{lang key="shop.attribute.slug_help"} <code>?attr_brand=Bosch</code>.</small>
    </div>
  </div>

  <h3 class="cf-section-h">{lang key="shop.attribute.section_type"}</h3>
  <input type="hidden" name="type" value="{row.type}" data-attr-type-input>
  <div class="cf-type-grid">
    [foreach var="types" as="t"]
      <label class="cf-type-card [if {row.type}={t.slug}]is-selected[/if]" data-attr-type-card data-type="{t.slug}">
        <span class="cf-type-ico">{t.svg|raw}</span>
        <span class="cf-type-label">{t.label}</span>
        <span class="cf-type-hint">{t.hint}</span>
      </label>
    [/foreach]
  </div>

  <h3 class="cf-section-h" data-attr-settings-header>{lang key="shop.attribute.section_settings"}</h3>

  <!-- Только для select/multiselect/color: визуальный редактор значений. -->
  <div class="cf-panel" data-attr-panel="values">
    <div class="form-group">
      <label>{lang key="shop.attribute.options_label"}</label>
      <small class="help" style="margin-bottom:8px">
        {lang key="shop.attribute.options_help"}
        <span data-attr-hint="color"> Для типа «Цвет» — выберите реальный оттенок свотчем рядом с названием.</span>
        <span data-attr-hint="image"> Для «Один/Несколько вариантов» можно загрузить картинку (текстура материала, превью).</span>
      </small>
      <div class="cf-options" data-attr-options></div>
      <button type="button" class="btn btn-secondary" data-attr-options-add style="margin-top:8px">
        {icon name="plus" size="14"} Добавить вариант
      </button>
    </div>
  </div>

  <!-- Только для number: единица измерения. -->
  <div class="cf-panel" data-attr-panel="unit">
    <div class="form-group">
      <label>Единица измерения</label>
      <input type="text" name="unit" value="{row.unit}" maxlength="20" placeholder="{lang key="shop.attribute.unit_placeholder"}">
      <small class="help">{lang key="shop.attribute.unit_help"}</small>
    </div>
  </div>

  <!-- Для text: тоже даём возможность задать unit (опционально). -->
  <div class="cf-panel" data-attr-panel="unit_optional">
    <div class="form-group">
      <label>Единица измерения <span class="muted">(необязательно)</span></label>
      <input type="text" name="unit" value="{row.unit}" maxlength="20" placeholder="{lang key="shop.attribute.unit_optional_placeholder"}">
    </div>
  </div>

  <h3 class="cf-section-h">{lang key="shop.attribute.section_behavior"}</h3>
  <div class="form-row">
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox" name="is_filterable" value="1" [if {row.is_filterable}]checked[/if]>
        Использовать в фасетных фильтрах витрины
      </label>
      <small class="help">{lang key="shop.attribute.is_filterable_help"}</small>
    </div>
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox" name="is_required" value="1" [if {row.is_required}]checked[/if]>
        Обязательный к заполнению
      </label>
      <small class="help">{lang key="shop.attribute.is_required_help"}</small>
    </div>
    <div class="form-group">
      <label>{lang key="shop.manufacturer.sort_order"}</label>
      <input type="number" name="sort_order" value="{row.sort_order}" min="0">
      <small class="help">{lang key="shop.attribute.sort_help"}</small>
    </div>
  </div>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary">{lang key="admin.save"}</button>
    <a href="/admin/shop/attributes" class="btn btn-secondary">{lang key="admin.cancel"}</a>
  </div>
</form>

<div data-attr-values-json="{values_json}" hidden></div>

<script>
(function () {
  // Какие панели показываем для каждого типа.
  var TYPE_SETTINGS = {
    text:        ['unit_optional'],
    number:      ['unit'],
    select:      ['values'],
    multiselect: ['values'],
    color:       ['values'],
    boolean:     []
  };

  var form = document.querySelector('[data-attr-form]');
  if (!form) return;

  var typeInput = form.querySelector('[data-attr-type-input]');
  var cards = form.querySelectorAll('[data-attr-type-card]');
  var settingsHeader = form.querySelector('[data-attr-settings-header]');
  var panels = form.querySelectorAll('[data-attr-panel]');

  function applyType(type) {
    typeInput.value = type;
    cards.forEach(function (c) {
      c.classList.toggle('is-selected', c.getAttribute('data-type') === type);
    });
    var visible = TYPE_SETTINGS[type] || [];
    var anySpecific = false;
    panels.forEach(function (p) {
      var key = p.getAttribute('data-attr-panel');
      var show = visible.indexOf(key) !== -1;
      p.style.display = show ? 'block' : 'none';
      if (show) anySpecific = true;
    });
    settingsHeader.style.display = anySpecific ? 'block' : 'none';
  }
  applyType(typeInput.value || 'text');
  cards.forEach(function (c) {
    c.addEventListener('click', function (e) {
      e.preventDefault();
      applyType(c.getAttribute('data-type'));
    });
  });

  // Auto-slug из title (только пока slug не трогали вручную).
  var labelEl = form.querySelector('[data-attr-label]');
  var slugEl = form.querySelector('[data-attr-slug]');
  var slugTouched = slugEl.value !== '';
  slugEl.addEventListener('input', function () { slugTouched = true; });
  function transliterate(s) {
    var map = {
      'а':'a','б':'b','в':'v','г':'g','д':'d','е':'e','ё':'yo','ж':'zh','з':'z','и':'i','й':'y',
      'к':'k','л':'l','м':'m','н':'n','о':'o','п':'p','р':'r','с':'s','т':'t','у':'u','ф':'f',
      'х':'h','ц':'c','ч':'ch','ш':'sh','щ':'sh','ъ':'','ы':'y','ь':'','э':'e','ю':'yu','я':'ya',
      'і':'i','ї':'yi','є':'ye','ґ':'g'
    };
    return s.toLowerCase().split('').map(function (ch) {
      return map[ch] !== undefined ? map[ch] : ch;
    }).join('').replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
  }
  labelEl.addEventListener('input', function () {
    if (!slugTouched) slugEl.value = transliterate(labelEl.value);
  });

  // Визуальный редактор вариантов значений (для select/multiselect/color).
  // Каждая строка хранит: label (text), color (color picker), image (URL после загрузки).
  var optionsWrap = form.querySelector('[data-attr-options]');
  var addBtn = form.querySelector('[data-attr-options-add]');
  var csrfMeta = document.querySelector('meta[name="csrf-token"]');
  var csrfToken = csrfMeta ? csrfMeta.getAttribute('content') : '';

  function escapeAttr(s) {
    return String(s == null ? '' : s).replace(/&/g, '&amp;').replace(/"/g, '&quot;').replace(/</g, '&lt;');
  }
  function defaultColor(opt) {
    var v = (opt && opt.color) || '';
    return /^#[0-9a-f]{3,8}$/i.test(v) ? v : '#cccccc';
  }
  function isUploadableImage(file) {
    return file && /^image\/(jpeg|png|gif|webp)$/i.test(file.type) && file.size <= 20 * 1024 * 1024;
  }

  function appendRow(opt, focus) {
    opt = opt || {};
    var row = document.createElement('div');
    row.className = 'cf-option-row cf-option-row--rich';
    row.innerHTML =
      '<span class="cf-option-handle" title="{lang key="shop.attribute.drag_title"}">⋮⋮</span>' +
      '<input type="text" class="cf-option-label" name="opt_values[]" value="' + escapeAttr(opt.label) + '" placeholder="{lang key="shop.attribute.option_placeholder"}">' +
      '<label class="cf-option-color" data-cf-color-wrap title="Цвет">' +
        '<input type="color" name="opt_colors[]" value="' + escapeAttr(defaultColor(opt)) + '">' +
      '</label>' +
      '<div class="cf-option-image" data-cf-image-wrap>' +
        '<input type="hidden" name="opt_images[]" value="' + escapeAttr(opt.image) + '" data-cf-image-input>' +
        '<button type="button" class="cf-option-image-btn" data-cf-image-pick 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"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>' +
          '<span>Изображение</span>' +
        '</button>' +
        '<input type="file" accept="image/jpeg,image/png,image/gif,image/webp" hidden data-cf-image-file>' +
        '<span class="cf-option-image-thumb" data-cf-image-thumb' + (opt.image ? '' : ' hidden') + '>' +
          (opt.image ? '<img src="' + escapeAttr(opt.image) + '" alt="">' : '') +
          '<button type="button" class="cf-option-image-remove" data-cf-image-remove title="Убрать картинку">×</button>' +
        '</span>' +
      '</div>' +
      '<button type="button" class="cf-option-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>';

    row.querySelector('.cf-option-del').addEventListener('click', function () {
      if (optionsWrap.querySelectorAll('.cf-option-row').length <= 1) {
        row.querySelector('.cf-option-label').value = '';
        row.querySelector('[data-cf-image-input]').value = '';
        clearThumb(row);
        row.querySelector('.cf-option-label').focus();
      } else {
        row.remove();
      }
    });

    var fileInput = row.querySelector('[data-cf-image-file]');
    row.querySelector('[data-cf-image-pick]').addEventListener('click', function () { fileInput.click(); });
    fileInput.addEventListener('change', function () {
      var file = fileInput.files && fileInput.files[0];
      if (!file) return;
      if (!isUploadableImage(file)) {
        alert('Файл должен быть jpg/png/gif/webp, не больше 20 МБ.');
        fileInput.value = '';
        return;
      }
      uploadImage(row, file);
    });
    row.querySelector('[data-cf-image-remove]').addEventListener('click', function () {
      row.querySelector('[data-cf-image-input]').value = '';
      clearThumb(row);
      fileInput.value = '';
    });

    applyTypeToRow(row, typeInput.value);
    optionsWrap.appendChild(row);
    if (focus) row.querySelector('.cf-option-label').focus();
  }

  function clearThumb(row) {
    var thumb = row.querySelector('[data-cf-image-thumb]');
    if (!thumb) return;
    var img = thumb.querySelector('img');
    if (img) img.remove();
    thumb.setAttribute('hidden', '');
  }

  function setThumb(row, url) {
    var thumb = row.querySelector('[data-cf-image-thumb]');
    if (!thumb) return;
    var img = thumb.querySelector('img');
    if (!img) {
      img = document.createElement('img');
      img.alt = '';
      thumb.insertBefore(img, thumb.firstChild);
    }
    img.src = url;
    thumb.removeAttribute('hidden');
  }

  function uploadImage(row, file) {
    var btn = row.querySelector('[data-cf-image-pick]');
    var prevLabel = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<span>Загрузка…</span>';
    var fd = new FormData();
    fd.append('file', file);
    fd.append('_csrf', csrfToken);
    fetch('/admin/media/upload', {
      method: 'POST',
      body: fd,
      headers: { 'X-CSRF-Token': csrfToken },
      credentials: 'same-origin'
    }).then(function (r) { return r.json(); }).then(function (json) {
      if (!json || !json.ok || !json.url) {
        alert('Не удалось загрузить файл' + (json && json.error ? ': ' + json.error : ''));
        return;
      }
      row.querySelector('[data-cf-image-input]').value = json.url;
      setThumb(row, json.url);
    }).catch(function () {
      alert('Сеть недоступна — попробуйте ещё раз.');
    }).finally(function () {
      btn.disabled = false;
      btn.innerHTML = prevLabel;
      row.querySelector('[data-cf-image-file]').value = '';
    });
  }

  function applyTypeToRow(row, type) {
    var colorWrap = row.querySelector('[data-cf-color-wrap]');
    var imageWrap = row.querySelector('[data-cf-image-wrap]');
    if (colorWrap) colorWrap.style.display = (type === 'color') ? '' : 'none';
    if (imageWrap) imageWrap.style.display = (type === 'select' || type === 'multiselect' || type === 'color') ? '' : 'none';
  }
  function applyTypeToAllRows(type) {
    optionsWrap.querySelectorAll('.cf-option-row').forEach(function (row) { applyTypeToRow(row, type); });
    var hintColor = form.querySelector('[data-attr-hint="color"]');
    var hintImage = form.querySelector('[data-attr-hint="image"]');
    if (hintColor) hintColor.style.display = type === 'color' ? '' : 'none';
    if (hintImage) hintImage.style.display = (type === 'select' || type === 'multiselect') ? '' : 'none';
  }

  function renderOptions(values) {
    optionsWrap.innerHTML = '';
    values.forEach(function (v) { appendRow(v, false); });
    if (values.length === 0) appendRow({}, false);
  }

  addBtn.addEventListener('click', function (e) { e.preventDefault(); appendRow({}, true); });

  var existing = [];
  try {
    var holder = document.querySelector('[data-attr-values-json]');
    existing = JSON.parse(holder ? holder.getAttribute('data-attr-values-json') || '[]' : '[]');
    if (!Array.isArray(existing)) existing = [];
  } catch (e) { existing = []; }
  renderOptions(existing);
  applyTypeToAllRows(typeInput.value || 'text');

  // Дополнительный обработчик клика по карточке типа — синхронизирует
  // видимость полей color/image у всех строк (основной applyType зашит выше).
  cards.forEach(function (c) {
    c.addEventListener('click', function () { applyTypeToAllRows(typeInput.value); });
  });

  // Drag-reorder через общий хелпер celenaSortable (pointer events).
  // sortable.js загружается defer — ждём, чтобы он успел определиться.
  function bindSortable() {
    if (typeof window.celenaSortable === 'function') {
      window.celenaSortable(optionsWrap, { handle: '.cf-option-handle', itemSelector: '.cf-option-row' });
    } else {
      setTimeout(bindSortable, 50);
    }
  }
  bindSortable();
})();
</script>

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