<!-- Кнопка Сохранить фильтр лежит рядом с кнопкой Очистить фильтр -->
<button type="button" class="btn white" id="save-filter">Сохранить фильтр</button>
<!-- // -->

<div class="modalover modls" id="modal-save-filter" style="display: none;">
    <div class="pn_fltrmob pn_regmap" style="width:35%;">
      <h3>Сохранить фильтр</h3>
      <a href="javascript:void(0)" class="cls_lnkz">
        <i class="icon icon-icn_closes"></i>
      </a>
      <div class="col-xs-12 col-sm-12">
        <div class="pn_regmap_wrapper">
          <div class="pn_regmap_wrapper">
            <form id="save-filter-form" style="width:100%;" action="">
              <input type="hidden" name="ajax_action" value="saveFilter">
              <input type="hidden" name="is_filter_ajax" value="Y">
              <div class="pn_line form-group" style="overflow: hidden;" id="filter-name-field-wrapper">
                <div class="col-xs-12 col-sm-12">
                  <label class="blck">Название фильтра</label>
                  <input type="text" class="inp form-control" name="filterName" placeholder="Название фильтра" value="" required="">
                </div>
              </div>
              <div class="pn_line form-group" style="overflow: hidden;display: none;" id="url-field-wrapper">
                <div class="col-xs-12 col-sm-12">
                  <label class="blck">Ссылка на фильтр</label>
                  <input type="text" class="inp form-control" name="savedFilterUrl" placeholder="Ссылка на фильтр" value="">
                </div>
              </div>
              <div class="pn_line form-group form-group--is-show-filter" style="overflow: hidden;" id="is-show-filter-field-wrapper">
                <div class="col-xs-12 col-sm-12 saved-filter-item--active-wrapper">
                  <input name="isShowFilter" type="checkbox" id="is-show-filter" hidden="hidden" class="nostyled" value="Y">
                  <label for="is-show-filter" class="pm_item-name"><span>Включить поиск в подборке</span></label>
                </div>
              </div>
              <div class="pnhrs"></div>
              <div class="pn_line form-group text-center">
                <div class="col-xs-12">
                  <input type="submit" name="web_form_submit" class="btn bg red" value="Сохранить">
                </div>
                <div class="col-xs-12">
                  <input type="button" name="web_form_save" class="btn bg red copyBuffer" value="Скопировать" style="display: none;" data-copy="" data-placement="top" data-content="скопировано в буфер">
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>
    $(function () {
      $('.copyBuffer').on('click', function (e) {
        e.preventDefault();

        $(this).popover();
        $(this).popover('show');

        if ($(this).data('copy').length > 0) {
          copyToClipboard($(this).data('copy'));
        }

        setTimeout(function () {
          $('.copyBuffer').popover('destroy');
        }, 1500);
      });

      $(document).on('click', '#save-filter', function (e) {
        e.preventDefault();

        let saveFilterWindow = $('#modal-save-filter');

        $('[name=web_form_submit]', saveFilterWindow).show();
        $('[name=web_form_close]', saveFilterWindow).hide();
        $('[name=web_form_save]', saveFilterWindow).hide();
        $('[name=is-show-filter]', saveFilterWindow).checked = false;
        $('#filter-name-field-wrapper').show();
        $('#is-show-filter-field-wrapper').show();
        $('#url-field-wrapper').hide();

        saveFilterWindow.show();

        $(saveFilterWindow).find('[name=filterName]').focus();
      });

      $('[name=web_form_close]').on('click', function () {
        $(this).parents('.pn_fltrmob').find('.cls_lnkz').trigger('click');

        return false;
      });

      $('[name=web_form_save]').on('click', function () {
        $(this).parents('.pn_fltrmob').find('[name=savedFilterUrl]').focus().select();

        try {
          document.execCommand('copy');
        } catch (error) {
          console.error('Can`t copy');
        }

        return false;
      });

      $('#save-filter-form').on('submit', function (e) {
        e.preventDefault();

        let arFilter = $('#form_apartment_list_filter').serializeArray(),
          arFormData = $(this).serializeArray(),
          data = $.extend(arFilter, arFormData),
          form = this,
          isUseSaveUser = <?= USE_SAVE_USERS ? 'true' : 'false'; ?>;

        $.ajax({
          url: '<?= $APPLICATION->GetCurDir() ?>',
          data: data,
          method: 'post',
          dataType: 'json',
          success: function (response) {
            if (response.error) {
              console.error(response.error_msg);
              return;
            }

            form.reset();

            if (isUseSaveUser) {
              if (response.hasOwnProperty('url') && response.url != '' && response.hasOwnProperty('moveToPublic')) {
                document.location.href = response.url;
              } else {
                $('#modal-save-filter-send').find('[name=filterXmlId]').val(response.filterXmlId);
                $('#modal-save-filter-send').show();
              }
            } else {
              $('[name=savedFilterUrl]', $(form)).val(response.url);
              $('.copy_buffer', $(form)).attr({'data-copy': response.url});

              $('[name=web_form_submit]').hide();
              $('[name=web_form_close]').show();
              $('[name=web_form_save]').show();

              $('#is-show-filter-field-wrapper').hide();

              $('#filter-name-field-wrapper').fadeOut(function () {
                $('#url-field-wrapper').fadeIn(function () {
                  $('[name=savedFilterUrl]', $(this)).focus().select();
                });
              });
            }
          }
        });
      });
    });
  </script>