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

{% block content %}

	<div class="container-fluid">
		<div v-show="tabs[0].active">
			<div class="row">
				<div class="col-xs-12">
					<div
						class="row">
						{# DEFAULT CONTENT #}
						<div class="col-xs-12 col-sm-8">
							<base-card class="padding-large">
								<div class="bottom-margin-large">
									<span v-text="text_info"></span>
								</div>
								{# CNPJ VERIFICATION #}
								<validation-provider class="flex between-xs" style="align-items: end" tag="div" rules="required|cnpj" name="matera_cnpj" ref="provider" v-slot="{ errors, valid }">
									<base-input style="width: 80%" :label="text_cnpj" name="matera_cnpj" mask="cnpj" v-model="configurations.matera_account_info.cnpj" required :error="errors[0]" :valid="valid"></base-input>
									<div class="flex flex-row">
										<a @click="getAccountInfo(errors), configurations.matera_term_status = 0" class="btn-default btn-primary btn-medium" :class="loading ? 'btn-loading' : ''">
											<span v-text="text_verification"></span>
										</a>
									</div>
								</validation-provider>
								{# INFORMATION OF ACCOUNT #}
								<div
									class="top-margin-large">
									{# ID ACCOUNT #}
									<validation-provider tag="div" rules="required" name="matera_id_account" v-slot="{ errors, valid }">
										<base-input class="bottom-margin-medium input-pix-matera" :label="text_id_account" v-model="configurations.matera_account_info.account_id" :error="errors[0]" :valid="valid"></base-input>
									</validation-provider>
									{# SOCIAL REASON #}
									<validation-provider tag="div" rules="required" name="matera_social_reason" v-slot="{ errors, valid }">
										<base-input class="bottom-margin-medium input-pix-matera" :label="text_social_reason" v-model="configurations.matera_account_info.razao_social" :error="errors[0]" :valid="valid"></base-input>
									</validation-provider>
									{# EMAIL #}
									<validation-provider tag="div" rules="required" name="matera_email" v-slot="{ errors, valid }">
										<base-input class="bottom-margin-medium input-pix-matera" :label="text_email" v-model="configurations.matera_account_info.email" :error="errors[0]" :valid="valid"></base-input>
									</validation-provider>					
								</div>
								{# INFORMATION OF ADDRESS #}
								<div class="top-margin-medium">
									<div
										class="flex content-center between-xs bottom-margin-medium">
										{# ADDRESS #}
										<validation-provider tag="div" style="width: 76%" rules="required" name="matera_logradouro" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address" v-model="configurations.matera_billing_address.logradouro" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										{# NUMBER #}
										<validation-provider tag="div" style="width: 20%" rules="required" name="matera_numero" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address_number" v-model="configurations.matera_billing_address.numero" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</div>
									<div
										class="flex content-center between-xs bottom-margin-medium">
										{# CITY #}
										<validation-provider tag="div" style="width: 76%" rules="required" name="matera_cidade" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address_city" v-model="configurations.matera_billing_address.cidade" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										{# STATE #}
										<validation-provider tag="div" style="width: 20%" rules="required" name="matera_estado" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address_state" v-model="configurations.matera_billing_address.estado" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</div>
									<div
										class="flex content-center between-xs bottom-margin-medium">
										{# DISTRICT #}
										<validation-provider tag="div" style="width: 76%" rules="required" name="matera_bairro" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address_district" v-model="configurations.matera_billing_address.bairro" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										{# CEP #}
										<validation-provider tag="div" style="width: 20%" rules="required" name="matera_cep" v-slot="{ errors, valid }">
											<base-input class="no-margin input-pix-matera" :label="text_address_cep" mask="cep" v-model="configurations.matera_billing_address.cep" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</div>
								</div>
								{# INFORMATION OF PIX FEE #}
								<div
									class="flex content-center between-xs">
									{# PIX FEE #}
									<validation-provider tag="div" style="width: 100%" rules="required" name="matera_tx_percentual" v-slot="{ errors, valid }">
										<base-input class="bottom-margin-medium input-pix-matera" :label="text_fee_pix" v-model="configurations.txName" :error="errors[0]" :valid="valid"></base-input>
									</validation-provider>
									{#FIXED VALUE #}
									<template v-if="configurations.matera_account_info.ec_tx_tipo === txFixedValue">
										<validation-provider tag="div" style="width: 100%" rules="required" name="matera_ec_tx_valor" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_fixed_value" mask="brazilCurrency" v-model="configurations.matera_account_info.ec_tx_valor" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</template>
									{#PERCENT VALUE #}
									<template v-if="configurations.matera_account_info.ec_tx_tipo === txPercentValue">
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_valor" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_percent_value" mask="percentage" v-model="configurations.matera_account_info.ec_tx_percentual" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_percentual_vlr_min" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_percent_value_min" mask="brazilCurrency" v-model="configurations.matera_account_info.ec_tx_percentual_vlr_min" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_percentual_vlr_max" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_percent_value_max" mask="brazilCurrency" v-model="configurations.matera_account_info.ec_tx_percentual_vlr_max" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</template>
									{#RANGE VALUE #}
									<template v-if="configurations.matera_account_info.ec_tx_tipo === txRangeValue" v-for="(tx_faixa_valor, index) in configurations.matera_account_info.ec_tx_faixa_valor">
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_faixa_valor" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_range_value" mask="brazilCurrency" v-model="tx_faixa_valor.valor_faixa" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_faixa_valor" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_type_range" :value="displayValue(tx_faixa_valor.tipo)" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
										<validation-provider tag="div" style="width: 32%" rules="required" name="matera_ec_tx_faixa_valor" v-slot="{ errors, valid }">
											<base-input class="bottom-margin-medium input-pix-matera" :label="text_fixed_value" mask="brazilCurrency" v-model="tx_faixa_valor.valor" :error="errors[0]" :valid="valid"></base-input>
										</validation-provider>
									</template>
								</div>
							</base-card>
						</div>

						{# SIDE OPTIONS #}
						<div class="col-xs-12 col-sm-4 last-sm first-xs">
							<base-card class="padding-large">
								<validation-provider tag="div" rules="required" name="matera_status" v-slot="{ errors, valid }">
									<base-select :label="text_status" name="matera_status" v-model="configurations.matera_status" :error="errors[0]" :valid="valid">
										<option v-for="(value, key) in Type_Status" :key="key" :value="key">
											{ value }
										</option>
									</base-select>
								</validation-provider>

								<validation-provider tag="div" class="top-margin-large" name="matera_order" v-slot="{ errors, valid }">
									<base-input :label="text_order" name="matera_order" maxlength="2" v-model="configurations.matera_order" mask="integer" :error="errors[0]" :valid="valid"></base-input>
								</validation-provider>

								<validation-provider
									tag="div"
									rules="required"
									class="top-margin-large"
									name="matera_api_ambiente"
									v-slot="{ errors, valid }">
									<base-select
										:label="text_environment"
										name="matera_api_ambiente"
										v-model="configurations.matera_api_ambiente"
										:error="errors[0]"
										:valid="valid"
										@change="changeEnvironment(configurations.matera_api_ambiente)">
										<option
										v-for="(value, key) in Type_Environment"
										:key="key"
										:value="key">
										{ value }
										</option>
									</base-select>
								</validation-provider>

								<validation-provider tag="div" class="top-margin-medium" name="matera_term_status" v-slot="{ errors, valid }">
									<base-checkbox type="checkbox" name="matera_term_status" :label="text_checkbox_label" v-model="configurations.matera_term_status" value="1" unchecked-value="0" :label-type-info="true" :error="errors[0]" :valid="valid"></base-checkbox>

									<span class="top-margin-small text-small">
										{{ term_checkbox_description }}
										<a @click.prevent="showTermsModal = true" class="text-bold text-small text-info text-decoration-none" :title="text_show_term_tooltip">
											{{ text_show_term }}
										</a>!
									</span>
								</validation-provider>
							</base-card>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div v-show="tabs[1].active">
			<div class="row">
				<div class="col-xs-12 col-sm-8">
					<base-card class="padding-large">
						<validation-provider tag="div" name="matera_order_status_replicar" v-slot="{ errors, valid }">
							<base-select :label="text_status_replicar" name="matera_order_status_replicar" v-model="configurations.matera_order_status_replicar" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_created" v-slot="{ errors, valid }">
							<base-select :label="text_created_status" name="matera_order_status_created" v-model="configurations.matera_order_status_created" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_open" v-slot="{ errors, valid }">
							<base-select :label="text_open_payment_status" name="matera_order_status_open" v-model="configurations.matera_order_status_open" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_approved" v-slot="{ errors, valid }">
							<base-select :label="text_approved_status" name="matera_order_status_approved" v-model="configurations.matera_order_status_approved" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_partial" v-slot="{ errors, valid }">
							<base-select :label="text_partial_status" name="matera_order_status_partial" v-model="configurations.matera_order_status_partial" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_overfilled" v-slot="{ errors, valid }">
							<base-select :label="text_overfilled_status" name="matera_order_status_overfilled" v-model="configurations.matera_order_status_overfilled" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_rejected" v-slot="{ errors, valid }">
							<base-select :label="text_rejected_status" name="matera_order_status_rejected" v-model="configurations.matera_order_status_rejected" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_canceled" v-slot="{ errors, valid }">
							<base-select :label="text_canceled_status" name="matera_order_status_canceled" v-model="configurations.matera_order_status_canceled" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_order_status_error" v-slot="{ errors, valid }">
							<base-select :label="text_error_status" name="matera_order_status_error" v-model="configurations.matera_order_status_error" :error="errors[0]" :valid="valid">
								<option v-for="(order_status, key) in order_statuses" :key="order_status.order_status_id" :value="order_status.order_status_id">
									{ order_status.name }
								</option>
							</base-select>
						</validation-provider>
					</base-card>
				</div>
			</div>
		</div>

		<div v-show="tabs[2].active">
			<div
				class="row">
				{# CONFIG DESC #}
				<div class="col-xs-12 col-md-4 last-md">
					<base-card class="padding-large">
						<validation-provider tag="div" name="matera_discount_status" v-slot="{ errors, valid }">
							<base-select :label="text_discount_status" name="matera_discount_status" v-model="configurations.matera_discount_status" :error="errors[0]" :valid="valid">
								<option v-for="(value, key) in Type_Status" :key="key" :value="key">
									{ value }
								</option>
							</base-select>
						</validation-provider>

						<validation-provider tag="div" class="top-margin-large" name="matera_discount_order" v-slot="{ errors, valid }">
							<base-input :label="text_discount_order" name="matera_discount_order" v-model="configurations.matera_discount_order" mask="positiveInteger" maxlength="2" :error="errors[0]" :valid="valid"></base-input>
						</validation-provider>
					</base-card>
				</div>

				{# CONFIG PIX #}
				<div class="col-xs-12 col-md-8">
					<base-card class="padding-large">
						<span class="text-large text-dark visible-block bottom-margin-medium">{{ text_pix }}</span>

						<validation-provider tag="div" name="matera_pix_title" rules="required" v-slot="{ errors, valid }">
							<base-input :label="text_matera_title" name="matera_pix_title" mask="alphanumeric" maxlength="70" v-model="configurations.matera_pix.title" :error="errors[0]" :valid="valid" required></base-input>
						</validation-provider>

						<validation-provider tag="div" name="matera_expires_at" rules="required" v-slot="{ errors, valid }">
							<base-input class="top-margin-large" name="matera_expires_at" :label="text_expire" :error="errors[0]" maxlength="2" :valid="valid" mask="number" v-model="configurations.matera_pix.expires_at" required></base-input>
						</validation-provider>

						<div class="row small-space-xs bottom-xs top-margin-medium">
							<validation-provider tag="div" class="col-xs" name="matera_pix_valor_minimo" v-slot="{ errors, valid }">
								<base-input :label="text_min_value" name="matera_pix_valor_minimo" v-model="configurations.matera_pix.valor_minimo" mask="brazilCurrency" :error="errors[0]" :valid="valid"></base-input>
							</validation-provider>

							<validation-provider tag="div" class="col-xs" name="matera_pix_desconto" v-slot="{ errors, valid }">
								<base-input :label="text_discount" name="matera_pix_desconto" v-model="configurations.matera_pix.desconto" :mask="configurations.matera_pix.tipo_desconto == 1 ? 'brazilCurrency' : 'percentage'" :error="errors[0]" :valid="valid"></base-input>
							</validation-provider>

							<validation-provider tag="div" class="col-xs" name="matera_pix_tipo_desconto" v-slot="{ errors, valid }">
								<base-select name="matera_pix_tipo_desconto" :label="text_discount_type" v-model="configurations.matera_pix.tipo_desconto" :valid="valid" :error="errors[0]">
									<option v-for="(value, key) in Type_MarketplaceAdjustmentPrice" :key="key" :value="key">
										{ value }
									</option>
								</base-select>
							</validation-provider>
						</div>

					</base-card>
				</div>
			</div>
		</div>
	</div>

	<base-modal v-if="showTermsModal" :title="text_term_title" size="large" :slot-default-overflow-auto="true" @close="showTermsModal = false">
		<template #default>
			<div class="padding-small text-justify">
				<iframe src="https://matera.futurasistemas.com.br/TermoMateraPDF/matera.pdf" :title="text_iframe_tooltip" frameborder="0" loading="lazy" allowfullscreen="true" width="100%" height="400" target="_blank"></iframe>

				<p class="top-margin-medium text-small text-italic">
					{{ text_consult_term }}
					<a href="https://matera.futurasistemas.com.br/TermoMateraPDF/matera.pdf" :title="text_termlink_tooltip" target="_blank" class="text-bold text-info text-decoration-none">
						{{ text_consult_termlink }}
					</a>.
				</p>
				<p class="top-margin-medium text-medium">{{ text_agreement_term }}</p>
			</div>
		</template>

		<template #footer>
			<div class="flex gap-2 center-xs top-margin-medium">
				<base-button apperance="error" square size="medium" @click.native="configurations.matera_term_status = 0, showTermsModal = false" :text="text_disagree"></base-button>
				<base-button apperance="success" square size="medium" @click.native="configurations.matera_term_status = 1, showTermsModal = false" :text="text_agree"></base-button>
			</div>
		</template>
	</base-modal>

{% endblock %}