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

{% block content %}
	<div class="container-fluid">
		<base-card class="col-xs-12">
			<form action="{{ action }}" method="post" class="js-main-form">
				<div class="content-box row horizontal-padding-small vertical-padding-small">
					<validation-provider tag="div" class="col-xs-12 col-md" name='special_action_title' rules="required" v-slot="{ errors, valid }">
						<base-input :label="text_title" name='special_action_title' v-model="configurations.special_action_title" :required="true" mask="alphanumeric" :valid="valid" :error="errors[0]" maxlength="100" :disabled="disableForm"></base-input>
					</validation-provider>

					<validation-provider tag="div" class="col-xs-12 col-md" name='entry_product' v-slot="{ errors, valid }">
						<base-select-search
							name="entry_product"
							:label="entry_product"
							initial-value="Selecione alguma promoção"
							@callback="handleSpecialActionProductCallback"
							:option="special_action_options"
							:valid="valid" 
              :error="errors[0]" 
							:disabled="disableForm"
						>
					</base-select-search>
					</validation-provider>

					<div class="col-xs-12">
						<div id="special_action-product" class="scrollbox field-entry  top-margin-large">
							<div 
								id="special_action-product" 
								class="scrollbox-item flex between-xs vertical-padding-small"
								v-for="(option, index) in configurations.special_action_promotions_selected" 
							>
								<span class="text-small text-dark">{option.name}</span>
								<i 
									class="fas fa-trash-alt text-small right-margin-small text-error cursor-pointer" 
									@click="() => handleSpecialActionProductRemove(option.id)"
								></i>
							</div>
						</div>
					</div>
				</div>
			</form>
		</base-card>

    <section class="top-margin-large">
			<header class="flex between-xs middle-xs vertical-margin-large">
				<h2 class="text-x-large text-dark">
					{{ text_module }}
				</h2>
				<base-button class="btn-default btn-medium btn-primary" :loading="loadingBtn" @click.native="() => handleAddModuleClick()">
					{{ button_add_module }}
				</base-button>
			</header>

			<base-card v-for="(module, index) in configurations.special_action_module" :key="index" class="padding-large bottom-margin-small middle-xs">
				<div class="row small-space-xs bottom-xs flex-center">
          <validation-provider 
						tag="div" 
						class="col-xs-12 col-md" 
						:name="`special_action_module[${index}][layout]`" 
						v-slot="{ errors, valid }"
						:rules="{
							required: true,
							module_is_duplicated: {
								data: configurations.special_action_module,
								index: index
							}
						}"
					>
						<base-select :name="`special_action_module[${index}][layout_id]`" :label="entry_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="`special_action_module[${index}][position]`" v-slot="{ errors, valid }">
						<base-select :name="`special_action_module[${index}][position]`" :label="entry_position" v-model="module.position" :valid="valid" :disabled="disableForm">
							<option v-for="(value, key) in Type_ModulePosition.getRemoveArray([Type_ModulePosition.Tp_ColumnLeft], true)" :value="key">
								{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md-1" :name="`special_action_module[${index}][limit]`" rules="required|minmax_number:1,24" v-slot="{ errors, valid }">
						<base-input :label="entry_limit" :name="`special_action_module[${index}][limit]`" v-model="module.limit" :required="true" mask="positiveInteger" maxlength="2" :valid="valid" :error="errors[0]" :disabled="disableForm"></base-input>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`special_action_module[${index}][entry_style]`" v-slot="{ errors, valid }">
						<base-select :name="`special_action_module[${index}][style]`" :label="entry_style" v-model="module.style" :valid="valid" :disabled="disableForm">
							<option v-for="(value, key) in Type_ActionPromotionStyle.getEnumList()" :value="key" :key="key">
								{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`special_action_module[${index}][status]`" rules="" v-slot="{ errors, valid }">
						<base-select :name="`special_action_module[${index}][status]`" :label="entry_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-1" :name="`special_action_module[${index}][sort_order]`" rules="" v-slot="{ errors, valid }">
						<base-input :label="entry_sort_order" :name="`special_action_module[${index}][sort_order]`" mask="positiveInteger" v-model="module.sort_order" :valid="valid" :disabled="disableForm" maxlength="2"></base-input>
					</validation-provider>
					<base-button apperance="outline" class="cursor-pointer bottom-margin-small" square @click.native="() => handleRemoveModuleClick(index)">
						<i class="fas fa-trash"></i>
					</base-button>
				</div>
			</base-card>
		</section>
	</div>
{% endblock %}