{% extends 'base/module.twig' %}

{% block content %}

  <div class="container-fluid">

    <base-card
      class="row small-space-xs padding-large bottom-margin-large"
    >
      <validation-provider
        tag="div"
        class="col-xs-12 col-md"
        name='buy_later_status'
        rules="required"
        v-slot="{ errors, valid }">
        <base-select
          :label="entry_buy_later_status"
          name='buy_later_status'
          v-model="configurations.buy_later_status"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
          <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
        </base-select>
      </validation-provider>
      <validation-provider
        tag="div"
        class="col-xs-12 col-md"
        name='buy_later_title'
        rules=""
        v-slot="{ errors, valid }">
        <base-input
          :label="entry_buy_later_title"
          name='buy_later_title'
          v-model="configurations.buy_later_title"
          maxlength="60"
          :valid="valid"
          :error="errors[0]"
          :disabled="disableForm">
        </base-input>
      </validation-provider>
    </base-card>
    <div v-if="configurations.buy_later_status == Type_Status.Tp_Habilitado">
      <div class="flex between-xs middle-xs bottom-padding-large">
        <span class="text-x-large text-dark">{{ text_cart }}</span>
      </div>

      <base-card
        class="padding-large bottom-margin-large">
        <div class="row small-space-xs bottom-xs">

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name="buy_later_module[0][position]"
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              name="buy_later_module[0][position]"
              :label="entry_buy_later_position"
              v-model="configurations.buy_later_module[0].position"
              :valid="valid"
              :disabled="disableForm">
              <option
                v-for="(value, key) in positions"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name="buy_later_module[0][entry_type]"
            :rules="( configurations.buy_later_module[0].position != Type_ModulePosition.Tp_ColumnLeft ? 'required' : '')"
            v-slot="{ errors, valid }">
            <base-select
              name="buy_later_module[0][entry_type]"
              :label="entry_buy_later_entry_type"
              v-model="configurations.buy_later_module[0].entry_type"
              :valid="valid"
              :disabled="disableForm || configurations.buy_later_module[0].position == Type_ModulePosition.Tp_ColumnLeft">
              <option
                v-for="(value, key) in Type_DsimDnao"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name="buy_later_module[0][limit]"
            :rules="(configurations.buy_later_module[0].entry_type == 1 ? 'required' : '')"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_buy_later_limit"
              name="buy_later_module[0][limit]"
              v-model="configurations.buy_later_module[0].limit"
              mask="positiveInteger"
              maxlength="2"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm || (configurations.buy_later_module[0].position != Type_ModulePosition.Tp_ColumnLeft && configurations.buy_later_module[0].entry_type == 0)">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            name="buy_later_module[0][sort_order]"
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_buy_later_order"
              name="buy_later_module[0][sort_order]"
              mask="positiveInteger"
              v-model="configurations.buy_later_module[0].sort_order"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              maxlength="2">
            </base-input>
          </validation-provider>
        </div>
      </base-card>

      <div class="flex between-xs middle-xs bottom-padding-large">
        <span class="text-x-large text-dark">{{ text_module }}</span>
        <base-button
          class="btn-default btn-medium btn-primary"
          :loading="loadingBtn"
          @click.native="() => onAddModule()">
          {button_add}
        </base-button>
      </div>

      <base-card
        v-for="(module, moduleIndex) in configurations.buy_later_module"
        v-if="moduleIndex > 0"
        :key="moduleIndex"
        class="padding-large bottom-margin-small">
        <div class="row small-space-xs bottom-xs">

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][position]`
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              :name=`buy_later_module[${moduleIndex}][position]`
              :label="entry_buy_later_position"
              v-model="module.position"
              :valid="valid"
              :disabled="disableForm"
              @change="onPositionChange(moduleIndex)">
              <option
                v-for="(value, key) in Type_ModulePosition.getEnumList(true)"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][entry_type]`
            :rules="(module.position != Type_ModulePosition.Tp_ColumnLeft ? 'required' : '')"
            v-slot="{ errors, valid }">
            <base-select
              :name=`buy_later_module[${moduleIndex}][entry_type]`
              :label="entry_buy_later_entry_type"
              v-model="module.entry_type"
              :valid="valid"
              :disabled="disableForm || (module.position != Type_ModulePosition.Tp_ColumnLeft && module.position == Type_ModulePosition.Tp_ColumnLeft)">
              <option
                v-for="(value, key) in Type_DsimDnao"
                :value="key">{ value }
              </option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][limit]`
            :rules="(module.entry_type == 0 ? 'required' : '')"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_buy_later_limit"
              :name=`buy_later_module[${moduleIndex}][limit]`
              v-model="module.limit"
              mask="positiveInteger"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm || module.entry_type == 0">
            </base-input>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][layout_id]`
            rules="required"
            v-slot="{ errors, valid }">
            <base-select
              v-if="module.position === Type_ModulePosition.Tp_AppMobile"
              :name=`buy_later_module[${moduleIndex}][layout_id]`
              :label="entry_buy_later_layout"
              v-model="module.layout_id"
              :valid="valid"
              :disabled="disableForm"
              :error="errors[0]">
              <option
                v-for="(value, key) in layoutsApp"
                :value="key">{ value }
              </option>
            </base-select>
            <base-select
              v-else
              :name=`buy_later_module[${moduleIndex}][layout_id]`
              :label="entry_buy_later_layout"
              v-model="module.layout_id"
              :valid="valid"
              :disabled="disableForm"
              :error="errors[0]">
              <option
                      v-for="(value, key) in layouts"
                      :value="value.layout_id">{ value.name }
              </option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][status]`
            rules=""
            v-slot="{ errors, valid }">
            <base-select
              :name=`buy_later_module[${moduleIndex}][status]`
              :label="entry_buy_later_status"
              v-model="module.status"
              :valid="valid"
              :disabled="disableForm">
              <option v-for="(value, key) in Type_Status.getEnumList()" :value="key">{ value }</option>
            </base-select>
          </validation-provider>

          <validation-provider
            tag="div"
            class="col-xs-12 col-md"
            :name=`buy_later_module[${moduleIndex}][sort_order]`
            rules="required"
            v-slot="{ errors, valid }">
            <base-input
              :label="entry_buy_later_order"
              :name=`buy_later_module[${moduleIndex}][sort_order]`
              mask="positiveInteger"
              v-model="module.sort_order"
              :valid="valid"
              :error="errors[0]"
              :disabled="disableForm"
              maxlength="2">
            </base-input>
          </validation-provider>

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

{% endblock %}