<?php echo $header; ?>
<div class="container-fluid bread_backg bread-desk">
<div class="container">
  <ul class="breadcrumb">
    <?php foreach ($breadcrumbs as $breadcrumb) { ?>
    <li><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a></li>
    <?php } ?>
  </ul>
  </div>
</div>
<div class="container" id="affiliate-tracking">
  <div class="row"><?php echo $column_left; ?>
    <?php if ($column_left && $column_right) { ?>
    <?php $class = 'col-sm-6'; ?>
    <?php } elseif ($column_left || $column_right) { ?>
    <?php $class = 'col-sm-9'; ?>
    <?php } else { ?>
    <?php $class = 'col-sm-12'; ?>
    <?php } ?>
    <div id="content" class="<?php echo $class; ?>"><?php echo $content_top; ?>
      <h1><?php echo $heading_title; ?></h1>
      <p><?php echo $text_description; ?></p>
      <div class="form-horizontal">
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-code"><?php echo $entry_code; ?></label>
          <div class="col-sm-10">
            <textarea cols="40" rows="5" placeholder="<?php echo $entry_code; ?>" id="input-code" class="form-control" readonly><?php echo $code; ?></textarea>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-generator"><span data-toggle="tooltip" title="<?php echo $help_generator; ?>"><?php echo $entry_generator; ?></span></label>
          <div class="col-sm-10">           
            <div class="input-group">
              <input type="text" name="product" value="" placeholder="<?php echo $entry_generator; ?>" id="input-generator"  class="form-control">
              <div class="input-group-btn">
                <button name="search" type="button" id="search-button" class="btn btn-primary">Ara</button>
              </div><!-- /btn-group -->
            </div>
            <ul name="results" class="dropdown-menu" style="top: 34px; left: 15px; display: none;">

            </ul>
          </div>
        </div>
        <div class="form-group">
          <label class="col-sm-2 control-label" for="input-link"><?php echo $entry_link; ?></label>
          <div class="col-sm-10">
            <textarea name="link" cols="40" rows="5" placeholder="<?php echo $entry_link; ?>" id="input-link" class="form-control"></textarea>
          </div>
        </div>
    </div>
      <div class="buttons clearfix">
        <div class="pull-right">
          <a href="<?php echo $continue; ?>" class="btn btn-primary"><?php echo $button_continue; ?></a>
          <button class="btn btn-primary" name="button-copy"><?php echo $button_copy; ?></button>
       </div>
      </div>
      <?php echo $content_bottom; ?></div>
    <?php echo $column_right; ?></div>
</div>
<script type="text/javascript" src="//scripts.piyersoft.com/javascript/jquery/jquery-ui/pagejquery-ui.js"></script>

<script type="text/javascript">

document.addEventListener("click", (evt) => {
    const dropdownElement = $("ul[name='results']");
    let targetElement = evt.target; // clicked element

    do {
        if (targetElement == dropdownElement) {
            return;
        }
        targetElement = targetElement.parentNode;
    } while (targetElement);

    dropdownElement.hide();
});

  function selectSearchProduct(e, productName, link) {
    e.preventDefault();
    $('input[name=\'product\']').val(productName);
    $('textarea[name=\'link\']').val(link);
    $('ul[name=\'results\']').hide();
  }

$('button[name=\'search\']').click(function() {
    $('#search-button').html('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>');
		$.ajax({
			url: 'index.php?route=affiliate/tracking/autocomplete&filter_name=' +  encodeURIComponent($('input[name=\'product\']').val()),
			dataType: 'json',
			success: function(json) {
        $('ul[name=\'results\']').empty();
        $('ul[name=\'results\']').show();
				$.each(json, function(index, item) {
          console.log(item);
          var content = `<li data-value="`+item['link']+`"><a href="#" onclick="selectSearchProduct(event,'`+item['name']+`','`+item['link']+`')">`+item['name']+`</a></li>`;
          $('ul[name=\'results\']').append(content);
				});
			},
      complete: function(json) {
        $('#search-button').html('Ara');
      }
		});
	/*'select': function(item) {
		$('input[name=\'product\']').val(item['label']);s
		$('textarea[name=\'link\']').val(item['value']);
	}*/
});

function copyLinkToClipboard() {
  var copyText = $('#input-link').val();
  navigator.clipboard.writeText(copyText);
  alert("Link Kopyalandı");
}

$('button[name=\'button-copy\']').click(function() {
  copyLinkToClipboard();
});



jQuery (function ($) {
        if ($(window).width() <= 768)
        {
            $('.hidden-in-category').hide();
            $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
            $('#cart').addClass ('--in-category');
            var lastScrollTop = 0, delta = 5;
            $(window).scroll(function(){
                var nowScrollTop = $(this).scrollTop();
                if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
                    if (nowScrollTop > lastScrollTop){
                        $('.hidden-in-category').hide ();
                        $('.custom-0001').removeClass ('custom-0001').addClass ('custom-0001--DEACTIVE');
                        $('#cart').addClass ('--in-category');
                    } else {
                        $('.hidden-in-category').show ();
                        $('.custom-0001--DEACTIVE').removeClass ('custom-0001--DEACTIVE').addClass ('custom-0001');
                        $('#cart').removeClass ('--in-category');
                    }
                    lastScrollTop = nowScrollTop;
                }
            });
        }
    });

</script>
<?php echo $footer; ?>

<style>
#affiliate-tracking #search-button {
  margin-left: 0.5rem;
  min-width: 45.52px;
}

#affiliate-tracking ul[name='results'] li {
  font-size: 12px;
}

.bread-desk {
        margin-top:60px
}

  @media (max-width: 768px) {
    .bread-desk {
        margin-top:5px
    }
  }
</style>
