<!-- BEGIN: MAIN -->
<style>
  .sub_category:invalid {
  color: #a9a9a9;
  }
  @media only screen and (max-width: 767px) {
    .response-table td {
      padding-left: 10% !important;
    }
  }
  .select-styled[disabled] {
    background-color: #f0f0f0;
  }
</style>
<div class="centerwrap pt20 mb20">
  <div class="w700" style="margin: auto">
    <h1 class="f32 sm-text-center">Создание рекламы</h1>
    <div class="block-response mb15">
      <i class="ico-arrow-left dib v-align-m"></i>
      <a class="dib v-align-m f14 color-gray color-text" href="{PHP|cot_url('plug', 'e=ads')}">К списку рекламы</a>
    </div>
    <div id="foxPostForm" class="pt0 p15-20 white-bg-border w700">
      {FILE "{PHP.cfg.themes_dir}/{PHP.cfg.defaulttheme}/warnings.tpl"}
      <form action="{PHP|cot_url('plug', 'e=ads&m=add&act=add')}" method="POST" id="sendAdsRequest" name="sendAdsRequest" enctype="multipart/form-data" class="js-form">
        <div>
          <div class="mt10 pt5">
            <div>
              <label class="semibold" for="position">Место размещения</label>
              <div class="tooltipster tooltip_circle tooltip_circle--hover ml5" data-tooltip-text="<div class='tooltip-ico-warning'></div>Укажите в каком месте будет {PHP|cot_sitename('words', 'posted')} {PHP|cot_sitename('phrases', 'vasha')}.">?</div>
            </div>
            <select class="select-styled select-styled--thin long-touch-js f15 parents dib mr10 w100p js-position-select" name="position" autocomplete="off">
              <option value="" data-ratio="0.0" data-hint=""></option>
              <!-- BEGIN: POSITIONS_ROW -->
              <option value="{POS_ID}" data-ratio="{POS_RATIO}" data-hint="{POS_HINT}">{POS_TITLE}</option>
              <!-- END: POSITIONS_ROW -->
            </select>
            <p class="link-gray db">Коэффициент к стоимости: <b data-positionratio="">1.0x</b> <span class="tooltipster tooltip_circle tooltip_circle--hover ml5" data-tooltip-text="<div class='tooltip-ico-warning'></div>В зависимости от места размещения, может менятся коэффициент который умножается на конечную стоимость размещения в той или иной категории {PHP|cot_sitename('padeg', '_r')}.">?</span></p>
            <span class="js-position-error-field color-red hidden db"></span>
          </div>
        </div>
        <div>
          <div class="mt10 pt5">
            <div>
              <label class="semibold" for="marketid">Выберите {PHP|cot_sitename('padeg', 'v')}</label>
              <div class="tooltipster tooltip_circle tooltip_circle--hover ml5" data-tooltip-text="<div class='tooltip-ico-warning'></div>Выберите {PHP|cot_sitename('padeg', 'v')}, {PHP|cot_sitename('phrases', 'novyu_kotoraya')} будет {PHP|cot_sitename('words', 'showed')} пользователям как {PHP|cot_sitename('words', 'recomended')}.">?</div>
            </div>
            <select class="select-styled select-styled--thin long-touch-js f15 parents dib mr10 w100p js-marketid-select" name="marketid" autocomplete="off">
              <option value=""></option>
              <!-- BEGIN: MARKET_ROW -->
              <option value="{PRD_ID}" data-cat-cost="{PRD_CAT_COST}" data-cat-title="{PRD_CAT_TITLE}" data-subcat-cost="{PRD_SUBCAT_COST}" data-subcat-title="{PRD_SUBCAT_TITLE}" data-parcat-cost="{PRD_PARCAT_COST}" data-parcat-title="{PRD_PARCAT_TITLE}">{PRD_TITLE}</option>
              <!-- END: MARKET_ROW -->
            </select>
            <span class="js-marketid-error-field color-red hidden db"></span>
          </div>
        </div>
        <div id="categorieslvl">
          <div class="mt10 pt5">
            <div>
              <label class="semibold" for="catvariant">Категория</label>
              <div class="tooltipster tooltip_circle tooltip_circle--hover ml5" data-tooltip-text="<div class='tooltip-ico-warning'></div>На выбор доступны категории 1,2,3-го уровня. Стоимость размещения может отличаться.">?</div>
            </div>
            <select class="select-styled select-styled--thin long-touch-js f15 parents dib mr10 w100p js-catvariant-select" name="catvariant" autocomplete="off">
              <option value="1">1-ый уровень</option>
              <option value="2">2-ой уровень</option>
              <option value="3">3-ий уровень</option>
            </select>
            <span class="js-catvariant-error-field color-red hidden db"></span>
          </div>
        </div>
        <div>
          <div class="mt10 pt5">
            <div>
              <label class="semibold" for="period">Период размещения</label>
              <div class="tooltipster tooltip_circle tooltip_circle--hover ml5" data-tooltip-text="<div class='tooltip-ico-warning'></div>По истечению данного периода, показ рекламы будет приостановлен.">?</div>
            </div>
            <select class="select-styled select-styled--thin long-touch-js f15 dib mr10 w50p js-period-select" name="period" autocomplete="off">
              <!-- BEGIN: PERIOD_ROW -->
              <option value="{PERIOD_VAL}">{PERIOD_TITLE}</option>
              <!-- END: PERIOD_ROW -->
            </select>
          </div>
        </div>
        <div class="mt10 mb20">
          <table class="table-style response-table wi50p">
            <tbody>
              <tr class="m-clearfix">
                <td>Размещение в категории</td>
                <td></td>
              </tr>
              <tr class="m-clearfix">
                <td><b data-positioncattitle="">Не {PHP|cot_sitename('words', 'choiced')} {PHP|cot_sitename('padeg', 'i')}</b></td>
                <td><b data-positioncat="">0</b> <span class="rouble">Р</span></td>
              </tr>
              <tr class="m-clearfix">
                <td>Коэффициент места</td>
                <td><b data-positionratio="">0.0x</b></td>
              </tr>
              <tr class="m-clearfix">
                <td>Период</td>
                <td><b data-positionperiod="">1</b></td>
              </tr>
              <tr class="m-clearfix">
                <td class="text-right">Итого</td>
                <td><b data-positionsumm="">0</b> <span class="rouble">Р</span></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="bottom-form-filed mt0 pt0">
          <input type="submit" value="Разместить" class="js-sendDodjiRequest__submit green-btn btn--big pull-reset m-wMax w250 mt20"/>
          <input type="hidden" name="action" value="submit"/>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
var newAdModule = (function() {

	var _positionSelect;
  var _marketidSelect;
  var _periodSelect;
  var _catvariantSelect;

  var _marketidErrorField;
	var _positionErrorField;

	var _form;

	var _init = function(data) {
		_positionSelect = document.querySelector(data["positionSelect"]);
		_marketidSelect = document.querySelector(data["marketidSelect"]);
    _periodSelect = document.querySelector(data["periodSelect"]);
    _catvariantSelect = document.querySelector(data["catvariantSelect"]);

    _marketidErrorField = document.querySelector(data["marketidErrorField"]);
		_positionErrorField = document.querySelector(data["positionErrorField"]);

		_form = document.querySelector(data["form"]);

		_setEvents();
	};
	var _setEvents = function() {
		_positionSelect.addEventListener("change", _checkPosition);
    _marketidSelect.addEventListener("change", _checkMarketid);
    _periodSelect.addEventListener("change", _calcCost);
    _catvariantSelect.addEventListener("change", _calcCost);
		_form.onsubmit = _formSubmited;
	};
	var _checkPosition = function() {
		if(_positionSelect.value == 0) {
			_setError(_positionErrorField, "Выберите место размещения");
			return false;
		}
    <!-- IF {PHP.ads_positions_special.market_showonindex} > 0 -->
      if(_positionSelect.value == {PHP.ads_positions_special.market_showonindex}) {
        _catvariantSelect.value = 2;
        _catvariantSelect.setAttribute('disabled', 'disabled');
      } else {
        _catvariantSelect.removeAttribute('disabled');
      }
    <!-- ENDIF --->
    _calcCost();
		_unsetError(_positionErrorField);
		return true;
	};
	var _checkMarketid = function() {
		if(_marketidSelect.value == 0) {
			_setError(_marketidErrorField, "Выберите {PHP|cot_sitename('padeg', 'v')}");
			return false;
		}
		_unsetError(_marketidErrorField);

    var _marketData = _marketidSelect.options[_marketidSelect.selectedIndex];
    _catvariantSelect.options[0].text = '1-ый уровень' + (_marketData.dataset.parcatTitle != '' ? ' (' + _marketData.dataset.parcatTitle + ')' : '');
    _catvariantSelect.options[1].text = '2-ой уровень' + (_marketData.dataset.catTitle != '' ? ' (' + _marketData.dataset.catTitle + ')' : '');
    _catvariantSelect.options[2].text = '3-ий уровень' + (_marketData.dataset.subcatTitle != '' ? ' (' + _marketData.dataset.subcatTitle + ')' : '');

    _calcCost();
		return true;
	};
  var _calcCost = function() {
    var _posData = _positionSelect.options[_positionSelect.selectedIndex],
        _marketData = _marketidSelect.options[_marketidSelect.selectedIndex],
        _itog = 0;

    if(_marketidSelect.value > 0) {
      var _catTitle = _marketData.dataset.catTitle,
          _catCost = _marketData.dataset.catCost;
      if(_catvariantSelect.value == 3 && _marketData.dataset.subcatTitle != '') {
        _catTitle = _marketData.dataset.subcatTitle,
        _catCost = _marketData.dataset.subcatCost;
      } else if(_catvariantSelect.value == 1 && _marketData.dataset.parcatTitle != '') {
        _catTitle = _marketData.dataset.parcatTitle,
        _catCost = _marketData.dataset.parcatCost;
      }
      _itog = _catCost;
      $('[data-positioncat]').html(_catCost);
      $('[data-positioncattitle]').html(_catTitle);
    } else {
      $('[data-positioncattitle]').html('Не {PHP|cot_sitename('words', 'choiced')} {PHP|cot_sitename('padeg', 'i')}');
    }

    _itog = ((_periodSelect.value - 0) * _itog) * (_posData.dataset.ratio - 0);

    $('[data-positionratio]').html(_posData.dataset.ratio + 'x');
    $('[data-positionperiod]').html(_periodSelect.value);
    $('[data-positionsumm]').html((_itog > 0 ? _itog : 0));
	};
	var _formSubmited = function() {
		if(!_checkAll()) {
      return false;
		} else {
      return true;
    }
  };
	var _getErrorFieldByName = function(fieldName) {
		switch(fieldName) {
			case "position":
				return _positionErrorField;
      case "marketid":
				return _marketidErrorField;
		}
	};
	var _checkAll = function() {
		if(!_checkPosition()) {
			_scrollTo(_positionSelect);
			return false;
		}
    if(!_checkMarketid()) {
			_scrollTo(_positionSelect);
			return false;
		}
		return true;
	};
	var _setError = function(errorField, text) {
		errorField.innerText = text;
		errorField.classList.remove("hidden");
	};
	var _unsetError = function(errorField) {
		errorField.innerText = "";
		errorField.classList.add("hidden");
	};
	var _scrollTo = function(field) {
		$('html, body').animate({
			scrollTop: field.offsetTop - 120
		}, 200);
	};
	return {
		init:_init
	}
})();
newAdModule.init({
	"positionSelect":".js-position-select",
  "marketidSelect":".js-marketid-select",
  "periodSelect":".js-period-select",
  "catvariantSelect":".js-catvariant-select",
	"positionErrorField":".js-position-error-field",
  "marketidErrorField":".js-marketid-error-field",
	"form":".js-form"
});
</script>
<!-- END: MAIN -->