{% extends "cliente/base.php" %}
{% block body %}
<div class="content-wrapper bg-light text-start">
	<div class="container-full ">
		
		<!-- Content Header (Page header) -->
		<!--div class="content-header">
			<div class="d-flex align-items-center">
				<div class="me-auto">
					<h4 class="page-title">Plano / Créditos</h4>
				</div>
			</div>
		</div-->

		<!-- Main content -->
		<section class="content">
			<div class="row">
				<div class="col-12">
					<div class="row">
						<!--div class="col-md-6">
							<div class="box bs-3 border-success" style="height: 90%;">
								<div class="box-header with-border">
									<div class="row">
										<div class="col-lg-8 col-md-12 col-6">
											<h4 class="box-title">Créditos: <strong>{{cliente.getCreditos|number_format(0, ',', '.')|default(0)}}</strong></h4>
										</div>
										
									</div>
								</div>

								{% set exitPgFor = false %}
								{% set ultimoCredito = null %}
								{% for pg in pagamentos %}
									{%if pg.getIdCreditos != null and exitPgFor == false%}
										{% set ultimoCredito = pg %}
										{% set exitPgFor = true %}
									{% endif %}
								{% endfor %}
								
								<div class="box-body" style="line-height: 10px;">
									<p>Última compra: <strong>{{ultimoCredito.getData is empty ? "--/--/----" : ultimoCredito.getData|date("d/m/Y")}}</strong></p>
									<p>Créditos: <strong>{{ultimoCredito.getCreditos|number_format(0, ',', '.')}}</strong></p>
									<p>Valor: <strong>R$ {{ultimoCredito.getValor|number_format(2, ',', '.')|default('0,00')}}</strong></p>
									<div class="col-12">
										<div class="mt-4 d-md-block d-lg-none d-none"></div>
										<a href="comprarCreditos" class="btn btn-sm btn-success waves-effect waves-light pull-right" style="margin-top: -5px;">Adicionar Créditos</a>
									</div>
								</div>
							</div>
						</div-->
						
						<div class="col-12">
							<div class="box" style="height: 90%;">
								
								
								<div class="box-header bg-purple py-3">
									<div class="row">
										<div class="col-12">
											<div class="row">
												
												<div class="col-lg-10 col-12 text-start">
													<h4 class="box-title text-white">Plano:
														<strong>
														{{planoCliente.getIdPlanos is empty ? "" : planoCliente.getIdPlanos.getNome}}
														{{planoCliente.getIdPlanos is empty or planoCliente.getIdCreditos is empty ? "" : " | "}}
														{{planoCliente.getIdCreditos is empty ? "" : planoCliente.getIdCreditos.getQtd ~ " Créditos/mês"}}
														</strong>
													</h4>
													{%if planoCliente != null%}
													<a id="configuracoesPlano" class="" href="javascript:void(0)">
														<i class="fa fa-gear text-white"></i>
													</a>
													{%endif%}
												</div>
												<div class="col-lg-2 col-12 text-end">
													{%if planoCliente != null%}
														<text class="pull-right" style="font-size: 14px; white-space: nowrap;"> 
															{%if planoCliente.getStatus == 'new'%}
																<span class="badge badge-md badge-primary"><strong>Novo</strong></span>
															{%endif%}
															{%if planoCliente.getStatus == 'active'%}
																<span class="badge badge-md bg-green-manager"><strong>Ativo</strong></span>
															{%endif%}
															{%if planoCliente.getStatus == 'new_charge'%}
																<span class="badge badge-md badge-warning"><strong>Cobrança enviada</strong></span>
															{%endif%}
															{%if planoCliente.getStatus == 'canceled'%}
																<span class="badge badge-md badge-danger"><strong>Cancelado</strong></span>
															{%endif%}
															{%if planoCliente.getStatus == 'expired'%}
																<span class="badge badge-md badge-secondary"><strong>Expirado</strong></span>
															{%endif%}
														</text>
													{%else%}
														{% if planoTeste %}
														<text class="pull-right" style="font-size: 14px; white-space: nowrap;"> 
															<span class="badge badge-md badge-pill badge-primary"><strong>Plano de teste</strong></span>
														</text>
														{%else%}
														<text class="pull-right" style="font-size: 14px; white-space: nowrap;"> 
															<span class="badge badge-md badge-pill badge-secondary"><strong>Nenhum plano ativo</strong></span>
														</text>
														{%endif%}
													{%endif%}
												</div>
											
											</div>
										</div>
									</div>
								</div>

								<div class="box-body row pb-lg-0" style="">
									<div class="col-lg-4 row col-md-6 col-12 d-flex align-items-top">
										<div class="col-12 d-flex align-items-top">
											<h6 class="text-purple">Último pagamento: <strong class="text-purple">{{planoCliente.getPagamentos[planoCliente.getPagamentos|length-1].getData is empty ? "--/--/----" : planoCliente.getPagamentos[planoCliente.getPagamentos|length-1].getData|date("d/m/Y")}}</strong></h6>
										</div>
										<div class="col-12 d-flex align-items-top">
											<h6>Vencimento: <strong>
												{%if planoTeste%}
													{{planoTeste.getDataVencimento is empty ? "--/--/----" : planoTeste.getDataVencimento|date("d/m/Y")}}
												{%else%}
													{{planoCliente.getDataVencimento is empty ? "--/--/----" : planoCliente.getDataVencimento|date("d/m/Y")}}
												{%endif%}
											</strong></h6>
										</div>
									</div>
									<div class="col-lg-4 row col-md-6 col-12 d-flex align-items-top">
										<div class="col-12 d-flex align-items-top">
											<h6 class="text-purple">Valor: <strong class="text-green-manager2">R$ {{planoCliente.getValor is empty ? "--,--" : (planoCliente.getValor + planoCliente.getIdCreditos.getValor)|number_format(2, ',', '.')}}/Mês</strong></h6>
										</div>
									</div>
									
									<div class="col row d-flex align-items-top">
										<div class="col-12 text-end">
											{%if planoCliente != null %}
												{%if planoCliente.getStatus == 'new' %}
												{%endif%}
												{%if planoCliente.getStatus == 'active' %}
												<a id="cancelarPlano" data-id="{{planoCliente.getIdPlanosClientes}}" data-subscription_id="{{planoCliente.getSubscriptionId}}" href="javascript:void(0)" class="pull-right" style=""><span class="badge badge-md badge-danger"><strong>Cancelar plano</strong></span></a>
												{%endif%}
												{%if planoCliente.getStatus == 'new_charge' %}
												{%endif%}
												{%if planoCliente.getStatus == 'canceled' %}
													
													{%if 'now'|date('U') > planoCliente.getDataVencimento|date('U')%}
													<a href="contratarPlano" class="pull-right" style=""><span class="badge badge-md btn-green-manager2"><strong>Contratar Plano</strong></span></a>
													{%else%}
													<a id="reativarPlano" href="javascript:void(0)" class="pull-right" style="" data-id="{{planoCliente.getIdPlanosClientes}}"><span class="badge badge-md btn-green-manager2"><strong>Reativar Plano</strong></span></a>
													{%endif%}
												{%endif%}
												{%if planoCliente.getStatus == 'expired' %}
												<a href="contratarPlano" class="pull-right" style=""><span class="badge badge-md btn-green-manager2"><strong>Contratar Plano</strong></span></a>
												{%endif%}
											{%else%}
												<a href="contratarPlano" class="pull-right" style=""><span class="badge badge-md btn-green-manager2"><strong>Contratar Plano</strong></span></a>
											{%endif%}
										</div>
										<div class="col-12 text-end">
											{%if planoCliente.getStatus == 'active' %}
											<a id="alterarPagamento" data-id="{{planoCliente.getIdPlanosClientes}}" data-subscription_id="{{planoCliente.getSubscriptionId}}" href="javascript:void(0)" class="pull-right" style=""><span class="badge badge-md badge-warning"><strong>Alterar pagamento</strong></span></a>
											{%endif%}
										</div>
									</div>
								</div>
								
							</div>
						</div>
					</div>
					
					<h4 class="box-title fw-bold text-purple">Últimos Pagamentos</h4>
					<div class="box">
					    <div class="box-body no-padding " style="overflow: hidden;">
					        <div class="table-responsive" style="max-height: 60vh; overflow: auto;">
					            <table class="table table-hover">
					                <thead class="bg-purple sticky-top" style="z-index: 1;">
					                    <tr>
					                        <th>#</th>
					                        <th><i class="fa-solid fa-calendar me-1"></i>Data</th>
					                        <th><i class="fa-solid fa-chart-simple me-1"></i>Status</th>
					                        <th><i class="fa-solid fa-comment-dots me-1"></i>Descrição</th>
					                        <th><i class="fa-solid fa-money-bills me-1"></i>Valor</th>
					                        <th><i class="fa-solid fa-wallet me-1"></i>Tipo</th>
					                        <th></th>
					                    </tr>
					                </thead>
					                <tbody>
					                    
					                </tbody>
					            </table>
					        </div>
					    </div>
					</div>


				</div>
			</div>
		</section>
		<!-- /.content -->
		
		
	</div>
</div>

<style>
	.theme-primary [type=checkbox].filled-in:checked.chk-col-primary + label:after {
	    border: 2px solid #60b86c;
	    background-color: #60b86c;
	}

	.cardTipoPagamento > .bg-light-gray *{
		color: #585EA8!important;
	}

	.cardTipoPagamento > .bg-green-manager *{
		color: #fff!important;
	}

	.card {
	    border: none!important;
	}

	.btn-light {
		background-color: #e3e3e3!important;
		border: none;
		color: #000000!important;
	}

	.fixed .content-wrapper {
	    margin-top: 0px!important;
	}
	
	@media (max-width: 768px) {
	    .fixed .content-wrapper {
	        margin-top: 75px!important;
	    }
	}
</style>
{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/gh/efipay/js-payment-token-efi/dist/payment-token-efi.min.js"></script>
<script>
$('body').addClass('sidebar-collapse');

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

$('.table-responsive').on('show.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "inherit" );
});

$('.table-responsive').on('hide.bs.dropdown', function () {
     $('.table-responsive').css( "overflow", "auto" );
})

$('#configuracoesPlano').on('click', function(){
	Swal.fire({
		title: '<span class="text-purple">Configurações Plano</span>',
		html: 
			'<div class="col-12 mt-4 mb-4 text-start">' +
				'<div class="col-md-12 form-group" style="">' +
					'<input type="checkbox" id="limitarCreditos" class="filled-in chk-col-primary" >' +
					'<label for="limitarCreditos" class="fw-bold text-purple">Limitar créditos ({{planoCliente.getIdCreditos.getQtd ~ " Créditos/mês"}})</a></label>' +
				'</div>' +
				'<span><h6>' +
					'*Ao ativar a opção \'Limitar créditos\' a API/Lista de transmissão será bloqueada caso atingir o limite contratado no mês atual.<br>' +
					'Estando desativada, envios da API/Lista de transmissão que ultrapassarem o limite contratado será cobrado na próxima fatura.' +
				'</h6></span>' +
			'</div>' +
			'<div class="text-start mt-3">' +
				'<a class="btn btn-green-manager2 btn-sm text-start" href="javascript:void(0)" id="salvarConfiguracoesPlano"><i class="fa fa-save me-1"></i>Salvar</a>' +
			'</div>'
			,
		showConfirmButton: false,
		showCloseButton: true,
		allowOutsideClick: false,
		width: 600,
		didOpen: () => {
			Swal.getCloseButton().blur();
			
			{%if planoCliente != null %}
				{%if planoCliente.getLimitarCreditos == '1'%}
					$('#limitarCreditos').attr('checked', true);
				{%else%}
					$('#limitarCreditos').attr('checked', false) 
				{%endif%}
			{%endif%}
			
			$('#salvarConfiguracoesPlano').on('click', function(){
				var limitarCreditos = ($('#limitarCreditos').is(':checked') == true ? 1 : 0);
				Swal.close();
				
				Swal.fire({title : 'Salvando configurações', allowOutsideClick: false, scrollbarPadding: false});
				Swal.showLoading();
				
				fetch('salvarConfiguracoesPlano', {
					method: 'POST',
					headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					body: 'idPlanosClientes={{planoCliente.getIdPlanosClientes}}' +
							'&limitarCreditos=' + limitarCreditos
				})
				.then(function(res){ return res.json(); })
				.then(function(res){
					if(res.Success){
						Swal.close();
						
						Swal.fire({
							title: 'Configurações alteradas',
							scrollbarPadding: false,
							icon: 'success',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							location.reload();
						})
					}else{
						Swal.fire({
							title: res.Erro,
							scrollbarPadding: false,
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							//location.reload();
						})
					}
				})
			})
			
			
		}
	}).then(() =>{
		
	})
})



$('.pagarPix').on('click', function(){
	let qrcode = $(this).data('qrcode')
	let qrcodeimage = $(this).data('qrcodeimage')
	let pdf = $(this).data('pdf')
	Swal.fire({
		title: '<span class="text-purple">Pagar Com PIX</span>',
		html: 
					'<div class="col-12 mt-4 mb-4 text-center">' +
						'<div class="mx-auto" style="max-height:30vh; min-height:30vh; max-width: 30vh; min-width:30vh;">' +
							'<img id="imgQrCode" class="card p-3" style="max-height:30vh; min-height:30vh; max-width: 30vh; min-width:30vh;" src="'+qrcodeimage+'" />' +
						'</div>' +
						'<p id="qrCodeCopiar" class="mt-3 mb-4">'+ qrcode +'</p>' +
						
						'<a id="visualizarBoleto" href="'+pdf+'" target="_blank" class="">' +
							'<button type="submit" class="btn btn-green-manager2 mt-1"><i class="fa fa-print"></i> Visualizar boleto</button>' +
						'</a><br>' +
						
						'<button id="btnCopiarQrCode" type="button" onclick="copyStringToClipboard(\''+ qrcode +'\')" class="btn btn-green-manager mt-1"><i class="fa fa-clipboard"></i> Copiar código</button>' +
					'</div>' +
					
					'<h6 class="mb-4 fw-bold"><i class="fa-solid fa-triangle-exclamation me-1 text-purple"></i>A confirmação do pagamento pode lever até 48 horas</h6>'
			,
		showConfirmButton: false,
		showCloseButton: true,
		width: 600,
		didOpen: () => Swal.getCloseButton().blur()
	})
})

function copyStringToClipboard(str) {
   var el = document.createElement('textarea');
   el.value = str;
   el.setAttribute('readonly', '');
   el.style = {position: 'absolute', left: '-9999px'};
   document.body.appendChild(el);
   el.select();
   document.execCommand('copy');
   document.body.removeChild(el);

   
   //MENSAGEM DE COPIADO COM SUCESSO
   Swal.fire({
	  icon: 'success',
	  title: 'Sucesso!',
	  text: 'Copiado com sucesso!',
	  showConfirmButton: false,
	  timer: 1500
	})
}

$('#cancelarPlano').on('click', function(){
	let subscription_id = $(this).data('subscription_id');
	let id = $(this).data('id');
	
	Swal.fire({
	  title: '<span class="text-purple">Cancelar plano?</span>',
	  html: 'Após o cancelamento você poderá utilizar os recursos do ChatManager até a data de vencimento. <br><br>Deseja cancelar seu plano ?',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Manter Assinatura',
	  cancelButtonText: 'Cancelar Plano',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  cancelButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isDismissed){
			if(result.dismiss == 'cancel'){
				Swal.fire({title : 'Cancelando plano...', allowOutsideClick: false, scrollbarPadding: false});
				Swal.showLoading();
				
				fetch('cancelaAssinaturaPlano', {
					method: 'POST',
					headers: {'Content-Type': 'application/x-www-form-urlencoded'},
					body: 'id=' + id
				})
				.then(function(res){ return res.json(); })
				.then(function(res){
					if(res.Success){
						Swal.fire({
							title: 'Plano cancelado',
							text: res.Success,
							scrollbarPadding: false,
							icon: 'success',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							location.reload();
						})
					}else{
						Swal.fire({
							title: 'Não foi possível cancelar o plano',
							text: res.Erro,
							scrollbarPadding: false,
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)',
							scrollbarPadding: false
						}).then(() =>{
							//location.reload();
						})
					}
				})
			}
		}
	})
})

$('#reativarPlano').on('click', function(){
	let id = $(this).data('id');
	
	Swal.fire({
	  title: 'Reativar plano ?',
	  html: 'Deseja reativar sua assinatura ?',
	  icon: 'question',
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Reativar Assinatura',
	  cancelButtonText: 'Cancelar',
	  scrollbarPadding: false,
	  allowOutsideClick: false,
	  confirmButtonColor: 'var(--bs-success)',
	  cancelButtonColor: 'var(--bs-danger)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.swal2-close').blur()
	  }
	}).then((result) => {
		if(result.isConfirmed){
			Swal.fire({title : 'Reativando plano...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			fetch('reativarPlano', {
				method: 'POST',
				headers: {'Content-Type': 'application/x-www-form-urlencoded'},
				body: 'id=' + id
			})
			.then(function(res){ return res.json(); })
			.then(function(res){
				if(res.Success){
					Swal.fire({
						title: 'Plano reativado',
						text: res.Success,
						scrollbarPadding: false,
						icon: 'success',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						location.reload();
					})
				}else{
					Swal.fire({
						title: 'Não foi possível reativar o plano',
						text: res.Erro,
						scrollbarPadding: false,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)',
						scrollbarPadding: false
					}).then(() =>{
						//location.reload();
					})
				}
			})
		}
	})
})

$('#alterarPagamento').on('click', async function(){
	let subscription_id = $(this).data('subscription_id');
	let id = $(this).data('id');
	
	var width = ((isMobile || window.innerWidth < 980) ? 'auto' : '50vw');
	
	Swal.fire({
	  title: '<span class="text-purple">Alterar pagamento</span>',
	  width: width,
	  html: 
		'<div class="m-2 px-2">' +
			"<h5 class='fw-bold'>Forma de pagamento atual: <b class='fw-bold text-purple'>{%if planoCliente.getPaymentToken == null %}Boleto{%else%}Cartão ({{planoCliente.gerCardMask|replace({'X':''})}}){%endif%}</b></h5><br>" +
			'<h5 class="fw-bold text-purple">Selecione a forma de pagamento desejada</h5>' +
			'<div class="w-p100 text-center">' +
				'<div class="d-flex row g-3 justify-content-center">' +
					'<div class="col-xxl-2 col-lg-4 col-5 animation cardTipoPagamento" data-tipo="PIX">' +
						'<div class="card d-flex align-items-center py-2 bg-light-gray bg-green-manager" style="cursor: pointer;">' +
							'<div>' +
								'<i class="fab fa-pix me-2" style="font-size: 46px;"></i>' +
							'	<i class="fa fa-barcode" style="font-size: 46px;"></i>' +
							'</div>' +
							'<h4 class="mt-3 mb-0">Pix/Boleto</h4>' +
						'</div>' +
					'</div>' +
					'<div class="col-xxl-2 col-lg-4 col-5 animation cardTipoPagamento" data-tipo="CARTAO">' +
						'<div class="card d-flex align-items-center bg-light-gray py-2" style="cursor: pointer;">' +
							'<i class="far fa-credit-card" style="font-size: 46px;"></i>' +
							'<h4 class="mt-3 mb-0">Cartão</h4>' +
						'</div>' +
					'</div>' +
				'</div>' +
				'<div class="demo-radio-button d-none">' +
					'<input name="radio_pagamento" type="radio" id="cartao_credito" class="radio-col-primary" checked />' +
					'<label for="cartao_credito"><i class="mdi mdi-credit-card"></i> Cartão de Crédito</label>	' +				
					'<input name="radio_pagamento" type="radio" id="pix" class="radio-col-primary" />' +
					'<label for="pix"><i class="mdi mdi-qrcode"></i> Pix</label>' +
				'</div>' +
			'</div>' +
			'<div id="dados_cartao" class="row d-none">' +
				'<div class="col-12">' +
					'<div class="form-group text-start">' +
						'<label for="nome_cartao" class="form-label fw-bold text-purple">Nome :</label>' +
						'<input type="text" class="form-control border-0 bg-light-gray" id="nome_cartao">' +
					'</div>' +
					'<div class="form-group text-start">' +
						'<label for="numero_cartao" class="form-label fw-bold text-purple">Número :</label>' +
						'<input type="text" class="form-control border-0 bg-light-gray" id="numero_cartao" placeholder="" value="">' +
					'</div>' +
					'<div class="form-group">' +
						'<div class="row">' +
							'<div class="col-md-4 col-12 text-start">' +
								'<label for="mes_cartao" class="form-label fw-bold text-purple">Mês :</label>' +
								'<select data-container="body" class="form-control selectpicker" id="mes_cartao" data-placeholder="Mês" name="mes_cartao">' +
									'<option value="" selected>Selecione um mês</option>' +
									'<option value="01">01</option><option value="02">02</option><option value="03">03</option>' +
									'<option value="04">04</option><option value="05">05</option><option value="06">06</option>' +
									'<option value="07">07</option><option value="08">08</option><option value="09">09</option>' +
									'<option value="10">10</option><option value="11">11</option><option value="12">12</option>' +
								'</select>' +
							'</div>' +
							'<div class="col-md-4 col-12 text-start">' +
								'<label for="ano_cartao" class="form-label">Ano :</label>' +
								'<select data-container="body" class="form-control selectpicker" id="ano_cartao" data-placeholder="Ano" name="ano_cartao">' +
									'<option value="">Selecione um ano</option>' +
									{% for year in "now"|date('Y').."now"|date('Y')+20 -%}
									  '<option value="{{ year }}">{{ year }}</option>' +
									{% endfor %}
								'</select>' +
							'</div>' +
							'<div class="col-md-4 col-12 text-start">' +
								'<label for="cvv_cartao" class="form-label fw-bold text-purple">CVV :</label>	' +									
								'<input type="text" class="form-control border-0 bg-light-gray" name="cvv_cartao" id="cvv_cartao" placeholder="" value="" >' +
							'</div>' +
						'</div>' +
					'</div>' +
				'</div>' +
			'</div>' +
			'<div id="dados_pix" class="row">' +
				'<div class="col-12 text-center">' +
					'<h6></h6>' +
				'</div>' +
			'</div>' +
		'</div>' ,
	  showCloseButton: true,
	  showCancelButton: true,
	  focusConfirm: false,
	  confirmButtonText: 'Alterar',
	  cancelButtonText: 'Cancelar',
	  allowOutsideClick: false,
	  confirmButtonColor: '#60b86c',
	  cancelButtonColor: 'var(--bs-secondary)',
	  scrollbarPadding: false,
	  didOpen: () => {
		$('.selectpicker').selectpicker();
		$('.swal2-close').blur();
		
		$('#numero_cartao').mask('0000 0000 0000 0000');
		$('#cvv_cartao').mask('0000000');
		
		$('.cardTipoPagamento').on('click', function(){
			if($(this).data('tipo') == 'CARTAO'){
				$('#cartao_credito').trigger('click');
			}else{
				$('#pix').trigger('click');
			}
		})

		$('#cartao_credito,#pix').on('click', function(){
			let selected = $(this).attr('id');
			if($($(this).attr('id') + ':checked')){
				switch(selected){
					case 'cartao_credito':
						tipoPagamento = 'CARTAO';
						$('#dados_cartao').removeClass('d-none');
						(!$('#dados_pix').hasClass('d-none') ? $('#dados_pix').addClass('d-none') : '');
						$('.cardTipoPagamento[data-tipo="CARTAO"] div').addClass('bg-green-manager');
						$('.cardTipoPagamento[data-tipo="PIX"] div').removeClass('bg-green-manager');
						break;
					case 'pix':
						tipoPagamento = 'PIX';
						(!$('#dados_cartao').hasClass('d-none') ? $('#dados_cartao').addClass('d-none') : '');
						$('#dados_pix').removeClass('d-none');
						$('.cardTipoPagamento[data-tipo="PIX"] div').addClass('bg-green-manager');
						$('.cardTipoPagamento[data-tipo="CARTAO"] div').removeClass('bg-green-manager');
						break;
				}
				
			}
		})

	  },
	  preConfirm: (value) => {
			if($('.cardTipoPagamento[data-tipo="CARTAO"] div').hasClass('bg-green-manager')){
				switch(true){
					case $('#nome_cartao').val() == '':
						Swal.showValidationMessage('Nome não pode ser vazio')
						break;
					case $('#numero_cartao').val() == '':
						Swal.showValidationMessage('Número cartão não pode ser vazio')
						break;
					case $('#numero_cartao').val().length < 19:
						Swal.showValidationMessage('Número cartão inválido')
						break;
					case $('#mes_cartao').val() == '':
						Swal.showValidationMessage('Mês não pode ser vazio')
						break;
					case $('#ano_cartao').val() == '':
						Swal.showValidationMessage('Ano não pode ser vazio')
						break;
					case $('#cvv_cartao').val() == '':
						Swal.showValidationMessage('CVV não pode ser vazio')
						break;
				}
			}
	  }
	  
	}).then(async (result) => {
		if(result.isConfirmed){
			var numero = $('#numero_cartao').val();
			var nome = $('#nome_cartao').val();
			var mes = $('#mes_cartao').val();
			var ano = $('#ano_cartao').val();
			var cvv = $('#cvv_cartao').val();
			var isCard = $('.cardTipoPagamento[data-tipo="CARTAO"] div').hasClass('bg-green-manager');
			
			Swal.fire({title : 'Alterando forma de pagamento...', allowOutsideClick: false, scrollbarPadding: false});
			Swal.showLoading();
			
			if(isCard){
				console.log('cartao');
			}else{
				console.log('boleto');
			}
			
			if(isCard){
				if(gnCheckout === null){
					{% if GN_SANDBOX == true %}
						var s=document.createElement('script');
						s.type='text/javascript';var v=parseInt(Math.random()*1000000);
						s.src='http://sandbox.gerencianet.com.br/v1/cdn/{{GN_IDENTIFICADOR}}/'+v;
						s.async=false;s.id='{{GN_IDENTIFICADOR}}';
						if(!document.getElementById('{{GN_IDENTIFICADOR}}')){document.getElementsByTagName('head')[0].appendChild(s);};
						$gn={validForm:true,processed:false,done:{},ready:function(fn){$gn.done=fn;}};
					{%else%}
						var s=document.createElement('script');
						s.type='text/javascript';var v=parseInt(Math.random()*1000000);
						s.src='https://api.gerencianet.com.br/v1/cdn/{{GN_IDENTIFICADOR}}/'+v;
						s.async=false;s.id='{{GN_IDENTIFICADOR}}';
						if(!document.getElementById('{{GN_IDENTIFICADOR}}')){document.getElementsByTagName('head')[0].appendChild(s);};
						$gn={validForm:true,processed:false,done:{},ready:function(fn){$gn.done=fn;}};
					{%endif%}
					
					$gn.ready(function (checkout) {
						getToken(checkout, numero,nome,mes,ano,cvv)
					});
				}
			}else{
				alterarFormaDePagamento(null,null);
			}
			
		}
	})
})


let gnCheckout = null;
async function getToken(checkout, numero, nome, mes, ano, cvv) {
	//$.getScript("assets/js/bandeiraCartao.js", function(data, textStatus, jqxhr) {
	//let bandeira = bandeiraCartao.getCardFlag($('#numero_cartao').val());
	gnCheckout = checkout;
	EfiJs.CreditCard.setCardNumber(numero.replaceAll(' ','')).verifyCardBrand()
	.then(bandeira => {
		//console.log('Bandeira: ', bandeira);
		if (bandeira !== 'undefined') {
			// Exemplo: executar a função para gerar o payment_token com a bandeira identificada
			var data = {
				brand: bandeira, // bandeira do cartão
				number: numero.replaceAll(' ', '').toString(), // número do cartão 4012001038443335
				cvv: cvv.toString(), // código de segurança 123
				expiration_month: mes.toString(), // mês de vencimento 05
				expiration_year: ano.toString(), // ano de vencimento 2021
				reuse: true
			};
			gnCheckout.getPaymentToken(data
			,
			function (error, response) {
				if (error) {
					//console.log(error);
					// Trata o erro ocorrido
					//console.error(error);
					let erro = error.error_description;
					erro = erro.replace('parâmetro [number]', 'Número'); 
					erro = erro.replace('parâmetro [cvv]', 'CVV'); 
					erro = erro.replace('parâmetro [expiration_month]', 'Mês'); 
					erro = erro.replace('parâmetro [expiration_year]', 'Ano'); 
					Swal.fire({
						title: 'Cartão inválido',
						title: erro,
						icon: 'error',
						confirmButtonColor: 'var(--bs-info)'
					})
					return false;
				} else {
					// Trata a resposta
					//console.log(response);
					if(response.data.payment_token){
						payment_token = response.data.payment_token;
						card_mask = response.data.card_mask;
						
						//console.log(payment_token);
						//console.log(card_mask);
						alterarFormaDePagamento(card_mask,payment_token)
					}else{
						Swal.fire({
							title: 'Erro',
							text: 'Não foi possível verificar o cartão, tente novamente',
							icon: 'error',
							confirmButtonColor: 'var(--bs-info)'
						})
						return false;
					}
				}
			});
		}else{
			Swal.fire({
				title: 'Cartão inválido',
				text: 'Não foi possível verificar a bandeira do cartão',
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)'
			})
			
			return false;
		}
	}).catch(err => {
		Swal.fire({
			title: 'Erro desconhecido',
			text: 'Não foi possível processar as informações do cartão, tente novamente',
			icon: 'error',
			confirmButtonColor: 'var(--bs-info)'
		})
			
		console.log('Código: ', err.code);
		console.log('Nome: ', err.error);
		console.log('Mensagem: ', err.error_description);
	});
}

function alterarFormaDePagamento(card_mask,payment_token){
	let formData = new FormData();
	formData.append('id', {{planoCliente.getIdPlanosClientes}});
	formData.append('card_mask', card_mask);
	formData.append('payment_token', payment_token);
	
	fetch('alterarFormaDePagamentoPlano', {
		method: 'POST',
		body: formData
	})
	.then(function(res){ return res.json(); })
	.then(function(res){
		if(res.Success){
			Swal.fire({
				title: 'Pagamento alterado',
				text: res.Success,
				scrollbarPadding: false,
				icon: 'success',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				location.reload();
			})
		}else{
			Swal.fire({
				title: 'Não foi possível reativar o plano',
				text: res.Erro,
				scrollbarPadding: false,
				icon: 'error',
				confirmButtonColor: 'var(--bs-info)',
				scrollbarPadding: false
			}).then(() =>{
				//location.reload();
			})
		}
	})
}
</script>
{% endblock %}