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

<style>
  .fb-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start}
  .fb-panel{background:#fff;border:1px solid #e9eef5;border-radius:14px;padding:18px 20px}
  .fb-panel h3{font-size:15px;margin:0 0 14px;color:#0b1320}
  .fb-card{border:1px solid #e6ebf2;border-radius:11px;padding:12px;margin-bottom:11px;background:#fafbfd}
  .fb-card.drag{opacity:.5}
  .fb-head{display:flex;gap:8px;align-items:center}
  .fb-head input[data-k="label"]{flex:1;font-weight:600}
  .fb-head select{max-width:160px}
  .fb-drag{cursor:grab;color:#aab4c2;display:flex;flex-shrink:0}
  .fb-del{border:0;background:transparent;color:#c0c8d4;cursor:pointer;padding:4px;border-radius:6px;flex-shrink:0}
  .fb-del:hover{color:#ef4444;background:#fde8e8}
  .fb-row{margin-top:10px}
  .fb-row>label{display:block;font-size:12px;color:#5c6a7d;margin-bottom:4px}
  .fb-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .fb-grid>span>label{display:block;font-size:12px;color:#5c6a7d;margin-bottom:4px}
  .fb-grid input,.fb-grid select{width:100%}
  .fb-req label{font-size:13px;color:#42536a;display:flex;align-items:center;gap:6px;margin-top:22px}
  .fb-card input,.fb-card select,.fb-card textarea{padding:7px 9px;border:1px solid #dde3ec;border-radius:8px;font-size:13px}
  .fb-row input,.fb-row textarea{width:100%;box-sizing:border-box}
  .fb-row textarea{min-height:104px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.55}
  .fb-drag{cursor:grab}.fb-drag:active{cursor:grabbing}
  .fb-card.fb-over{outline:2px dashed #1797F0;outline-offset:3px}
  .fb-add{display:flex;gap:8px;margin-top:6px}
  .fb-add select{flex:1;padding:9px;border:1px solid #dde3ec;border-radius:8px}
  @media(max-width:980px){.fb-wrap{grid-template-columns:1fr}}
</style>

<div class="page-head">
  <div><h1>{page_title}</h1><p class="muted"><a href="/admin/forms">← К списку форм</a>[if {is_edit}="1"] · <a href="/admin/forms/{f_id}/submissions">Заявки</a>[/if]</p></div>
</div>

<form method="post" action="{action}" id="formBuilder">
  {csrf}
  <input type="hidden" name="fields_json" id="fieldsJson">

  <div class="fb-wrap">
    <div class="fb-panel">
      <h3>Поля формы</h3>
      <div id="fieldList"></div>
      <div class="fb-add">
        <select id="fbType">
          <option value="text">Текст</option>
          <option value="textarea">Многострочный текст</option>
          <option value="email">Email</option>
          <option value="tel">Телефон</option>
          <option value="number">Число</option>
          <option value="date">Дата</option>
          <option value="select">Список (выпадающий)</option>
          <option value="radio">Выбор один (radio)</option>
          <option value="checkboxes">Выбор несколько</option>
          <option value="checkbox">Чекбокс</option>
          <option value="consent">Согласие (обязательное)</option>
          <option value="hidden">Скрытое</option>
        </select>
        <button type="button" class="btn btn-secondary" id="fbAdd">{icon name="plus" size="15"} Добавить поле</button>
      </div>
    </div>

    <div class="fb-panel">
      <h3>Настройки</h3>
      <div class="form-group"><label>Название формы</label><input type="text" name="title" value="{f_title}" required></div>
      [if {is_default}="1"]
        <div class="form-group"><label>Slug</label><input type="text" value="{f_slug}" disabled><small class="help">Основная форма лендинга. Slug менять нельзя.</small></div>
      [else]
        <div class="form-group"><label>Slug (для URL /form/…)</label><input type="text" name="slug" value="{f_slug}" placeholder="auto"></div>
      [/if]
      <div class="form-group"><label>Текст кнопки</label><input type="text" name="submit_text" value="{s_submit}" placeholder="Отправить"></div>
      <div class="form-group"><label>Заголовок «спасибо»</label><input type="text" name="ok_title" value="{s_ok_title}" placeholder="Спасибо!"></div>
      <div class="form-group"><label>Текст «спасибо»</label><input type="text" name="ok_text" value="{s_ok_text}"></div>
      <div class="form-group"><label>Уведомлять на email</label><input type="text" name="notify_emails" value="{s_emails}" placeholder="info@site.com, me@site.com"><small class="help">Через запятую. Telegram — если в настройках сайта задан бот.</small></div>
      <div class="form-group"><label class="check-inline"><input type="checkbox" name="telegram_enabled" value="1" [if {s_tg}="1"]checked[/if]> Дублировать в Telegram</label></div>
      <div class="form-row">
        <div class="form-group"><label>Ценность заявки, €</label><input type="number" name="lead_value" value="{s_value}" min="0" step="1"></div>
        <div class="form-group"><label>Google Ads send_to</label><input type="text" name="conversion_send_to" value="{s_conv}" placeholder="AW-…/…"></div>
      </div>
      <div class="form-actions">
        <button class="btn btn-primary" type="submit">Сохранить</button>
        <a class="btn btn-secondary" href="/admin/forms">Отмена</a>
      </div>
    </div>
  </div>
</form>

<script type="application/json" id="fieldsData">{fields_json|raw}</script>
<script>
(function () {
  var X = '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 6l12 12M18 6L6 18"/></svg>';
  var GRIP = '<svg width="14" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="9" cy="6" r="1.6"/><circle cx="15" cy="6" r="1.6"/><circle cx="9" cy="12" r="1.6"/><circle cx="15" cy="12" r="1.6"/><circle cx="9" cy="18" r="1.6"/><circle cx="15" cy="18" r="1.6"/></svg>';
  var TYPES = [['text','Текст'],['textarea','Многострочный'],['email','Email'],['tel','Телефон'],['number','Число'],['date','Дата'],['select','Список'],['radio','Выбор один'],['checkboxes','Выбор неск.'],['checkbox','Чекбокс'],['consent','Согласие'],['hidden','Скрытое']];
  var HASOPT = { select: 1, radio: 1, checkboxes: 1 };
  var data = [];
  try { data = JSON.parse(document.getElementById('fieldsData').textContent) || []; } catch (e) { data = []; }
  if (!Array.isArray(data)) data = [];
  data.forEach(function (f) { f._orig = (f.label || ''); });

  var wrap = document.getElementById('fieldList');
  var hidden = document.getElementById('fieldsJson');

  function esc(s) { return String(s == null ? '' : s).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;'); }
  function optStr(opts) {
    if (!Array.isArray(opts)) return '';
    return opts.map(function (o) { return (o && typeof o === 'object') ? (o.value || '') : o; }).join('\n');
  }
  function typeSel(sel) {
    return TYPES.map(function (t) { return '<option value="'+t[0]+'"'+(t[0]===sel?' selected':'')+'>'+t[1]+'</option>'; }).join('');
  }

  function render() {
    wrap.innerHTML = '';
    data.forEach(function (f, i) {
      var card = document.createElement('div');
      card.className = 'fb-card'; card.setAttribute('draggable', 'false'); card.dataset.idx = i;
      var optBlock = HASOPT[f.type] ? '<div class="fb-row"><label>Варианты (по одному в строке)</label><textarea data-k="options" rows="5">'+esc(optStr(f.options))+'</textarea></div>' : '';
      card.innerHTML =
        '<div class="fb-head"><span class="fb-drag">'+GRIP+'</span>'
        + '<input type="text" data-k="label" placeholder="Подпись поля" value="'+esc(f.label||'')+'">'
        + '<select data-k="type">'+typeSel(f.type||'text')+'</select>'
        + '<button type="button" class="fb-del" title="Удалить">'+X+'</button></div>'
        + '<div class="fb-row fb-grid">'
        + '<span><label>Ключ (name)</label><input type="text" data-k="key" value="'+esc(f.key||'')+'" placeholder="авто"></span>'
        + '<span><label>Плейсхолдер</label><input type="text" data-k="placeholder" value="'+esc(f.placeholder||'')+'"></span>'
        + '<span><label>Ширина</label><select data-k="width"><option value="full"'+(f.width!=='half'?' selected':'')+'>Полная</option><option value="half"'+(f.width==='half'?' selected':'')+'>Половина</option></select></span>'
        + '<span class="fb-req"><label><input type="checkbox" data-k="required"'+(f.required?' checked':'')+'> Обязательное</label></span>'
        + '</div>' + optBlock;
      wrap.appendChild(card);
    });
  }

  function cardIdx(el) { var c = el.closest('.fb-card'); return c ? parseInt(c.dataset.idx, 10) : -1; }

  wrap.addEventListener('input', function (e) {
    var i = cardIdx(e.target); if (i < 0) return;
    var k = e.target.getAttribute('data-k'); if (!k) return;
    if (k === 'options') { data[i].options = e.target.value.split('\n').map(function (s) { return s.trim(); }).filter(Boolean); }
    else if (k !== 'required' && k !== 'type') { data[i][k] = e.target.value; }
  });
  wrap.addEventListener('change', function (e) {
    var i = cardIdx(e.target); if (i < 0) return;
    var k = e.target.getAttribute('data-k'); if (!k) return;
    if (k === 'required') { data[i].required = e.target.checked; }
    else if (k === 'type') { data[i].type = e.target.value; render(); }
    else if (k === 'width') { data[i].width = e.target.value; }
  });
  wrap.addEventListener('click', function (e) {
    if (e.target.closest('.fb-del')) { var i = cardIdx(e.target); if (i >= 0) { data.splice(i, 1); render(); } }
  });

  // drag-reorder: тащим ТОЛЬКО за ручку (грип), иначе перетаскивание мешало бы
  // выделять текст и редактировать поля (в т.ч. «Плейсхолдер»).
  var dragFrom = -1;
  function clearOver() { Array.prototype.forEach.call(wrap.querySelectorAll('.fb-over'), function (c) { c.classList.remove('fb-over'); }); }
  // включаем draggable у карточки только при нажатии на грип
  wrap.addEventListener('mousedown', function (e) {
    var grip = e.target.closest('.fb-drag');
    Array.prototype.forEach.call(wrap.children, function (c) { c.draggable = false; });
    if (grip) { var card = grip.closest('.fb-card'); if (card) card.draggable = true; }
  });
  wrap.addEventListener('dragstart', function (e) {
    var c = e.target.closest('.fb-card'); if (!c || !c.draggable) { e.preventDefault(); return; }
    dragFrom = parseInt(c.dataset.idx, 10); c.classList.add('drag');
    try { e.dataTransfer.effectAllowed = 'move'; e.dataTransfer.setData('text/plain', String(dragFrom)); } catch (err) {}
  });
  wrap.addEventListener('dragend', function () {
    dragFrom = -1; clearOver();
    Array.prototype.forEach.call(wrap.children, function (c) { c.classList.remove('drag'); c.draggable = false; });
  });
  wrap.addEventListener('dragover', function (e) {
    if (dragFrom < 0) return;
    e.preventDefault();
    var c = e.target.closest('.fb-card');
    clearOver();
    if (c && parseInt(c.dataset.idx, 10) !== dragFrom) c.classList.add('fb-over');
  });
  wrap.addEventListener('drop', function (e) {
    e.preventDefault();
    var c = e.target.closest('.fb-card'); clearOver();
    if (!c || dragFrom < 0) return;
    var to = parseInt(c.dataset.idx, 10);
    if (to === dragFrom) return;
    var moved = data.splice(dragFrom, 1)[0];
    data.splice(to, 0, moved);
    dragFrom = -1; render();
  });

  document.getElementById('fbAdd').addEventListener('click', function () {
    var t = document.getElementById('fbType').value;
    data.push({ key: '', label: '', type: t, required: false, width: 'full', options: HASOPT[t] ? ['Вариант 1', 'Вариант 2'] : [] });
    render();
  });

  // сериализация при отправке: сбрасываем lang_key, если подпись изменили
  document.getElementById('formBuilder').addEventListener('submit', function () {
    var out = data.map(function (f) {
      var o = { key: f.key || '', label: f.label || '', type: f.type || 'text', required: !!f.required, width: f.width === 'half' ? 'half' : 'full' };
      if (f.placeholder) o.placeholder = f.placeholder;
      if (f.help) o.help = f.help;
      if (HASOPT[f.type]) o.options = Array.isArray(f.options) ? f.options : [];
      if (f.lang_key && (f.label || '') === (f._orig || '')) {
        o.lang_key = f.lang_key;
        if (HASOPT[f.type] && Array.isArray(f._origOptions)) o.options = f._origOptions;
      }
      return o;
    });
    hidden.value = JSON.stringify(out);
  });

  // запоминаем исходные опции (для сохранения мультиязычных вариантов, если не меняли)
  data.forEach(function (f) { if (Array.isArray(f.options)) f._origOptions = f.options.slice(); });

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

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