{{ 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">
    {% if bulk_linking_status %}
    <div class="alert alert-info">{{ text_load_listings }}</div>
    <div class="well">
      <div class="row">
        <div class="col-sm-12">
          <div class="form-group">
            <label class="control-label" for="marketplace-select">{{ text_choose_marketplace }}</label>
            <select name="marketplace_select" id="marketplace-select" class="form-control">
              {% for marketplace in marketplaces %}
              <option value="{{ marketplace.link }}" {% if marketplace.code == marketplace_code %} selected{% endif %}>{{ marketplace.name }}</option>
              {% endfor %}
            </select>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-12">
          {% if marketplace_code in marketplaces_processing %}
          <div class="pull-right">
            <a class="btn btn-warning" href="{{ cancel_report_link }}"><i class="fa fa-times fa-lg"></i> {{ button_cancel }}</a>
            <a class="btn btn-primary" disabled="disabled"><i class="fa fa-cog fa-lg fa-spin"></i> {{ text_loading }}</a>
          </div>
          {% else %}
          <div class="pull-right"> <a id="button-load-listings" class="btn btn-primary" href="{{ marketplaces[marketplace_code].href_load_listings }}">{{ button_load }}</a> </div>
          {% endif %}
        </div>
      </div>
    </div>
    <form id="bulk-link-form" class="form-horizontal">
      <div id="text-{{ marketplace_code }}">
        {% if marketplace_code is not marketplaces_processing|keys %}
          {% if unlinked_products %}
            <table class="table table-bordered table-hover">
              <thead>
                <tr>
                  <th></th>
                  <th class="text-center" colspan="4">{{ text_amazon }}</th>
                  <th class="text-center" colspan="3">{{ text_local }}</th>
                </tr>
                <tr>
                  <th class="text-center"><input type="checkbox" id="master-checkbox" value="{{ marketplace.code }}"/></th>
                  <th class="text-left">{{ column_asin }}</th>
                  <th class="text-left">{{ column_sku }}</th>
                  <th class="text-center">{{ column_quantity }}</th>
                  <th class="text-right">{{ column_price }}</th>
                  <th class="text-left">{{ column_name }}</th>
                  <th class="text-left">{{ column_sku }}</th>
                  <th class="text-center">{{ column_quantity }}</th>
                </tr>
              </thead>
              <tbody>
                {% set row = 0 %}
                {% for product in unlinked_products %}
                  {% set row = row + 1 %}
                  {% if product.sku is empty or product.quantity < 1 %}
                    <tr class="warning">
                      <td class="text-center"> - </td>
                  {% else %}
                    <tr class="success">
                      <td class="text-center"><input type="checkbox" class="link-checkbox link-checkbox-{{ marketplace.code }}"/></td>
                  {% endif %}

                  <td class="text-left"><a href="{{ product.href_amazon }}" target="_blank">{{ product.asin }}</a></td>
                  <td class="text-left">{{ product.amazon_sku }}</td>
                  <td class="text-center">{{ product.amazon_quantity }}</td>
                  <td class="text-right">{{ product.amazon_price }}</td>
                  <td class="text-left"><a href="{{ product.href_product }}" target="_blank">{{ product.name }}</a>{% if product.combination is not empty %}<br />{{ product.combination }}{% endif %}</td>
                  <td class="text-left">{{ product.sku }}</td>
                  <td class="text-center">{{ product.quantity }}</td>
                  <input type="hidden" name="link[{{ row }}][amazon_sku]" value="{{ product.amazon_sku }}"/>
                  <input type="hidden" name="link[{{ row }}][product_id]" value="{{ product.product_id }}"/>
                  <input type="hidden" name="link[{{ row }}][sku]" value="{{ product.var }}"/>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <div class="well">
              <div class="row">
                <div class="col-sm-12 text-right">
                  <div class="pull-right"> <a id="link-button" class="btn btn-primary" data-toggle="tooltip" title="{{ button_link }}"><i class="fa fa-save"></i></a></div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 text-left">{{ pagination }}</div>
              <div class="col-sm-6 text-right">{{ results }}</div>
            </div>
          {% endif %}
        {% endif %}
      </div>
    </form>
    {% else %}
    <div class="warning">{{ error_bulk_link_permission }}</div>
    {% endif %}
  </div>
  <script type="text/javascript"><!--
  $('#button-load-listings').bind('click', function (e) {
    e.preventDefault();

    $.ajax({
      url: $(this).attr('href'),
      dataType: 'json',
      beforeSend: function () {
        $('#button-load-listings').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i> {{ text_loading }}').attr('disabled','disabled');
        $('.alert-danger, .alert-success').remove();
      },
      success: function (json) {
        if (json['status'] == 1) {
          $('.alert-info').after('<div class="alert alert-success alert-dismissible">' + json['message'] + '</div>');
        } else {
          $('.alert-info').after('<div class="alert alert-danger alert-dismissible">' + json['message'] + '</div>');
        }
      },
      error: function(xhr, ajaxOptions, thrownError) {
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });

    return false;
  });

  $('#master-checkbox').click(function () {
    var marketplace = $(this).val();
    if ($(this).is(':checked')) {
      $('.link-checkbox-' + marketplace).attr('checked', 'checked');
    } else {
      $('.link-checkbox-' + marketplace).removeAttr('checked');
    }
  });

  $('#link-button').click(function (e) {
    e.preventDefault();

    $.ajax({
      url: '{{ link_do_listings }}',
      dataType: 'json',
      type: 'POST',
      data: $('.link-checkbox:checked').parent().siblings('input[type="hidden"]').serialize(),
      beforeSend: function() {
        $('#link-button').empty().attr('disabled', 'disabled').html('<i class="fa fa-cog fa-lg fa-spin"></i>');
      },
      success: function () {
        document.location.reload(true);
      },
      error: function(xhr, ajaxOptions, thrownError) {
        $('#link-button').empty().removeAttr('disabled').html('<i class="fa fa-save"></i>');
        if (xhr.status != 0) { alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); }
      }
    });
  });

  $('#marketplace-select').bind('change', function() {
    location = $('#marketplace-select').val();
  });
//--></script></div>
{{ footer }}
