<div id="promoteproducts" class="tab-pane" style="width:99%;overflow:hidden;">
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Show products on the success page:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Gives you the ability to show products on the order success page.</span>
    </div>
    <div class="col-md-4">
      <select name="{{ moduleName }}[ShowProducts]" class="form-control">
        <option value="yes" {{ moduleData.ShowProducts == 'yes' ? 'selected' }}>{{ text_enabled }}</option>
        <option value="no"  {{ moduleData.ShowProducts != 'yes' ? 'selected' }}>{{ text_disabled }}</option>
      </select>
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Show automatic related products</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Gives you the ability to show related products based on OpenCart default functionality </span>
    </div>
    <div class="col-md-4">
      <select id="showrelated" name="{{ moduleName }}[ShowRelatedProducts]" class="form-control">
        <option value="yes" {{ moduleData.ShowRelatedProducts == 'yes' ? 'selected' }}>{{ text_enabled }}</option>
        <option value="no"  {{ moduleData.ShowRelatedProducts != 'yes' ? 'selected' }}>{{ text_disabled }}</option>
      </select>
    </div>
  </div>
  <div class="row limitrelated">
    <hr />
    <div class="col-md-3">
      <h5><strong>Limit Related Products</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Choose a limit for the related products </span>
    </div>
    <div class="col-md-4">
      <input type="text" name="{{ moduleName }}[LimitRelated]" class="form-control" value="{{ moduleData.LimitRelated ?: '8' }}" />
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Section title:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Write the desired section title here.</span>
    </div>
    <div class="col-md-4">
      <ul class="nav nav-tabs moduledata_promotedproducts_tabs" style="margin-bottom:0px;">
        {% for language in languages %}
        <li {{ loop.first ? 'class="active"' }}><a href="#promotedtab-{{ loop.index0 }}-{{ language.language_id }}" data-toggle="tab"><img src="{{ language.flag_url }}"/> {{ language.name }}</a></li>
        {% endfor %}
      </ul>
      <div class="tab-content">
        {% for language in languages %}
        <div id="promotedtab-{{ loop.index0 }}-{{ language.language_id }}" language-id="{{ language.language_id }}" class="row-fluid tab-pane language {{ loop.first ? 'active' }}">
          <input placeholder="Page title" type="text" class="form-control" name="{{ moduleName }}[PromotedTitle][{{ language.language_id }}]" value="{{ moduleData.PromotedTitle[language.language_id] ?: "You may also want to check out these products:" }}" />
        </div> 
        {% endfor %}
      </div>
    </div>
  </div>
  
  <div class="row products">
    <hr />
    <div class="col-md-3">
      <h5><strong>Products:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Choose which products to appear on the page (autocomplete input).</span>
    </div>
    <div class="col-md-4">
      <input type="text" name="products" value="" class="form-control" />
      <div id="product" class="well well-sm" style="height:140px;overflow: auto;">
        {% if moduleData.PromotedProducts %}
          {% for pr in moduleData.PromotedProducts %}
            <div id="products-{{ pr.id }}"> 
              {{ pr.name }}&nbsp;<i class="fa fa-minus-circle"></i>
              <input type="hidden" name="{{ moduleName }}[PromotedProducts][]" value="{{ pr.id }}" />
            </div>
          {% endfor %}
        {% endif %}
      </div>      
    </div>
  </div>
  <hr />
  <div class="row">
    <div class="col-md-3">
      <h5><strong>Product images dimensions:</strong></h5>
      <span class="help"><i class="fa fa-info-circle"></i>&nbsp;Specify here the image width & height.</span>
    </div>
    <div class="col-md-4">
      <div class="input-group">
        <span class="input-group-addon">Width:&nbsp;</span>
        <input type="text" name="{{ moduleName }}[PromotedPictureWidth]" class="form-control" value="{{ moduleData.PromotedPictureWidth ?: '150' }}" />
        <span class="input-group-addon">px</span>
      </div>
      <br />
      <div class="input-group">
        <span class="input-group-addon">Height:</span>
        <input type="text" name="{{ moduleName }}[PromotedPictureHeight]" class="form-control" value="{{ moduleData.PromotedPictureHeight ?: '190' }}" />
        <span class="input-group-addon">px</span>
      </div>
    </div>
  </div>
  <hr />
  <script>
$('input[name=\'products\']').autocomplete({
  delay: 500,
  source: function(request, response) {
    $.ajax({
      url: 'index.php?route=catalog/product/autocomplete&user_token={{ user_token }}&filter_name=' +  encodeURIComponent(request),
      dataType: 'json',
      success: function(json) {		
        response($.map(json, function(item) {
          return {
            label: item['name'],
            value: item['product_id']
          }
        }));
      }
    });
  }, 
  select: function(item) {
    $('input[name=\'products\']').val('');
    
    $('#product' + item['value']).remove();
    
    $('#product').append('<div id="product' + item['value'] + '">' + item['label'] + '&nbsp;<i class="fa fa-minus-circle"></i><input type="hidden" name="{{ moduleName }}[PromotedProducts][]" value="' + item['value'] + '" /></div>');
    
  }
});

$('#product').delegate('.fa-minus-circle', 'click', function() {
  $(this).parent().remove();
});




  </script>
</div>
