{{ header }}
<div id="root">
  <div class="page-loader" v-show="isLoading"></div>

  <validation-observer
    tag="div"
    ref="validationObserver"
    v-slot="{ handleSubmit }">
    <form
      ref="form"
      @submit.prevent="onSubmit()"
      action="{{ data.action }}"
      method="post">

      <the-header
        title="{{ heading_title }}"
        :breadcrumbs='{{ breadcrumbs|json_encode() }}'
        :tabs="tabs"
        @update-tabs="onChangeContentTab">
        <base-button
          href="{{ data.back }}"
          apperance="outline">
          {{ button_cancel }}
        </base-button>
        <base-button
          type="submit"
          :disabled="disableForm"
          :loading="btnSubmitLoading">
          {{ button_save }}
        </base-button>
        <template #notification>
          <base-alert
            v-show="alert.type"
            :apperance="alert.type"
            @close="alert = {}">
            <span v-text="alert.message"></span>
          </base-alert>
        </template>
      </the-header>

      <div class="container-fluid">
        <div class="row">

          <div class="col-xs-12 col-md-8" v-show="activeContentTabIndex === 0">
            <base-card class="content-box padding-large">
              <input type="hidden" name="correios_api_status" v-model="configurations.correios_api_status = 1">

              <validation-provider
                tag="div"
                rules="required"
                name="correios_postcode"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_postcode"
                  label="{{ entry_postcode }}"
                  type="text"
                  v-model="configurations.correios_postcode"
                  mask="cep"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  required>
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules="required"
                name="correios_contrato_user"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_contrato_user"
                  label="{{ entry_contrato_user }}"
                  description="{{ entry_contrato_user_descrption }}"
                  type="text"
                  v-model="configurations.correios_contrato_user"
                  :error="errors[0]"
                  :valid="valid"
                  :required="true"
                  :disabled="disableForm"
                  required>
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                name="correios_contrato_senha"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_contrato_senha"
                  label="{{ entry_contrato_token }}"
                  mask="password"
                  :secret="true"
                  description="{{ entry_contrato_token_description }}"
                  type="password"
                  v-model="configurations.correios_contrato_senha"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  :required="true"
                  @blur="adminCodeTest">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                name="correios_postCartao"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_postCartao"
                  label="{{text_postCartao}}"
                  v-model="configurations.correios_postCartao"
                  mask="number"
                  :error="errors[0]"
                  :valid="valid"
                  :required="true">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_contrato_codigo"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_contrato_codigo"
                  label="{{ entry_contrato }}"
                  description="{{ entry_contrato_code_description }}"
                  type="text"
                  v-model="configurations.correios_contrato_codigo"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm"
                  @blur="adminCodeTest">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                rules="required"
                class="top-margin-large"
                name="correios_tracking_status"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_tracking_status"
                  label="{{ entry_status_tracking }}"
                  description="{{ entry_tracking_description }}"
                  v-model="configurations.correios_tracking_status"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_Status %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_mao_propria"
                v-slot="{ errors, valid }">
                <base-select
                  label="{{ entry_mao_propria }}"
                  description="{{ entry_mao_propria_description }}"
                  name="correios_mao_propria"
                  v-model="configurations.correios_mao_propria"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_DsDn %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_aviso_recebimento"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_aviso_recebimento"
                  label="{{ entry_aviso_recebimento }}"
                  description="{{ entry_aviso_recebimento_description }}"
                  v-model="configurations.correios_aviso_recebimento"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_DsDn %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <base-select
                class="top-margin-medium"
                label="{{ entry_aviso_recebimento_type }}"
                v-if="configurations.correios_aviso_recebimento === 'S'"
                name="correios_aviso_recebimento_eletr"
                v-model="configurations.correios_aviso_recebimento_eletr"
                :disabled="disableForm"
              >
                {% for key, value in Type_DsDn %}
                  <option value="{{ key }}">{{ key == 'N'? 'Normal': 'Eletrônico' }}</option>
                {% endfor %}
              </base-select>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_declarar_valor"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_declarar_valor"
                  label="{{ entry_declarar_valor }}"
                  description="{{ entry_declarar_valor_description }}"
                  v-model="configurations.correios_declarar_valor"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_DsDn %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                rules="minmax_number:0,10000"
                class="vertical-margin-large"
                name="correios_minimo_declarar"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_minimo_declarar"
                  label="{{entry_minimo_declarar}}"
                  description="{{entry_minimo_declarar_description}}"
                  type="text"
                  v-model="configurations.correios_minimo_declarar"
                  mask="brazilCurrency"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_adicional"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_adicional"
                  label="{{ entry_adicional }}"
                  description="{{ entry_adicional_description }}"
                  type="text"
                  v-model="configurations.correios_adicional"
                  mask="percentage"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_medida_para_val_adicional"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_medida_para_val_adicional"
                  label="{{ entry_medida_para_val_adicional }}"
                  description="{{entry_medida_para_val_adicional_description}}"
                  type="text"
                  v-model="configurations.correios_medida_para_val_adicional"
                  mask="centimeter"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_val_adicional_medida"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_val_adicional_medida"
                  label="{{ entry_val_adicional_medida }}"
                  description="{{entry_val_adicional_medida_description}}"
                  type="text"
                  v-model="configurations.correios_val_adicional_medida"
                  mask="brazilCurrency"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_prazo_adicional"
                v-slot="{ errors, valid }">
                <base-input
                  name="correios_prazo_adicional"
                  label="{{ entry_prazo_adicional }}"
                  description="{{entry_prazo_adicional_description}}"
                  type="text"
                  v-model="configurations.correios_prazo_adicional"
                  mask="positiveInteger"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_tipo_calculo"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_tipo_calculo"
                  label="{{entry_tipo_calculo}}"
                  description="{{entry_tipo_calculo_description}}"
                  v-model="configurations.correios_tipo_calculo"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_CorreiosTipoCalculo %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_geo_zone_id"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_geo_zone_id"
                  label="{{entry_geo_zone}}"
                  v-model="configurations.correios_geo_zone_id"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  <option value="0">{{ text_all_zones }}</option>
                  {% for geo_zone in geo_zones %}
                    <option value="{{geo_zone.geo_zone_id}}">{{ geo_zone.name }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_status"
                v-slot="{ errors, valid }">
                <base-select
                  name="correios_status"
                  label="{{entry_status}}"
                  v-model="configurations.correios_status"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                  {% for key, value in Type_Status %}
                    <option value="{{ key }}">{{ value }}</option>
                  {% endfor %}
                </base-select>
              </validation-provider>

              <validation-provider
                tag="div"
                class="top-margin-large"
                rules=""
                name="correios_sort_order"
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  name="correios_sort_order"
                  label="{{entry_sort_order}}"
                  v-model="configurations.correios_sort_order"
                  mask="positiveInteger"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

            </base-card>
          </div>

          <div v-if="configurations.correios_invalid_credential == 1 && activeContentTabIndex === 0" class="col-xs-4 col-md-4">
            <base-card class="content-box padding-large">
              <div class="warning full-width top-margin-small">
                {{ warning_correios_credential }}
              </div>
            </base-card>
          </div>
          
          <div class="col-xs-12" v-show="activeContentTabIndex === 1">

            <base-card
              class="padding-large bottom-margin-medium"
              v-for='(service, serviceIndex) in configurations.correios_servicos'
              :key="serviceIndex">
              <div class="row small-space-xs bottom-xs">

                <validation-provider
                  tag="div"
                  class="col-xs-12 col-md"
                  rules="required|withoutDot"
                  :name=`correios_servicos[${serviceIndex}][codigo]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    :name=`correios_servicos[${serviceIndex}][codigo]`
                    label="{{ entry_codigo_servico }}"
                    v-model="service.codigo"
                    required
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-12 col-md-4"
                  rules="required"
                  :name=`correios_servicos[${serviceIndex}][nome]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    :name=`correios_servicos[${serviceIndex}][nome]`
                    label="{{ entry_descricao_servico }}"
                    v-model="service.nome"
                    required
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-4 col-md"
                  rules="required"
                  :name=`correios_servicos[${serviceIndex}][pesomax]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    :name=`correios_servicos[${serviceIndex}][pesomax]`
                    label="{{ entry_pesomax_servico }}"
                    v-model="service.pesomax"
                    mask="kilogram"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-4 col-md"
                  rules="required"
                  :name=`correios_servicos[${serviceIndex}][contrato]`
                  v-slot="{ errors, valid }">
                  <base-select
                    :name=`correios_servicos[${serviceIndex}][contrato]`
                    label="{{ entry_comcontrato_servico }}"
                    v-model="service.contrato"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    {% for key, value in Type_DsimDnao %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-4 col-md"
                  rules="required"
                  :name=`correios_servicos[${serviceIndex}][status]`
                  v-slot="{ errors, valid }">
                  <base-select
                    :name=`correios_servicos[${serviceIndex}][status]`
                    label="{{ entry_status_servico }}"
                    v-model="service.status"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    {% for key, value in Type_Status %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>

                <div class="col-xs-12 col-md-width-auto">
                  <base-button
                    apperance="outline"
                    square
                    @click.native="() => onRemoveService(serviceIndex)">
                    <template #icon>
                      <i class="fas fa-trash"></i>
                    </template>
                  </base-button>
                </div>

              </div>
            </base-card>

            <base-button @click.native="onAddService" class="bottom-margin-large">
              {{ button_add_servico }}
            </base-button>
          </div>

        </div>
      </div>
    </form>
  </validation-observer>
</div>

<script>
  const DATA = {{ data|json_encode() }};
</script>

{{ footer }}