{{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_pix  %}
                      <a onclick="hiddenPix()" class="cursor-pointer visible-block text-medium text-bold top-margin-x-small" >{{ text_pix }}</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 }}, {{ pickup_number }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_complement }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_neighborhood }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_city }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_zone }}</span>
                    <span class="visible-block text-medium text-dark text-bold">{{ pickup_postcode }}</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>

  <div class="hidden overlay overlay-black-3 js-cofirmation" style="z-index: 110" onclick="this.classList.add('hidden');">
  </div>
  <div class="hidden flex middle-xs center-xs shadow-small center-middle-fixed background-white js-box-confirmation " style=" z-index: 111 ;width: 100%; max-width: 400px; min-height: 400px;">
    <div class="row padding-small">
      <span class="col-xs-12 text-medium text-center visible-block">PIX copia e cola</span>
      <div class="col-xs-12 text-center -align-center">
        {% if payment_pix.link_qrcodeurl%}
          <img  src="{{ payment_pix.link_qrcodeurl }}" class="top-margin-x-small js-imgQr"/>
        {% endif%}
        <span  class=" hidden text-large text-dark text-bold visible-block top-margin-large js-copy-content">{{ payment_pix.link_qrcode }}</span>
        <div class="flex middle-xs center-xs col-xs-12">
          <button class="search-instruction btn-default btn-small btn-outline js-copy-action">
            <span>Cópiar código</span>
          </button>
        </div>
        {% if payment_pix.payment_code == 'getnet'%}
        <div class="flex middle-xs center-xs">
          <button onclick="reloadPix({{ order_id }})" class="btn-default btn-small-square btn-outline js-reloadPayment">
            <span>Atualizar Pix</span>
          </button>
        </div>
        {% endif%}
        <div class="flex middle-xs center-xs col-xs-12 center-xs left-padding-large right-padding-large full-width" >
          <button class="btn-default btn-medium js-box-cancel">{{ text_close }}</button>
        </div>
      </div>
    </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();

    });
  });

  function reloadPix(order_id){
    $.ajax({
      url: 'index.php?route=payment/getnet/reloadPix&id='+order_id,
      type: 'get',
      dataType: 'json',
      timeout: 3000,
      contentType: 'application/json; charset=utf-8',
      error: function(xhr, ajaxOptions, thrownError) {
        console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
      },
      success: function(json) {
        if(json){
          var imgQR = document.querySelector('.js-imgQr');
          var spanQr = document.querySelector('.js-copy-content');
          imgQR.setAttribute('src','https://chart.googleapis.com/chart?chs=400x400&cht=qr&chl='+json.additional_data.qr_code);
          spanQr.textContent = json.additional_data.qr_code;
        }
      },
    });
  }

  setInterval( paymentStatus, 5000);

  function paymentStatus(){
    var imgQR = document.querySelector('.js-imgQr');
    if(imgQR && ! (imgQR.getAttribute('src') == 'image/qrcode_pago.png')){
      $.ajax({
        url: 'index.php?route=checkout/success/verifyPaymentPix',
        type: 'get',
        dataType: 'json',
        timeout: 3000,
        contentType: 'application/json; charset=utf-8',
        error: function(xhr, ajaxOptions, thrownError) {
          console.log(thrownError + '\r\n' + xhr.statusText + '\r\n' + xhr.responseText);
        },
        success: function(json) {
          if(json){
            imgQR.setAttribute('src','image/qrcode_pago.png');
          }
        },
      });
    }
  }

  function hiddenPix(){
    const confirm = document.querySelector('.js-cofirmation');
    confirm.classList.remove('hidden');
    const confirBox = document.querySelector('.js-box-confirmation');
    confirBox.classList.remove('hidden');

  }
  const cancel = document.querySelector('.js-cofirmation');
  if (cancel) {
    cancel.onclick = function(event) {
      const confirm = document.querySelector('.js-cofirmation');
      confirm.classList.add('hidden');
      const confirBox = document.querySelector('.js-box-confirmation');
      confirBox.classList.add('hidden');
    };
  }
  const btnCancel = document.querySelector('.js-box-cancel');
  if(btnCancel){
    btnCancel.onclick = function(event) {
      cancel.onclick();
    }
  }
</script>
