{{ 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="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">{{ 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">
            <base-card
              class="padding-large bottom-margin-medium"
              v-for='(module, moduleIndex) in configurations.free_module'
              :key="moduleIndex">

              {# titulo #}
              <validation-provider
                tag="div"
                rules="required|withoutDot"
                :name=`free_module[${moduleIndex}][free_titlefutura]`
                v-slot="{ errors, valid }">
                <base-input
                  type="text"
                  label="{{ entry_titlefutura }}"
                  :name=`free_module[${moduleIndex}][free_titlefutura]`
                  v-model="module.free_titlefutura"
                  :error="errors[0]"
                  :valid="valid"
                  :disabled="disableForm">
                </base-input>
              </validation-provider>

              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  :name=`free_module[${moduleIndex}][free_habilitar_pessoa_tipo]`
                  v-slot="{ errors, valid }">
                  <base-select
                    label="{{ entry_habilitar_tipo }}"
                    description="{{ entry_habilitar_tipo_description }}"
                    :name=`free_module[${moduleIndex}][free_habilitar_pessoa_tipo]`
                    v-model="module.free_habilitar_pessoa_tipo"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    {% for key, value in Type_CadastroPessoa %}
                      <option value="{{ key }}">{{ value }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>

                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  :name=`free_module[${moduleIndex}][free_total]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    label="{{ entry_total }}"
                    description="{{ entry_total_description }}"
                    :name=`free_module[${moduleIndex}][free_total]`
                    v-model="module.free_total"
                    mask="brazilCurrency"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>
              </div>

              {# região geografica #}
              <div class="row small-space-xs top-margin-large">
                <validation-provider
                  tag="div"
                  class="col-xs-6"
                  rules="required"
                  :name=`free_module[${moduleIndex}][free_geo_zone_id]`
                  v-slot="{ errors, valid }">
                  <base-select
                    label="{{ entry_geo_zone }}"
                    :name=`free_module[${moduleIndex}][free_geo_zone_id]`
                    v-model="module.free_geo_zone_id"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    <option value="0">{{ text_all_zones }}</option>
                    {% for key, 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="col-xs-6"
                  rules="required"
                  :name=`free_module[${moduleIndex}][free_status]`
                  v-slot="{ errors, valid }">
                  <base-select
                    label="{{ entry_status }}"
                    :name=`free_module[${moduleIndex}][free_status]`
                    v-model="module.free_status"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                    {% for key, status in Type_Status %}
                      <option value="{{ key }}">{{ status }}</option>
                    {% endfor %}
                  </base-select>
                </validation-provider>
              </div>

              <base-button
                class="top-margin-large"
                apperance="outline"
                @click.native="() => onRemoveModule(moduleIndex)">
                {{ button_remove }}
              </base-button>
            </base-card>
          </div>
          <div class="col-xs-12 col-md-4 first-xs last-md">

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

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

            <base-button
              full
              class="top-margin-large"
              @click.native="onAddModule">
              {{ button_add_module }}
            </base-button>
          </div>
        </div>
      </div>
    </form>
  </validation-observer>
</div>

{{ footer }}

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