<div id="pagamento-section" <?php echo count($cartItems) ? '' : 'class="hidden"'; ?>>
	<form id="card">
		<?php if(count($cadastro->enderecos) == 0){ ?>
			<div class="box resumo-compra address-div">
				<div class="etapa">
					<div class="circle-icon">
						<i class="fa fa-truck"></i>
					</div>
					<h2 class="etapa__title">Endereço</h2>
				</div>

				<div class="mob-campos"></div>

				<div class="flex-between">
					<div class="item-half">
						<div class="form-group nome-div">
							<label>Nome</label>
							<input placeholder="Ex: Casa" type="text" tabindex="8" required name="nome" id="nome" class="default-input">
						</div>

						<div class="form-group rua-div">
							<label>Rua</label>
							<input placeholder="Ex: Rua Exemplo" type="text" tabindex="10" required name="logradouro" id="logradouro" class="default-input">
						</div>
						<div class="form-group complemento-div">
							<label>Complemento</label>
							<input placeholder="Ex: Próximo ao shopping" type="text" tabindex="13" name="complemento" id="complemento" class="default-input">
						</div>



					</div>
					<div class="item-half">
						<div class="form-group cep-div">
							<label>CEP</label>
							<input placeholder="Ex: 00000-000" type="text" tabindex="9" required name="cep" id="cep" class="default-input cep-input">
							<i class="fa fa-spinner fa-spin hidden"></i>
						</div>
						<div class="flex-between">
							<div class="item-half numero-div">
								<label>Número</label>
								<input type="number" tabindex="11" required name="numero" id="numero" class="default-input" placeholder="Ex: 999">
							</div>
							<div class="item-half bairro-div">
								<label>Bairro</label>
								<input type="text" tabindex="12" required name="bairro" id="bairro" class="default-input" placeholder="Ex: Bairro Exemplo">
							</div>
						</div>
						<div class="form-group hidden pais-div">
							<label>País</label>
							<select name="pais_id" id="pais" required tabindex="12" class="default-select select2">
								<?php foreach ($listaPaises as $pais): ?>
									<option value="<?php echo $pais->id; ?>"><?php echo $pais->nome; ?></option>
								<?php endforeach ?>
							</select>
						</div>
						<div class="flex-between">
							<div class="item-half estado-div">
								<label>Estado</label>
								<select name="estado_id" required tabindex="14" id="estado" class="default-select select2">

								</select>
							</div>
							<div class="item-half cidade-div">
								<label>Cidade</label>
								<select name="cidade_id" required tabindex="15" id="cidade" class="default-select select2">

								</select>
							</div>
						</div>

					</div>
				</div>

			</div>
		<?php } ?>
		<?php if(!$cadastro->telefone){ ?>
			<div class="box resumo-compra">
				<div class="etapa">
					<div class="circle-icon">
						<i class="fa fa-phone"></i>
					</div>
					<h2 class="etapa__title">Telefone</h2>
				</div>

				<div class="flex-container">

					<div class="form-group">
						<label>Não possuímos registro de seu telefone, por favor preencha-o abaixo: </label>
						<input name="telefone" required="" class="default-input" value="" placeholder="Digite seu telefone" type="phone">
					</div>

				</div>

			</div>
		<?php } ?>
		<div class="box">
			<div class="meio-pagamento">
				<div class="etapa">
					<div class="circle-icon">
						<i class="fa fa-credit-card"></i>
					</div>
					<h2 class="etapa__title">Pagamento</h2>
				</div>

				<div id="box-cashback">
					<?php echo $htmlBoxCashback; ?>
				</div>

				<div class="flex-container">
					<div class="meio-pagamento__tab-pagamento meio-pagamento__forma-pagamento <?php echo ($valorRestante <= 0 && session('usar_saldo') ? '' : 'active')?><?php echo ocultarMeiosPagamento($valorRestante); ?>" name="forma_pagamento" data-id="C" data-pagamento_tipo="C">Cartão de Crédito</div>
					<div class="meio-pagamento__tab-pagamento meio-pagamento__forma-pagamento<?php echo ocultarMeiosPagamento($valorRestante); ?>" name="forma_pagamento" data-id="D" data-pagamento_tipo="D">Depósito Bancário</div>
					<div class="meio-pagamento__tab-pagamento meio-pagamento__forma-pagamento<?php echo ocultarMeiosPagamento($valorRestante); ?>" name="forma_pagamento" data-id="P" data-pagamento_tipo="P">PIX</div>
					<div class="meio-pagamento__forma-pagamento hidden <?php echo ($valorRestante <= 0 && session('usar_saldo') ? 'active' : '')?>" name="forma_pagamento" data-id="CASH" id="meio-pagamento-cash">Cashback</div>
				</div>

				<div class="primeiro-box<?php echo ocultarMeiosPagamento($valorRestante); ?>" id="meios-pagamento-card-deposito">
					<div class="flex-between">
						<div class="cartoes">
							<div class="my-cards">
								<?php if(count($cadastro->cartoes)){ ?>
									<?php foreach ($cadastro->cartoes as $cartao): ?>
											<div class="cartoes__item">
												<input <?php echo $cartao->principal ? 'checked principal' : ''; ?> type="radio" name="cartao_id" value="<?php echo $cartao->id; ?>">
												<div class="infos">
													<?php /* ?><h3 class="cartao-item__title">Cartão <?php  echo $cartao->info->getBrand(); ?> <?php echo $cartao->info->getLastDigits(); ?></h3>
													<?php /* echo $cartao->info->getBrand(); */?>
													<div class="align-center">
														<?php if ($cartao->info->getBrand() == "mastercard"){ ?>
																<img src="img/site/pagamento/<?php echo $cartao->info->getBrand(); ?>-v2.svg" ?>
														<?php }else{ ?>
																<img src="img/site/pagamento/<?php echo $cartao->info->getBrand(); ?>.svg" ?>
														<?php } ?>

														<p>**** **** **** <?php echo $cartao->info->getLastDigits(); ?></p>
														<?php
															$validade = $cartao->info->getExpirationDate();
															$validade_first = substr($validade, 0, 2);
															$validade_last = substr($validade,2,2);
														?>
														<p class="validade">Validade: <?php echo $validade_first.'/'.$validade_last; ?></p>
													</div>
												</div>
											</div>
									<?php endforeach ?>
									<div class="pagamento">
										<div class='card-wrapper'></div>
										<div class="item">
											<label for="">Número do Cartão de Crédito</label>
											<input placeholder="0000 0000 0000 0000" name="number" class="default-input" type="text" >
										</div>
										<div class="item">
											<label for="">Nome do Titular do Cartão</label>
											<input placeholder="Nome impresso no cartão" name="name" class="default-input" style="text-transform:uppercase" type="text">
										</div>
										<div class="flex-between">
											<div class="item">
												<label for="">Validade (MM/AA)</label>
												<input placeholder="MM/AA" name="expiry" class="default-input" type="tel" maxlength="7">
											</div>
											<div class="item">
												<label for="">Código de Segurança</label>
												<input placeholder="CVV" name="cvc" class="default-input" type="text">
											</div>
										</div>
										<div class="item recaptcha<?php echo (isset($tentativasCartao) && $tentativasCartao < 2 ? " hidden" : "");?>" style="margin-top: 25px;">
											<?php echo Recaptcha::render(); ?>

										</div>

										<div class="cartoes__salvar-cartao">
											<input id="salvar-checkbox" name="salvar_cartao" class="default-input checkbox-salvar" type="checkbox">
											<label for="salvar-checkbox">Salvar cartão para compras futuras</label>
										</div>
										<button class="cartoes__novo-cartao" id="voltarEtapa" type="button"><i class="fa fa-undo fa-fw"></i>Ver meus cartões</button>
									</div>
									<button class="cartoes__novo-cartao" id="outro-cartao">Adicionar novo cartão</button>
									<div class="item">
										<label for="">Número de Parcelas</label>
										<select class="default-select" name="parcelas" id="parcelas">
											<?php echo $parcelasOptions; ?>
										</select>
									</div>
								<?php }else{ ?>
								<div class="pagamento" style="display: block;">
									<?php if(count($cadastro->cartoesDiferentes) && $cadastro->exibe_alerta == 1){ ?>
										<div class='card-alert'>
											<div class="card-alert__title">Seu cartão não está mais salvo?</div>
											<div class="card-alert__body">
												<p>Estamos trabalhando com novos adquirentes de cartão de crédito de modo que pode ser necessário salvar novamente seu cartão.</p>
												<br>
												<p>Basta marcar a opção "Salvar cartão para compras futuras".</p>
											</div>
											<div>
												<button class="btn-close" type="button" id="btnCloseEntendi">Ok, entendi!</button>
											</div>
										</div>
										<div class='card-wrapper hidden'></div>
									<?php }else{ ?>
										<div class='card-wrapper'></div>
									<?php } ?>
									<div class="item">
										<label for="">Número do Cartão de Crédito</label>
										<input placeholder="0000 0000 0000 0000" name="number" class="default-input" type="text">
									</div>
									<div class="item">
										<label for="">Nome do Titular do Cartão</label>
										<input placeholder="Nome impresso no cartão" name="name" class="default-input" style="text-transform:uppercase" type="text">
									</div>
									<div class="flex-between">
										<div class="item">
											<label for="">Validade (MM/AA)</label>
											<input placeholder="MM/AA" name="expiry" class="default-input" type="tel" maxlength="7">
										</div>
										<div class="item">
											<label for="">Código de Segurança</label>
											<input placeholder="CVV" name="cvc" class="default-input" type="text">
										</div>
									</div>
									<div class="item recaptcha<?php echo (isset($tentativasCartao) && $tentativasCartao < 2 ? " hidden" : "");?>" style="margin-top: 25px;">
										<?php echo Recaptcha::render(); ?>

									</div>
									<div class="item">
										<label for="">Número de Parcelas</label>
										<select class="default-select" name="parcelas" id="parcelas">
											<?php echo $parcelasOptions; ?>
										</select>
									</div>
									<div class="cartoes__salvar-cartao">
										<input id="salvar-checkbox" name="salvar_cartao" class="default-input checkbox-salvar" type="checkbox">
										<label for="salvar-checkbox">Salvar cartão para compras futuras</label>
									</div>
								</div>
								<?php } ?>
							</div>
						</div>
						<div class="deposito-bancario disabled">
							<p class="deposito-bancario__infos">Banco Sicredi <b>(748)</b></p>
							<p class="deposito-bancario__infos">Agência: <b>0101</b></p>
							<p class="deposito-bancario__infos">Conta Corrente: <b>40339-2</b></p>
							<p class="deposito-bancario__infos">CNPJ: <b>17.723.844/0001-63</b></p>
							<p class="deposito-bancario__infos">Razão Social: <b>Vinum Veritas Comércio e Importação Ltda</b></p>
							<div class="flex-between deposito-bancario__options">
								<div class="item">
									<input id="tipo-deposito" name="tipo_deposito" checked value="D" type="radio" disabled>
									<label for="tipo-deposito">DEPÓSITO</label>
								</div>
								<div class="item">
									<input id="tipo-doc" name="tipo_deposito" value="DOC" type="radio" disabled>
									<label for="tipo-doc">DOC</label>
								</div>
								<div class="item">
									<input id="tipo-ted" name="tipo_deposito" value="TED" type="radio" disabled>
									<label for="tipo-ted">TED</label>
								</div>
							</div>
							<div class="item">
								<label for="">Nome Depositante</label>
								<input type="text" value="<?php echo ($cadastro) ? $cadastro->nome.' '.$cadastro->sobrenome : ''; ?>" name="nome_depositante" required class="default-input" placeholder="Digite o nome do depositante" disabled>
							</div>
							<div class="item">
								<label for="">Comprovante*</label>
								<input type="file" id="fileUpload" class="default-input" placeholder="Selecione um arquivo PDF ou JPEG" disabled>
							</div>

							<?php if(isset($confrariaCheck) && $confrariaCheck): ?>
								<p class="enviar-comprovante">*<b>Posso enviar o comprovante depois?</b> <span>Sim, basta acessar sua confraria, ir em <b>ADEGA DA CONFRARIA</b>, localizar seu pedido e clicar em "Enviar comprovante".</span></p>
							<?php else: ?>
								<p class="enviar-comprovante">*<b>Posso enviar o comprovante depois?</b> <span>Sim, basta acessar sua conta, ir em <b>MEUS PAGAMENTOS</b>, localizar seu pedido e clicar em "Enviar comprovante".</span></p>
							<?php endif; ?>

							<div class="bottom">
								<div class="valor-total-div">
									<span>Valor total:</span>
									<span class="aplicado ">(Desconto DEPÓSITO/PIX aplicado)</span>
								</div>
								<span class="valor-total-deposito">
									<?php 
										$desconto = ($valorTotal->total * $info->percentual_desconto_pix) / 100;
                                        $valorComDesconto = $valorTotal->total - $desconto;
									 ?>
									<span class="valor-antigo">R$ <?php echo e(number_format($valorTotal->totalOriginal, 2, ',', '.')); ?></span>
									<strong>R$ <?php echo e(number_format($valorComDesconto, 2, ',', '.')); ?></strong>
								</span>
							</div>
						</div>
					</div>
				</div>
				<div class="pix<?php echo ocultarMeiosPagamento($valorRestante); ?>" id="meios-pagamento-pix">
						<div class="box-centro">
							<h2><img src="img/pix.svg" alt="PIX"> PAGAR COM PIX</h2>

							<p>Pague com PIX em qualquer dia e qualquer hora! O pagamento  pode ser feito em poucos segundos e é <strong>completamente seguro</strong>.</p>
							<p>Você poderá visualizar a chave PIX e enviar o comprovante de pagamento <strong>após a confirmação da compra</strong>.</p>

							<input id="tipo-pix" name="tipo_deposito" value="PIX" type="radio" readonly="readonly" class="hidden">
							<input id="tipo-cashback" name="tipo_deposito" value="CASH" type="radio" class="hidden" <?php echo ($valorRestante <= 0 && session('usar_saldo') ? 'checked' : '')?> />

							<div class="box-qr" style="display:none">
								<?php if($cadastro->empresa_id == 1): ?>
								<img src="img/qr/VINUM.png" alt="QR Code" class="qr hidden">
								<?php elseif($cadastro->empresa_id == 2): ?>
								<img src="img/qr/VD.png" alt="QR Code" class="qr hidden">
								<?php elseif($cadastro->empresa_id == 4): ?>
								<img src="img/qr/SW.png" alt="QR Code" class="qr hidden">
								<?php endif; ?>

								<div class="steps desk hidden">
									<div class="step">
										<span class="number">1</span>
										<span class="text">Abra o app do seu banco e acesse o ambiente PIX.</span>
									</div>
									<div class="step">
										<span class="number">2</span>
										<span class="text">Escolha a opção "Pagar com QR Code" e escaneie o código ao lado.</span>
									</div>
									<div class="step">
										<span class="number">3</span>
										<span class="text">Confirmar as informações e finalize o pagamento.</span>
									</div>
								</div>
							</div>
						</div>

					<div class="bottom bottom-pix">
						<div class="valor-total-div">
							<span>Valor total:</span>

						</div>
						<span class="valor-total-deposito">
							<?php 
								$desconto = ($valorTotal->total * $info->percentual_desconto_pix) / 100;
								$valorComDesconto = $valorTotal->total - $desconto;
							 ?>

							<strong>R$ <?php echo e(number_format($valorComDesconto, 2, ',', '.')); ?></strong>
						</span>
					</div>
				</div>

				<button class="btn-confirmar-compra" type="button" id="confirmarCompra" style="<?php echo $valorRestante <= 0 && session('usar_saldo') ? 'margin-top: 0px;' : 'margin-top: 60px;'?>">Confirmar Compra<i class="fa fa-angle-right"></i></button>
					<input id="tipo_adega" name="tipo_adega" value="<?php echo e($tipo_adega); ?>" type="radio" readonly="readonly" class="hidden">
				<p class="meio-pagamento__problemas-compra">Problemas ao confirmar a compra? Relate <a target="_blank" href="<?php echo url('contato'); ?>">aqui</a> sua dificuldade. Queremos ajudá-lo!</p>
			</div>
		</div>
	</form>
</div>

<script>

	$('.meio-pagamento__forma-pagamento').click(function(){

		var meio_pagamento = $('.meio-pagamento__forma-pagamento.active').data('id');
		console.log(meio_pagamento);

		if($(this).data('id') == 'C'){
			$('.meio-pagamento__forma-pagamento').removeClass('active');
			$(this).addClass('active');
			$('.cartoes').removeClass('disabled');
			$('.pix').removeClass('active');
			$('.primeiro-box').removeClass('disabled');
			$('.cartoes :input').removeAttr("disabled");
			$('.deposito-bancario').addClass('disabled');
			$('.deposito-bancario :input').prop('disabled','true');

			<?php if(isset($info) && $info->ativar_desconto_deposito && !empty($info->cupom_desconto_id)): ?>
			// checkoutRemoverCupom();
			<?php endif; ?>
		}else if($(this).data('id') == 'D'){
			$("input[type=radio][value=D]").prop("checked",true);
			$('.deposito-bancario').removeClass('disabled');
			$('.pix').removeClass('active');
			$('.pix').removeClass('active');
			$('.primeiro-box').removeClass('disabled');
			$('.cartoes').addClass('disabled');
			$('.deposito-bancario :input').removeAttr("disabled");
			$('.cartoes :input').prop('disabled' ,'true');
			$('.meio-pagamento__forma-pagamento').removeClass('active');
			$(this).addClass('active');

            if($('[name="codigo_cupom"]').val() != '' && $('.removerCupom').length) return;

			<?php if(isset($info) && $info->ativar_desconto_deposito && !empty($info->cupom_desconto_id)): ?>
			if(meio_pagamento == 'C'){
				//checkoutAdicionarCupom('<?php echo e($info->cupomDesconto->codigo); ?>');
				//$('.aplicado').removeClass('hidden');
			}
			<?php endif; ?>
		}else if($(this).data('id') == 'P'){
			$("input[type=radio][value=PIX]").prop("checked",true);
			$('.primeiro-box').addClass('disabled');
			$('.pix').addClass('active');
			$('.meio-pagamento__forma-pagamento').removeClass('active');
			$(this).addClass('active');

            if($('[name="codigo_cupom"]').val() != '' && $('.removerCupom').length) return;

			<?php if(isset($info) && $info->ativar_desconto_deposito && !empty($info->cupom_desconto_id)): ?>
			if(meio_pagamento == 'C'){
			//checkoutAdicionarCupom('<?php echo e($info->cupomDesconto->codigo); ?>');
				//	$('.aplicado').removeClass('hidden');
				}
			<?php endif; ?>
		}
	});

	<?php if(isset($info) && $info->ativar_desconto_deposito && !empty($info->cupom_desconto_id) && session('cupom') && isset(session('cupom')['id']) && session('cupom')['id'] == $info->cupom_desconto_id): ?>
		$("input[type=radio][value=D]").prop("checked",true);
		$('.deposito-bancario').removeClass('disabled');
		$('.pix').removeClass('active');
		$('.pix').removeClass('active');
		$('.primeiro-box').removeClass('disabled');
		$('.cartoes').addClass('disabled');
		$('.deposito-bancario :input').removeAttr("disabled");
		$('.cartoes :input').prop('disabled' ,'true');
		$('.meio-pagamento__forma-pagamento').removeClass('active');
		$('.meio-pagamento__tab-pagamento').eq(1).addClass('active');
	<?php endif; ?>

	$(document).on('click','#voltarEtapa',function(e){
		e.preventDefault();
		$('[name="cartao_id"][principal]').prop('checked', true);
		$('.pagamento').fadeOut('slow');
		setTimeout(function(){
			$('.cartoes__item').fadeIn('slow');
		},500);
		$('#outro-cartao').fadeIn('slow');
	});

	$(document).on('click','#outro-cartao',function(e){
		e.preventDefault();
		$('[name="cartao_id"]:checked').prop('checked', false);
		$('.cartoes__item').fadeOut('slow');
		setTimeout(function(){
			$('.pagamento').fadeIn('slow');
		},500);
		$('#outro-cartao').fadeOut('slow');
	});

	var form;
    /*$('#fileUpload').change(function (event) {
        form = new FormData();
        form.append('fileUpload', event.target.files[0]); // para apenas 1 arquivo
        var name = event.target.files[0].content.name; // para capturar o nome do arquivo com sua extenção
    });*/

	const getMeioPagamentoSelecionado = () => {
		return $('.meio-pagamento__tab-pagamento.active').data('pagamento_tipo');
	}

	$(document).on('click','#btnCloseEntendi', function(){
		$.ajax({
			url  	 :'/confirmar-alerta',
			type 	 :'POST',
			data 	 : {alerta : 0},
			dataType : 'JSON',
			success:function(data){
				$('.card-alert').addClass('hidden');
				$('.card-wrapper').removeClass('hidden');
			},
			error:function(data){

			},
			complete:function(){

			}
		});
	});

	let recaptchaToken = null;
	let isSubmitting = false;

	function onRecaptchaSuccess(token) {
		recaptchaToken = token;
	}

	$(document).on('click','#confirmarCompra',function(){
		if(isSubmitting){
			return false;
		}

		var $btn = $(this);
		var originalText = $btn.html();
		
		isSubmitting = true;
		$btn.prop('disabled', true).html('Processando...<i class="fa fa-spinner fa-spin"></i>');

		var sessionId = sessionStorage.getItem('checkout_session_id') || 'sess_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
		if(!sessionStorage.getItem('checkout_session_id')){
			sessionStorage.setItem('checkout_session_id', sessionId);
		}
		var idempotencyToken = 'idemp_' + Date.now() + '_' + sessionId + '_' + Math.random().toString(36).substr(2, 9);

		var form = new FormData($('#card')[0]);
		// form.append('pix-upload', $('#pix-upload')[0].files[0]);
		form.append('fileUpload', $('#fileUpload')[0].files[0]);
		form.append('tipo_adega', $('#tipo_adega').val());
		form.append('idempotency_token', idempotencyToken);

		const meioPagamentoSelecionado = getMeioPagamentoSelecionado();

		if(meioPagamentoSelecionado === 'C'){
			form.delete('tipo_deposito');
		}

		$.ajax({
			url:'/confirmar-compra',
			type:'POST',
			processData: false,
            contentType: false,
			data:form,
			beforeSend:function(){
				$('.carregando').fadeIn();
			},
			success:function(data){

				if(data.status){

					alertUtil.alertSuccess(data.message);
					finishDownOver();

					setTimeout(function(){
						window.location.href="/perfil/confirmacao-compra/" + data.id;
					},1200);
				}else{
					if(data.tentativasCartao && data.tentativasCartao >= 2){
						$('.recaptcha').removeClass('hidden');
					}
					alertUtil.alertError(data.message);
					isSubmitting = false;
					$btn.prop('disabled', false).html(originalText);
				}
			},
			error:function(data){
				alertUtil.alertError('Erro ao processar a compra. Tente novamente mais tarde.');
				isSubmitting = false;
				$btn.prop('disabled', false).html(originalText);
			},
			complete:function(){
				$('.carregando').fadeOut();
			}
		});
	});
</script>

<script>
	function ordenaCampos(){
		if(screen.width <= 991){
			var $campos = $('.mob-campos');


			/** Adiciona nome */
			var $nome = $('.nome-div').clone();
			$('.nome-div').remove();
			$nome.find('input').attr('tabindex', 1);
			$campos.append($nome);

			/** Adiciona cep */
			var $cep = $('.cep-div').clone();
			$('.cep-div').remove();
			$cep.find('input').attr('tabindex', 2);
			$campos.append($cep);

			/** Adiciona pais */
			var $pais = $('.pais-div').clone();
			$('.pais-div').remove();
			$pais.find('input').attr('tabindex', 3);
			$campos.append($pais);

			/** Adiciona estado */
			var $estado = $('.estado-div').clone();
			$('.estado-div').remove();
			$estado.find('input').attr('tabindex', 4);
			$campos.append($estado);

			/** Adiciona cidade */
			var $cidade = $('.cidade-div').clone();
			$('.cidade-div').remove();
			$cidade.find('input').attr('tabindex', 5);
			$campos.append($cidade);

			/** Adiciona rua */
			var $rua = $('.rua-div').clone();
			$('.rua-div').remove();
			$rua.find('input').attr('tabindex', 6);
			$campos.append($rua);

			/** Adiciona numero */
			var $numero = $('.numero-div').clone();
			$('.numero-div').remove();
			$numero.find('input').attr('tabindex', 7);
			$campos.append($numero);

			/** Adiciona bairro */
			var $bairro = $('.bairro-div').clone();
			$('.bairro-div').remove();
			$bairro.find('input').attr('tabindex', 8);
			$campos.append($bairro);

			/** Adiciona complemento */
			var $complemento = $('.complemento-div').clone();
			$('.complemento-div').remove();
			$complemento.find('input').attr('tabindex', 9);
			$campos.append($complemento);
		}
	}

	$(document).ready(function(){

		/** Checkout usar saldo */
		$(document).on('click', '#usar-saldo', function(){

			var usar_saldo = $(this).is(':checked');
			usar_saldo     = usar_saldo ? 1 : 0;
			checkoutAtualizarSaldo(usar_saldo);

			if(window.screen.width < 1024){
				$('.uso-saldo .r-saldo').slideToggle();
			}

		});

		ordenaCampos();

        function inputHandler(masks, max, event) {
            var c = event.target;
            var v = c.value.replace(/\D/g, '');
            var m = c.value.length > max ? 1 : 0;
            VMasker(c).unMask();
            VMasker(c).maskPattern(masks[m]);
            c.value = VMasker.toPattern(v, masks[m]);
        }

        function inputMaskNumber(masks, max, event) {
	        var c = event.target;
	        var v = c.value.replace(/\D/g, '');
	        var m = c.value.length > max ? 1 : 0;
	        VMasker(c).unMask();
	        VMasker(c).maskPattern(masks[m]);
	        c.value = VMasker.toPattern(v, masks[m]);
	    }

	    if($('[name="telefone"]').length){
	        var telMask = ['(99) 9999-9999', '(99) 99999-9999'];
	        var tel = document.querySelector('[name="telefone"]');
	        VMasker(tel).maskPattern(telMask[0]);
	        tel.addEventListener('input', inputMaskNumber.bind(undefined, telMask, 14), false);
	        // telefone: $telefone.replace(/[^0-9]/g, '')
	    }

		if($('[name="expiry"]').length){
			var expiryMask = ['99 / 99'];
			var expiry = document.querySelector('[name="expiry"]');
			VMasker(expiry).maskPattern(expiryMask[0]);
		}

		if($('[name="cvc"]').length){
			var cvcMask = ['9999'];
			var cvc = document.querySelector('[name="cvc"]');
			VMasker(cvc).maskPattern(cvcMask[0]);
		}

		$('#card').card({
			// a selector or DOM element for the container
			// where you want the card to appear
			container: '.card-wrapper', // *required*

			// all of the other options from above
			placeholders: {
				number: '**** **** **** ****',
				name: 'John Doe',
				expiry: '**/**',
				cvc: '***'
			}
		});

		$('#pais').change(function(){
			setCidade($(this).val(), null, null);
		});

		$('#estado').change(function(){
			setCidade(null, $(this).val(), null);
		});

		$('#cep').mask('99999-999');

		$('#cep').blur(function(){

			var cep    = $(this).val().replace('-', '').replace('.', '');
			var verify = $.trim(cep);

			/** Loading **/
			$('.address-div .default-input, .address-div .default-select').attr('disabled', true);
			$('.cep-div .fa').removeClass('hidden');

			if(verify){
				console.log('here')
				$.ajax({
					url: "/admin/getcep",
					dataType: 'json',
					type: 'POST',
					data: {
						'cep': verify,
						'_token': $('[name="_token"]').val()
					},
					success: function(resultadoCEP) {

						if (resultadoCEP.status) {

                           $('#bairro').val(unescape(resultadoCEP.bairro));
                           $('#logradouro').val(unescape(resultadoCEP.logradouro));
                           $('#complemento').val(unescape(resultadoCEP.complemento));

                           atualizarCidadesEstado(resultadoCEP.uf, resultadoCEP.cidade);

                           $('#numero').focus();

                      	}

					},
					error: function(xhr, ajaxOptions, thrownError) {
						//alertUtil.alertError(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
					}
				});

			}else{
				//remove loading
				$('.address-div .default-input, .address-div .default-select').attr('disabled', false);
				$('.cep-div .fa').addClass('hidden');
				alertUtil.alertWarning('Você deve preencher o campo CEP.');
			}

		});
	});


	var flag = true;
	function setCidade(pais_id = null, estado_id = null, cidade_id = null){
		if(flag){
			flag = false;
			if(!pais_id){
				pais_id = $('#pais').val();
			}else{
				$('#pais').val(pais_id);
			}
			$.ajax({
				url:'/estado/buscar-estados-pais',
				type:'POST',
				data:{
					pais_id: pais_id
				},
				success:function(data){
					$('[name="estado_id"]').html('');
					$.each(data, function(key , obj){
						var selected = (obj.id == estado_id) ? 'selected' : '';
						$('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
					});

					if(!estado_id){
						estado_id = $('#estado').val();
					}

					$.ajax({
						url:'/cidade/buscar-cidades-estado',
						type:'POST',
						data:{
							estado_id: estado_id
						},
						success:function(data){
							$('[name="cidade_id"]').html('');
							$.each(data, function(key , obj){
								var selected = (obj.id == cidade_id) ? 'selected' : '';
								$('[name="cidade_id"]').append('<option '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
							});
							$('[name="cidade_id"]').trigger('change');
							flag = true;
						}
					}).done(function(){
						/** Remove loading **/
						$('.address-div .default-input, .address-div .default-select').attr('disabled', false);
						$('.cep-div .fa').addClass('hidden');
					});
				}
			});
		}


	}

	function atualizarCidadesEstado(uf = null, cidade = null){

		flag = false;

          var pais_id = 1; // Brasil
          $('#pais option').prop('selected', false);
          $('#pais option[value="'+pais_id+'"]').prop('selected', true);
          $('#pais').trigger('change');

          $.ajax({
          	url:'/estado/buscar-estados-pais',
          	type:'POST',
          	data:{
          		pais_id: pais_id
          	},
          	success:function(data){
          		$('[name="estado_id"]').html('');
          		$.each(data, function(key , obj){
          			var selected = (obj.id == estado_id) ? 'selected' : '';
          			$('[name="estado_id"]').append('<option data-uf="'+obj.sigla+'" '+selected+' value="'+obj.id+'">'+obj.nome+'</option>');
          		});


          		if(uf){
          			$('[name="estado_id"] option').prop('selected', false);
          			$('[name="estado_id"] option[data-uf="'+uf+'"]').prop('selected', true);
          			$('[name="estado_id"]').trigger('change');
          		}

          		var estado_id = $('[name="estado_id"] option:selected').val();
          		$.ajax({
          			url: "/cidade/buscar-cidades-estado",
          			type: "post",
          			data: {
          				estado_id:estado_id,
          			},
          			success:function(data){
          				$('[name="cidade_id"]').html('');
          				$.each(data,function(key , data){
          					var selectedCidade = (cidade && cidade == data.nome) ? 'selected' : '';
          					$('[name="cidade_id"]').append('<option '+selectedCidade+' value="'+data.id+'">'+data.nome+'</option>')
          				});

          				flag = true;
          			},
          		}).done(function(){
					/** Remove loading **/
					$('.address-div .default-input, .address-div .default-select').attr('disabled', false);
					$('.cep-div .fa').addClass('hidden');
					$('[name="numero"]').focus();
				});


          	}
          });



      }
</script>