<!-- View Edit PagSeguro -->
{{ 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="http://manual.futurasistemas.com.br/manual-do-sistema/e-commerce/como-configurar-o-modulo-pag-seguro/"
              class="text-info visible-inline-block cursor-pointer text-decoration-none vertical-padding-small right-margin-large"
              target="_blank"
            >
              <span>{{ button_help }}</span>
            </a>
            <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-main-form">
              <span>{{ button_save }}</span>
            </button>
          </div>
        </div>
        {% if error_warning %}
          <div class="warning full-width">{{ error_warning }}</div>
        {% endif %}
      </div>
      <div class="col-xs-12">
        <div class="flex js-tabs" id="tab-info"></div>
      </div>
    </div>
  </div>
</header>

<form action="{{ action }}" method="post" 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 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_general }}</span>
      </div>

      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ title_name }}</span>
            <span class="text-x-small text-gray">{{ title_name_obs }}</span>
            <input class="field-entry" type="text" name="pagseguro_title_name" value="{{ pagseguro_title_name }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label required">{{ ps_email }}</span>
            <a class="text-info cursor-pointer text-decoration-none visible-block text-x-small"
               href="https://pagseguro.uol.com.br/registration/registration.jhtml?ep=10&tipo=cadastro#!vendedor"
               target="_blank">{{ text_email }}</a>
            <input class="field-entry" type="text" name="pagseguro_email" value="{{ pagseguro_email }}"/>
            {% if error_email %}
              <span class="text-error text-x-small">{{ error_email }}</span>
            {% endif %}
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ ps_token }}</span>
            <span class="text-x-small text-gray">{{ ps_token_description }}</span>
            <a class="text-info cursor-pointer text-decoration-none visible-block text-x-small"
               href="https://pagseguro.uol.com.br/integracao/token-de-seguranca.jhtml"
               target="_blank">{{ text_token }}</a>
            <input class="field-entry" type="text" name="pagseguro_token" value="{{ pagseguro_token }}"/>
            {% if error_token %}
              <span class="text-error text-x-small">{{ error_token }}</span>
            {% endif %}
          </label>

          <button type="button" class="btn-default btn-medium btn-primary bottom-margin-large js-validate-credentials" data-url="{{ url_validate_credentials }}">
            <span>{{ text_validate_credentials }}</span>
          </button>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ ps_total }}</span>
            <span class="text-x-small text-gray">{{ ps_total_obs }}</span>
            <input class="field-entry mask-money" type="text" name="pagseguro_total" value="{{ pagseguro_total }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ ps_additional }}</span>
            <span class="text-x-small text-gray">{{ ps_additional_obs }}</span>
            <input class="field-entry mask-money" type="text" name="pagseguro_additional" value="{{ pagseguro_additional }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ ps_discount }}</span>
            <span class="text-x-small text-gray">{{ ps_discount_obs }}</span>
            <input class="field-entry mask-money" type="text" name="pagseguro_discount" value="{{ pagseguro_discount }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ ps_expiration }}</span>
            <span class="text-x-small text-gray">{{ ps_expiration_obs }}</span>
            <input class="field-entry" type="number" name="pagseguro_expiration" value="{{ pagseguro_expiration }}"/>
          </label>

          {# <div class="bottom-margin-large">
            <span class="text-small text-dark text-bold visible-block">{{ url_forwarding }}</span>
            <a class="text-info cursor-pointer text-decoration-none visible-block text-x-small"
               href="https://pagseguro.uol.com.br/integracao/pagamentos-via-api.jhtml"
               target="_blank">{{ text_url_forwarding }}</a>
            <span class="text-small text-gray js-copy-content">{{ pagseguro_forwarding }}</span>
            <span class="js-copy-action text-medium rel">
            <i class="far fa-clone" aria-hidden="true" title="Copiar"></i>
          </span>
          </div>
          <div>
            <span class="text-small text-dark text-bold visible-block">{{ url_notification }}</span>
            <span class="text-x-small text-gray visible-block">{{ text_url_notification }}</span>
            <span class="text-small text-gray js-copy-content">{{ pagseguro_url_notification }}</span>
            <span class="js-copy-action text-medium rel">
            <i class="far fa-clone" aria-hidden="true" title="Copiar"></i>
          </span>
          </div> #}
        </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">{{ enable_module }}</span>
            <span class="text-x-small text-gray">{{ text_module }}</span>
            <select class="field-entry" name="pagseguro_status">
              <option value="1" {{ pagseguro_status ? 'selected' : '' }} />
              {{ text_yes }}
              </option>
              <option value="0" {{ pagseguro_status ? '' : 'selected' }} />
              {{ text_no }}
              </option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_environment }}</span>
            <select class="field-entry" name="pagseguro_environment_status">
              {% for key, status in Type_Environment.getEnumList() %}
                <option value="{{ key }}"
                  {{ ftr_geral.isSelected(key, pagseguro_environment_status) }}>{{ status }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ entry_display }}</span>
            <select class="field-entry" name="pagseguro_display">
              {% for key, display in Type_DisplayModuleOption.getEnumList() %}
                <option value="{{ key }}"
                  {{ ftr_geral.isSelected(key, pagseguro_display, Type_DisplayModuleOption.Tp_Todos) }}>{{ display }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_parcela }}</span>
            <span class="text-x-small text-gray">{{ text_obs_parcela }}</span>
            <select class="field-entry pagseguro_parcela" name="pagseguro_parcela">
              <option value="1" {{ pagseguro_parcela ? 'selected' : '' }} />
              {{ text_yes }}</option>
              <option value="0" {{ pagseguro_parcela ? '' : 'selected' }} />
              {{ text_no }}</option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_parcela_qtd }}</span>
            <input class="field-entry" min="1" type="number" name="pagseguro_parcela_qtd" value="{{ pagseguro_parcela_qtd }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_parcela_vendedor_qtd }}</span>
            <input class="field-entry" min="2" type="number" name="pagseguro_parcela_vendedor_qtd" value="{{ pagseguro_parcela_vendedor_qtd }}"/>
          </label>

          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ charset }}</span>
            <span class="text-x-small text-gray">{{ text_charset }}</span>
            <select class="field-entry" name="pagseguro_charset">
              <option value="1" {{ pagseguro_charset ? 'selected' : '' }} />
              {{ iso }}</option>
              <option value="0" {{ pagseguro_charset ? '' : 'selected' }} />
              {{ utf }}</option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ log }}</span>
            <span class="text-x-small text-gray">{{ text_log }}</span>
            <select class="field-entry" name="pagseguro_log">
              <option value="1" {{ pagseguro_log ? 'selected' : '' }} />
              {{ text_yes }}</option>
              <option value="0" {{ pagseguro_log ? '' : 'selected' }} />
              {{ text_no }}</option>
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ directory }}</span>
            <span class="text-x-small text-gray">{{ text_directory }}</span>
            <input class="field-entry" type="text" name="pagseguro_directory" value="{{ pagseguro_directory }}"/>
          </label>
          <label class="field field-medium">
            <span class="field-label">{{ display_order }}</span>
            <span class="text-x-small text-gray">{{ text_order }}</span>
            <input class="field-entry mask-number" type="text" name="pagseguro_sort_order"
                   value="{{ pagseguro_sort_order }}"/>
          </label>
        </div>
      </div>

    </div>

    <div class="row hidden" data-tab="{{ tab_order_status }}">
      <div class="col-xs-12 bottom-padding-small">
        <span class="text-x-large text-dark">{{ tab_order_status }}</span>
      </div>

      <div class="col-xs-12 col-md-8">
        <div class="content-box background-white shadow-small padding-large">
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_abandoned_order }}</span>
            <select class="field-entry" name="pagseguro_abandoned_order_id">
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_abandoned_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_awaiting_payment }}</span>
            <span class="text-x-small text-gray">{{ text_awaiting_payment_obs }}</span>
            <select class="field-entry" name="pagseguro_awaiting_order_id">
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_awaiting_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_processing }}</span>
            <span class="text-x-small text-gray">{{ text_processing_obs }}</span>
            <select class="field-entry" name="pagseguro_processing_order_id">
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_processing_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_processed }}</span>
            <span class="text-x-small text-gray">{{ text_processed_obs }}</span>
            <select class="field-entry" name="pagseguro_processed_order_id">
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_processed_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_declined }}</span>
            <span class="text-x-small text-gray">{{ text_declined_obs }}</span>
            <select class="field-entry" name="pagseguro_declined_order_id">
              <option value=""></option>
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_declined_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
          <label class="field field-medium bottom-margin-large">
            <span class="field-label">{{ text_cancelado }}</span>
            <span class="text-x-small text-gray">{{ text_cancelado_obs }}</span>
            <select class="field-entry" name="pagseguro_cancelado_order_id">
              {% for order_status in order_statuses %}
                <option
                  value="{{ order_status.order_status_id }}" {{ order_status.order_status_id == pagseguro_cancelado_order_id ? 'selected' : '' }}>
                  {{ order_status.name }}
                </option>
              {% endfor %}
            </select>
          </label>
        </div>
      </div>

    </div>
  </div>

</form>
<script>
	$(document).ready(function(){
		const pagseguro_parcela = $('.pagseguro_parcela');
   
    function handleParcelas() {
      let pagseguro_parcela_qtd = $('input[name="pagseguro_parcela_qtd"]');
      let pagseguro_parcela_vendedor_qtd = $('input[name="pagseguro_parcela_vendedor_qtd"]');
      
      if (pagseguro_parcela.val() === '0') {
        pagseguro_parcela_qtd.attr('disabled', true);
        pagseguro_parcela_vendedor_qtd.attr('disabled', true);
      } else {
        pagseguro_parcela_qtd.removeAttr('disabled');
        pagseguro_parcela_vendedor_qtd.removeAttr('disabled');
      }
    }

    pagseguro_parcela.on('change', handleParcelas);
  });
</script>
{{ footer }}
