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

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

					{# Rolagem #}
					<validation-provider tag="div" rules="required" name="scroll" v-slot="{ errors, valid }"
					class="col-xs-12 col-md-6">
						<base-select
						:label="text_scroll"
						v-model="configurations.special_action_scroll"
						:error="errors[0]"
						:valid="valid"
						name="scroll">
							<option v-for="(value, key) in Type_AutoOrManual.getEnumList()" :value="key">
								{ value }
							</option>
						</base-select>
					</validation-provider>

					{# Promoções #}
					<validation-provider name='entry_product'
					 	tag="div" class="col-xs-12 col-md-12" 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>

					<span v-text="'{{text_selected_promotion}}'" class="text-small text-dark-opacity text-bold vertical-margin-x-small horizontal-margin-medium"></span>
					<div class="col-xs-12 top-no-padding">
						<div id="special_action-product" class="field-entry">
							<div 
								id="special_action-product" 
								class="flex between-xs vertical-padding-small special_action-product"
								v-for="(option, index) in configurations.special_action_promotions_selected">
								<span class="text-small text-dark">{option.name}</span>
								<i class="fa-regular fa-circle-xmark cancel-icon-custom" @click="() => handleSpecialActionProductRemove(option.id)"></i>
							</div>
						</div>
					</div>

					{# Cor Primária #}
					<div class="flex col-xs-12 no-padding">
						<validation-provider name="special_action_primary_color"
							tag="div"
							rules="required"
							v-slot="{ errors, valid}"
							class="col-xs-6 col-md-6">
							<base-input
								class="input-color-option"
								name="special_action_primary_color"
								:label='text_primary_color'
								type="color"
								v-model="configurations.special_action_primary_color">
							</base-input>

						</validation-provider>

						{# Cor Secundária #}
						<validation-provider name="special_action_secondary_color"
							tag="div"
							rules="required"
							v-slot="{ errors, valid}"
							class="col-xs-6 col-md-6">
							<base-input
								class="input-color-option"
								name='special_action_secondary_color'
								:label='text_secondary_color'
								type="color"
								value="blue"
								v-model="configurations.special_action_secondary_color">
							</base-input>
						</validation-provider>

						{# Cor Título #}
						<validation-provider name="special_action_title_color"
							tag="div"
							rules="required"
							v-slot="{ errors, valid}"
							class="col-xs-6 col-md-6">
							<base-input
								class="input-color-option"
								name='special_action_title_color'
								:label='text_color_title'
								type="color"
								v-model="configurations.special_action_title_color">
							</base-input>
						</validation-provider>

						{# Titulo #}
						<div class="flex col-xs-6 col-md-6 title-color">
							<span v-text="'{{text_color_preview}}'" class="text-small text-dark-opacity text-bold bottom-margin-x-small right-margin-medium"></span>
							<div class="title-color-content">
								<span v-text="configurations.special_action_title" class="title-color-text text-medium text-bold"></span>
							</div>
						</div>
					</div>

					{# Imagem de Fundo #}
					<div class="col-xs-12 col-md-12">
						<div class="flex center-xs text-dark-opacity nowrap-xs">
							<span
								v-text="entry_styles"
								class="text-medium text-bold full-width text-ellipsis">
							</span>
						</div>

						<div class="row bottom-margin-large">

							<div v-for="(imagesSpecial, imagesSpecialIndex) in specialStyles"
							:key="imagesSpecialIndex"
							class="col-xs-3 col-md-3 flex center-ms top-margin-medium relative">
								<div class="cursor-pointer hover:shadow-small-clean full-width hidden-overflow img-container" 
								@click.prevent="onClickSetSpecialActionStyle(imagesSpecial.type)"
								:class="{ 'shadow-small-clean': imagesSpecial.type === configurations.special_action_selectedStyle }">
									<div v-if="imagesSpecial.image" v-html="imagesSpecial.image" class="full-width full-height special-style"></div>
								</div>
								<i v-if="imagesSpecial.type === configurations.special_action_selectedStyle" class="fa-regular fa-circle-check checked-icon-promotion"></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 :name="`special_action_module[${index}][layout]`" 
						tag="div" 
						class="col-xs-12 col-md" 
						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 :name="`special_action_module[${index}][position]`" 
						tag="div" class="col-xs-12 col-md" 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 :name="`special_action_module[${index}][type]`"
						tag="div"
						class="col-xs-12 col-md"
						v-slot="{ errors, valid }">
						<base-select
							:name="`special_action_module[${index}][type]`"
							:label="entry_fullscreen"
							v-model="module.type"
							:error="errors[0]"
							:valid="valid"
							:disabled="module.position == Type_ModulePosition.Tp_ColumnLeft ? true : disableForm">
						<option
							v-for="(value, key) in Type_DsimDnao.getEnumList()"
							:value="key">
							{ value }
						</option>
						</base-select>
					</validation-provider>
				
					<validation-provider :name="`special_action_module[${index}][status]`" 
						tag="div" class="col-xs-12 col-md" 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  :name="`special_action_module[${index}][sort_order]`" 
						tag="div" class="col-xs-12 col-md-1" 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 %}