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

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

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

  <h3 class="cf-section-h">1. Где показывать поле?</h3>
  <div class="form-row">
    <div class="form-group">
      <label>Применяется к</label>
      <select name="entity_type">
        [foreach var="entities" as="e"]
          <option value="{e.slug}" [if {row.entity_type}={e.slug}]selected[/if]>{e.label}</option>
        [/foreach]
      </select>
      <small class="help">Поле появится в форме выбранного раздела.</small>
    </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>

  <h3 class="cf-section-h">2. Как называется поле?</h3>
  <div class="form-row">
    <div class="form-group">
      <label>Название <span class="req">*</span></label>
      <input type="text" name="label" value="{row.label}" placeholder="Например: Цена, Автор книги, Размер упаковки" required data-cf-label>
      <small class="help">Человекопонятное название, увидит редактор в форме.</small>
    </div>
    <div class="form-group">
      <label>Машинный ключ (slug)</label>
      <input type="text" name="slug" value="{row.slug}" placeholder="авто из названия" data-cf-slug>
      <small class="help">Латиница/цифры/дефис. Используется в шаблонах: <code>{news.fields.your_slug}</code>.</small>
    </div>
  </div>

  <h3 class="cf-section-h">3. Какого типа это поле?</h3>
  <input type="hidden" name="type" value="{row.type}" data-cf-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-cf-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-cf-settings-header>4. Настройки поля</h3>

  <div class="cf-panel" data-cf-panel="placeholder">
    <div class="form-group">
      <label>Подсказка внутри поля (placeholder)</label>
      <input type="text" name="opt_placeholder" value="{settings.placeholder}" placeholder="Например: Введите номер телефона">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="maxlength">
    <div class="form-group">
      <label>Максимальная длина (символов)</label>
      <input type="number" name="opt_maxlength" value="{settings.maxlength}" min="1" max="65535" placeholder="оставьте пустым — без ограничения">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="default">
    <div class="form-group">
      <label>Значение по умолчанию</label>
      <input type="text" name="opt_default" value="{settings.default}">
      <small class="help">Это значение будет подставлено, если пользователь ничего не введёт.</small>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="rows">
    <div class="form-group">
      <label>Сколько строк показывать</label>
      <input type="number" name="opt_rows" value="{settings.rows}" min="1" max="30" placeholder="3">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="min">
    <div class="form-group">
      <label>Минимальное значение</label>
      <input type="number" name="opt_min" value="{settings.min}" step="any" placeholder="без ограничения">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="max">
    <div class="form-group">
      <label>Максимальное значение</label>
      <input type="number" name="opt_max" value="{settings.max}" step="any" placeholder="без ограничения">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="step">
    <div class="form-group">
      <label>Шаг изменения</label>
      <input type="number" name="opt_step" value="{settings.step}" step="any" placeholder="1">
      <small class="help">Для цены — 0.01, для количества — 1.</small>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="default_number">
    <div class="form-group">
      <label>Значение по умолчанию</label>
      <input type="number" name="opt_default_number" value="{settings.default}" step="any">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="default_bool">
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="opt_default_bool" value="1" [if {settings.default}]checked[/if]> Включено по умолчанию</label>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="min_date">
    <div class="form-group">
      <label>Минимальная дата</label>
      <input type="date" name="opt_min_date" value="{settings.min_date}">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="max_date">
    <div class="form-group">
      <label>Максимальная дата</label>
      <input type="date" name="opt_max_date" value="{settings.max_date}">
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="image_count">
    <div class="form-group">
      <label>Сколько изображений можно загрузить</label>
      <input type="number" name="opt_image_count" value="{settings.image_count}" min="1" max="50" placeholder="1">
      <small class="help">1 — одна картинка, больше — галерея. Максимум 50.</small>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="image_max_size">
    <div class="form-group">
      <label>Максимальная сторона, px</label>
      <input type="number" name="opt_image_max_size" value="{settings.image_max_size}" min="200" max="8000" placeholder="как в глобальных настройках медиа">
      <small class="help">Если загружаемое изображение больше — оно будет уменьшено. Пусто — используются глобальные настройки.</small>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="image_quality">
    <div class="form-group">
      <label>Качество сжатия, %</label>
      <input type="number" name="opt_image_quality" value="{settings.image_quality}" min="10" max="100" placeholder="как в глобальных настройках медиа">
      <small class="help">80–85 — оптимально. Пусто — использовать глобальные настройки.</small>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="values">
    <div class="form-group">
      <label>Варианты выбора</label>
      <small class="help" style="margin-bottom:8px">Каждый вариант — отдельная строка. Перетаскивайте за ⋮⋮ чтобы менять порядок.</small>
      <div class="cf-options" data-cf-options></div>
      <button type="button" class="btn btn-secondary" data-cf-options-add style="margin-top:8px">
        {icon name="plus" size="14"} Добавить вариант
      </button>
    </div>
  </div>

  <div class="cf-panel" data-cf-panel="help" style="display:block">
    <div class="form-group">
      <label>Подсказка под полем (для редактора)</label>
      <input type="text" name="help" value="{settings.help}" placeholder="Необязательно. Появится серым текстом под полем.">
    </div>
  </div>

  <h3 class="cf-section-h">5. Правила</h3>
  <div class="form-row">
    <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">Запись нельзя сохранить, пока поле не заполнено.</small>
    </div>
    <div class="form-group">
      <label class="checkbox"><input type="checkbox" name="is_searchable" value="1" [if {row.is_searchable}]checked[/if]> Использовать в поиске/фильтрах</label>
      <small class="help">Позволит фильтровать записи по этому полю на сайте.</small>
    </div>
  </div>

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

<!-- Передаём значения select-опций в JS через data-атрибут: содержимое script-тегов
     не интерполируется шаблонизатором, а data-атрибут — обычный HTML. -->
<div data-cf-values-json="{settings.values_json}" hidden></div>

<script>
(function () {
  // Описания типов: какие настройки показывать для каждого.
  var TYPE_SETTINGS = {
    text:        ['placeholder', 'maxlength', 'default'],
    textarea:    ['placeholder', 'rows', 'maxlength', 'default'],
    number:      ['min', 'max', 'step', 'default_number'],
    checkbox:    ['default_bool'],
    select:      ['values', 'default'],
    multiselect: ['values'],
    date:        ['min_date', 'max_date', 'default'],
    url:         ['placeholder', 'default'],
    email:       ['placeholder', 'default'],
    image:       ['image_count', 'image_max_size', 'image_quality']
  };

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

  var typeInput = form.querySelector('[data-cf-type-input]');
  var cards = form.querySelectorAll('[data-cf-type-card]');
  var settingsHeader = form.querySelector('[data-cf-settings-header]');
  var panels = form.querySelectorAll('[data-cf-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-cf-panel');
      if (key === 'help') { p.style.display = 'block'; return; }
      var show = visible.indexOf(key) !== -1;
      p.style.display = show ? 'block' : 'none';
      if (show) anySpecific = true;
    });
    settingsHeader.style.display = anySpecific || true ? 'block' : 'none';
  }
  applyType(typeInput.value || 'text');
  cards.forEach(function (c) {
    c.addEventListener('click', function (e) {
      e.preventDefault();
      applyType(c.getAttribute('data-type'));
    });
  });

  // Slug auto-gen из label, только пока slug пустой или не трогали вручную.
  var labelEl = form.querySelector('[data-cf-label]');
  var slugEl = form.querySelector('[data-cf-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);
  });

  // Options editor для select/multiselect
  var optionsWrap = form.querySelector('[data-cf-options]');
  var addBtn = form.querySelector('[data-cf-options-add]');

  function renderOptions(values) {
    optionsWrap.innerHTML = '';
    values.forEach(function (v) { appendRow(v, false); });
    if (values.length === 0) appendRow('', false);
  }
  function appendRow(value, focus) {
    var row = document.createElement('div');
    row.className = 'cf-option-row';
    row.innerHTML =
      '<span class="cf-option-handle" title="Перетащить">⋮⋮</span>' +
      '<input type="text" name="opt_values[]" value="' + (value || '').replace(/"/g, '&quot;') + '" placeholder="Введите значение">' +
      '<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('input').value = '';
        row.querySelector('input').focus();
      } else {
        row.remove();
      }
    });
    optionsWrap.appendChild(row);
    if (focus) row.querySelector('input').focus();
  }
  addBtn.addEventListener('click', function (e) { e.preventDefault(); appendRow('', true); });

  // Инициализация значений из data-атрибута
  var valuesHolder = document.querySelector('[data-cf-values-json]');
  var existing = [];
  try {
    existing = JSON.parse(valuesHolder ? valuesHolder.getAttribute('data-cf-values-json') || '[]' : '[]');
    if (!Array.isArray(existing)) existing = [];
  } catch (e) { existing = []; }
  renderOptions(existing);

  // Drag-reorder через общий celenaSortable (pointer events — стабильнее HTML5 DnD).
  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"}
