{{ 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_pix_cnpj" class="field-entry" value="{{ cielo_api_pix_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_pix_descricao" value="{{ (cielo_api_pix_descricao is defined) ? cielo_api_pix_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_pix_numero" value="{{ cielo_api_pix_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_pix_chave" value="{{ cielo_api_pix_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_provider }}</span>
            <span class="text-x-small text-gray">{{ (entry_cielo_provider_obs is defined) ? entry_cielo_provider_obs : '' }}</span>
            <select class="field-entry" name="cielo_api_pix_provider" >  
              {% for key, display in Type_CieloApiPixProviders.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_pix_provider) }}>{{ display }}</option>
              {% endfor %}
            </select>
          </label>

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

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_pix_expires }}</span>
            <input class="field-entry" type="text" name="cielo_api_pix_expires" value="{{ cielo_api_pix_expires }}" />
          </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_pix_status" >
              <option value="1" {{ cielo_api_pix_status ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ cielo_api_pix_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_pix_display" >
              {% for key, value in Type_DisplayModuleOption.getEnumList() %}
                <option value="{{ key }}" {{ ftr_geral.isSelected(key, cielo_api_pix_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_pix_ambiente_teste" >
              <option value="1" {{ cielo_api_pix_ambiente_teste ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ cielo_api_pix_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_pix_client_teste" value="{{ cielo_api_pix_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_pix_sort_order" value="{{ cielo_api_pix_sort_order }}" placeholder="{{ entry_sort_order }}" id="input-sort-order"  />
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_geo_zone }}</span>
            <select class="field-entry" name="cielo_api_pix_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_pix_geo_zone_id ? 'selected="selected"' : '' }}>
                  {{ geo_zone.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_cielo_api_pix_log }}</span>
            <select class="field-entry" name="cielo_api_pix_log" id="cielo_api_pix_log" >
              <option value="1" {{ cielo_api_pix_log ? 'selected="selected"' : '' }}>{{ text_enabled }}</option>
              <option value="0" {{ cielo_api_pix_log ? '' : 'selected="selected"' }}>{{ text_disabled }}</option>
            </select>
          </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 class="col-xs-12 col-sm-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_order_status_created_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_created" id="cielo_api_pix_order_status_created" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_created ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_open_payment_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_open" id="cielo_api_pix_order_status_open" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_open ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_approved_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_approved" id="cielo_api_pix_order_status_approved" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_approved ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_rejected_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_rejected" id="cielo_api_pix_order_status_rejected" >
            {% for order_status in order_statuses %}
              <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_rejected ? 'selected="selected"' : '' }}>
                {{ order_status.name }}
              </option>
            {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_order_status_canceled_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_canceled" id="cielo_api_pix_order_status_canceled" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_canceled ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ entry_order_status_error_status }}</span>
            <select class="field-entry" name="cielo_api_pix_order_status_error" id="cielo_api_pix_order_status_error" >
              {% for order_status in order_statuses %}
                <option value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == cielo_api_pix_order_status_error ? 'selected="selected"' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </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();
    }
  });
</script>

{{ footer }}
