<head>
	<script src="%%GLOBAL_ShopPathSSL%%/modules/checkout/psapi/js/desktop.js?%%GLOBAL_TOKEN%%"></script>
	<script type="text/javascript"> 
		$.getScript("https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.directpayment.js", 
			function(data){
				PagSeguroDirectPayment.setSessionId('%%GLOBAL_Auth_Ps%%'); 
				HashCliente();
			}
		);

		function CartaoDigitado() {
			var cartao = $("#numero_cartao").val();
			var cartao = cartao.replace(/\D/g,'');
			PagSeguroDirectPayment.getBrand({
				cardBin: cartao,
				success: function(response) {
					$('#numero_cartao').css({"background": "url(https://stc.pagseguro.uol.com.br/public/img/payment-methods-flags/42x20/"+response.brand.name+".png) no-repeat", "background-position": "right", "background-position-x": "95%"});
					$('#hide_cartao').html('<img src="%%GLOBAL_ShopPathSSL%%/modules/checkout/psapi/images/hd_ccBrandConsult_gs.png">');
					$('#bandeira_cc').val(response.brand.name);
					CarregarParcelasPagSeguro();
					HashCliente();
				},
				error: function(response) {
				swal('Número cartão inválido ou bandeira não aceita!');
				},
				complete: function(response) {
					console.log(response);
				}
			});
		}

		function HashCliente(){
			var sendhash = PagSeguroDirectPayment.getSenderHash();
			$("#sendhash").val(sendhash);
		}

		function CarregarParcelasPagSeguro(){
			$('#parcelas_pagseguro').html('<option value="">Aguarde...</option>');
			if(%%GLOBAL_SEM%% > 1){
				PagSeguroDirectPayment.getInstallments({
					amount: %%GLOBAL_TotalPedido%%,
					maxInstallmentNoInterest: %%GLOBAL_SEM%%,
					brand: $("#bandeira_cc").val(),
					success: function(response) {
						var items = '<option value="">-- Selecione --</option>';
						var parcelas = response.installments;
						var bandeira = $("#bandeira_cc").val();
						var parcela = eval("response.installments."+bandeira+"");
						$.each(parcela, function(key, val) {
							var com_sem = '';
							if(val.interestFree){
								com_sem = ' (sem juros)';
							}
							items += '<option value="' + val.quantity + '|' + val.installmentAmount.toFixed(2) + '">' + val.quantity + 'x de ' + val.installmentAmount.toFixed(2) + ' no '+bandeira+''+com_sem+'</option>';
						});
						$('#parcelas_pagseguro').html(items);
					},
					error: function(response) {
						$('#parcelas_pagseguro').html('<option value="">-- digite o cartao --</option>');
					},
					complete: function(response) {
						console.log(response);
					}
				});
			}else{
				PagSeguroDirectPayment.getInstallments({
					amount: %%GLOBAL_TotalPedido%%,
					brand: $("#bandeira_cc").val(),
					success: function(response) {
						var items = '<option value="">-- Selecione --</option>';
						var parcelas = response.installments;
						var bandeira = $("#bandeira_cc").val();
						var parcela = eval("response.installments."+bandeira+"");
						$.each(parcela, function(key, val) {
							var com_sem = '';
							if(val.interestFree){
								com_sem = ' (sem juros)';
							}
							items += '<option value="' + val.quantity + '|' + val.installmentAmount.toFixed(2) + '">' + val.quantity + 'x de ' + val.installmentAmount.toFixed(2) + ' no '+bandeira+''+com_sem+'</option>';
						});
						$('#parcelas_pagseguro').html(items);
					},
					error: function(response) {
						$('#parcelas_pagseguro').html('<option value="">-- digite o cartao --</option>');
					},
					complete: function(response) {
						console.log(response);
					}
				});
			}
		}

		function PagarBoleto(){
			document.getElementById('botao-pagar-bb').value='Processando.... Por favor, aguarde....';
			HashCliente();
			$(".styled-button-8").attr("disabled", "disabled");
			$('#form_pagamento_ps').submit();
		}
		function PagarPs(){
			if($('#titularcc').val()==''){
				swal('Digite o nome completo do titular!');
				return false;
			}

			if($('#aniversario').val()==''){
				swal('Digite a data de aniversario do titular!');
				return false;
			}

			if($('#telefoneccddd').val()==''){
				swal('Digite o ddd do telefone do titular!');
				return false;
			}

			if($('#telefonecc').val()==''){
				swal('Digite telefone do titular!');
				return false;
			}

			if($('#cpfcc').val()==''){
				swal('Digite o CPF do titular!');
				return false;
			}

			if($('#numero_cartao').val()==''){
				swal('Digite o numero do cartao valido!');
				return false;
			}
			$("#numero_cartao").mask("9999999999999?999999");

			if($('#validadeccm').val()==''){
				swal('Digite o mes de validade do cartao!');
				return false;
			}

			if($('#validadecca').val()==''){
				swal('Digite o ano de validade do cartao!');
				return false;
			}

			if($('#validadednd').val()==''){
				swal('Digite o dia de sua data de Nascimento!');
				return false;
			}

			if($('#validadednm').val()==''){
				swal('Digite o Mês de sua data de Nascimento!');
				return false;
			}
			if($('#validadedna').val()==''){
				swal('Digite o Ano de sua data de Nascimento!');
				return false;
			}

			if($('#codigo').val()==''){
				swal('Digite o codigo de seguranca do cartao!');
				return false;
			}

			if($('#parcelas_pagseguro').val()==''){
				swal('Selecione a parcela de pagamento!');
				return false;
			}
			document.getElementById('botao-pagar-cc').value='Processando.... Por favor, aguarde....';

			HashCliente();
			var cartao = $("#numero_cartao").val();
			var cartao = cartao.replace(/\D/g,'');
			var codigo = $("#codigocc").val();
			var codigo = codigo.replace(/\D/g,'');
			var param = {
				cardNumber: cartao,
				cvv: codigo,
				expirationMonth: $("#validadeccm").val(),
				expirationYear: $("#validadecca").val(),
				success: function(response) {
					$(".styled-button-8").attr("disabled", "disabled");
					$('#tokencc').val(response.card.token);
					$('#form_pagamento_ps').submit();
					return true;
				},
				error: function(response) {
					console.log(response);
					swal('Ops, algum dado informado esta incorreto ou incompleto!');
					return false;
				},
				complete: function(response) {
					console.log(response);
				}
			}
			if($("#bandeira_cc").val() != '') {
				param.brand = $("#bandeira_cc").val();
			}
			console.log(param);
			PagSeguroDirectPayment.createCardToken(param);
		}

		jQuery(function($){
			$(".class_cpf").mask("99999999999",{
				completed:function(){
					validar_fiscal_ps(this.val());
				}
			});
			$(".class_tel").mask("99999999?9");
			$(".class_ddd").mask("99");
			$(".class_card").mask("9999999999999?999999");
			$(".class_cod").mask("999?9");
		});

		function validar_fiscal_ps(fiscal){
			if(!valida_cpf(fiscal)){
				$(".class_cpf").val('');
				swal('CPF digitado incorreto!');
				return false;
			}
			return true;
		}
		
	</script>

	<script type="text/javascript">
		function TipoPg(tipo){
			$('.tabContent').hide();
			$('#'+tipo).show();
			$('#meio_pg_pagseguro').val(tipo);
		}
	</script>
</head>
<div class="FormContainer HorizontalFormContainer">
	<form id="form_pagamento_ps" action="%%GLOBAL_ShopPathSSL%%/modules/checkout/psapi/confirmar.php" autocomplete="off" method="post">
		<ul class="nav nav-pills">
  			<li style="display: %%GLOBAL_Ambotaocart%%" class="active"><a data-toggle="pill" onclick="TipoPg('cartao')" href="#cartao">Cartão de Crédito</a></li>
  			<li style="display: %%GLOBAL_AtivaBoleto%%"><a  data-toggle="pill" onclick="TipoPg('boleto')" href="#boleto">Boleto Bancário</a></li>
		</ul><br>
		<div class="tabContent" id="cartao">
			<input id="bandeira_cc" name="bandeira_cc" value="" type="hidden">
			<input id="tokencc" name="tokencc" value="" type="hidden">
			<input id="sendhash" name="sendhash" value="" type="hidden">
			<input id="meio_pg_pagseguro" name="meio_pg_pagseguro" value="cartao" type="hidden">

			<div class="form-group row">
	            <label class="col-sm-2 col-form-label">Número do cartão:</label>
	            <div class="col-sm-4">
	                <input type="text" onBlur="CartaoDigitado()" class="class_card form-control" name="numero" maxlength="19" id="numero_cartao" value="" >
	            </div>

	        </div>

	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">Títular cartão:</label>
	            <div class="col-sm-4">
	                <input type="text" class="input_psapi form-control" name="titularcc" id="titularcc" value="" size="30" maxlength="50">
	                  <small> Nome impresso no cartão .</small>
				</div>

	        </div>
		
			<div class="form-group row">
	            <label class="col-sm-2 col-form-label">Validade Cartão:</label>
	            <div class="col-sm-1">
	                <select name="mes" class="form-control" id="validadeccm" >
	                    %%GLOBAL_Meses%%
	                </select>
	            </div>
	            <div class="col-sm-1">
	                <select name="anos" class="form-control" id="validadecca" >
	                    %%GLOBAL_Anos%%
	                </select>
	            </div>
	        </div>

	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">Cód segurança:</label>
	            <div class="col-sm-2">
	                <input type="text" class="input_psapi class_cod form-control" name="T1" id="codigocc" value="" size="4">

	            <small>3 digítos atrás do cartão.</small>
	            </div>
	        </div>

	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">CPF Títular:</label>
	            <div class="col-sm-2">
	                 <input type="text" size="20" class="input_psapi class_cpf form-control" name="cpfcc" id="cpfcc" value="">
	            </div>
	        </div>
	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">Data Nascimento:</label>
	            
	            <div class="col-sm-3">
	            	<input type="date" id="aniversario" name="aniversario" data-date-format="DD/MMMM/YYYY">
	            </div>
	        </div>

	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">Telefone:</label>
	            <div class="col-sm-1">
	            	 <small>DDD</small>
	                <input class="input_psapi class_ddd form-control" size="2" type="text" name="telefoneccddd" id="telefoneccddd" value="%%GLOBAL_DDD%%">
	                
	            </div>
	            <div class="col-sm-2">
	            	<small>Fixo ou Celular</small>
	                <input class="input_psapi class_tel form-control" size="10" type="text" name="telefonecc" id="telefonecc" value="%%GLOBAL_TEL%%">
	                
	            </div>
	        </div>
	        <div class="form-group row">
	            <label class="col-sm-2 col-form-label">Parcelar:</label>
	            <div class="col-sm-3">
	               <select class="form-control" name="parcelas_pagseguro" id="parcelas_pagseguro">
	                    <option value="">Digite o cartão</option>
	                </select>
	            </div>
	            
	        </div>
	        <div class="col-sm-8">
	        	<input style="color: #FFF;" id="botao-pagar-cc" class="btn btn-primary" type="button" value="pagar com cartão de crédito" onclick="PagarPs(this)"/>
	            <br><label><img src="%%GLOBAL_ShopPathSSL%%/modules/checkout/psapi/images/pagseguro.jpg"></label>
	        </div>
	    <div>
		</div>
		</div>

		<div class="tabContent" style="display:none;" id="boleto">
			<img src="%%GLOBAL_ShopPathSSL%%/modules/checkout/psapi/images/bo.gif"><br><br>
			<input style="color: #FFF;" id="botao-pagar-bb" class="btn btn-primary" type="button" value="Finalizar Pedido via Boleto Bancário" onclick="PagarBoleto(this)"/>
		</div>

		
	</form>
</div>