{{ 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="fa-regular fa-file-lines text-primary visible-inline-block cursor-pointer text-decoration-none vertical-padding-small" href="{{ invoice }}" target="_blank" style="font-size: 20px;" title="Fatura"></a>
            
            <a class="fa-solid fa-download text-primary visible-inline-block cursor-pointer text-decoration-none vertical-padding-small icon-pdf" href="{{ gerarPdf }}" target="_blank" style="font-size: 20px; padding: 8px;" title="Exportar Relatório PDF"></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 %}
            {% if (kangu_etiqueta_url) %}
              <a href="{{ kangu_etiqueta_url }}" data-order-id="{{ order_id }}" data-shipping-label-id="{{ order_shipping_label_id }}"
                class="js-kangu-etiqueta-download text-warning visible-inline-block cursor-pointer text-decoration-none vertical-padding-small left-margin-x-large">{{ button_kangu_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>

                <div class="flex middle-xs gap-2">
                  <button class="btn-default btn-primary btn-small top-margin-small">
                    <span class="js-order-force-repli">{{button_forcar_replicacao}}</span>
                  </button>

                  <button class="js-fix-customer-info btn-default btn-primary btn-small top-margin-small">
                    <span>Corrigir </span>
                  </button>
                </div>
              </div>
            </div>
          {% endif %}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>

  <div id="fix-customer-info-modal" class="hidden overlay overlay-black-6 full-width full-height">
    <div class="container-modal content-box background-white shadow-small padding-large">

      <div class="flex between-xs">
        <span class="text-medium text-bold">{{ text_customer_modal_title }}</span>
        <button class="js-close-modal background-white text-dark cursor-pointer" title="Fechar">
          <i class="fas fa-times text-medium"></i>
        </button>
      </div>

      <div class="background-info border-primary padding-small vertical-margin-medium">
        <div class="flex bottom-margin-x-small">
          <i class="fa-solid fa-circle-info text-info text-small"></i>
          <span class="text-info text-small text-bold">{{ text_obs_modal_title }}</span>
        </div>

        <span class="visible-block text-info text-small">{{ text_obs_modal }}</span>
        <span class="visible-block text-info text-small">{{ text_access_customerInfo }}
          <a href="{{ customer }}" target="_blank" title="Acessar cadastro" class="text-info text-bold text-decoration-none">clique aqui.</a>
        </span>
      </div>

      <div class="row">
        <div class="col-xs-12 no-padding horizontal-padding-medium top-padding-medium">
          <div class="flex js-tabs" id="tab-customer-info"></div>
        </div>
      </div>

      <form class="js-main-form">
        <div class="content-box top-margin-medium" data-tabs-id="tab-customer-info">

          <input type="hidden" value="{{ customer_id }}" id="customer_id" name="customer_id">
          <input type="hidden" value="{{ order_id }}" id="order_id" name="order_id">
          <input type="hidden" value="{{ address_id }}" id="address_id" name="address_id">

          {% if show_general_tab %}
            <div class="row hidden" data-tab="Geral">
              <div class="col-xs-12">
                <div class="row flex middle-xs">
                  {% if error_email %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_email }}
                            <input class="field-entry mask-alpha-no-spaces top-margin-x-small" type="email" name="email" value="{{ email }}" placeholder="{{ text_email_placeholder }}" maxlength="96">
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}

                  {% if error_password %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_password }}
                            <input class="field-entry mask-alpha-no-spaces top-margin-x-small" type="password" name="password" value="{{ password }}" minlength="4" maxlength="20" autocomplete>
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endif %}

          {% if show_account_tab %}
            <div class="row hidden" data-tab="Conta">
              <div class="col-xs-12">
                <div class="row flex middle-xs">
                  {% if error_celular %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_celular }}
                            <input type="tel" class="field-entry mask-celular" id="celular" name="celular" value="{{ celular }}" placeholder="{{ text_celular_placeholder }}" maxlength="32">
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}

                  {% if error_telephone %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_telephone }}
                            <input type="tel" class="field-entry mask-phone" name="telephone" value="{{ telephone }}" placeholder="{{ text_telephone_placeholder }}" maxlength="32">
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}

                  {% if tipo_pessoa == tipo_pessoa_juridica  %}
                    {% if error_cnpj %}
                      <div class="col-xs-6 pessoa_juridica">
                        <div class="content-box">
                          <label class="field field-small">
                            <span class="field-label">
                              {{ entry_cnpj }}
                              <input type="text" class="field-entry mask-cnpj" name="cnpj" id="cnpj" value="{{ cnpj }}" placeholder="{{ text_cnpj_placeholder }}">
                            </span>
                          </label>
                        </div>
                      </div>
                    {% endif %}
                    
                    {% if error_razao_social %}
                      <div class="col-xs-6 pessoa_juridica">
                        <div class="content-box">
                          <label class="field field-small">
                            <span class="field-label">
                              {{ entry_razao }}
                              <input type="text" class="field-entry" name="razao_social" id="razao_social" value="{{ razao_social }}" minlength="3" maxlength="96">
                            </span>
                          </label>
                        </div>
                      </div>
                    {% endif %}
                  {% else %}
                    {% if error_cpf %}
                      <div class="col-xs-6 pessoa_fisica">
                        <div class="content-box">
                          <label class="field field-small">
                            <span class="field-label">
                              {{ entry_cpf }}
                              <input type="text" class="field-entry mask-cpf" id="cpf" name="cpf" value="{{ cpf }}" placeholder="{{ text_cpf_placeholder }}">
                            </span>
                          </label>
                        </div>
                      </div>
                    {% endif %}

                    {% if error_data_nascimento %}
                      <div class="col-xs-6 pessoa_fisica">
                        <div class="content-box">
                          <label class="field field-small">
                            <span class="field-label">
                              {{ entry_date_birth }}
                              <input type="text" class="field-entry mask-date" name="data_nascimento" value="{{ data_nascimento }}" placeholder="{{ text_date_birth_placeholder }}">
                            </span>
                          </label>
                        </div>
                      </div>
                    {% endif %}
                  {% endif %}
                </div>
              </div>
            </div>
          {% endif %}

          {% if show_address_tab %}
            <div class="row hidden" data-tab="Endereço">
              <div class="col-xs-12">
                <div class="row flex middle-xs">
                  {% if error_apelido %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_apelido }}
                            <input class="field-entry" type="text" name="apelido" value="{{ apelido }}" placeholder="{{ text_apelido_placeholder }}" minlength="3" maxlength="35">
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}

                  {% if error_number %}
                    <div class="col-xs-6">
                      <div class="content-box">
                        <label class="field field-small">
                          <span class="field-label">
                            {{ entry_number }}
                            <input class="field-entry mask-number" type="text" name="number" value="{{ number }}" minlength="1" maxlength="6" placeholder="Ex: 100">
                          </span>
                        </label>
                      </div>
                    </div>
                  {% endif %}
                </div>
              </div>
            </div>
          {% endif %}
        </div>

        <div class="form-buttons flex gap-2 middle-xs top-margin-medium">
          <button class="js-close-modal btn-default btn-outline btn-small" title="{{ text_tooltip_cancel_button }}">{{ button_cancel }}</button>
          <button class="js-submit-modal btn-default btn-primary btn-small" title="{{ text_tooltip_save_button }}">{{ button_save }}</button>
        </div>
      </form>
    </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 %}
                  
                  {% if payment_info_detail.nsu and payment_info_detail.payment_code == constant('Type_PaymentForIntegrationUser::Tp_Getnet') %}
                    <span class="text-medium text-dark visible-block top-margin-small">{{ text_payment_nsu ~ payment_info_detail.nsu }}</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-word-wrap">{{ text_shipping_method_reference }}</span>
                    <span class="text-medium text-dark visible-block top-margin-small text-word-wrap">{{ shipping_reference }}</span>
                  {% endif %}

                  {% if shipping_pickup %}
                    <span class="text-small text-gray visible-block top-margin-x-large">{{ text_pickup_address }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_address }}, {{ pickup_number }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_complement }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_neighborhood }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_city }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_zone }}</span>
                    <span class="visible-block text-medium text-dark">{{ pickup_postcode }}</span>
                  {% 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 is_futura %}
      <div class="row hidden" data-tab="Agendamento">
        <div class="container-fluid top-margin-large" id="schedule">
          {# Render content on order_schedule.twig #}
        </div>
      </div>
    {% endif %}

    {% 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>

<style>
	.container-modal {
		position: absolute;
		z-index: 10;
		top: 25%;
		height: fit-content;

		overflow: hidden;
	}

	@media only screen and (min-width: 375px) and (max-width: 767px) {
		.container-modal {
			width: 100%;
			max-height: 80%;
		}
	}

	@media only screen and (min-width: 768px) and (max-width: 1023px) {
		.container-modal {
			max-width: 768px;
			max-height: 80%;
			left: 15%;
			right: 15%;
		}
	}

	@media only screen and (min-width: 1024px) {
		.container-modal {
			max-width: 768px;
			max-height: 80%;
			left: 25%;
			right: 25%;
		}
	}
</style>
