{{header}}
<section class="container-fluid order-info">
  {{breadcrumbs}}
  <div>
    <div class="row">
      <div class="col-md-3 hidden-md-down">
        <div class="content-box js-fixed-on-top">
          {{ account }}
        </div>
      </div>
      <div class="col-xs">
        <div class="content-box">
          <div class="flex middle-xs">
            <a href="{{ back }}" class="padding-small text-x-large text-dark">
              <i class="fas fa-angle-left" aria-hidden="true"></i>
            </a>
            <span class="heading-1">{{ text_order_id }} #{{ order_id }}</span>
          </div>
          <span class="visible-block text-medium text-gray top-margin-small bottom-margin-medium">Realizado em {{ date_added }}</span>
          <div class="row no-space-xs medium-space-md">
            <div class="col-xs-12 col-md-6">
              <div class="content-box">
                {% if order_history_proccess %}
                  {{ order_history_proccess }}
                {% else %}
                  {% for history in histories %}
                    <div class="paper padding-large bottom-margin-medium order-info-history {{history.type_status}}">
                      <div class="flex nowrap-xs between-xs middle-xs vertical-padding-x-small">
                        <span class="text-medium text-dark text-bold">{{history.status}}</span>
                        <span class="text-medium text-gray">{{history.date_added}}</span>
                      </div>
                      {% if history.comment %}
                        <span class="visible-block text-small text-dark top-margin-small">{{history.comment}}</span>
                      {% endif %}
                    </div>
                  {% endfor %}
                {% endif %}
              </div>
            </div>
            <div class="col-xs-12 col-md-6">
              <div class="content-box paper padding-large bottom-margin-medium">
                <div class="bottom-padding-x-small">
                  {% for total in totals %}
                    <div class="flex nowrap-xs between-xs middle-xs vertical-padding-x-small">
                      <span class="text-medium text-gray">{{ total.title }}</span>
                      <span class="text-medium text-dark text-bold text-nowrap">{{ total.text }}</span>
                    </div>
                  {% endfor %}
                </div>
                {% if fidelity == false %}
                  <a href="{{order_reorder}}" class="btn-default btn-large btn-full top-margin-medium">
                    <span>{{button_reorder}}</span>
                  </a>
                {% endif %}
                {% if btn_pagseguro and (fidelity == false) %}
                  <a class="visible-block top-margin-large text-center" href="{{ btn_pagseguro_link }}">
                    <img src="image/recomprar-com-pagseguro.png" class="visible-inline-block">
                  </a>
                {% endif %}
              </div>
            </div>
          </div>

          {% if send_nfe_info is defined %}
            <div class="paper padding-large bottom-margin-medium">
              <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_access_key }}</span>
              <span class="visible-block text-medium text-dark text-bold">{{ chave_acesso }}</span>
              <div class="flex">
                <a href="{{ link_danfe }}" class="btn-default btn-medium btn-outline top-margin-small right-margin-small"
                  target="_blank">
                  <span>{{ text_download_danfe }}</span>
                </a>
                <a href="{{ link_xml }}" class="btn-default btn-medium btn-outline top-margin-small right-margin-small"
                  target="_blank">
                  <span>{{ text_download_xml }}</span>
                </a>
                <a href="http://www.nfe.fazenda.gov.br/portal/consultaRecaptcha.aspx?tipoConsulta=resumo&tipoConteudo=d09fwabTnLk="
                  class="btn-default btn-medium btn-outline top-margin-small right-margin-small" target="_blank">
                  <span>{{ text_see_nfe }}</span>
                </a>
              </div>
            </div>
          {% endif %}

          <div class="paper bottom-padding-large left-padding-large bottom-margin-medium">
            <div class="row no-space-xs">
              {% if comments %}
                <div class="col-xs-12">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_comment }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ comments }}</span>
                  </div>
                </div>
              {% endif %}
              {% if payment_method %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_payment_method }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ payment_method }}</span>
                    {% if payment_billet %}
                      <a href="{{ payment_billet }}" class="visible-block text-medium text-bold top-margin-x-small" target="_blank">{{ text_billet }}</a>
                    {% endif %}
                    {% if payment_info_detail %}
                      <a class="flex-item-auto flex nowrap-xs middle-xs text-decoration-none">
                      <img src="image/cielo/{{ payment_info_detail.cartao_bandeira|lower|replace({' ' : '-'}) }}.jpg">
                      <span class="visible-block text-medium text-dark text-bold">{{' ' ~ payment_info_detail.cartao_mascara}}</span>
                      </a>
                      <span class="visible-block text-medium text-dark text-bold">{{payment_info_detail.qtd_parcela ~ ' x de ' ~ payment_info_detail.val_parcela}}</span>
                      {% if payment_info_detail.tid %}
                        <span class="visible-block text-medium text-dark text-bold">{{text_payment_tid ~ payment_info_detail.tid }}</span>
                      {% endif %}
                    {% endif %}
                  </div>
                </div>
              {% endif %}
              {% if payment_address %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_payment_address }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ payment_address }}</span>
                  </div>
                </div>
              {% endif %}
              {% if shipping_method %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box top-padding-large right-padding-large">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_shipping_method }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ shipping_method }}</span>
                  </div>
                </div>
              {% endif %}
              {% if (shipping_pickup) %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box top-padding-large right-padding-large ">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_pickup_address }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_address }}</span>
                  </div>
                </div>
              {% elseif (shipping_address) %}
                <div class="col-xs-12 col-md-6">
                  <div class="content-box top-padding-large right-padding-large ">
                    <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_shipping_address }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ shipping_address }}</span>
                  </div>
                </div>
              {% endif %}
            </div>
          </div>

          {% if order_tracking_events is defined %}
            {% for key, order_tracking_event in order_tracking_events %}
              <div class="paper bottom-padding-large left-padding-large bottom-margin-medium">
                <div class="row no-space-xs">
                  <div class="col-xs-12 col-md-6">
                    <div class="content-box top-padding-large right-padding-large">
                      <span class="visible-block text-small text-gray bottom-margin-x-small">{{ text_tracking_code }}</span>
                      <span class="visible-block text-medium text-dark text-bold">{{ key }}</span>
                    </div>
                  </div>
                  <div class="col-xs-12 col-md-6">
                    <div class="content-box top-padding-medium right-padding-large">
                      {% if order_tracking_event|length > 0 %}
                        {% for order_tracking in order_tracking_event %}
                          <div class="top-margin-small">
                            <span class="visible-block text-medium text-dark text-bold">{{ order_tracking.descricao }}</span>
                            <span class="visible-block text-small text-gray top-margin-x-small">{{ order_tracking.data }}</span>
                          </div>
                        {% endfor %}
                      {% else %}
                        <span class="visible-block text-medium text-dark text-bold top-margin-small">Nenhum evento foi encontrado</span>
                      {% endif %}
                    </div>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% endif %}

        {% for keyTipo, cartTipo in productlist %}
          {% for keyLista, lista in cartTipo %}
            {% if lista.isListaEscolar %}
              {% if productlist|length > 1 %}
                <hr class="bottom-border-gray top-padding-medium bottom-margin-medium">
              {% endif %}
              <span class="text-large text-dark visible-block top-padding-medium">{{lista.descricao}}</span>
            {% endif %}
            {% for keyProduto, product in lista.products %}
              <div class="row x-small-space-xs no-space-md middle-xs between-xs vertical-padding-medium">
                <div class="col-xs-12 col-md">
                  <div class="content-box flex nowrap-xs middle-xs">
                    <div>
                      <img src="{{product.image}}" alt="" width="80" height="80" class="visible-block">
                    </div>
                    <div class="full-width left-margin-medium">
                      <span class="visible-block text-small text-small text-word-wrap bottom-margin-x-small">(Cód item. {{ product.model }})</span>
                      <span class="visible-block text-medium text-dark text-bold">{{ product.name }}</span>
                      {% if product.itens_kit %}
                        <div class="rel">
                          <a href="#" class="visible-block text-small vertical-padding-small js-see-kit-products">Ver produtos do kit</a>
                          <div class="abs background-white padding-medium border-gray auto-overflow hidden cart-kit-products-container">
                            {% for itemKitKey, itemKit in product.itens_kit %}
                              <div class="text-ellipsis">
                                <span class="text-dark text-bold">{{ itemKit.quantidade }}</span>
                                <span class="text-small text-gray text-ellipsis"> - {{ itemKit.descricao }}</span>
                              </div>
                            {% endfor %}
                          </div>
                        </div>
                      {% endif %}
                      {% if futuragrade_status is defined and futuragrade_status %}
                        <div class="top-margin-x-small">
                          {% if product.color_description is defined and product.color_description %}
                            <span class="text-small text-gray">{{product.color_template_description}}</span>
                            <span class="text-small text-dark text-bold">{{ product.color_description }}</span>
                          {% endif %}
                          {% if product.size_description is defined and product.size_description %}
                            <span class="text-small text-gray">{{product.size_template_description}}</span>
                            <span class="text-small text-dark text-bold">{{ product.size_description }}</span>
                          {% endif %}
                          {% if product.specification_description is defined and product.specification_description %}
                            <span class="text-small text-gray">{{product.specification_template_description}}</span>
                            <span class="text-small text-dark text-bold">{{ product.specification_description }}</span>
                          {% endif %}
                        </div>
                      {% endif %}
                      {% if product.brinde %}
                        <div class="top-padding-x-small right-margin-small text-small">
                          <span class="text-gray">{{ text_gift }}</span>
                          <span class="text-dark text-bold">{{product.brinde.product_name}}</span>
                        </div>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="col-xs-12 col-md-width-auto">
                  <div class="content-box flex">
                    <div class="right-padding-small right-border-gray">
                      <span class="visible-block text-small text-gray">{{ column_quantity }}</span>
                      <span class="visible-block text-small text-dark text-bold">{{ product.quantity }}</span>
                    </div>
                    {% if product.pontos > 0 %}
                      <div class="horizontal-padding-small right-border-gray">
                        <span class="visible-block text-small text-gray">{{ column_pontos }}</span>
                        <span class="visible-block text-small text-dark text-bold">{{ product.pontos }}</span>
                      </div>
                      <div class="left-padding-small">
                        <span class="visible-block text-small text-gray">{{ column_total_pontos }}</span>
                        <span class="visible-block text-small text-dark text-bold">{{ product.total_pontos }}</span>
                      </div>
                    {% else %}
                      <div class="horizontal-padding-small right-border-gray">
                        <span class="visible-block text-small text-gray">{{ column_price }}</span>
                        <span class="visible-block text-small text-dark text-bold">{{ product.price }}</span>
                      </div>
                      <div class="left-padding-small">
                        <span class="visible-block text-small text-gray">{{ column_total }}</span>
                        <span class="visible-block text-small text-dark text-bold">{{ product.total }}</span>
                      </div>
                    {% endif %}
                  </div>
                  <div class="flex top-margin-small">
                    {% if fidelity == false %}
                      <a href="#" class="text-small vertical-padding-small right-margin-medium js-product-reorder"
                         data-product-id="{{product.id}}"
                         data-product-qty="{{product.quantity}}"
                         data-product-size="{{ product.size_id }}"
                         data-product-specification="{{ product.specification_id }}">
                        <span>Recomprar produto</span>
                      </a>
                    {% endif %}
                    <a href="{{product.return}}" class="text-small vertical-padding-small">
                      <span>Devolver produto</span>
                    </a>
                  </div>
                </div>
              </div>
            {% endfor %}
          {% endfor %}
        {% endfor %}
        </div>
      </div>
      {% if column_right %}
        <div class="hidden-md-down col-md-3">
          {{ column_right }}
        </div>
      {% endif %}
    </div>
  </div>
</section>
{{footer}}
<script type="text/javascript">
  window.waitEvent('scripts_document', function () {
    $('.js-transportadora').on('click', function () {

      var input = $('<input>').attr('name', 'objetos').val($(this).data('tracking-code'));
      var form = $('<form>').attr({'action': $(this).data('link'), 'method': 'POST', 'target': '_Blank'}).append(input).appendTo('body').submit();
      form.remove();

    });
  });
</script>
