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

{% block content %}
	<div class="container-fluid">

	    <div class="field field-medium"> 
			<base-manual title="{{text_info}}">
				<div>{{text_manual}}</div>
			</base-manual>
	</div>
    
		<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 middle-xs">
					<validation-provider tag="div" class="col-xs-12 col-md-5" name="lpbc_module_interests_status" v-slot="{ errors, valid }">
						<base-select name="lpbc_module_interests_status" label="{{ text_lpbc_module_interests }}" v-model="configurations.lpbc_module_interests_status" :valid="valid" :disabled="disableForm">
							<option v-for="(value, key) in Type_DsimDnao.getEnumList()" :value="key">{ value }</option>
						</base-select>
					</validation-provider>

					<validation-provider tag="div" class="col-xs-12 col-md" name="lpbc_module_interests_limit" v-slot="{ errors, valid }" v-if="configurations.lpbc_module_interests_status === enumStatus.YES">
						<base-input label="{{ text_lpbc_module_interests_limit }}" name="lpbc_module_interests_limit" v-model="configurations.lpbc_module_interests_limit" 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-2" name="lpbc_module_interests_order" v-slot="{ errors, valid }" v-if="configurations.lpbc_module_interests_status === enumStatus.YES">
						<base-input label="{{ text_lpbc_module_interests_order }}" name="lpbc_module_interests_order" v-model="configurations.lpbc_module_interests_order" mask="positiveInteger" maxlength="2" :valid="valid" :error="errors[0]" :disabled="disableForm"></base-input>
					</validation-provider>
				</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="() => configurations.lpbc_module_interests_status == enumStatus.NO ? handleAddModuleClick('lpbc_module') : handleAddModuleClick('lpbc_module_interests')">
					{{ button_add_module }}
				</base-button>
			</header>

			<base-card v-if="configurations.lpbc_module_interests_status == enumStatus.NO" v-for="(module, index) in configurations.lpbc_module" class="padding-large bottom-margin-small middle-xs" :key="index">
				<div class="row small-space-xs bottom-xs flex-center">
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`lpbc_module[${index}][category_id]`" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module[${index}][category_id]`" :label="entry_category" v-model="module.category_id" :valid="valid" :disabled="disableForm">
							<option v-for="(value, key) in categories" :value="value.category_id" :key="key">{ value.name }</option>
						</base-select>
					</validation-provider>

					<validation-provider tag="div" class="col-xs-12 col-md" :name="`lpbc_module[${index}][position]`" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module[${index}][position]`" :label="entry_position" v-model="module.position" :valid="valid" :disabled="disableForm">
							<option v-for="(value, key) in Type_ModulePosition.getEnumList()" :value="key">
								{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`lpbc_module[${index}][type]`" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module[${index}][entry_type]`" :label="entry_type" v-model="module.entry_type" :valid="valid" :disabled="disableForm" @change="() => handleTypeChange('lpbc_module', index)">
							<option v-for="(value, key) in Type_DsimDnao.getEnumList()" :value="key">{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md-1" :name="`lpbc_module[${index}][limit]`" rules="required|minmax_number:1,24" v-slot="{ errors, valid }">
						<base-input :label="entry_limit" :name="`lpbc_module[${index}][limit]`" v-model="module.limit" :required="true" mask="positiveInteger" maxlength="2" :valid="valid" :error="errors[0]" :disabled="disableForm" :readonly="module.entry_type === '0' ? true : false"></base-input>
					</validation-provider>
					<validation-provider 
						tag="div" 
						class="col-xs-12 col-md" 
						:name="`lpbc_module[${index}][layout]`" 
						v-slot="{ errors, valid }"
						:rules="{
							required: true,
							module_is_duplicated: {
								data: configurations.lpbc_module,
								index: index,
								keys: ['category_id']
							}
						}"
					>
						<base-select :name="`lpbc_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="`lpbc_module[${index}][status]`"  v-slot="{ errors, valid }">
						<base-select :name="`lpbc_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="`lpbc_module[${index}][sort_order]`"  v-slot="{ errors, valid }">
						<base-input :label="entry_sort_order" :name="`lpbc_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('lpbc_module', index)">
						<i class="fas fa-trash"></i>
					</base-button>
				</div>
			</base-card>

			<base-card v-if="configurations.lpbc_module_interests_status == enumStatus.YES" v-for="(module, index) in configurations.lpbc_module_interests" class="padding-large bottom-margin-small middle-xs" :key="index">
				<div class="row small-space-xs bottom-xs flex-center">
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`lpbc_module_interests[${index}][position]`" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module_interests[${index}][position]`" :label="entry_position" v-model="module.position" :valid="valid" :disabled="disableForm" :error="errors[0]">
							<option v-for="(value, key) in Type_ModulePosition.getEnumList()" :value="key">
								{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md" :name="`lpbc_module_interests[${index}][type]`" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module_interests[${index}][entry_type]`" :label="entry_type" v-model="module.entry_type" :valid="valid" :disabled="disableForm" @change="() => handleTypeChange('lpbc_module_interests', index)">
							<option v-for="(value, key) in Type_DsimDnao.getEnumList()" :value="key">{ value }
							</option>
						</base-select>
					</validation-provider>
					<validation-provider tag="div" class="col-xs-12 col-md-1" :name="`lpbc_module_interests[${index}][limit]`" rules="required|minmax_number:1,24" v-slot="{ errors, valid }">
						<base-input :label="entry_limit" :name="`lpbc_module_interests[${index}][limit]`" v-model="module.limit" :required="true" mask="positiveInteger" maxlength="2" :valid="valid" :error="errors[0]" :disabled="disableForm" :readonly="module.entry_type === '0' ? true : false"></base-input>
					</validation-provider>
					<validation-provider 
						tag="div" 
						class="col-xs-12 col-md" 
						:name="`lpbc_module_interests[${index}][layout_id]`" 
						v-slot="{ errors, valid }"
						:rules="{
							required: true,
							module_is_duplicated: {
								data: configurations.lpbc_module_interests,
								index: index
							}
						}"
					>
						<base-select :name="`lpbc_module_interests[${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="`lpbc_module_interests[${index}][status]`" rules="" v-slot="{ errors, valid }">
						<base-select :name="`lpbc_module_interests[${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="`lpbc_module_interests[${index}][sort_order]`" rules="" v-slot="{ errors, valid }">
						<base-input :label="entry_sort_order" :name="`lpbc_module_interests[${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('lpbc_module_interests', index)">
						<i class="fas fa-trash"></i>
					</base-button>
				</div>
			</base-card>
		</section>
	</div>
{% endblock %}
