{{ header }}
<div id="meuConfirm" style="display:none;" title="Confirmar"></div>
<header class="background-white bottom-margin-large"
data-order-info='{
  {% if order_id                        %}"orderId"          : "{{ order_id }}"                        , {% endif %}
  {% if content_info.code_pagamento     %}"codePagamento"    : "{{ content_info.code_pagamento }}"     , {% endif %}
  {% if content_info.status_pagamento_canceldo %}"status_pagamento_canceldo": "{{ content_info.status_pagamento_canceldo }}", {% endif %}
  {% if mktOrder                        %}"mktOrder"         : "{{ mktOrder }}"                        , {% endif %}
  {% if order_status_tracking           %}"trackingStatus"   : {{ order_status_tracking|json_encode() }}, {% endif %}
  {% if mktOrderId                      %}
    "mktOrderId"       : "{{ mktOrderId|replace({' ':''}) }}",
    "mktOrderIdNormal" : "{{ mktOrderId }}",
  {% endif %}
  {% if mercadolivre_status             %}   "mlStatus"               : "{{ mercadolivre_status }}"             , {% endif %}
  {% if message_mercadolivre_order_stop %}   "mlMsgOrderStop"         : "{{ message_mercadolivre_order_stop }}" , {% endif %}
  {% if mercadolivre_stopsync           %}   "mlStopsync"             : "{{ mercadolivre_stopsync }}"           , {% endif %}
  {% if mkt_integracao_tipo is defined  %}   "mkt_integracao_tipo"    : "{{ mkt_integracao_tipo }}"             , {% endif %}
  {% if captura_disponivel is defined  %}    "captura_disponivel"     : "{{ captura_disponivel }}"              , {% endif %}
  {% if antifraude_verificado is defined  %} "antifraude_verificado"  : "{{ antifraude_verificado }}"           , {% endif %}
  {% if payment_method is defined  %}        "payment_method"         : "{{ payment_method }}"                  , {% endif %}
  {% if shipping_method is defined  %}       "shipping_method"        : "{{ shipping_method|escape }}"                 , {% endif %}
  {% if fields_register_brazil_status_sexo is defined  %} "fields_register_brazil_status_sexo"  : "{{ fields_register_brazil_status_sexo }}" , {% endif %}
  {% if fields_register_brazil_status_data_nascimento is defined  %} "fields_register_brazil_status_data_nascimento"  : "{{ fields_register_brazil_status_data_nascimento }}" , {% endif %}
  {% if fields_register_brazil_status_telefone2 is defined  %} "fields_register_brazil_status_telefone2"  : "{{ fields_register_brazil_status_telefone2 }}" , {% endif %}
  "filterContent"   :  {{ filter_content|json_encode() }},
  "categories"      :  {{ categories|json_encode()|e('html') }}
}'
data-payment-address="{{ payment_address_1 }} {{ payment_numero }} {{ payment_city|replace({"'": ""}) }} {{ payment_zone }}"
data-shipping-address="{{ shipping_address_1 }} {{ shipping_numero }} {{ shipping_city|replace({"'": ""}) }} {{ shipping_zone }}"
data-pickup-address="{{ pickup_address }} {{ pickup_number }} {{ pickup_city|replace({"'": ""}) }} {{ pickup_zone }}"
>
  <div class="container-fluid">
    <div class="row no-space-xs">
      <div class="col-xs-12">
        <div class="content-box vertical-padding-large flex between-xs middle-xs js-header-notifications">
          <div>
            <span class="text-x-large text-dark">Pedido #{{ order_id }}</span>
            <div class="adm-breadcrumb">
              {% for breadcrumb in breadcrumbs %}
                <i class="fas fa-angle-right text-x-small text-gray horizontal-padding-small"></i>
                <a href="{{ breadcrumb.href }}" class="text-x-small text-gray text-decoration-none">{{ breadcrumb.text }}</a>
              {% endfor %}
            </div>
          </div>
          <div>
            <a class="text-primary visible-inline-block cursor-pointer text-decoration-none vertical-padding-small" href="{{ invoice }}" target="_blank">
              {{ button_invoice }}
            </a>
            {% if mercaOrderId is defined and mercaOrderId and mercadolivre_status and mercadolivre_stopsync == false %}
              <span class="text-warning visible-inline-block cursor-pointer text-decoration-none vertical-padding-small left-margin-x-large js-order-stop-ml" data-orderid="{{ order_id }}"  data-mercaorderid="{{ mercaOrderId }}">{{ button_mercadolivre_order_stop }}</span>
            {% endif %}
            {% if mercaOrderId is defined and (mercadolivre_url) %}
      				<a href="{{ mercadolivre_url }}" data-order-id="{{ mercadolivre_id }}" class="js-mercadolivre-etiqueta-download text-warning visible-inline-block cursor-pointer text-decoration-none vertical-padding-small left-margin-x-large">{{ button_mercadolivre_etiqueta }}</a>
            {% endif %}
            {% if (skyhub_etiqueta_url) %}
              <a href="{{ skyhub_etiqueta_url }}" data-order-id="{{ skyhub_order_id }}" class="js-skyhub-etiqueta-download text-warning visible-inline-block cursor-pointer text-decoration-none vertical-padding-small left-margin-x-large">{{ button_skyhub_etiqueta }}</a>
            {% endif %}
            {% if (melhorenvio_etiqueta_url) %}
              <a href="{{ melhorenvio_etiqueta_url }}" data-order-id="{{ order_id }}" data-shipping-label-id="{{ order_shipping_label_id }}"
                 class="js-melhorenvio-etiqueta-download text-warning visible-inline-block cursor-pointer text-decoration-none vertical-padding-small left-margin-x-large">{{ button_melhorenvio_etiqueta }}</a>
            {% endif %}
          </div>
          {% if error_warning %}<div class="warning full-width top-margin-small">{{ error_warning }}</div>{% endif %}
          {% if success %}<div class="success full-width top-margin-small">{{ success }}</div>{% endif %}
          {% if warning_ml %}<div class="text-warning background-warning border-warning padding-small rounded-small top-margin-small">{{ warning_ml }}</div>{% endif %}
          {% if error_repli %}
            <div class="{% if error_repli_attention is defined and error_repli_attention  %} attention {% else %} warning {% endif %} js-more-info-content full-width">
              <span class="visible-block">{{ error_repli }}</span>
              <span class="text-primary text-x-small js-more-info cursor-pointer">Ver mais</span>
              <div class="top-padding-medium hidden">
                <span class="visible-block">{{ error_repli_detail }}</span>
                <button class="btn-default btn-primary btn-small top-margin-small">
                  <span class="js-order-force-repli">{{button_forcar_replicacao}}</span>
                </button>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>
<div class="container-fluid" data-tabs-id="tab-info">
  <div class="row hidden" data-tab="{% if must_select_customer %}<i class='fas fa-exclamation-triangle text-error right-margin-small'></i>{% endif %}Geral">
    <div class="col-xs-12 col-md-8">
      <div class="content-box">
        <div class="row">
          {#Pedido não confirmado#}
          {% if not order_confirmed and mkt_integracao_tipo is defined and mkt_integracao_tipo == constant('Type_MarketPlace::Tp_SkyHub') %}
          <div class="col-xs-12">
            <div class="content-box flex middle-xs background-warning padding-large shadow-small">
              <span class="text-small text-gray visible-block vertical-margin-small right-margin-large">{{ text_notice }}:</span>
              <span class="text-medium text-warning">{{ text_order_not_confirmed }}.</span>
            </div>
          </div>
          {% endif %}

          <div class="col-xs-12">
            <div class="content-box flex middle-xs background-white padding-large shadow-small">
              <span class="text-small text-gray visible-block vertical-margin-small right-margin-large"><!--{{ text_access_key }}-->Chave de acesso:</span>
              {% if access_key is defined %}
                <span class="text-medium text-dark">{{ access_key }}</span>
              {% else %}
                <span class="text-medium text-dark">A nota fiscal ainda não foi emitida ou capturada pela loja virtual.</span>
              {% endif %}
            </div>
          </div>
          {% if link_danfe is defined or link_xml is defined %}
            <div class="col-xs-12">
              <div class="content-box flex middle-xs between-xs background-white padding-large shadow-small">
                {% if link_danfe is defined %}
                  <a href="{{ link_danfe }}" class="text-medium text-primary" target="_blank">Download DANFE</a>
                {% endif %}
                {% if link_xml is defined %}
                  <a href="{{ link_xml }}" class="text-medium text-primary" target="_blank">Download XML</a>
                {% endif %}
                <a href="http://www.nfe.fazenda.gov.br/portal/consultaRecaptcha.aspx?tipoConsulta=resumo&tipoConteudo=d09fwabTnLk=" class="text-medium text-primary" target="_blank">Consultar NF-e</a>
              </div>
            </div>
          {% endif %}
          <div class="col-xs-12">
            <div class="content-box background-white padding-large shadow-small">
              <div class="flex between-xs middle-xs">
                {% if order_status %}
                  {% if type_status == constant('Type_OrderStatus::Tp_Positiva') %}
                    <span id="order-status" class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-success text-success">{{ order_status }}</span>
                  {% elseif type_status == constant('Type_OrderStatus::Tp_Negativa') %}
                    <span id="order-status" class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-error text-error">{{ order_status }}</span>
                  {% else %}
                    <span id="order-status" class="text-x-small horizontal-padding-small vertical-padding-x-small rounded-large visible-inline-block background-gray text-gray">{{ order_status }}</span>
                  {% endif %}
                {% endif %}
                <div class="text-right">
                  <span class="text-small text-gray visible-block">{{ text_date_added }} {{ date_added }}</span>
                  <span class="text-small text-gray visible-block top-margin-small">{{ text_date_modified }} {{ date_modified }}</span>
                </div>

              </div>
              {% if mktOrder %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_order_ml_id }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">#{{ mktOrderId }}</span>
              {% endif %}

              {% if mkt_comission %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_commission_mkt }}:</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ mkt_comission }}</span>
              {% endif %}
              {% if shipping_list_cost %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_shipping_list_cost }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_list_cost }}</span>
              {% endif %}
              <span class="text-small text-gray visible-block top-margin-x-large">{{ text_shipping_method }}</span>
              <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_method }}</span>

              {% if shipping_reference and (shipping_reference|trim) != '' %}
                <br>
                <span class="text-small text-gray visible-block">{{ text_shipping_method_reference }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_reference }}</span>
              {% endif %}
              <span class="text-small text-gray visible-block top-margin-x-large">{{ text_payment_method }}</span>
              <span class="text-medium text-dark visible-block top-margin-small">{{ payment_method }}</span>
              {% if comment %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_comment }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ comment }}</span>
              {% endif %}
              {% if id_futura %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_id_futura }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ id_futura }}</span>
              {% endif %}
              {% if ip %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_ip }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ ip }}</span>
              {% endif %}
              {% if forwarded_ip %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_forwarded_ip }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ forwarded_ip }}</span>
              {% endif %}
              {% if user_agent %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_user_agent }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ os }} / {{ browser }} {{ version }}</span>
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="content-box">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box background-white padding-large shadow-small">
              <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
                <span class="text-medium text-dark right-padding-x-small first-xs"><b>{{ column_itens_total }}</b></span>
                <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
                <span class="text-large text-dark left-padding-x-small text-nowrap">{{ itens_total }}</span>
              </div>
              {% for totals in totals %}
                <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
                  <span class="text-medium text-dark right-padding-x-small first-xs"><b>{{ totals.title }}</b></span>
                  <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
                  <span class="text-large text-dark left-padding-x-small text-nowrap">{{ totals.text }}</span>
                </div>
              {% endfor %}
            </div>
          </div>
          <div class="col-xs-12">
            <div class="content-box background-white padding-large shadow-small">
              {% if must_select_customer  %}
                <div class="js-selected-customer-content">
                  <div class="warning full-width bottom-margin-medium">{{ error_must_select_customer }}</div>
                  <button type="button" id="button-select-customer" class="btn-default btn-small btn-primary js-select-customer-button">Selecionar Cliente</button>
                </div>
              {% else %}
                <span class="text-small text-gray visible-block">{{ text_customer }}</span>
                {{ customer and order_confirmed ? '<a href="' ~ customer ~ '" target="_blank" class="text-medium text-primary visible-block top-margin-small">': '<span class="text-medium text-dark visible-block top-margin-small">' }}
                {{ firstname }} {{ lastname }}
                {{ customer and order_confirmed ? '</a>' : '</span>' }}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_email }}</span>
                <span style="width:260px;" class="text-medium text-dark visible-block top-margin-small text-ellipsis">{{ email }}</span>
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_telephone }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ telephone }}</span>
                {% if celular %}
                  <span class="text-small text-gray visible-block top-margin-x-large bottom-margin-small">{{ text_celular }}</span>
                  <a href="https://api.whatsapp.com/send?phone=55{{ celular }}" target="_blank" class="text-medium text-primary">
                    <span class="mask-celular">{{ celular }}</span>
                    <i class="fab fa-whatsapp left-margin-small text-success"></i>
                  </a>
                {% endif %}
                {% if cpf != '' %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_cpf }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ cpf }}</span>
                {% endif %}
                {% if rg != '' and fields_register_brazil_status_rg %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_rg }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ rg }}</span>
                {% endif %}
                {% if cnpj != '' %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_cnpj }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ cnpj }}</span>
                {% endif %}
                {% if razao_social != '' %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_razao }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ razao_social }}</span>
                {% endif %}
                {% if inscricao_estadual != '' %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_ie }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ inscricao_estadual }}</span>
                {% endif %}
                {% if sexo != '' and fields_register_brazil_status_sexo %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_sexo }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ sexo == 'm' ? 'Masculino' : 'Feminino' }}</span>
                {% endif %}
                {% if (data_nascimento != '') and (fields_register_brazil_status_data_nascimento) and (data_nascimento != '0000-00-00') %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_data_nascimento }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ data_nascimento }}</span>
                {% endif %}
                {% if fax and fields_register_brazil_status_telefone2 %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_fax }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small mask-phone">{{ fax }}</span>
                {% endif %}
              {% endif %}
            </div>
          </div>
          {% if marketplace %}
            <div class="col-xs-12">
              <div class="content-box background-white padding-large shadow-small">
                <div class="row nowrap-xs no-space-xs middle-xs">
                  <div class="col-xs">
                    <span class="text-small text-gray visible-block">Origem do pedido:</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ marketplace.mktName }}</span>
                    {% if marketplace.mktOrigemCaptura is defined %}
                      <span class="text-small text-gray visible-block top-margin-large">Origem da captura:</span>
                      <span class="text-medium text-dark visible-block top-margin-small">{{ marketplace.mktOrigemCaptura }}</span>
                    {% endif %}
                    <span class="text-small text-gray visible-block top-margin-large">Integração:</span>
                    <img class="top-margin-small" src="{{ marketplace.imgIntegration }}" alt="">
                    {% if marketplace.imgMktTipo is defined %}
                      <span class="text-small text-gray visible-block top-margin-large">Marketplace:</span>
                      <img class="top-margin-small" src="{{ marketplace.imgMktTipo }}" alt="">
                    {% endif %}
                  </div>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>
  <div class="row hidden" data-tab="{% if must_select_payment_address %}<i class='fas fa-exclamation-triangle text-error right-margin-small'></i>{% endif %}Pagamento">

    {% if must_select_payment_address or (order_confirmed and mkt_integracao_tipo is defined and mkt_integracao_tipo == constant('Type_MarketPlace::Tp_SkyHub')) %}
      {% if not order_confirmed and mkt_integracao_tipo is defined and mkt_integracao_tipo == constant('Type_MarketPlace::Tp_SkyHub') %}
      <div class="col-xs-12 col-md-8">
        <div class="content-box flex middle-xs background-warning padding-large shadow-small">
          <span class="text-small text-gray visible-block vertical-margin-small right-margin-large">{{ text_notice }}:</span>
          <span class="text-medium text-warning">{{ text_order_not_confirmed }}.</span>
        </div>
      </div>
      {% elseif must_select_payment_address  %}
        {{ payment_action }}
        <div class="col-xs-12 col-md-8 js-content-payment-map">
          <div class="content-box">
            <div class="row">
              <div class="col-xs-12">
                <div class="content-box flex middle-xs background-white padding-large shadow-small">
                  <div id="payment-loading" class="flex center-xs full-width"></div>
                  <div class="payment-map full-width"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      {% endif %}

      <div class="col-xs-12 col-md-4 first-xs last-md">
        <div class="content-box">
          <div class="row">
            <div class="col-xs-12">
              <div class="content-box background-white padding-large shadow-small">
                <div class="js-selected-payment-address-content">
                  {% if must_select_payment_address %}
                  <div class="warning full-width bottom-margin-medium">{{ error_must_select_address }}</div>
                  <button
                    type="button"
                    id="button-select-payment-address"
                    class="btn-default btn-small btn-primary bottom-margin-small js-select-payment-address-button"
                    {% if customer_id is defined and customer_id %}customer-id="{{ customer_id }}"{% endif %}
                  >Selecionar Endereço</button>
                  {% endif %}

                  {% if payment_method and (payment_method|trim) != '' %}
                    <span class="text-small text-gray visible-block">{{ text_payment_method }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ payment_method }}</span>
                  {% endif %}

                  {% if payment_firstname and (payment_firstname|trim) != '' %}
                    <span class="text-small text-gray visible-block top-margin-x-large">{{ text_firstname }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ payment_firstname }} {{ payment_lastname }}</span>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% else %}
    {{ payment_action }}
    <div class="col-xs-12 col-md-8 js-content-payment-map">
      <div class="content-box">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box flex middle-xs background-white padding-large shadow-small">
              <div id="payment-loading" class="flex center-xs full-width"></div>
              <div class="payment-map full-width"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 first-xs last-md">
      <div class="content-box">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box background-white padding-large shadow-small">
              <span class="text-small text-gray visible-block">{{ text_payment_method }}</span>
              <span class="text-medium text-dark visible-block top-margin-small">{{ payment_method }}</span>
              {% 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="text-medium text-dark visible-block top-margin-small">{{' ' ~ payment_info_detail.cartao_mascara}}</span>
              </a>
              <span class="text-medium text-dark visible-block top-margin-small">{{payment_info_detail.qtd_parcela ~ ' x de ' ~ payment_info_detail.val_parcela}}</span>
                {% if payment_info_detail.tid %}
                  <span class="text-medium text-dark visible-block top-margin-small">{{text_payment_tid ~ payment_info_detail.tid }}</span>
                {% endif %}
              {% endif %}
              {% if payment_firstname != '' %}
              <span class="text-small text-gray visible-block top-margin-x-large">{{ text_firstname }}</span>
              <span class="text-medium text-dark visible-block top-margin-small">{{ payment_firstname }} {{ payment_lastname }}</span>
              {% endif %}
              {% if payment_apelido != '' %}
                <span class="text-small text-gray visible-block top-margin-x-large">Local</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ payment_apelido }}</span>
              {% endif %}
              {% if payment_company %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_company }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ payment_company }}</span>
              {% endif %}
              {% if payment_company_id %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_company_id }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ payment_company_id }}</span>
              {% endif %}
              <span class="text-small text-gray visible-block top-margin-x-large">{{ text_address_1 }}</span>
              <span class="text-medium text-dark visible-block top-margin-small">
                {{ payment_address_1 }}
                {% if payment_numero != '' %}, {{ payment_numero }}{% endif %}
                {% if payment_address_2 %} - {{ payment_address_2 }}{% endif %}
              </span>
              <span class="text-medium text-dark visible-block top-margin-x-small">
                {{ payment_city }} - {{ payment_zone }}
                {% if payment_zone_code %} ({{ payment_zone_code }}){% endif %}
              </span>
              <span class="text-medium text-dark visible-block top-margin-x-small">
                {{ payment_country }}
              </span>
              {% if payment_postcode %}
                <span class="text-medium text-dark visible-block top-margin-x-small">
                  {{ payment_postcode }}
                </span>
              {% endif %}
              {% if payment_complemento != '' %}
                <span class="text-small text-gray visible-block top-margin-x-large">Complemento:</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ payment_complemento }}</span>
              {% endif %}
              {% if codigo_integracao_pagamento %}
                <span class="text-small text-gray visible-block top-margin-x-large">{{ text_codigo_pagamento }}</span>
                <span class="text-medium text-dark visible-block top-margin-small">{{ codigo_integracao_pagamento }}</span>
              {% endif %}
              {% if estorna_pagamento %}
                {% if estorna_pagamento.habilita_estorno %}
                  <button type="button" id="button-cancel-payment" class="btn-default btn-medium btn-primary top-margin-medium">
                    <span>{{ button_cancel_payment }}</span>
                  </button>
                  <div class="cancel_payment_container"></div>
                {% endif %}
                {% if estorna_pagamento.valor_estornado %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_valor_estornado }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ estorna_pagamento.valor_estornado }}</span>
                {% endif %}
              {% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>
    {% endif %}
  </div>
  <div class="row hidden" data-tab="{% if must_select_shipping_address %}<i class='fas fa-exclamation-triangle text-error right-margin-small'></i>{% endif %}Entrega">
    {#Pedido não confirmado#}
    {% if not order_confirmed  and mkt_integracao_tipo is defined and mkt_integracao_tipo == constant('Type_MarketPlace::Tp_SkyHub') %}
    <div class="col-xs-12 col-md-8">
      <div class="content-box flex middle-xs background-warning padding-large shadow-small ">
        <span class="text-small text-gray visible-block vertical-margin-small right-margin-large">{{ text_notice }}:</span>
        <span class="text-medium text-warning">{{ text_order_not_confirmed }}.</span>
      </div>
    </div>
    {% else %}
      <div class="col-xs-12 col-md-8 {% if shipping_pickup %}js-content-pickup-map{% else %}js-content-shipping-map{% endif %}">
        <div class="content-box">
          <div class="row">
            <div class="col-xs-12">
              <div class="content-box background-white padding-large shadow-small">
                <div id="shipping-loading" class="flex center-xs full-width"></div>
                <div class="{% if shipping_pickup %}pickup-map{% else %}shipping-map{% endif %} full-width"></div>
              </div>
            </div>

            <div class="col-xs-12">
              <div id="tracking-events" class="content-box rel">
                <div class="flex center-xs background-white padding-large shadow-small">
                  <img src="../assets/img/loading-black.svg" alt="Carregando..." />
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    {% endif %}

    <div class="col-xs-12 col-md-4 first-xs last-md">
      <div class="content-box">
        <div class="row">
          <div class="col-xs-12">
            <div class="content-box background-white padding-large shadow-small">
              <div class="js-selected-shipping-address-content">
                {% if shipping_reference and (shipping_reference|trim) != '' %}
                  <button type="button" id="{{ shipping_reference }}" class="js-button-postar-kangu btn-default btn-medium {% if (tracking_codes) %} btn-success {% else %} btn-primary {% endif %}  fancybox-image" {% if (tracking_codes) %} disabled {% endif %}>
                    <span id="{{ shipping_reference }}" >{% if (tracking_codes) %} {{ text_shipping_button_reference_postado }} {% else %}{{ text_shipping_button_reference }} {% endif %}</span>
                  </button>
                  <br>
                  <br>
                {% endif %}
                {% if must_select_shipping_address %}
                  <div class="warning full-width bottom-margin-medium">{{ error_must_select_address }}</div>
                  <button
                    type="button"
                    id="button-select-shipping-address"
                    class="btn-default btn-small btn-primary bottom-margin-small js-select-shipping-address-button"
                    {% if customer_id is defined and customer_id %}customer-id="{{ customer_id }}"{% endif %}
                  >Selecionar Endereço</button>
                {% endif %}

                {% if shipping_method and (shipping_method|trim) != '' %}
                  <span class="text-small text-gray visible-block">{{ text_shipping_method }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_method }}</span>
                {% endif %}

                <div class="js_tracking_code">
                {% if tracking_codes %}
                  <span class="text-small text-gray visible-block top-margin-x-large">Código de acompanhamento</span>
                    {% for tracking_code in tracking_codes %}
                      <span class="text-medium text-dark visible-block top-margin-small">{{ tracking_code }}</span>
                    {% endfor %}
                {% endif %}
                </div>

                {% if shipping_reference and (shipping_reference|trim) != '' %}
                  <br>
                  <span class="text-small text-gray visible-block">{{ text_shipping_method_reference }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_reference }}</span>
                {% endif %}

                {% if shipping_pickup %}
                  {% if pickup_address is defined and pickup_address is not empty %}
                    <span class="text-small text-gray visible-block top-margin-x-large">{{ text_pickup_address }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">
                      {{ pickup_address }}, {{ pickup_number }}
                      {% if pickup_neighborhood is defined and pickup_neighborhood is not empty %} - {{ pickup_neighborhood }}{% endif %}
                    </span>
                    <span class="text-medium text-dark visible-block top-margin-x-small">{{ pickup_city }} - {{ pickup_zone }}</span>
                  {% endif %}
                {% elseif order_confirmed %}
                  <span class="text-small text-gray visible-block top-margin-x-large">{{ text_name }}</span>
                  <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_firstname }} {{ shipping_lastname }}</span>
                  {% if shipping_company is defined and shipping_company is not empty %}
                    <span class="text-small text-gray visible-block top-margin-x-large">{{ text_company }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_company }}</span>
                  {% endif %}
                  {% if shipping_apelido is defined and shipping_apelido is not empty %}
                    <span class="text-small text-gray visible-block top-margin-x-large">Local</span>
                    <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_apelido }}</span>
                  {% endif %}
                  {% if shipping_address_1 is defined and shipping_address_1 is not empty %}
                    <span class="text-small text-gray visible-block top-margin-x-large">{{ text_address_1 }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small">
                      {{ shipping_address_1 }}, {{ shipping_numero }}
                      {% if shipping_address_2 is defined and shipping_address_2 is not empty %} - {{ shipping_address_2 }}{% endif %}
                    </span>
                  {% endif %}
                  <span class="text-medium text-dark visible-block top-margin-x-small">{{ shipping_city }} - {{ shipping_zone }} ({{ shipping_zone_code }})</span>
                  <span class="text-medium text-dark visible-block top-margin-x-small">{{ shipping_country }}</span>
                  <span class="text-medium text-dark visible-block top-margin-x-small">{{ shipping_postcode }}</span>
                  {% if shipping_complemento is defined and shipping_complemento is not empty %}
                      <span class="text-small text-gray visible-block top-margin-x-large">Complemento</span>
                      <span class="text-medium text-dark visible-block top-margin-small">{{ shipping_complemento }}</span>
                  {% endif %}
                {% endif %}

                {% if volume_info %}
                  <div class="top-margin-x-large js-volumes">
                    <div class="text-small text-gray">{{ text_volumes }}</div>
                    <div class="text-medium text-dark top-margin-small">
                      <span>{{ text_volumes_quantity }}{{ volume_info|length }}</span>
                      <i class="text-small text-info fas fa-plus-circle js-volumes-control cursor-pointer"></i>
                    </div>
                    <div class="js-volumes-content left-margin-x-small">
                      {% for key,volume in volume_info  %}
                        <div class="top-margin-medium">
                          <div class="text-medium text-dark top-margin-small">Embalagem #{{ key }}</div>
                          <div class="left-margin-small">
                            <div class="top-margin-small">
                              <span class="text-small text-gray visible-block">{{ text_volume_dimension }}</span>
                              <span class="visible-block top-margin-small">{{ text_volume_length }}{{ volume.length }}</span>
                              <span class="visible-block top-margin-x-small">{{ text_volume_width }}{{ volume.width }}</span>
                              <span class="visible-block top-margin-x-small">{{ text_volume_height }}{{ volume.height }}</span>
                            </div>
                            <div class="top-margin-small">
                              <span class="text-small text-gray visible-block">{{ text_volume_weight }}</span>
                              <span class="visible-block top-margin-x-small">{{ volume.weight }}</span>
                            </div>
                            {% if volume.products %}
                              <div class="js-volume-products top-margin-small">
                                <span class="visible-block cursor-pointer js-accordion-control adm-filter-accordion-control">
                                  <span class="text-small text-gray">{{ text_volume_products }}</span>
                                  <i class="text-small text-gray fas fa-angle-down padding-x-small"></i>
                                </span>
                                <div  class="js-accordion-content">
                                  {% for product in volume.products %}
                                    <div class="row no-space-xs middle-xs">
                                      <div class="col-xs-width-auto">
                                        <img src="{{ product.image }}" style="width:40px;height:40px;vertical-align: middle" class="border-gray ">
                                      </div>
                                      <div class="col-xs-8 col-md-9 padding-small">
                                          <span class="text-small text-dark text-bold visible-block">#{{ product.id }}</span>
                                          <a target="_blank" class="text-small text-primary vertical-ellipsis" href="{{ product.href }}">{{ product.name }}</a>
                                      </div>
                                      <div class="col-xs-4 col-md-1">
                                        <div class="content-box">
                                          <span class="text-small text-dark">{{ product.quantity }}  unid.</span>
                                        </div>
                                      </div>
                                    </div>
                                  {% endfor %}
                                </div>
                              </div>
                            {% endif %}
                          </div>
                        </div>
                      {% endfor %}
                    </div>

                  </div>
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row hidden" data-tab="{% if not error_ml %}<i class='fas fa-exclamation-triangle text-error right-margin-small'></i>{% endif %}Produtos">
    <div class="col-xs-12 col-md-8">
      {% for keyTipo, cartTipo in productlist %}
        {% if not error_ml %}
          <div class="warning full-width">
            <span>{{ text_error_ml }}</span>
          </div>
        {% endif %}

        <div class="content-box">
          {% for keyLista, lista in cartTipo %}
            {% if lista.isListaEscolar %}
              <span class="text-x-large text-dark visible-block top-padding-large bottom-padding-medium">{{lista.descricao}}</span>
            {% endif %}
            {% for keyProduto, product in lista.products %}
              <div class="background-white shadow-small bottom-margin-small{% if product.error_ml %} border-error{% endif %}">
                <div class="row no-space-xs middle-xs padding-medium">
                  {% if not error_ml %}
                    <div class="col-xs-width-auto">
                      <div class="content-box">
                        {% if product.error_ml %}
                          <i class="fas fa-pencil-alt text-error text-medium padding-small cursor-pointer" data-modal-id="product-adjust" data-mercaid="{{ product.mercaid }}" data-mktintegracaotipo="{{ mkt_integracao_tipo }}"></i>
                        {% else %}
                          <i class="fas fa-check text-success text-large padding-small"></i>
                        {% endif %}
                      </div>
                    </div>
                  {% endif %}
                  <div class="col-xs-12 col-md">
                    <div class="content-box">
                      <div class="row x-small-space-xs middle-xs">
                        <div class="col-xs-width-auto">
                          <div class="content-box">
                            <img src="{{ product.image }}" alt="{{ product.name }}" class="border-gray"/>
                          </div>
                        </div>
                        <div class="col-xs">
                          <div class="content-box">
                            {% if product.model %}
                              <span class="text-small text-dark text-bold visible-block">#{{ product.model }}</span>
                            {% endif %}
                            {% if product.href %}
                              <a href="{{ product.href }}" target="_blank" class="text-small text-primary visible-block">{{ product.name }}</a>
                            {% else %}
                              <span class="text-small text-dark visible-block">{{ product.name }}</span>
                            {% endif %}
                            {% if product.itens_kit %}
                              {% for itemKitKey, itemKit in product.itens_kit %}
                                <span class="text-small text-gray visible-block">{{ itemKit.quantidade }} - {{ itemKit.descricao }}</span>
                              {% endfor %}
                            {% endif %}
                            {% if futuragrade_status is defined and futuragrade_status %}
                              <span class="text-small text-gray">
                                {% if product.color_description is not empty %} {{ product.color_description }} {% endif %}
                                {% if product.size_description is not empty %} | {{ product.size_description }} {% endif %}
                                {% if product.specification_description is not empty %} | {{ product.specification_description }} {% endif %}
                              </span>
                            {% endif %}
                          </div>
                          {% if product.brinde %}
                            <div class="top-padding-x-small right-margin-small">
                              <span class="text-small text-gray">{{ text_gift }}</span>
                              <span class="text-small text-dark">{{product.brinde.product_name}}</span>
                            </div>
                          {% endif %}
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="col-xs-6 col-md-1">
                    <div class="content-box">
                      <span class="text-small text-dark">{{ product.quantity }}  unid.</span>
                    </div>
                  </div>

                  {% if product.pontos > 0 %}

                    <div class="col-xs-6 col-md-2">
                      <div class="content-box vertical-padding-small">
                        <span class="text-small text-dark" data-tooltip="Pontos unitário">{{ product.pontos }} pontos</span>
                      </div>
                    </div>
                    <div class="col-xs-6 col-md-2">
                      <div class="content-box vertical-padding-small">
                        <span class="text-small text-dark" data-tooltip="Total de pontos">{{ product.total_pontos }} pontos</span>
                      </div>
                    </div>

                  {% else %}
                    <div class="col-xs-6 col-md-2">
                      <div class="content-box vertical-padding-small">
                        <span class="text-small text-dark" data-tooltip="Preço unitário">{{ product.price }}</span>
                      </div>
                    </div>
                    {% if mkt_comission %}
                      <div class="col-xs-6 col-md-2">
                        <div class="content-box vertical-padding-small">
                          <span class="text-small text-dark" data-tooltip="{{ text_commission_mkt }}">{{ product.mkt_comission }}</span>
                        </div>
                      </div>
                    {% endif %}
                    <div class="col-xs-6 col-md-2">
                      <div class="content-box vertical-padding-small">
                        <span class="text-small text-dark" data-tooltip="Total">{{ product.total }}</span>
                      </div>
                    </div>
                  {% endif %}

                </div>
              </div>
            {% endfor %}
          {% endfor %}
        </div>
      {% endfor %}
    </div>
    <div class="col-xs-12 col-md-4">
      <div class="content-box background-white padding-large shadow-small">
        <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
          <span class="text-medium text-dark right-padding-x-small first-xs"><b>{{ column_itens_total }}</b></span>
          <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
          <span class="text-large text-dark left-padding-x-small text-nowrap">{{ itens_total }}</span>
        </div>
        {% for totals in totals %}
          <div class="row nowrap-xs no-space-xs middle-xs bottom-margin-small totals-value">
            <span class="text-medium text-dark right-padding-x-small first-xs"><b>{{ totals.title }}</b></span>
            <div class="col-xs"><span class="top-border-gray top-border-dashed visible-block top-margin-x-small"></span></div>
            <span class="text-large text-dark left-padding-x-small text-nowrap">{{ totals.text }}</span>
          </div>
        {% endfor %}
      </div>
    </div>
  </div>
  <div class="row hidden" data-tab="{% if err_mkt_order_status %}<i class='fas fa-exclamation-triangle text-error right-margin-small'></i>{% endif %}Histórico">
    <div class="col-xs-12 col-md-8">
      <div id="history" class="content-box rel">
        <div class="flex center-xs background-white padding-large shadow-small">
          <img src="../assets/img/loading-black.svg" alt="Carregando..." />
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-md-4 first-xs last-md">
      <div class="content-box background-white padding-large shadow-small">
        <input type="hidden" name="old_order_status_id" value="{{ order_status_id }}" id="old_order_status_id" />
        <label class="field field-medium bottom-margin-large">
          <span class="field-label">{{ entry_order_status }}</span>
          <select name="order_status_id" class="field-entry">
            {% for order_statuses in order_statuses %}
              <option value="{{ order_statuses.order_status_id }}" {% if order_statuses.order_status_id == order_status_id %}selected{% endif %}>{{ order_statuses.name }}</option>
            {% endfor %}
          </select>
        </label>
        <label class="checkbox checkbox-medium bottom-margin-large">
          <input type="checkbox" name="client_notify" value="1" class="checkbox-entry" checked>
    			<span class="checkbox-text">{{ entry_notify }}</span>
    		</label>
        <label class="field field-medium bottom-margin-large">
          <span class="field-label">{{ entry_comment }}</span>
          <textarea name="comment" cols="40" rows="8" class="field-entry"></textarea>
        </label>
        <button type="button" id="button-history" class="btn-default btn-medium btn-primary">
          <span>{{ button_add_history }}</span>
        </button>
      </div>
    </div>
  </div>

  {% if logEnabled %}
  <div class="row hidden" data-tab="Log de Eventos">
    <div class="col-xs-12 col-md-8">
      <div id="log" class="content-box rel">
        <div class="flex center-xs background-white padding-large shadow-small">
          <img src="../assets/img/loading-black.svg" alt="Carregando..." />
        </div>
      </div>
    </div>
  </div>
  {% endif %}

  {% if anti_fraude_tab is defined and anti_fraude_tab and show_anti_fraude %}
    <div class="row hidden" data-tab="{{ antifraude_verificado and captura_disponivel ? "<i class='fas fa-exclamation-triangle text-warning right-margin-small'></i>" : ''}}Anti Fraude">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="row small-space-xs">
            <div class="col-xs-12 col-md-6">
              <div class="content-box background-white shadow-small horizontal-padding-large">
                {% if anti_fraude_result is defined and anti_fraude_result %}
                {% set titles = {1: ['Risco Baixo', '#4caf50'], 2: ['Risco Médio', '#efdb2b'], 3: ['Risco Alto', '#ff9800'], 4: ['Risco Muito Alto', '#ff5722']} %}
                <div>
                  <p class="text-x-large text-dark vertical-padding-large">{{ text_anti_fraude_resultado }}</p>

                  {% if anti_fraude_result.riskLevel %}
                  <div class="risk-level-title-container">
                    <p class="risk-level-title text-x-large" style="left: calc(25% * {{anti_fraude_result.riskLevel}} - 25%); color: {{titles[anti_fraude_result.riskLevel][1]}}">{{titles[anti_fraude_result.riskLevel][0]}}</p>
                  </div>
                  <div class="risk-level">
                    <!-- substituir o 1 no style por (1, 2, 3 ou 4) dependendo no nivel de risco-->
                    <div class="risk-level-pin" style="left: calc(25% * {{anti_fraude_result.riskLevel}} - 10px - 12.5%); border-top-color: {{titles[anti_fraude_result.riskLevel][1]}}"></div>
                  </div>
                  {% elseif anti_fraude_result.status_description %}
                    <p class="text-x-large text-dark vertical-padding-large">{{ anti_fraude_result.status_description }}</p>
                  {% endif %}

                  <p class="text-x-large text-dark vertical-padding-large">{{ payment_method }}</p>

                  <p class="text-x-medium text-gray bottom-margin-small">{{text_anti_fraude_cartao}}{{anti_fraude_result.cartao_numero}}</p>
                  <p class="text-x-medium text-gray">{{anti_fraude_result.qtd_parcela}} {{text_anti_fraude_parcela}} <span class="text-dark text-bold">{{anti_fraude_result.valor_parcela}}</span></p>
                  <!-- <p class="text-x-large text-dark vertical-padding-large">Informações do pagamento</p>
                  <p class="text-x-medium text-gray">Autorizado - 4 dia(s) e 06:29:43 restantes</p> -->
                </div>
                {% elseif clearsale_status is defined and clearsale_status %}
                <div class="vertical-padding-large">
                  <div id="clearsale"></div>
                  <iframe name="iFrameStart" id="iFrameStart" style="border-width : 0px;"
                    src="{{ clearsale_url }}?codigointegracao={{ clearsale_codigointegracao }}&PedidoID={{ order_id }}" {% if antifraude_verificado != constant('Type_AntiFraudeCheckout::Tp_ClearSaleStartManual')  %}class="hidden"{% endif %}></iframe>
                </div>
                {% endif %}

                <div class="vertical-padding-large">
                  <div class="flex">
                    {% if clearsale_status is defined and clearsale_status %}
                    <button id="button-consultaclearsale" class="btn-default btn-medium btn-primary right-margin-small">
                      <span>{{ text_btn_anti_fraude_consultar  }}</span>
                    </button>
                    {% endif %}
                    {% if captura_disponivel %}
                    <button type="button" id="button-nega-pagamento" class="btn-default btn-medium btn-error right-margin-small">
                      <span>{{ text_btn_anti_fraude_cancelar }}</span>
                    </button>
                    <button type="button" id="button-captura-pagamento" class="btn-default btn-medium btn-success">
                      <span>{{ text_btn_anti_fraude_aprovar }}</span>
                    </button>
                    {% endif %}
                  </div>
                  {% if text_captura %}
                    <p class="text-x-large text-dark">{{ text_payment_finalizado }}</p>
                    <p class="text-x-medium text-gray">{{ text_payment_finalizado_obs }}</p>
                  {% endif %}
                </div>
              </div>
            </div>
            {% if anti_fraude_result.detalhes %}
              <div class="col-xs-12 col-md-6">
                <div class="content-box background-white shadow-small horizontal-padding-large">
                  <p class="text-x-large text-dark vertical-padding-large">
                    <i class='fas fa-exclamation-triangle text-error right-margin-small'></i>
                    {{ text_anti_fraude_detail }}
                  </p>
                  {% for detail in anti_fraude_result.detalhes %}
                    <div class="bottom-padding-large">
                      <span class="text-dark text-small">{{ detail.descricao }}</span>
                      {% for result in detail.resultado %}
                        <span class="text-x-small text-gray visible-block top-padding-small left-padding-medium">• {{ result }}.</span>
                      {% endfor %}
                    </div>
                  {% endfor %}
                </div>
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  {% endif %}


</div>

<div id="vue-the-search-customer">
  <the-search
    :open="openTheSearch"
    :items-already-selected="itemsAlreadySelected"
    :single-select="true"
    type-search="customers"
    @close="openTheSearch=false"
    @items-selected="onItemsSelected">
  </the-search>
</div>

<div id="vue-the-search-payment-address">
  <the-search
    :open="openTheSearch"
    :items-already-selected="itemsAlreadySelected"
    :single-select="true"
    :search-on-open="true"
    :aditional-param="aditionalParam"
    type-search="addresses"
    @close="openTheSearch=false"
    @items-selected="onItemsSelected">
  </the-search>
</div>

<div id="vue-the-search-shipping-address">
  <the-search
    :open="openTheSearch"
    :items-already-selected="itemsAlreadySelected"
    :single-select="true"
    :search-on-open="true"
    :aditional-param="aditionalParam"
    type-search="addresses"
    @close="openTheSearch=false"
    @items-selected="onItemsSelected">
  </the-search>
</div>

{{ footer }}

<script type="text/javascript">
  window.DATA = {
    configuration: {
      openSearch : true,
      value_item : [],
      payment_address_items : [],
      shipping_address_items : [],
    },
  };

  language.add({{languageForJS|json_encode()}});
</script>