{{ 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>
        {% if fba_order_status == 1 %}
          <a href="{{ resend_link }}" id="button-resend" data-toggle="tooltip" title="{{ button_resend }}" class="btn btn-info" value=""><i class="fa fa-refresh"></i></a>
        {% endif %}
        {% if fba_order_status == 2 %}
          <a href="{{ ship_link }}" id="button-ship" data-toggle="tooltip" title="{{ button_ship }}" class="btn btn-info" value=""><i class="fa fa-truck"></i></a>
        {% endif %}
        {% if fba_order_status == 0 or fba_order_status == 2 %}
          <a onclick="confirm('{{ text_confirm }}') ? location.href='{{ cancel_link }}' : false;" id="button-cancel" data-toggle="tooltip" title="{{ button_cancel }}" class="btn btn-danger" value=""><i class="fa fa-times-circle"></i></a>
        {% endif %}
      </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" id="main-body">{% if error_warning %}
    {% for warning in error_warning %}
    <div class="alert alert-danger alert-dismissible"><i class="fa fa-exclamation-circle"></i> {{ warning }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endfor %}
    {% endif %}
    {% if success %}
    <div class="alert alert-success alert-dismissible"><i class="fa fa-check-circle"></i> {{ success }}
      <button type="button" class="close" data-dismiss="alert">&times;</button>
    </div>
    {% endif %}
    <div class="panel-body">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#tab-general" data-toggle="tab">{{ tab_general }}</a></li>
        <li><a href="#tab-history" data-toggle="tab">{{ tab_history }}</a></li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane active" id="tab-general">
          <div class="row">
            <div class="col-md-6">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title"><i class="fa fa-shopping-cart"></i> {{ text_shipping_address }}</h3>
                </div>
                <table class="table">
                  <tbody>
                    <tr>
                      <td>{{ shipping_address }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            <div class="col-md-6">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title"><i class="fa fa-user"></i> {{ text_order_info }}</h3>
                </div>
                <table class="table">
                  <tr>
                    <td><button data-toggle="tooltip" title="{{ text_opencart_order }}" class="btn btn-info btn-xs"><i class="fa fa-shopping-cart fa-fw"></i></button></td>
                    <td><a href="{{ order_link }}">{{ order_id }}</a></td>
                  </tr>
                  <tr>
                    <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_status }}" class="btn btn-info btn-xs"><i class="fa fa-cog fa-fw"></i></button></td>
                    <td>
                      {% if fba_order_status == 0 %}
                        <label class="label label-info">{{ status_options.fba_order_status }}</label>
                      {% elseif fba_order_status == 1 %}
                        <label class="label label-danger">{{ status_options.fba_order_status }}</label>
                      {% elseif fba_order_status == 2 %}
                        <label class="label label-warning">{{ status_options.fba_order_status }}</label>
                      {% elseif fba_order_status == 3 %}
                        <label class="label label-success">{{ status_options.fba_order_status }}</label>
                      {% elseif fba_order_status == 4 %}
                        <label class="label label-danger">{{ status_options.fba_order_status }}</label>
                      {% endif %}
                    </td>
                  </tr>
                  {% if fulfillment_id %}
                    <tr>
                      <td style="width: 1%;"><button data-toggle="tooltip" title="{{ text_fulfillment_id }}" class="btn btn-info btn-xs"><i class="fa fa-truck fa-fw"></i></button></td>
                      <td><a href="{{ fulfillment_link }}">{{ fulfillment_id }}</a></td>
                    </tr>
                  {% endif %}
                </table>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title"><i class="fa fa-info-circle"></i> {{ text_order }}</h3>
            </div>
            <div class="panel-body">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td class="text-left">{{ column_product }}</td>
                    <td class="text-left">{{ column_sku }}</td>
                    <td class="text-right">{{ column_quantity }}</td>
                    <td class="text-right">{{ column_fba }}</td>
                  </tr>
                </thead>
                <tbody>
                {% for product in products %}
                <tr>
                  <td class="text-left"><a href="{{ product.href }}">{{ product.name }}</a> {% for option in product.option %} <br />
                    {% if option.type != 'file' %}
                    &nbsp;<small> - {{ option.name }}: {{ option.value }}</small> {% endif %}>
                    {% endfor %}</td>
                  <td class="text-left">
                    {% if product.sku is not empty %}
                      {{ product.sku }}
                    {% else %}
                      <span class="label label-danger">{{ text_no_sku }}</span>
                    {% endif %}
                  </td>
                  <td class="text-right">{{ product.quantity }}</td>
                  <td class="text-right"> {% if product.fba == 1 %} <span class="btn btn-success btn-sm"><i class="fa fa-check fa-fw"></i></span> {% else %} <span class="btn btn-danger btn-sm"><i class="fa fa-minus fa-fw"></i></span> {% endif %} </td>
                </tr>
                {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="tab-history">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title"><i class="fa fa-comment-o"></i> {{ text_history }}</h3>
            </div>
            <div class="panel-body">
              <table class="table table-bordered">
                <thead>
                  <tr>
                    <td class="text-left">{{ column_fulfillment_id }}</td>
                    <td class="text-left">{{ column_created }}</td>
                    <td class="text-left">{{ column_type }}</td>
                    <td class="text-right">{{ column_response_code }}</td>
                    <td class="text-right">{{ column_actions }}</td>
                  </tr>
                </thead>
                <tbody>
                  {% if fulfillments %}
                    {% for fulfillment in fulfillments %}
                      <tr>
                        <td class="text-left">{{ fulfillment.fba_order_fulfillment_id }}</td>
                        <td class="text-left">{{ fulfillment.created }}</td>
                        <td class="text-left">{{ type_options[fulfillment.type] }}</td>
                        <td class="text-right"><label class="label{% if fulfillment.response_header_code == 200 or fulfillment.response_header_code == 201 %}label-success{% else %}label-danger{% endif %}">{{ fulfillment.response_header_code }}</label></td>
                        <td class="text-right">
                          {% if fulfillment.request_body is not empty %}
                            <button data-toggle="tooltip" title="{{ text_show_request }}" class="btn btn-info btn-sm" onclick="$('#request-row-{{ fulfillment.fba_order_fulfillment_id }}').toggle();"><i class="fa fa-mail-forward fa-fw"></i></button>
                          {% endif %}
                          {% if fulfillment.response_body is not empty %}
                            <button data-toggle="tooltip" title="{{ text_show_response }}" class="btn btn-info btn-sm" onclick="$('#response-row-{{ fulfillment.fba_order_fulfillment_id }}').toggle();"><i class="fa fa-mail-reply fa-fw"></i></button>
                          {% endif %}
                          {% if fulfillment.errors is not empty %}
                            <button data-toggle="tooltip" title="{{ text_show_errors }}" class="btn btn-danger btn-sm" onclick="$('#error-row-{{ fulfillment.fba_order_fulfillment_id }}').toggle();"><i class="fa fa-exclamation fa-fw"></i></button>
                          {% endif %}
                        </td>
                      </tr>
                      <tr id="error-row-{{ fulfillment.fba_order_fulfillment_id }}" style="display:none;">
                        <td class="text-left" colspan="4">
                          {% if fulfillment.errors is empty %}
                            <div class="alert alert-info" style="width:100%;">{{ text_no_errors }}</div>
                          {% endif %}
                          {% for fulfillment_error in fulfillment.errors %}
                          <div class="alert alert-warning" style="width:100%;">({{ fulfillment_error.code }}) {{ fulfillment_error.message|replace({'\r' : '', '\n' : ''}) }}</div>
                          {% endfor %}
                        </td>
                      </tr>
                      <tr id="request-row-{{ fulfillment.fba_order_fulfillment_id }}" style="display:none;">
                        <td class="text-left" colspan="4"><pre>{{ fulfillment.request_body_output }}</pre></td>
                      </tr>
                      <tr id="response-row-{{ fulfillment.fba_order_fulfillment_id }}" style="display:none;">
                        <td class="text-left" colspan="4"><pre>{{ fulfillment.response_body_output }}</pre></td>
                      </tr>
                    {% endfor %}
                  {% else %}
                    <tr>
                      <td class="text-center" colspan="5">{{ text_no_requests }}</td>
                    </tr>
                  {% endif %}
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript"><!--

$('#button-resend').click(function() {
  $('#button-resend').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
});

$('#button-ship').click(function() {
  $('#button-ship').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
});

$('#button-cancel').click(function() {
  $('#button-cancel').empty().html('<i class="fa fa-cog fa-lg fa-spin"></i>').attr('disabled','disabled');
});

//--></script>
{{ footer }}
