<?php $__env->startSection('content'); ?>

<?php echo $__env->make('perfil/menu-lateral', ['configMenuLateral' => $configMenuLateral], array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>

<div class="minha-conta__right">
	<div class="box">
		<h2 class="title">Meus Cartões</h2>
		<div class="cartoes-list">
			<?php if(count($cartoes)){ ?>

				<?php foreach ($cartoes as $cartao): ?>
					<div class="cartao-item" data-cartao="<?php echo $cartao->id; ?>">
						<div class="flex-between">
							<?php if ($cartao->info->getBrand() == "mastercard"){ ?>
								<h3 class="cartao-item__title"><img src="img/site/pagamento/<?php echo $cartao->info->getBrand(); ?>-v2.svg" ?> Cartão <?php  echo $cartao->info->getBrand(); ?> <?php echo $cartao->info->getLastDigits(); ?></h3>
							<?php }else{ ?>
								<h3 class="cartao-item__title"><img src="img/site/pagamento/<?php echo $cartao->info->getBrand(); ?>.svg" ?> Cartão <?php  echo $cartao->info->getBrand(); ?> <?php echo $cartao->info->getLastDigits(); ?></h3>
							<?php } ?>

							<div class="acao">
								<button class="btn-green <?php echo $cartao->principal ? 'disable' : ''; ?> definirPrincipal"><i class="fa fa-check fa-fw"></i><?php echo $cartao->principal ? 'Principal' : 'Definir como principal'; ?></button>
								<button class="btn-red removerCartao"><i class="fa fa-times fa-fw"></i>Excluir</button>
							</div>
						</div>
					</div>
				<?php endforeach ?>
			<?php }else{ ?>
				<h4><i> Você não possui nenhum cartão adicionado.</i></h4>
			<?php } ?>
		</div>

		<button type="button" class="minha-conta__button-orange" id="adicionar-cartao">Adicionar novo Cartão</button>
		<div class="pagamento">
			<div class="spacer"></div>
			<form id="card">
				<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" required 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" required class="default-input" style="text-transform:uppercase" type="text">
				</div>
				<div class="flex-between">
					<div class="item">
						<label for="">Validade</label>
						<input placeholder="MM/AA" name="expiry" required class="default-input" type="text" maxlength="7">
					</div>
					<div class="item">
						<label for="">Código de Segurança (CVV)</label>
						<input placeholder="3 dígitos" name="cvc" required class="default-input" type="text">
					</div>
				</div>
				<div class="item<?php echo (isset($tentativasCartao) && $tentativasCartao < 2 ? " hidden" : "");?>" style="margin-top: 25px;" id="recaptcha">
					<?php echo Recaptcha::render(); ?>

				</div>

				<div class="cartoes__salvar-cartao">
					<button type="submit" id="salvar-cartao" class="minha-conta__button-blue">Salvar cartão</button>
				</div>
			</form>
		</div>
	</div>
</div>
</div>
</div>
</section>
<script>
	$(document).on('click', '.definirPrincipal', function(){
		var button = $(this);
		var cartaoItem = $(this).closest('.cartao-item');
		$.ajax({
			headers: {
				'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
			},
			url:'/perfil/definir-cartao-principal',
			type:'POST',
			data:{
				id: cartaoItem.data('cartao')
			},
			beforeSend:function(){
				//$('.carregando').fadeIn();
			},
			success:function(data){
				if(data.status){
					//cartaoItem.remove();
					$('.definirPrincipal.disable').html('<i class="fa fa-fw fa-check"></i> Definir como principal');
					$('.definirPrincipal.disable').removeClass('disable');
					button.addClass('disable');
					button.html('<i class="fa fa-fw fa-check"></i> Principal');
				}else{
					alertUtil.alertError(data.message);
				}
				//$('.carregando').fadeOut();
			}
		});
	});


	$(document).on('click', '.removerCartao', function(e){
                $button = $(this);

                swal({
                     className: "alert-confirm",
                     /*title: "Are you sure?",*/
                     text: "Tem certeza de que deseja excluir este registro?",
                     /*icon: "warning",*/
                     buttons: {
                       cancel: {
                         text: "Não",
                         value: null,
                         visible: true,
                         className: "btn-action",
                         closeModal: true,
                       },
                       confirm: {
                         text: "Sim",
                         value: true,
                         visible: true,
                         className: "btn-save",
                         closeModal: true
                       }
                     },
                     /*dangerMode: true,*/
                })
                .then((willDelete) => {
                  if (willDelete) {
                    cartaoItem = $(this).closest('.cartao-item');
					$.ajax({
						headers: {
							'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
						},
						url:'/perfil/excluir-cartao',
						type:'POST',
						data:{
							id: cartaoItem.data('cartao')
						},
						beforeSend:function(){
							//$('.carregando').fadeIn();
						},
						success:function(data){
							if(data.status){
								cartaoItem.remove();
							}else{
								alertUtil.alertError(data.message);
							}
							//$('.carregando').fadeOut();
						}
					});
                  }
                });







           });

	$(document).on('click','#adicionar-cartao',function(e){
		e.preventDefault();
		if($('.pagamento').is(':visible')){
			$('.pagamento').slideUp();
		}else{
			$('.pagamento').slideDown();
		}

	});

	$(document).on('submit','#card',function(e){
		e.preventDefault();
		$.ajax({
			url:'/perfil/salvar-cartao',
			type:'POST',
			data:$(this).serialize(),
			beforeSend:function(){
				$('.carregando').fadeIn();
			},
			success:function(data){
				if(data.status){
					alertUtil.alertSuccess(data.message);
					if($('.cartoes-list .cartao-item').length == 0){
						$('.cartoes-list').html(data.html);
					}else{
						$('.cartoes-list').append(data.html);
					}
					$('.pagamento').slideUp();
					$('[name="expiry"],[name="cvc"],[name="number"],[name="name"]').val('');
				}else{
					if(data.tentativasCartao && data.tentativasCartao >= 2){
						$('#recaptcha').removeClass('hidden');
					}
					alertUtil.alertError(data.message);
				}
				$('.carregando').fadeOut();
			}
		});
	});
</script>

<script>
	$(document).ready(function(){
		$('#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: '***'
			}
		});

		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]);
		}
	});

</script>

<?php $__env->stopSection(); ?>

<?php echo $__env->make('layouts.website', array_except(get_defined_vars(), array('__data', '__path')))->render(); ?>