{{ header }}{{ column_left }}
<!-- Content Wrapper. Contains page content -->
<div id="content" class="content-wrapper">
  <!-- Content Header (Page header) -->
  <section class="content-header">
    <div>
      <div class="pull-right">
        <a href="{{ return }}" data-toggle="tooltip" title="{{ button_back }}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i> {{ button_back }}</a>
      </div>
      <h1>
        {{ heading_title }}
      </h1>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <ul class="breadcrumb">
          {% for breadcrumb in breadcrumbs %}
          <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a></li>
          {% endfor %}
        </ul>
      </div>
    </div>
  </section>

  <!-- Main content -->
  <section class="content">

    <!-- Default box -->
    <div class="box">
      <div class="box-header with-border">
        <h3 class="box-title">{{ text_summary }}</h3>

        <div class="box-tools pull-right">
          <button type="button" class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="{{ text_collapse }}">
            <i class="fa fa-minus"></i></button>
        </div>
      </div>
      <div class="box-body">

        <div class="row">
          <div class="col-md-12">
            <p>{{ text_use_desc }}</p>
            <div id="selling-limits" class="alert alert-warning" style="display:none;"></div>
          </div>
        </div>
        <div class="row">
          <div class="col-md-6">
            <div class="panel panel-default dsr-table">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-lg"></i> {{ text_report_30 }}</h3>
              </div>
              <div class="panel-body">
                <table class="table" id="dsr-table-30">
                  <thead>
                  <tr>
                    <th></th>
                    <th class="text-center">{{ text_score }}</th>
                    <th class="text-center">{{ text_count }}</th>
                  </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="panel panel-default dsr-table">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-bar-chart-o fa-lg"></i> {{ text_report_52 }}</h3>
              </div>
              <div class="panel-body">
                <table class="table" id="dsr-table-52">
                  <thead>
                  <tr>
                    <th></th>
                    <th class="text-center">{{ text_score }}</th>
                    <th class="text-center">{{ text_count }}</th>
                  </tr>
                  </thead>
                </table>
              </div>
            </div>
          </div>
        </div>
        <div class="well">
          <div class="row">
            <div class="col-sm-12 text-right">
              <a class="btn btn-primary" id="load-usage"><i class="fa fa-cog fa-lg fa-spin"></i></a>
            </div>
          </div>
        </div>

      </div>
      <!-- /.box-body -->
    </div>
    <!-- /.box -->

  </section>
  <!-- /.content -->
</div>
<!-- /.content-wrapper -->
<script type="text/javascript"><!--
  function loadSummary(){
    $.ajax({
      url: 'index.php?route=extension/openbay/ebay/getSellerSummary&user_token={{ user_token }}',
      type: 'post',
      dataType: 'json',
      beforeSend: function(){
        $('#load-usage').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
        $('#selling-limits').empty().hide();
        $('.dsr-table').hide();
        $('.data-row').remove();
      },
      success: function(json) {
          $('#load-usage').empty().html('<i class="fa fa-refresh"></i> {{ button_refresh }}').removeAttr('disabled');

          if (json.data.summary.QuantityLimitRemaining != ''){
              var limitHtml = '';

              limitHtml += '<p>{{ text_ebay_limit_t1 }} <span class="bold underline">'+json.data.summary.QuantityLimitRemaining+'</span> {{ text_ebay_limit_t2 }} <span class="underline bold">'+json.data.summary.AmountLimitRemaining+'</span></p>';
              limitHtml += '<p>{{ text_ebay_limit_t3 }}</p>';

              $('#selling-limits').html(limitHtml).show();
          }

          if (json.data.dsr_feedback.AverageRatingSummary){
              $.each(json.data.dsr_feedback.AverageRatingSummary, function(key,val){

                htmlInj = '';

                $.each(val.AverageRatingDetails, function(key2,val2){
                    if (val2.RatingDetail == 'ItemAsDescribed') {
                        htmlInj += '<tr class="data-row"><td class="text-left">{{ text_as_described }}</td><td class="text-center">'+val2.Rating+'</td><td class="text-center">'+val2.RatingCount+'</td></tr>';
                    }
                    if (val2.RatingDetail == 'Communication') {
                        htmlInj += '<tr class="data-row"><td class="text-left">{{ text_communication }}</td><td class="text-center">'+val2.Rating+'</td><td class="text-center">'+val2.RatingCount+'</td></tr>';
                    }
                    if (val2.RatingDetail == 'ShippingTime') {
                        htmlInj += '<tr class="data-row"><td class="text-left">{{ text_shippingtime }}</td><td class="text-center">'+val2.Rating+'</td><td class="text-center">'+val2.RatingCount+'</td></tr>';
                    }
                    if (val2.RatingDetail == 'ShippingAndHandlingCharges') {
                        htmlInj += '<tr class="data-row"><td class="text-left">{{ text_shipping_charge }}</td><td class="text-center">'+val2.Rating+'</td><td class="text-center">'+val2.RatingCount+'</td></tr>';
                    }
                });

                if (val.FeedbackSummaryPeriod == 'FiftyTwoWeeks') {
                    $('#dsr-table-52').append(htmlInj).show();
                }
                if (val.FeedbackSummaryPeriod == 'ThirtyDays') {
                    $('#dsr-table-30').append(htmlInj).show();
                }

                $('.dsr-table').show();
              });
          }

          if (json.lasterror == true){
              alert(json.lastmsg);
          }
      },
      error: function (xhr, ajaxOptions, thrownError) {
        $('#load-usage').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); }
      }
    });
  }

  $('#load-usage').bind('click', function() {
    loadSummary();
  });

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