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

  <validation-observer
  tag="div"
  ref="validationObserver"
  v-slot="{ handleSubmit }"
  @submit.prevent="onValidationObserverSubmit()">
    <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">
        <base-button
          v-if="configurations.length"
          class="bottom-margin-large"
          @click.native="onAddConfiguration">
          Adicionar
        </base-button>

        <div class="field field-medium"> 
          <base-manual title="{{text_info}}">
            <div>{{text_manual}}</div>
          </base-manual>
        </div>

        <template v-if="configurations.length">
          <base-card
            class="bottom-margin-medium"
            v-for="(configuration, configurationIndex) in configurations"
            :key="configurationIndex">

            <div class="row no-space-xs bottom-border-gray horizontal-padding-large">
              <div class="col-xs">
                <base-tabs
                  :options="configuration.tabs"
                  @click-tab="(tabOptions) => onChangeTab(tabOptions, configurationIndex)">
                </base-tabs>
              </div>
              <div class="col-xs-width-auto">
                <base-button
                  apperance="white"
                  square
                  @click.native.stop="() => onRemoveConfiguration(configurationIndex)">
                  <i class="fas fa-trash"></i>
                </base-button>
              </div>
            </div>

            <div v-show="configuration.tabs[0].active" class="padding-large">

              <div class="row small-space-xs">
                <validation-provider
                  tag="div"
                  class="col-xs-12 col-md"
                  rules="required"
                  :name=`featured_module[${configurationIndex}][featured_title]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    :name=`featured_module[${configurationIndex}][featured_title]`
                    label="{{ text_title }}"
                    placeholder="Ex.: Confira nossos destaques!"
                    v-model="configuration.featured_title"
                    mask="alphanumeric"
                    maxlength="70"
                    :required="true"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>
                <validation-provider
                  tag="div"
                  class="col-xs-12 col-md"
                  :name=`featured_module[${configurationIndex}][featured_subtitle]`
                  v-slot="{ errors, valid }">
                  <base-input
                    type="text"
                    :name=`featured_module[${configurationIndex}][featured_subtitle]`
                    label="{{ text_subtitle }}"
                    placeholder="Ex.: Produtos"
                    v-model="configuration.featured_subtitle"
                    :error="errors[0]"
                    :valid="valid"
                    :disabled="disableForm">
                  </base-input>
                </validation-provider>
              </div>


              <div class="row small-space-xs middle-xs top-padding-large bottom-padding-medium">
                <div class="col-xs">
                  <span class="text-x-large text-dark">Módulos</span>
                </div>
                <div class="col-xs-width-auto" v-if="configuration.featured_module.length">
                  <base-button @click.native="() => onAddModule(configurationIndex)">Adicionar</base-button>
                </div>
              </div>

              <div v-if="configuration.featured_module.length">
                <div
                  v-for="(module, moduleIndex) in configuration.featured_module"
                  :key="moduleIndex"
                  class="padding-large bottom-margin-medium border-gray">
                  <div class="row small-space-xs bottom-xs">

                    <validation-provider
                      tag="div"
                      class="col-xs-6 col-md"
                      :rules="{
                        required: true,
                        module_is_duplicated: {
                            data: configurations[configurationIndex].featured_module,
                            index: moduleIndex
                        }
                      }"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][position]`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][position]`
                        label="{{ entry_position }}"
                        v-model="module.position"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm">
                        {% for key, value in Type_ModulePosition %}
                          <option value="{{ key }}">{{ value }}</option>
                        {% endfor %}
                      </base-select>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-6 col-md"
                      rules="required"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][entry_type]`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][entry_type]`
                        label="{{ entry_type }}"
                        v-model="module.entry_type"
                        :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-6 col-md"
                      :rules="module.entry_type == '1' ? 'required' : ''"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][limit]`
                      v-slot="{ errors, valid }">
                      <base-input
                        type="text"
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][limit]`
                        label="{{ entry_limit }}"
                        v-model="module.limit"
                        mask="positiveInteger"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm || module.entry_type == 0">
                      </base-input>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-6 col-md"
                      rules="required"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][layout_id]`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][layout_id]`
                        label="{{ entry_layout }}"
                        v-model="module.layout_id"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm">
                        {% for key, value in layouts %}
                          <option value="{{ value.layout_id }}">{{ value.name }}</option>
                        {% endfor %}
                      </base-select>
                    </validation-provider>

                    <validation-provider
                      tag="div"
                      class="col-xs-6 col-md"
                      rules="required"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][status]`
                      v-slot="{ errors, valid }">
                      <base-select
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][status]`
                        label="{{ entry_status }}"
                        v-model="module.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="col-xs-6 col-md"
                      rules="required"
                      :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][sort_order]`
                      v-slot="{ errors, valid }">
                      <base-input
                        type="text"
                        :name=`featured_module[${configurationIndex}][featured_module][${moduleIndex}][sort_order]`
                        label="{{ entry_sort_order }}"
                        v-model="module.sort_order"
                        mask="positiveInteger"
                        :error="errors[0]"
                        :valid="valid"
                        :disabled="disableForm">
                      </base-input>
                    </validation-provider>

                    <div class="col-md-width-auto">
                      <base-button
                        apperance="outline"
                        square
                        @click.native="() => onRemoveModule(configurationIndex, moduleIndex)">
                        <i class="fas fa-trash"></i>
                      </base-button>
                    </div>

                  </div>
                </div>
              </div>
              <div v-else class="border-gray padding-large flex center-xs">
                <div class="full-width text-center">
                  <span class="text-dark text-large visible-block">Adicione um módulo de Produtos em destaques.</span>
                </div>
                <div class="full-width flex center-xs top-padding-medium">
                  <base-button @click.native="() => onAddModule(configurationIndex)">Adicionar</base-button>
                </div>
              </div>

            </div>

            <div v-show="configuration.tabs[1].active" class="padding-large">
              <div class="row small-space-xs middle-xs bottom-padding-medium">
                <div class="col-xs">
                  <span
                    class="text-x-large text-dark"
                    v-if="configuration.featured_product.length"
                    v-text="configuration.featured_product.length">
                  </span>
                  <span class="text-x-large text-dark">Produtos</span>
                </div>
                <div class="col-xs-width-auto" v-if="configuration.featured_product.length">
                  <base-button @click.native="onToggleSearchProduct(configurationIndex)">
                    Editar
                  </base-button>
                </div>
              </div>

              <search-product
                :open="configuration.openSearchProduct"
                :products-already-selected="configuration.featured_product"
                @close="() => onToggleSearchProduct(configurationIndex)"
                @products-selected="(productsSelected) => onProductsSelected(productsSelected, configurationIndex)">
              </search-product>

              <div v-if="configuration.featured_product.length" style="max-height:400px;overflow-y:auto;">
                <div
                  v-for="(product, productIndex) in configuration.featured_product"
                  :key="productIndex"
                  class="vertical-padding-medium top-border-gray">
                  <span v-text="product.name" class="text-dark text-medium visible-block"></span>
                  <span v-text="product.product_id" class="text-gray text-medium visible-block"></span>
                  <input
                    type="hidden"
                    :name=`featured_module[${configurationIndex}][featured_product][${productIndex}]`
                    v-model="product.product_id"
                  />
                </div>
              </div>
              <div v-else class="border-gray padding-large flex center-xs">
                <div class="full-width text-center">
                  <span class="text-dark text-large visible-block">Adicione os produtos que você quer deixar em destaque.</span>
                </div>
                <div class="full-width flex center-xs top-padding-medium">
                  <base-button @click.native="onToggleSearchProduct(configurationIndex)">
                    Adicionar
                  </base-button>
                </div>
              </div>

            </div>

          </base-card>
        </template>
        <base-card v-else class="padding-large flex center-xs">
          <div class="full-width text-center top-padding-medium">
            <span class="text-dark text-large visible-block">Adicione seu primeiro destaque.</span>
          </div>
          <div class="full-width flex center-xs vertical-padding-medium">
            <base-button @click.native="onAddConfiguration">
              Adicionar
            </base-button>
          </div>
        </base-card>
      </div>
    </form>
  </validation-observer>
</div>

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

{{ footer }}
