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

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

      <the-header
        title="{{ heading_title }}"
        :breadcrumbs='{{ breadcrumbs|json_encode() }}'>

        <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-sm-8">
            <base-card
              class="padding-large bottom-margin-medium"
              v-for="(increase, increaseIndex) in configurations.acrescimo_tipo_pagamento"
              :key="increaseIndex">

              <div class="row small-space-xs">
                <div class="col-xs-12 col-sm-6">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][text_acrescimo]`
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-input
                      label="{{ entry_text_acrescimo }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][text_acrescimo]`
                      v-model="increase.text_acrescimo"
                      :error="errors[0]"
                      :valid="valid"
                      mask="alphanumeric"
                      maxlength="35"
                      :disabled="disableForm">
                    </base-input>
                  </validation-provider>
                </div>
                <div class="col-xs-6 col-sm-4">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][pagamento_acrescimo]`
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ entry_forma_pagamento }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][pagamento_acrescimo]`
                      v-model="increase.pagamento_acrescimo"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                      {% for  key, tipo_pagamento in tipos_pagamento %}
                        <option value="{{ tipo_pagamento.arquivo }}">{{ tipo_pagamento.title }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>
                </div>
                <div class="col-xs-6 col-sm-2">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][prioridade_acrescimo]`
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-input
                      label="{{ entry_prioridade }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][prioridade_acrescimo]`
                      v-model="increase.prioridade_acrescimo"
                      mask="positiveInteger"
                      maxlength="2"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                    </base-input>
                  </validation-provider>
                </div>

                <div class="col-xs-12 col-sm-2">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][val_acrescimo]`
                    rules="required|minmax_number:0,100"
                    v-slot="{ errors, valid }">
                    <base-input
                      label="{{ entry_acrescimo }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][val_acrescimo]`
                      v-model="increase.val_acrescimo"
                      mask="percentage"
                      required
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                    </base-input>
                  </validation-provider>
                </div>
                <div class="col-xs-6 col-sm-4">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][modo_acrescimo]`
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ entry_modo_acrescimo }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][modo_acrescimo]`
                      v-model="increase.modo_acrescimo"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                      <option value="0">{{ text_acres_sobre_total }}</option>
                      <option value="1">{{ text_acres_sobre_acres }}</option>
                    </base-select>
                  </validation-provider>
                </div>
                <div class="col-xs-6 col-md-3">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][valor_minimo]`
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-input
                      label="{{ entry_valor_minimo }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][valor_minimo]`
                      v-model="increase.valor_minimo"
                      mask="brazilCurrency"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                    </base-input>
                  </validation-provider>
                </div>
                <div class="col-xs-6 col-sm-3">
                  <validation-provider
                    tag="div"
                    :name=`acrescimo_tipo_pagamento[${increaseIndex}][status_acrescimo]`
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ entry_status }}"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][status_acrescimo]`
                      v-model="increase.status_acrescimo"
                      :error="errors[0]"
                      :valid="valid"
                      :disabled="disableForm">
                      {% for  key, value in Type_Status %}
                        <option value="{{ key }}">{{ value }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>
                </div>

                <div class="col-xs-12">
                  <group-checkbox
                    v-if="customerGroups"
                    label='{{ text_tabelas_preco }}'>

                    <base-checkbox
                      label="Todos"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][tabela_preco][]`
                      v-model="increase.tabela_preco"
                      value="0"
                      @change="() => onChangeTablePrice(increaseIndex)">
                    </base-checkbox>

                    <base-checkbox
                      v-for="(customerGroup, index) in customerGroups"
                      :key="index"
                      :label="customerGroup.name"
                      :name=`acrescimo_tipo_pagamento[${increaseIndex}][tabela_preco][]`
                      v-model="increase.tabela_preco"
                      :value="customerGroup.customer_group_id"
                      :disabled="increase.tabela_preco[0] == 0"
                      @change="() => onChangeTablePrice(increaseIndex)">
                    </base-checkbox>
                  </group-checkbox>
                </div>
                <div class="col-xs-12">
                  <base-button
                    apperance="outline"
                    @click.native="() => onRemoveIncrease(increaseIndex)">
                    {{ button_remove }}
                  </base-button>
                </div>
              </div>

            </base-card>
          </div>

          <div class="col-xs-12 col-sm-4">
            <base-card class="padding-large">
              <validation-provider
                tag="div"
                name="acrescimoporpagamento_status"
                rules="required"
                v-slot="{ errors, valid }">
                <base-select
                  label="{{ entry_status }}"
                  name="acrescimoporpagamento_status"
                  v-model="configurations.acrescimoporpagamento_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"
                name="acrescimoporpagamento_sort_order"
                class="top-margin-large"
                rules="numeric"
                v-slot="{ errors, valid }">
                <base-input
                  label="{{ entry_ordem }}"
                  name="acrescimoporpagamento_sort_order"
                  v-model="configurations.acrescimoporpagamento_sort_order"
                  mask="positiveInteger"
                  maxlength="2"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

            </base-card>

            <base-button @click.native="onAddIncrease" class="top-margin-large">
              {{ button_add_Acrescimo_Pagamento }}
            </base-button>
          </div>

        </div>
      </div>

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



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