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

<style>
  .match-row{display:flex;gap:8px;align-items:stretch}
  .match-row input{flex:1}
  .czpick{position:fixed;inset:0;z-index:1000;background:rgba(11,19,32,.62);display:none;flex-direction:column}
  .czpick.is-open{display:flex}
  .czpick__bar{background:#0b1320;color:#fff;padding:11px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:13.5px}
  .czpick__bar b{color:#5ec1ff}
  .czpick iframe{flex:1;width:100%;border:0;background:#fff}
  .czpick__hint{display:flex;align-items:center;gap:9px}
  .czpick__dot{width:9px;height:9px;border-radius:50%;background:#22e07a;flex-shrink:0}
</style>

<div class="page-head">
  <div>
    <h1>{page_title}</h1>
    <p class="muted"><a href="/admin/analytics/goals">← К списку целей</a></p>
  </div>
</div>

<form method="post" action="{action}" class="form">
  {csrf}

  <div class="form-row">
    <div class="form-group">
      <label>Название цели</label>
      <input type="text" name="name" value="{g.name}" placeholder="Напр.: Клик «Заказать»" required>
    </div>
    <div class="form-group">
      <label>Ценность конверсии, €</label>
      <input type="number" name="value_eur" value="{g.value_eur}" min="0" step="1">
      <small class="help">Сколько денег в среднем приносит <b>одно</b> такое действие (средняя прибыль или сумма сделки с одной заявки/звонка). Нужно только для подсчёта суммарной ценности и окупаемости рекламы на дашборде: «всего целей × ценность = €…». Не знаете — оставьте 0.</small>
    </div>
  </div>

  <div class="form-row">
    <div class="form-group">
      <label>Тип цели</label>
      <select name="type" id="goalType">
        <option value="selector_click" [if {t_selector}="1"]selected[/if]>Клик по селектору</option>
        <option value="url_visit" [if {t_url}="1"]selected[/if]>Визит страницы</option>
        <option value="form_submit" [if {t_form}="1"]selected[/if]>Отправка формы</option>
        <option value="custom_event" [if {t_custom}="1"]selected[/if]>Своё событие (custom)</option>
      </select>
    </div>
    <div class="form-group">
      <label>Порядок</label>
      <input type="number" name="sort_order" value="{g.sort_order}" min="0">
    </div>
  </div>

  <div class="form-group">
    <label>Условие срабатывания</label>
    <div class="match-row">
      <input type="text" name="match_value" id="matchValue" value="{g.match_value}" placeholder="условие">
      <button type="button" class="btn btn-secondary" id="czPickBtn" style="display:none">{icon name="eye" size="15"} Выбрать на сайте</button>
    </div>
    <small class="help" data-help="selector_click">CSS-селектор элемента, по клику на который засчитывается цель. Не обязательно знать CSS — нажмите <b>«Выбрать на сайте»</b> и кликните нужную кнопку. Напр.: <code>a[href^="tel:"]</code> или <code>.cz-btn--primary</code></small>
    <small class="help" data-help="url_visit">Путь страницы (визит = конверсия). Напр.: <code>/thank-you</code>. Поддерживается <code>*</code>: <code>/services/*</code></small>
    <small class="help" data-help="form_submit">Имя события отправки формы. Лендинговая форма шлёт <code>generate_lead</code>.</small>
    <small class="help" data-help="custom_event">Имя события, которое вы вызываете в коде: <code>window.celenaTrack('имя')</code>.</small>
  </div>

  <div class="form-group">
    <label class="check-inline">
      <input type="checkbox" name="active" value="1" [if {is_active}="1"]checked[/if]> Цель активна
    </label>
    <small class="help">Неактивные цели не трекаются на сайте, но их статистика сохраняется.</small>
  </div>

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

<!-- Визуальный выбор элемента -->
<div class="czpick" id="czPicker">
  <div class="czpick__bar">
    <span class="czpick__hint"><span class="czpick__dot"></span>Наведите на нужный элемент и кликните — селектор подставится сам. <b>Esc</b> — отмена.</span>
    <button type="button" class="btn btn-secondary btn-sm" id="czPickClose">Закрыть</button>
  </div>
  <iframe id="czPickFrame" title="Выбор элемента"></iframe>
</div>

<script>
(function () {
  var sel = document.getElementById('goalType');
  var pickBtn = document.getElementById('czPickBtn');
  var helps = document.querySelectorAll('[data-help]');
  function upd() {
    helps.forEach(function (h) { h.style.display = (h.getAttribute('data-help') === sel.value) ? '' : 'none'; });
    if (pickBtn) pickBtn.style.display = (sel.value === 'selector_click') ? '' : 'none';
  }
  if (sel) { sel.addEventListener('change', upd); upd(); }

  // ── Визуальный выбор элемента на сайте (iframe того же origin) ──
  var modal = document.getElementById('czPicker');
  var frame = document.getElementById('czPickFrame');
  var input = document.getElementById('matchValue');
  var closeBtn = document.getElementById('czPickClose');

  function esc(s) { return String(s).replace(/([^a-zA-Z0-9_-])/g, '\\$1'); }
  function badClass(c) { return !c || /^(cz-in|is-|active|open|__cz|cz-open|cz-err)/.test(c); }
  function selectorFor(el) {
    if (!el || el.nodeType !== 1) return '';
    // ссылки tel/mailto/whatsapp — частые цели, удобный короткий селектор
    if (el.tagName === 'A') {
      var href = el.getAttribute('href') || '';
      if (href.indexOf('tel:') === 0) return 'a[href^="tel:"]';
      if (href.indexOf('mailto:') === 0) return 'a[href^="mailto:"]';
      if (href.indexOf('wa.me') > -1 || href.indexOf('whatsapp') > -1) return 'a[href*="wa.me"]';
    }
    if (el.id) return '#' + esc(el.id);
    var parts = [], node = el, depth = 0;
    while (node && node.nodeType === 1 && node.tagName.toLowerCase() !== 'html' && depth < 5) {
      if (node.id) { parts.unshift('#' + esc(node.id)); break; }
      var part = node.tagName.toLowerCase();
      var classes = (typeof node.className === 'string' ? node.className : '').trim().split(/\s+/).filter(function (c) { return !badClass(c); });
      if (classes.length) part += '.' + classes.slice(0, 2).map(esc).join('.');
      else {
        var p = node.parentNode, n = 1, s = node;
        while ((s = s.previousElementSibling)) { if (s.tagName === node.tagName) n++; }
        if (p && p.children.length > 1) part += ':nth-of-type(' + n + ')';
      }
      parts.unshift(part);
      // достаточно класса — дальше вверх не идём
      if (classes.length) break;
      node = node.parentNode; depth++;
    }
    return parts.join(' > ');
  }

  function openPicker() {
    modal.classList.add('is-open');
    frame.src = '/#__czpick';
  }
  function closePicker() { modal.classList.remove('is-open'); frame.src = 'about:blank'; }

  if (pickBtn) pickBtn.addEventListener('click', openPicker);
  if (closeBtn) closeBtn.addEventListener('click', closePicker);
  document.addEventListener('keydown', function (e) { if (e.key === 'Escape' && modal.classList.contains('is-open')) closePicker(); });

  if (frame) frame.addEventListener('load', function () {
    var doc;
    try { doc = frame.contentDocument; } catch (e) { doc = null; }
    if (!doc || !doc.body) return;
    var st = doc.createElement('style');
    st.textContent = '.__czhl{outline:2px solid #1797F0 !important;outline-offset:1px !important;background:rgba(23,151,240,.10) !important;cursor:crosshair !important}.cz-gdpr{display:none !important}*{cursor:crosshair !important}';
    doc.head.appendChild(st);
    var last = null;
    doc.addEventListener('mouseover', function (e) {
      if (last) last.classList.remove('__czhl');
      last = e.target; if (last && last.classList) last.classList.add('__czhl');
    }, true);
    doc.addEventListener('click', function (e) {
      e.preventDefault(); e.stopPropagation();
      var t = e.target;
      if (t && t.closest) { var c = t.closest('a,button,[role=button]'); if (c) t = c; }
      var s = selectorFor(t);
      if (s && input) input.value = s;
      closePicker();
    }, true);
  });
})();
</script>

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