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

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

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

        <base-button
          apperance="outline"
          href = "{{ data.cancel }}"
          :disabled="disableForm">
          {{ button_cancel }}
        </base-button>

        <base-button
          type="submit"
          class="left-margin-small"
          :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>
          {% if success %}
            <base-alert apperance="success" @close="alert => alert.classList.add('hidden')">
              {{ success }}
            </base-alert>
          {% endif %}
          {% if error_warning %}
            <base-alert apperance="error">
              {{ error_warning }}
            </base-alert>
          {% endif %}
        </template>
      </the-header>

      <div class="container-fluid">

          <div
            class="row"
            v-show="activedTab == 0">

              <div class="col-xs-12">
                <span class="visible-block text-x-large text-dark">{{ text_config }}</span>
              </div>

              <div class="col-xs-12 col-md-8">
                <base-card class="padding-large">

                  <validation-provider
                    tag="div"
                    class="field field-medium bottom-margin-large"
                    name="pagamentodinamico_status_iniciado"
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ text_iniciado }}"
                      name="pagamentodinamico_status_iniciado"
                      v-model="configurations.pagamentodinamico_status_iniciado"
                      :error="errors[0]"
                      :valid="valid"
                    >
                      {% for order_status in order_statuses %}
                        <option value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>


                  <validation-provider
                    tag="div"
                    class="field field-medium bottom-margin-large"
                    name="pagamentodinamico_status_pago"
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ text_pago }}"
                      name="pagamentodinamico_status_pago"
                      v-model="configurations.pagamentodinamico_status_pago"
                      :error="errors[0]"
                      :valid="valid"
                    >
                      {% for order_status in order_statuses %}
                        <option value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>


                  <validation-provider
                    tag="div"
                    class="field field-medium bottom-margin-large"
                    name="pagamentodinamico_status_baixa"
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      label="{{ text_baixa }}"
                      name="pagamentodinamico_status_baixa"
                      v-model="configurations.pagamentodinamico_status_baixa"
                      :error="errors[0]"
                      :valid="valid"
                    >
                      {% for order_status in order_statuses %}
                        <option value="{{ order_status.order_status_id }}">{{ order_status.name }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>

                </base-card>
              </div>

              <div class="col-xs-12 col-md-4">
                <base-card class="padding-large">
                  <validation-provider
                    tag="div"
                    class="field field-medium bottom-margin-large"
                    name="pagamentodinamico_status"
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      name="pagamentodinamico_status"
                      label=" {{ text_status }} "
                      v-model="configurations.pagamentodinamico_status"
                      :error="errors[0]"
                      :valid="valid"
                    >
                      {% for key, value in Type_Status %}
                        <option value="{{ key }}">{{ value }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="field field-medium bottom-margin-large"
                    name="pagamentodinamico_display"
                    rules="required"
                    v-slot="{ errors, valid }">
                    <base-select
                      name="pagamentodinamico_display"
                      label=" {{ entry_display }} "
                      v-model="configurations.pagamentodinamico_display"
                      :error="errors[0]"
                      :valid="valid"
                    >
                      {% for key, value in Type_DisplayModuleOption %}
                        <option value="{{ key }}">{{ value }}</option>
                      {% endfor %}
                    </base-select>
                  </validation-provider>

                  <validation-provider
                    tag="div"
                    class="field field-medium"
                    name="pagamentodinamico_sort_order"
                    rules=""
                    v-slot="{ errors, valid }">
                    <base-input
                      label="{{ text_ordem }}"
                      name="pagamentodinamico_sort_order"
                      mask="positiveInteger"
                      v-model="configurations.pagamentodinamico_sort_order"
                      :error="errors[0]"
                      :valid="valid"
                    >
                    </base-input>
                  </validation-provider>
                </base-card>
              </div>

          </div>


          <div class="row" v-show="activedTab == 1">

            <div class="col-xs-12">

              <div class="flex between-xs middle-xs">
                <span class="text-x-large text-dark">{{ text_payments }}</span>
                <base-button
                  class="left-margin-small"
                  :disabled="disableForm"
                  @click.native="() => onAddPayment()">
                  Adicionar Pagamento
                </base-button>
              </div>

            </div>

            <template v-if="modules">
              <div v-for="(module, row) in modules" :key="row" class="full-width">

                <base-card class="padding-large bottom-margin-large">

                  <div @click.stop="() => onExpandModule(row)" class="flex between-xs middle-xs cursor-pointer">

                    <span
                      v-text="module.pagamentodinamico_opcao ? module.pagamentodinamico_opcao : 'Novo pagamento'"
                      class="text-medium text-dark"></span>

                    <base-button
                    apperance="outline"
                    square
                    @click.native.stop="() => onRemoveModule(row)">
                      <template #icon>
                        <i class="fas fa-trash"></i>
                      </template>
                    </base-button>

                  </div>
                  <div :class="[{'hidden': !module.expand}, 'top-padding-large']">

                    <validation-provider
                      tag="div"
                      class="field field-medium bottom-margin-large"
                      rules="required"
                      :name=`pagamentodinamico_modules[${row}][pagamentodinamico_opcao]`
                      v-slot="{ errors, valid }">
                      <base-input
                        type="text"
                        label="{{ text_dinamicopcao }}"
                        :name=`pagamentodinamico_modules[${row}][pagamentodinamico_opcao]`
                        v-model="module.pagamentodinamico_opcao"
                        :error="errors[0]"
                        :valid="valid"
                      >
                      </base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="field field-medium bottom-margin-large"
                      :name=`pagamentodinamico_modules[${row}][pagamentodinamico_total]`
                      v-slot="{ errors, valid }">
                      <base-input
                        type="text"
                        label="{{ entry_total }}"
                        description="{{ entry_total_obs }}"
                        :name=`pagamentodinamico_modules[${row}][pagamentodinamico_total]`
                        v-model="module.pagamentodinamico_total"
                        mask="brazilCurrency"
                        :error="errors[0]"
                        :valid="valid"
                      >
                      </base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="field field-medium bottom-margin-large"
                      :name=`pagamentodinamico_modules[${row}][pagamentodinamico_message]`
                      v-slot="{ errors, valid }">
                      <base-textarea
                        type="text"
                        label="{{ text_message }}"
                        :name=`pagamentodinamico_modules[${row}][pagamentodinamico_message]`
                        v-model="module.pagamentodinamico_message"
                        mask="brazilCurrency"
                        :error="errors[0]"
                        :valid="valid"
                      >
                      </base-textarea>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="field field-medium bottom-margin-large"
                      :name=`pagamentodinamico_modules[${row}][pagamentodinamico_information]`
                      v-slot="{ errors, valid }">
                      <base-textarea
                        type="text"
                        label="{{ text_information }}"
                        :name=`pagamentodinamico_modules[${row}][pagamentodinamico_information]`
                        v-model="module.pagamentodinamico_information"
                        :error="errors[0]"
                        :valid="valid"
                      >
                      </base-textarea>
                    </validation-provider>

                    <base-input-file
                      :name=`pagamentodinamico_modules[${row}][pagamentodinamico_image_success]`
                      label="{{ text_image }}"
                      description="{{ text_image_obs }}"
                      :thumbnail="module.pagamentodinamico_image_src"
                      @change="({ value }) => {module.pagamentodinamico_image_src = value ? value : ''}"
                    >
                    </base-input-file>

                  </div>

                </base-card>

              </div>
            </template>

          </div>

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

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

{{ footer }}