{{ header }}{{ column_left }}
<div id="content">
  <div class="page-header">
    <div class="container-fluid">
      <div class="pull-right">
        <a href="{{ cancel }}" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-default"><i class="fa fa-reply"></i></a>
      </div>
      <h1>{{ heading_title }}</h1>
      <ul class="breadcrumb">
        {% for breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
        {% endfor %}
      </ul>
    </div>
  </div>
  <div class="container-fluid">
    <div class="alert alert-info">
      <p>{{ text_link_desc1 }}</p>
      <p>{{ text_link_desc2 }}</p>
      <p>{{ text_link_desc3 }}</p>
      <p>{{ text_link_desc4 }}</p>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="panel-title"><i class="fa fa-unlink fa-lg"></i> {{ text_unlinked_items }}</h1>
      </div>
      <div class="panel-body">
        <p>{{ text_text_unlinked_desc }}</p>
        <div class="well">
          <div class="row">
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label" for="filter_title">{{ text_filter_title }}</label>
                <input type="text" name="filter_title" value="" placeholder="{{ text_filter_title }}" id="filter_title" class="form-control" />
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label">{{ text_filter_range }}</label>
                <div class="row">
                  <div class="col-sm-6">
                    <input type="text" name="filter_qty_min" value="" class="form-control" placeholder="{{ text_filter_range_from }}" id="filter-qty-min" />
                  </div>
                  <div class="col-sm-6">
                    <input type="text" name="filter_qty_max" value=""  class="form-control" placeholder="{{ text_filter_range_to }}" id="filter-qty-max" />
                  </div>
                </div>
              </div>
            </div>
            <div class="col-sm-4">
              <div class="form-group">
                <label class="control-label">{{ text_filter_var }}</label>
                <select name="filter_variant" class="form-control" id="filter-variant">
                  <option value="1">{{ text_yes }}</option>
                  <option value="0">{{ text_no }}</option>
                </select>
              </div>
            </div>
          </div>
        </div>
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th class="text-left"></th>
              <th class="text-left">{{ column_item_id }}</th>
              <th class="text-left">{{ column_listing_title }}</th>
              <th class="text-left">{{ column_product_auto }}</th>
              <th class="text-center">{{ column_stock_available }}</th>
              <th class="text-center">{{ column_allocated }}</th>
              <th class="text-center">{{ column_ebay_stock }}</th>
              <th class="text-center">{{ column_variants }}</th>
              <th class="text-center">{{ column_action }}</th>
            </tr>
          </thead>
          <tbody id="ebay-listings">
            <tr id="fetching-ebay-items">
              <td class="text-center" colspan="9">{{ text_text_unlinked_info }}</td>
            </tr>
          </tbody>
        </table>
        <div class="buttons"> <a class="btn btn-primary" id="check-unlinked-items">{{ button_check_unlinked }}</a>
          <input type="hidden" name="unlinked_page" id="unlinked-page" value="1" />
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h1 class="panel-title"><i class="fa fa-link fa-lg"></i> {{ text_linked_items }}</h1>
      </div>
      <div class="panel-body">
        <p>{{ text_text_linked_desc }}</p>
        <table class="table table-bordered table-hover">
          <thead>
            <tr>
              <th class="text-left">{{ column_product }}</th>
              <th class="text-center">{{ column_item_id }}</th>
              <th class="text-center">{{ column_allocated }}</th>
              <th class="text-center">{{ column_stock_available }}</th>
              <th class="text-center">{{ column_stock_reserve }}</th>
              <th class="text-center">{{ column_ebay_stock }}</th>
              <th class="text-center">{{ column_variants }}</th>
              <th class="text-center">{{ column_status }}</th>
              <th class="text-center">{{ column_action }}</th>
            </tr>
          </thead>
          <tr>
            <td class="text-left" colspan="9" id="checking-linked-items"><a class="btn btn-primary" id="load-usage"><i class="fa fa-cog fa-lg fa-spin"></i> {{ text_text_loading_items }}</a></td>
          </tr>
          <tbody style="display:none;" id="show-linked-items">
            {% for id, item in linked_items %}
              <input type="hidden" name="ebay_qty_{{ id }}" value="" id="ebay-qty-{{ id }}" />
              <input type="hidden" name="store_qty_{{ id }}" value="{{ item.qty }}" id="store-qty-{{ id }}" />
              <input type="hidden" name="reserve_qty_{{ id }}" value="{{ item.reserve }}" id="reserve-qty-{{ id }}" />
              <input type="hidden" name="item_id[]" id="item-id-{{ id }}" value="{{ id }}" class="item-id"  />
              <input type="hidden" name="product_id[]" id="product-id-{{ id }}" value="{{ item.product_id }}" />
              <input type="hidden" name="options" id="options-{{ id }}" value={{ item.options }}" />
              <tr id="row-{{ id }}">
                <td class="text-left"><a href="{{ item.link_edit }}" target="_BLANK">{{ item.name }}</a></td>
                <td class="text-center"><a href="{{ item.link_ebay }}" target="_BLANK">{{ id }}</a></td>
                {% if item.options == 0 %}
                  <td class="text-center">{{ item.allocated }}</td>
                  <td class="text-center">{{ item.qty }}</td>
                  <td class="text-center">{{ item.reserve }}</td>
                  <td id="text-qty-{{ id }}" class="text-center"></td>
                  <td class="text-center"><span class="label label-danger">{{ text_no }}</span></td>
                {% else %}
                  <td class="text-center">-</td>
                  <td class="text-center">{% for option in item.options %}{{ option.stock }} x {{ option.combination }}<br />{% endfor %}</td>
                  <td></td>
                  <td id="text-qty-{{ id }}" class="text-center"></td>
                  <td class="text-center" align="center"><span class="label label-success">{{ text_yes }}</span></td>
                {% endif %}
                <td class="text-center" id="text-status-{{ id }}"></td>
                <td class="text-center"><div class="pull-right" id="text-buttons-{{ id }}"></div></td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="pagination">{{ pagination }}</div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--
  function checkLinkedItems() {
      $.ajax({
          url: 'index.php?route=extension/openbay/ebay/loadLinkedStatus&user_token={{ user_token }}',
          data: $('.item-id').serialize(),
          type: 'POST',
          dataType: 'json',
          success: function(json) {
            if (json.data == '') {
              $('#checking-linked-items').hide();
              $('.pagination').hide();
              $('#show-linked-items').html('<tr><td colspan="9" class="text-center">{{ error_no_listings }}</td></tr>').show();
            } else {
              $.each (json.data, function(key, val) {
                key                 = String(key);
                var product_id      = $('#product-id-' + key).val();
                var store_qty       = $('#store-qty-' + key).val();
                var reserve_qty     = $('#reserve-qty-' + key).val();
                var html_inj        = '';

                if (val.variants == 0) {
                  $('#text-qty-' + key).text(val.qty);
                  $('#ebay-qty-' + key).val(val.qty);

                  if (val.status == 1) {
                    $('#text-buttons-' + key).html('<a href="{{ edit_url }}' + product_id + '" class="btn btn-primary" data-toggle="tooltip" title="{{ button_edit }}"><i class="fa fa-pencil"></i></a>');

                    if (val.qty == store_qty || val.qty == reserve_qty) {
                      $('#text-status-' + key).text('OK');
                      $('#row-' + key + ' > td').css('background-color', '#E3FFC8');
                    } else {
                      $('#text-status-' + key).text('{{ text_stock_error }}');
                      $('#row-' + key + ' > td').css('background-color', '#FFD4D4');
                      $('#text-buttons-' + key).append('<a onclick="updateLink(' + key + ',' + val.qty + ',' + product_id + ', ' + store_qty + ', ' + reserve_qty + ');" class="btn btn-primary"><span>{{ button_resync }}</a>');
                    }
                  } else {
                    $('#text-status-' + key).text('{{ text_listing_ended }}');
                    $('#row-' + key + ' > td').css('background-color', '#FFD4D4');
                    $('#text-buttons-' + key).html('<a onclick="removeLink(' + product_id + ', ' + key + ');" class="btn btn-danger"><i class="fa fa-minus-circle fa-lg"></i> {{ button_remove_link }}</a>');
                  }
                } else {
                  $.each (val.variants, function(key1, val1) {
                    html_inj += val1.qty + ' x ';
                    $.each (val1.nv.NameValueList, function(key2, val2) {
                        html_inj += val2.Value + ' > ';
                    });
                    html_inj += '<br />';
                  });

                  $('#text-qty-' + key).html(html_inj);

                  if (val.status == 0) {
                    $('#text-status-' + key).text('{{ text_listing_ended }}');
                    $('#row-' + key + ' > td').css('background-color', '#FFD4D4');
                    $('#text-buttons-' + key).html('<a onclick="removeLink(' + product_id + ', ' + key + ');" class="btn btn-danger"><i class="fa fa-minus-circle fa-lg"></i> {{ button_remove_link }}</a>');
                  } else {
                    $('#text-buttons-' + key).html('<a href="{{ edit_url }}' + product_id + '" class="btn btn-primary" data-toggle="tooltip" title="{{ button_edit }}"><i class="fa fa-pencil"></i></a>');
                  }
                }
              });

              $('#checking-linked-items').hide();
              $('#show-linked-items').show();
            }
          },
          failure: function() {
              $('#errorBox').text('{{ error_ajax_load }}').fadeIn();
          },
          error: function() {
              $('#errorBox').text('{{ error_ajax_load }}').fadeIn();
          }
      });
  }

  function removeLink(product_id, id) {
      $.ajax({
          type: 'GET',
          url: 'index.php?route=extension/openbay/ebay/removeItemLink&user_token={{ user_token }}&product_id=' + product_id,
          dataType: 'json',
          success: function(json) {
              $('#row-' + id).fadeOut('slow');
          },
          error: function (xhr, ajaxOptions, thrownError) {
          if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
        }
      });
  }

  function updateLink(item_id, qty, product_id, store_qty, reserve_qty) {
      var r = confirm("{{ text_alert_stock_local }}");
      var button_old = $('#text-buttons-' + item_id).html();

      $('#text-buttons-' + item_id).html('<p class="text-center"><i class="fa fa-cog fa-lg fa-spin"></i></p>');

      if (r == true) {
          $.ajax({
              type: 'GET',
              url: 'index.php?route=extension/openbay/ebay/setProductStock&user_token={{ user_token }}&product_id=' + product_id,
              dataType: 'json',
              success: function(json) {
                  if (json.error == false) {
                      $('#text-status-' + item_id).text('OK');
                      $('#text-buttons-' + item_id).empty().html('<a href="{{ edit_url }}' + product_id + '" class="btn btn-primary">{{ button_edit }}</a>');
                      $('#row-' + item_id + ' > td').css('background-color', '#E3FFC8');
                      $('#l-' + item_id + '-qty-input').val(qty);
                      $('#l-' + item_id + '-qty').val(qty);
                      if (reserve_qty > 0) {
                        $('#text-qty-' + item_id).text(reserve_qty);
                      } else {
                        $('#text-qty-' + item_id).text(store_qty);
                      }
                      $('#reserve-qty-' + item_id).text(reserve_qty);
                  } else {
                      $('#text-buttons-' + item_id).html(button_old);
                      alert(json.msg);
                  }
              },
              failure: function() {
                  $('#text-buttons-' + item_id).html(button_old);
                  alert('{{ error_ajax_load }}');
              },
              error: function() {
                  $('#text-buttons-' + item_id).html(button_old);
                  alert('{{ error_ajax_load }}');
              }
          });
      }
  }

  function saveListingLink(id) {
      var product_id      = $('#l-' + id + '-pid').val();
      var qty             = $('#l-' + id + '-qty-input').val();
      var ebayqty         = $('#l-' + id + '-qtyebayinput').val();
      var variants        = $('#l-' + id + '-variants').val();

      if (product_id === '') {
          alert('{{ error_link_value }}');
          return false;
      }

      if (qty < 1) {
          alert('{{ error_link_no_stock }}');
          return false;
      }

      $.ajax({
          url: 'index.php?route=extension/openbay/ebay/saveItemLink&user_token={{ user_token }}&pid=' + product_id + '&itemId=' + id + '&qty=' + qty + '&ebayqty=' + ebayqty + '&variants=' + variants,
          type: 'post',
          dataType: 'json',
          beforeSend: function() {
            $('#l-' + id + '-save-button').html('<i class="fa fa-cog fa-lg fa-spin"></i>');
          },
          success: function(json) {
            $('#row' + id).fadeOut('slow');
            $('#l-' + id + '-save-button').hide();
          },
          error: function (xhr, ajaxOptions, thrownError) {
            if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
          }
      });
  }

  function getProductStock(id, element_id) {
      $.ajax({
          type:'GET',
          dataType: 'json',
          url: 'index.php?route=extension/openbay/ebay/getProductStock&user_token={{ user_token }}&pid=' + id,
          success: function(data) {
              if (data.variant == 0) {
                  $('#' + element_id + '-qty').text(data.qty);
                  $('#' + element_id + '-qty-input').val(data.qty);
                  $('#' + element_id + '-allocated').text(data.allocated);
                  $('#' + element_id + '-allocatedinput').val(data.allocated);
                  $('#' + element_id + '-subtractinput').val(data.subtract);
                  $('#' + element_id + '-save-button').show();
              } else {
                  var html_inj = '';
                  $.each (data.variant, function(key, val) {
                    html_inj += val.stock + ' x ' + val.combination + '<br />';
                  });
                  $('#' + element_id + '-qty').html(html_inj);
                  $('#' + element_id + '-save-button').show();
              }
          }
      });
  }

  $('#check-unlinked-items').bind('click', function() {
    var unlinked_page = $('#unlinked-page').val();

    $.ajax({
      url: 'index.php?route=extension/openbay/ebay/loadUnlinked&user_token={{ user_token }}&page=' + unlinked_page,
      type: 'POST',
      data: { 'filter_title' : $('#filter_title').val(), 'filter_qty_min' : $('#filter-qty-min').val(), 'filter_qty_max' : $('#filter-qty-max').val(), 'filter_variant' : $('#filter-variant').val() },
      dataType: 'json',
      beforeSend: function() {
        $('#fetching-ebay-items').hide();
        $('#check-unlinked-items').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
        $('.alert-warning').remove();
      },
      success: function(json) {
        if (json.data.items === null) {
          $('#ebay-listings').append('<tr><td colspan="7"><p>{{ error_no_listings }}</p></td></tr>');
        } else {
          var html_inj;

          $.each (json.data.items, function(key, val) {
            html_inj = '';
            html_inj += '<tr class="listing" id="row' + key + '">';
            html_inj += '<td class="text-center">';
            if (val.img != '') {
              html_inj += '<img src="' + val.img + '" />';
            }
            html_inj += '</td>';
            html_inj += '<td class="text-left">' + key + '<input type="hidden" id="l-' + key + '_val" val="' + key + '" /></td>';
            html_inj += '<td class="text-left">' + val.name + '</td>';
            html_inj += '<td class="text-left"><input type="text" class="product-search form-control" placeholder="{{ column_product_auto }}" id="l-' + key + '" /><input type="hidden" id="l-' + key + '-pid" /></td>';

            if (val.variants == 0) {
                html_inj += '<td class="text-center"><span id="l-' + key + '-qty"></span><input type="hidden" id="l-' + key + '-qtyinput" /></td>';
                html_inj += '<td class="text-center"><span id="l-' + key + '-allocated"></span><input type="hidden" id="l-' + key + '-allocatedinput" /><input type="hidden" id="l-' + key + '-subtractinput" /></td>';
                html_inj += '<td class="text-center"><span id="l-' + key + '-qtyebay">' + val.qty + '</span><input type="hidden" id="l-' + key + '-qtyebayinput" value="' + val.qty + '" /></td>';
                html_inj += '<input type="hidden" name="variants" id="l-' + key + '-variants" value="0" />';
                html_inj += '<td class="text-center"><span class="label label-danger">{{ text_no }}</span></td>';
            } else {
                html_inj += '<td class="text-center"><span id="l-' + key + '-qty"></span></td>';
                html_inj += '<td class="text-center">-</td>';
                html_inj += '<td class="text-center">';
                $.each (val.variants, function(key1, val1) {
                    html_inj += val1.qty + ' x ';
                    $.each (val1.nv.NameValueList, function(key2, val2) {
                        html_inj += val2.Value + ' > ';
                    });
                    html_inj += '<br />';
                });
                html_inj += '</td>';
                html_inj += '<input type="hidden" name="variants" id="l-' + key + '-variants" value="1" />';
                html_inj += '<td class="text-center"><span class="label label-success">{{ text_yes }}</span></td>';
            }
            html_inj += '<td class="text-center"><a class="btn btn-primary" style="display:none;" onclick="saveListingLink(' + key + '); return false;" id="l-' + key + '-save-button"><span>{{ button_save }}</span></a></td>';
            html_inj += '</tr>';

            $('#ebay-listings').append(html_inj);
          });
        }

        $('#ebay-listings').show();

        if (json.data.more_pages == 1) {
          $('#check-unlinked-items').empty().html('{{ button_check_unlinked }}').removeAttr('disabled');
        } else {
          $('#check-unlinked-items').hide();
        }

        if (json.data.break == 1) {
          $('#check-unlinked-items').before('<div class="alert alert-warning">{{ text_limit_reached }}</div>');
        }

        $('#unlinked-page').val(json.data.next_page);
      },
      error: function (xhr, ajaxOptions, thrownError) {
        $('#check-unlinked-items').empty().removeClass('btn-primary').addClass('btn-danger').html('{{ text_failed }}').removeAttr('disabled');
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  });

  $(document).on('keydown', '.product-search', function() {
    var element_id = $(this).attr('id');

    $(this).autocomplete({
      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) {
        $('#' + element_id).val(item['label']);
        getProductStock(item['value'], element_id);
        $('#' + element_id + '-pid').val(item['value']);
        return false;
      }
    });
  });

  $(document).ready(function() {
      checkLinkedItems();
  });
//--></script>
{{ footer }}