{{ header }}
<header class="background-white bottom-margin-large">
  <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">
          <div>
            <span class="text-x-large text-dark">{{ heading_title }}</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 class="flex flex-row middle-xs">
            <a href="{{ cancel }}" class="btn-default btn-medium btn-outline right-margin-small">
              <span>{{ button_cancel }}</span>
            </a>
            <button class="btn-default btn-medium btn-primary js-submit-payment-form" data-url="{{ url_save }}" data-redirect="{{url_redirect_success}}">
              <span>{{ button_save }}</span>
            </button>
          </div>
        </div>
        <div class="text-warning background-warning border-warning padding-small rounded-small bottom-margin-small full-width js-warning-antifraude">
           {{ text_warning_antifraude }}
        </div>
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>

<div class="container-fluid">
  <form class="js-main-form">
  <div class="container-fluid" data-tabs-id="tab-info">

    <div class="row hidden" data-tab="{{ tab_general }}">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="flex between-xs middle-xs">
            <span class="text-x-large text-dark">{{ tab_general }}</span>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="background-white padding-large bottom-margin-medium shadow-small">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_cnpj }}</span>
            <input type="field-entry" name="cielo_api_credito_cnpj" class="field-entry" value="{{ cielo_api_credito_cnpj }}" readonly/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_description }}</span>
            <input class="field-entry" type="text" name="cielo_api_descricao" value="{{ (cielo_api_descricao is defined) ? cielo_api_descricao : '' }}" />
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_numero }}</span>
            <input class="field-entry" type="text" name="cielo_api_numero" value="{{ cielo_api_numero }}" />
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_chave }}</span>
            <input class="field-entry" type="text" name="cielo_api_chave" value="{{ cielo_api_chave }}" />
          </label>

          <div class="flex flex-row middle-xs bottom-margin-large">
            <button type="button" class="btn-default btn-medium btn-primary js-validate-merchant" data-url="{{ url_validate_merchant }}">
              <span>{{ button_validate_merchant }}</span>
            </button>
          </div>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_tipo_finalizacao }}</span>
            <span class="text-x-small text-gray">{{ entry_cielo_api_tipo_finalizacao_obs }}</span>
            <select class="field-entry" name="cielo_api_tipo_finalizacao">
              {% for key, display in Type_CieloApiTipoFinalizacao.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_tipo_finalizacao) }}>{{ display }}</option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_total }}</span>
            <input class="field-entry mask-money" type="text" name="cielo_api_total" value="{{ cielo_api_total }}" />
          </label>
        </div>
      </div>
      <div class="col-xs-12 col-md-4">
        <div class="background-white padding-large bottom-margin-medium shadow-small">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_status }}</span>
            <select class="field-entry" name="cielo_api_credito_status" >
              <option value="1" {{ cielo_api_credito_status ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ cielo_api_credito_status ? '' : 'selected="selected"' }}>{{ text_disabled }}</option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_display }}</span>
            <select class="field-entry" name="cielo_api_display" >
              {% for key, value in Type_DisplayModuleOption.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_display, Type_DisplayModuleOption.Tp_Todos) }}>{{ value }}</option>
              {% endfor %}
            </select>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_ambiente }}</span>
            <span class="text-x-small text-gray">{{ text_ambiente_obs }}</span>
            <select class="field-entry" name="cielo_api_ambiente_teste" >
              <option value="1" {{ cielo_api_ambiente_teste ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ cielo_api_ambiente_teste ? '' : 'selected="selected"' }}>{{ text_disabled }}</option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_client }}</span>
            <span class="text-x-small text-gray">{{ text_client_obs }}</span>
            <input class="field-entry" type="text" name="cielo_api_client_teste" value="{{ cielo_api_client_teste }}" placeholder="ID do cliente de teste" id="input"  />
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_sort_order }}</span>
            <input class="field-entry mask-number" type="text" name="cielo_api_sort_order" value="{{ cielo_api_sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order"  />
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ entry_geo_zone }}</span>
            <select class="field-entry" name="cielo_api_geo_zone_id" id="input-geo-zone" >
              <option value="0">{{ text_all_zones }}</option>
              {% for geo_zone in geo_zones %}
                <option value="{{ geo_zone.geo_zone_id }}" {{ geo_zone.geo_zone_id == cielo_api_geo_zone_id ? 'selected="selected"' : '' }}>
                  {{ geo_zone.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>

    <div class="row hidden" data-tab="{{ tab_parcelamento }}">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="flex between-xs middle-xs">
            <span class="text-x-large text-dark">{{ tab_parcelamento }}</span>
          </div>
        </div>
      </div>
      <div class="col-xs-12 col-md-8">
        <div class="background-white padding-large bottom-margin-medium shadow-small">

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_parcela_qtdmax }}</span>
            <input class="field-entry mask-number js-advanced-installments-number" type="text" name="cielo_api_parcela_qtdmax" value="{{ cielo_api_parcela_qtdmax }}" />
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_parcela_minimo }}</span>
            <input class="field-entry mask-money" type="text" name="cielo_api_parcela_minimo" value="{{ cielo_api_parcela_minimo }}" />
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_config_parcelamento }}</span>
            <span class="text-x-small text-gray">{{ entry_cielo_api_config_parcelamento_obs }}</span>
            <select class="field-entry js-advanced-installments-config" name="cielo_api_config_parcelamento" data-url="{{ url_parcelamento_config }}" data-modulo="cielo_api" >
              {% for key, display in Type_ConfigParcelamento.getEnumList(false, exclude_type_config_parcelamento) %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_config_parcelamento) }}>{{ display }}</option>
              {% endfor %}
            </select>
          </label>

          <div class="parcelamento-avancado bottom-margin-large" ></div>

          <div class="parcelamento-padrao">
            <div class="field-group-join">
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_cielo_parcela_semjuros }}</span>
                <span class="text-x-small text-gray">{{ text_parcela_juros_obs }}</span>
                <input class="field-entry mask-number" type="text" name="cielo_api_parcela_semjuros" value="{{ cielo_api_parcela_semjuros }}" />
              </label>
              <label class="field field-medium bottom-margin-large field_installment_fee">
                <span class="field-label">{{ entry_cielo_parcela_juros }}</span>
                <span class="text-x-small text-gray">{{ text_juros_obs }}</span>
                <input class="field-entry mask-percent" type="text" name="cielo_api_parcela_juros" value="{{ cielo_api_parcela_juros }}" />
              </label>
            </div>
            <div class="field-group-join">
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_cielo_parcela_comdesconto }}</span>
                <input class="field-entry mask-number" type="text" name="cielo_api_parcela_comdesconto" value="{{ cielo_api_parcela_comdesconto }}" />
              </label>
              <label class="field field-medium bottom-margin-large">
                <span class="field-label">{{ entry_cielo_parcela_desconto }}</span>
                <input class="field-entry mask-percent" type="text" name="cielo_api_parcela_desconto" value="{{ cielo_api_parcela_desconto }}" />
              </label>
            </div>

          </div>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_bandeiraspagamento }}</span>
            <div class="flex-item-auto flex nowrap-xs middle-xs">

              {% for credit_card in credit_cards %}
                <label class="checkbox checkbox-medium">

                  <input type="checkbox" class="checkbox-entry js-check-options"
                          name="cielo_api_credit_card[{{ credit_card.value }}][descricao]"
                          value="{{ credit_card.description }}" {% if cielo_api_credit_card[credit_card.value].descricao %} checked {% endif %}>
                  <span class="checkbox-text">{{ credit_card.description }}</span>
                </label>
              {% endfor %}

            </div>
          </label>

        </div>
      </div>
    </div>

    <div class="row hidden" data-tab="{{ tab_settings_order_status }}">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="flex between-xs middle-xs">
            <span class="text-x-large text-dark">{{ tab_settings_order_status }}</span>
          </div>
        </div>
      </div>
      <div>
        <div class="background-white padding-large bottom-margin-medium shadow-small">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_posterior }}</span>
            <span class="text-x-small text-gray">{{ entry_order_status_posterior_obs }}</span>
            <select class="field-entry" name="cielo_api_order_status_posterior_id" id="cielo_api_order_status_posterior_id" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_status_posterior_id ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_posterior_link }}</span>
            <span class="text-x-small text-gray">{{ entry_order_status_posterior_link_obs }}</span>
            <select class="field-entry" name="cielo_api_order_status_posteriorlink_id" id="cielo_api_order_status_posteriorlink_id" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_status_posteriorlink_id ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status }}</span>
            <span class="text-x-small text-gray">{{ entry_order_status_obs }}</span>
            <select class="field-entry" name="cielo_api_order_status_id" id="cielo_api_order_status_id" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_status_id ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_pago }}</span>
            <span class="text-x-small text-gray">{{ entry_order_status_pago_obs }}</span>
            <select class="field-entry" name="cielo_api_order_pg_id" id="cielo_api_order_pg_id" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_pg_id ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_pendente }}</span>
            <select class="field-entry" name="cielo_api_order_pe_id" id="cielo_api_order_pe_id" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_pe_id ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_negado }}</span>
            <select class="field-entry" name="cielo_api_order_ne_id" id="cielo_api_order_ne_id" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_ne_id ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_autorizado }}</span>
            <select class="field-entry" name="cielo_api_order_au_id" id="cielo_api_order_au_id" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_au_id ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ entry_order_status_cancelado }}</span>
            <select class="field-entry" name="cielo_api_order_status_cancelado_id" id="cielo_api_order_status_cancelado_id" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_order_status_cancelado_id ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>
    </div>

    <div class="row hidden" data-tab="{{ tab_settings_anti_fraude }}">
      <div class="col-xs-12">
        <div class="content-box">
          <div class="flex middle-xs">
            <span class="text-x-large text-dark">{{ tab_settings_anti_fraude }}</span>
            <a href="http://manual.futurasistemas.com.br/sem-categoria/configuracao-metodo-antifraude-no-painel-administrativo-faq95/"
               class="text-medium text-primary padding-x-small" target="_blank" data-tooltip="Ajuda">
              <i class="fas fa-question-circle"></i>
            </a>
          </div>
        </div>
      </div>
      <div>
        <div class="background-white padding-large bottom-margin-medium shadow-small">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_anti_fraude }}</span>
            <span class="text-x-small text-gray">{{ entry_cielo_api_anti_fraude_obs }}</span>
            <select class="field-entry cielo_api_anti_fraude" name="cielo_api_anti_fraude" >
              {% for key, value in Type_AntiFraudeCheckout.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_anti_fraude, Type_AntiFraudeCheckout.Tp_SemVerificacao) }}>{{ value }}</option>
              {% endfor %}
            </select>
          </label>
{#          <div class="antifraude_cielo_config">#}
{#            <label class="field field-medium bottom-margin-large">#}
{#              <span class="field-label">{{ entry_cielo_api_anti_fraude_analise }}</span>#}
{#              <span class="text-x-small text-gray">{{ entry_cielo_api_anti_fraude_analise_obs }}</span>#}
{#              <select class="field-entry" name="cielo_api_anti_fraude_sequence" >#}
{#                {% for key, value in Type_CieloAntiFraudeAnaliseFluxo.getEnumList() %}#}
{#                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_anti_fraude_sequence, Type_CieloAntiFraudeAnaliseFluxo.Tp_AuthorizeFirst) }}>{{ value }}</option>#}
{#                {% endfor %}#}
{#              </select>#}
{#            </label>#}
{#            <label class="field field-medium bottom-margin-large">#}
{#              <span class="field-label">{{ entry_cielo_api_anti_fraude_criterio }}</span>#}
{#              <span class="text-x-small text-gray">{{ entry_cielo_api_anti_fraude_criterio_obs }}</span>#}
{#              <select class="field-entry" name="cielo_api_anti_fraude_sequence_criteria" >#}
{#                {% for key, value in Type_CieloAntiFraudeAnaliseCriterio.getEnumList() %}#}
{#                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_anti_fraude_sequence_criteria, Type_CieloAntiFraudeAnaliseCriterio.Tp_OnSuccess) }}>{{ value }}</option>#}
{#                {% endfor %}#}
{#              </select>#}
{#            </label>#}
{#            <label class="field field-medium bottom-margin-large">#}
{#              <span class="field-label">{{ entry_cielo_api_anti_fraude_captura }}</span>#}
{#              <span class="text-x-small text-gray">{{ entry_cielo_api_anti_fraude_captura_obs }}</span>#}
{#              <select class="field-entry" name="cielo_api_anti_fraude_capturelowrisk" >#}
{#                {% for key, value in Type_Status.getEnumList() %}#}
{#                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_anti_fraude_capturelowrisk, Type_Status.Tp_Habilitado) }}>{{ value }}</option>#}
{#                {% endfor %}#}
{#              </select>#}
{#            </label>#}
{#            <label class="field field-medium bottom-margin-large">#}
{#              <span class="field-label">{{ entry_cielo_api_anti_fraude_cancela }}</span>#}
{#              <span class="text-x-small text-gray">{{ entry_cielo_api_anti_fraude_cancela_obs }}</span>#}
{#              <select class="field-entry" name="cielo_api_anti_fraude_voidhightrisk" >#}
{#                {% for key, value in Type_Status.getEnumList() %}#}
{#                  <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_anti_fraude_voidhightrisk, Type_Status.Tp_Habilitado) }}>{{ value }}</option>#}
{#                {% endfor %}#}
{#              </select>#}
{#            </label>#}
{#          </div>#}

        </div>

      </div>
    </div>
  </div>
  </form>
</div>
<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    const ERROR = document.querySelector('.js-error');
    if (ERROR) {
      const TAB = ERROR.closest('[data-tab]').dataset.tab;
      document.querySelector(`[data-tab-control=${TAB}]`).click();
    }
  });
	$(document).ready(function(){
		function handleVisible(){

      if ($(".cielo_api_anti_fraude").val() == {{ Type_AntiFraudeCheckout.Tp_SemVerificacao }}){
        $(".js-warning-antifraude").show();
      } else {
        $(".js-warning-antifraude").hide();
      }
    }

    handleVisible();

		$(".cielo_api_anti_fraude").change(function(){
      handleVisible();
		});
  });
</script>

{{ footer }}
