var SPMaskBehaviorFlyer = function (val) {
	return val.replace(/\D/g, '').length === 11 ? '(00) 00000-0000' : '(00) 0000-00009';
};
var spOptionsFlyer = {
	onKeyPress: function (val, e, field, options) {
		field.mask(SPMaskBehaviorFlyer.apply({}, arguments), options);
	}
};

var produtosInput = [
	{
		produtos: ['8QQORGQJ', '8HPDMKOJ', '0GMESGQJ', '0INPPHQJ', '8DPEQHQJ', '0IPHMKOJ'],
		inputs: [
			{
				label: 'Área',
				name: 'area',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#area',
				id: 'area',
				value: '',
				meiomask: false
			},
			{
				label: 'Nome',
				name: 'nome',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#nome',
				id: 'nome',
				value: '',
				meiomask: false
			},
			{
				label: 'Mês Vigente',
				name: 'mes',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#mes',
				id: 'mes',
				value: '',
				meiomask: false
			},
		],
		preview: true,
	},
	{
		produtos: ['4IPLMKOJ', '0LMQRKOJ', '8PQJQHQJ', '0IMPQHQJ', '0IMPQHQJ'],
		inputs: [
			{
				label: 'Área',
				name: 'area',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#area',
				id: 'area',
				value: '',
				meiomask: false
			},
			{
				label: 'Nome',
				name: 'nome',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#nome',
				id: 'nome',
				value: '',
				meiomask: false
			},
			{
				label: 'Setor',
				name: 'end',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#setor',
				id: 'setor',
				value: '',
				meiomask: false
			},
			{
				label: 'Mês Vigente',
				name: 'mes',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#mes',
				id: 'mes',
				value: '',
				meiomask: false
			},
		],
		preview: true,

	},
	{
		produtos: ['0EQEQIOJ', '8IRQPKNJ'],
		inputs: [
			{
				label: 'Nome',
				name: 'nome',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#nome',
				id: 'nome',
				value: '',
				meiomask: false
			},
			{
				label: 'Celular',
				name: 'cel',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#cel',
				id: 'cel',
				value: '',
				meiomask: false
			},
		],
		preview: true,

	},
	{
		produtos: ['8CMEQKNJ'],
		inputs: [
			{
				label: 'Telefone',
				name: 'tel1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel1',
				id: 'tel1',
				value: '',
				meiomask: {
					mask: '(nn) nnnn-nnnn',
					autoTab: false,
				}
			},
			{
				label: 'Celular',
				name: 'tel2',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel2',
				id: 'tel2',
				value: '',
				meiomask: {
				mask: '(nn) nnnnn-nnnn',
				autoTab: false,
				}
			},
			{
				label: 'Endereço',
				name: 'end',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#endereço1',
				id: 'end',
				value: '',
				meiomask: false
			},
		],
		preview: true,

	},
	{
		produtos: ['0RMHQKNJ'],
		inputs: [
			{
				label: 'Telefone',
				name: 'tel1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel1',
				id: 'tel1',
				value: '',
				meiomask: {
					mask: '(nn) nnnn-nnnn',
					autoTab: false,
				}
			},
			{
				label: 'Celular',
				name: 'tel2',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel2',
				id: 'tel2',
				value: '',
				meiomask: {
				mask: '(nn) nnnnn-nnnn',
				autoTab: false,
				}
			},
			{
				label: 'E-mail',
				name: 'email1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#email1',
				id: 'email1',
				value: '',
				meiomask: false
			},
		],
		preview: false,
	},
	{
		produtos: ['QRGNQNOMJ'],
		inputs: [
			{
				label: 'Nome',
				name: 'nome1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#nome1',
				id: 'nome1',
				value: '',
				meiomask: false
			},
			{
				label: 'Cargo',
				name: 'cargo1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#cargo1',
				id: 'cargo1',
				value: '',
				meiomask: false
			},
			{
				label: 'Endereço',
				name: 'endereco1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#endereco1',
				id: 'endereco1',
				value: '',
				meiomask: false
			},
			{
				label: 'Telefone',
				name: 'tel1',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel1',
				id: 'tel1',
				value: '',
				meiomask: {
					mask: '(nn) nnnn-nnnn',
					autoTab: false,
				}
			},
			{
				label: 'Celular',
				name: 'tel2',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#tel2',
				id: 'tel2',
				value: '',
				meiomask: {
				mask: '(nn) nnnnn-nnnn',
				autoTab: false,
				}
			},
		],
		preview: true,
	},
	{
		produtos: ['ESINJQMOJ'],
		inputs: [
			{
				label: 'Nome',
				name: 'nome',
				type: 'text',
				maxlength: 0,
				required: true,
				match: '#nome',
				id: 'nome',
				value: '',
				meiomask: false
			},
		],
		preview: false,
	},
	
	
];

var formAdvanced = {
	is2create: false,
	inputs: [],
	address: 1,
	appendForm: '#produto-form-personalizar .panel-body',
	buttonHandler: '#pagina-produto #produto-resumo button.confirm',
	endpoint: 'https://editor.print-one.com.br/api/modelo/{ID_MODELO}/layers/?key=30082018141200_yfBskt74CNBNkONmnFbbMXLXQRuAhs',
	verify: function () {
		self = this;
		for (var index = 0; index < produtosInput.length; index++) {
			var prod = produtosInput[index];
			if(prod.produtos.indexOf($('#idP').val()) > -1){
				this.inputs = prod.inputs;
				this.is2create = true;
				this.preview = prod.preview;
				break;
			}
		}
	},
	save: function () {
		self = this;
		var validate = true;
		localStorage.setItem('address', self.address);
		for (var i in self.inputs) {
			if (self.inputs[i].required && $('#' + self.inputs[i].id).val() == '') {
				alert('Campo ' + self.inputs[i].label + ' obrigatório');
				$('#' + self.inputs[i].id).focus();
				validate = false;
				break;
			} else {
				localStorage.setItem($('#' + self.inputs[i].id).data('match'), $('#' + self.inputs[i].id).val());
			}
		}
		if (validate) {
			$(self.buttonHandler).click();
		}
	},
	createContainer: function () {
		$container = $('<div class="col-1 panel calcule-box" id="produto-form-personalizar"><div class="options-box"><div class="panel-head title"><h2>Preencha os dados corretamente</h2></div>	<div class="panel-body"></div></div></div>');
		$container.insertAfter('#innerOpcoes');
	},
	createForm: function () {
		self = this;
		// $.getScript(
		// 	'https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.js',
		// 	function(){
		if (!self.inputs.length) {
			console.error('Nenhum input definido');
		} else {
			for (var i in self.inputs) {
				$(self.appendForm).append(self.getInput(self.inputs[i]));
			}
			$button = $('<div></div>');
			$button.css({
				'position': 'absolute',
				'top': 0,
				'left': 0,
				'right': 0,
				'bottom': 0,
				'z-index': 1,
				'cursor': 'pointer'
			}).click(function (event) {
				event.preventDefault();
				formAdvanced.save();
			});
			$(self.buttonHandler).css({
				'position': 'relative'
			}).parent().css({
				'position': 'relative'
			}).append($button)
		}
		// 	}
		// );
	},
	getInput: function (input) {
		$field = $('<div class="opt-group"></div>');
		var $input;
		if (input.type == 'select') {
			$input = $('<select></select>');

			for (var i in input.value) {
				$input.append('<option value="' + input.value[i] + '">' + input.value[i] + '</option>');
			}

		} else {
			$input = $('<input type="' + input.type + '" />');
		}
		$input.attr({
			'name': input.name,
			'id': input.id
		}).data({
			'match': input.match + '#',
			'required': input.required,
		})

		if (!!localStorage.getItem(input.match + '#')) {
			$input.val(localStorage.getItem(input.match + '#'));
		}

		if (input.maxlength) {
			$input.attr({
				'maxlength': input.maxlength,
			}).data({
				'maxlength': input.maxlength
			})
		}
		var $label = $('<label></label>');
		$label.attr({
			'for': input.id
		}).text(input.label);
		var $span;
		if (input.maxlength) {

			$span = $('<span>' + ($input.val().length) + '/' + input.maxlength + '</span>');
			$input.on('input', function () {
				max = $(this).data('maxlength');
				current = $(this).val().length;
				$(this).next('span').text(current + '/' + max);
			})
		}

		if (input.meiomask !== false) {
			$input.setMask(input.meiomask);
		}
		if (input.sptelephone) {
			$input.mask(SPMaskBehaviorFlyer, spOptionsFlyer);
		}

		$field.append($label);
		$field.append($input);
		$field.append($span);
		return $field;
	},
};
$(document).ready(function(){
	formAdvanced.verify();
	if(formAdvanced.is2create){
		formAdvanced.createContainer();
		formAdvanced.createForm();
	}


$('#produto-descricao.panel.calcule-box').hide();
$('#innerObservacoes').hide();

});

		
const alterasPagamentos = `
							<div id="innerAlertasBoletoPix">
								<div class="boleto">
									<h3>Boleto:</h3>
									<p>Seu pedido somente entrar&aacute; em produ&ccedil;&atilde;o ap&oacute;s a confirma&ccedil;&atilde;o do pagamento. O m&eacute;todo de pagamento via boleto depende do processamento banc&aacute;rio e pode levar at&eacute; 3 dias &uacute;teis para confirma&ccedil;&atilde;o, o que pode impactar em seu prazo de entrega. Caso tenha urg&ecirc;ncia no pedido, sugerimos que voc&ecirc; escolha outra forma de pagamento.</p>
								</div>
								<div class="PIX">
									<h3>Pix:</h3>
									<p>Seu pedido entrar&aacute; em produ&ccedil;&atilde;o somente ap&oacute;s a confirma&ccedil;&atilde;o do pagamento. O m&eacute;todo de pagamento via Pix pode levar at&eacute; 30 minutos para aprova&ccedil;&atilde;o e, aos finais de semana e fora do hor&aacute;rio comercial, a aprova&ccedil;&atilde;o pode ocorrer em at&eacute; 1 hora, o que pode impactar em seu prazo de entrega. Caso tenha urg&ecirc;ncia no pedido, sugerimos que voc&ecirc; escolha outra forma de pagamento.</p>
								</div>
							</div>
                        `

$( document ).ready(function() {
	setTimeout(function(){ 
		$('#innerFormasPgto').append(alterasPagamentos);
	}, 1000);
});