@extends('site.zbase::layout')
@section('content')
<div class="conteudo">
	<div class="topo-cont">
		<h2 class=" tit-pagina font-5">Pagamento</h2>
	</div>
	<div class="inner-conteudo">
		{!! Form::open(['route'=>'pagamento.finalizar', 'class'=>'wrapper-pag js-formpgto']) !!}
			<div class="coluna-1 js-coluna">
				<div class="faixa-coluna">
					<h2 class="tit-coluna font-3">1. Dados de endereço</h2>
				</div>
				<div class="inner-coluna">
					<div class="div-select-end">
                        <h3 class="subtit-coluna font-3">Selecione um dos endereços já cadastrados ou clique em "novo" para adicionar um endereço.</h3>
						<div class="wrapper-select tam-4 m-right">
                            <span class="select-mobile sm-endereco font-3"></span>
                            {!! Form::select('endereco', [], null, ['class'=>'font-2 js-select1']) !!}
						</div>
						<button class="new-end tam-2 font-5 js-novoEnd">+ Novo</button>
					</div>
					<div class="form-end">
						<div class="inner-end">
                            {!! Form::text('tipo', null, ['class'=>'input-end tam-1 font-3', 'placeholder'=>'Tipo (Ex.: Casa, Escritório...)', 'maxlength'=>'255', 'required']) !!}
                            {!! Form::text('cep', null, ['class'=>'input-end tam-1 font-3', 'placeholder'=>'CEP', 'maxlength'=>'9', 'required']) !!}
							{!! Form::text('logradouro', null, ['class'=>'input-end tam-1 font-3', 'placeholder'=>'Endereço', 'maxlength'=>'255', 'required']) !!}
							{!! Form::text('numero', null, ['class'=>'input-end tam-3 m-right font-3', 'placeholder'=>'N°', 'maxlength'=>'5', 'required']) !!}
							{!! Form::text('complemento', null, ['class'=>'input-end tam-3 font-3', 'placeholder'=>'Complemento', 'maxlength'=>'45']) !!}
							{!! Form::text('bairro', null, ['class'=>'input-end tam-1 font-3', 'placeholder'=>'Bairro', 'maxlength'=>'255', 'required']) !!}
							{!! Form::text('cidade', null, ['class'=>'input-end tam-1 font-3', 'placeholder'=>'Cidade', 'maxlength'=>'255', 'required']) !!}
							<div class="wrapper-select tam-1">
								<span class="select-mobile sm-estado font-3">{{ head(StringHelper::$estadosSelect) }}</span>
								{!! Form::select('estado', StringHelper::$estadosSelect, null, ['class'=>'font-3 js-select2']) !!}
							</div>
							{!! Form::hidden('enderecos_id', null) !!}
						</div>
						<button class="envia-card font-5 js-bt-av-1">Avançar</button>
					</div>
				</div>
			</div>
			<div class="coluna-2 js-coluna col-disable">
				<div class="faixa-coluna">
					<h2 class="tit-coluna font-3">2.Frete e formas de pagamento</h2>
				</div>
				<div class="inner-coluna2">
					<div class="div-resultado">
						<h3 class="subtit-coluna font-3">Selecione o tipo de frete</h3>
						<table class="tb-inner2 font-3 js-tablefrete">
						</table>
					</div>
				</div>
				<div class="inner-coluna2">
					<h3 class="subtit-coluna ajusta-subtit font-3">Escolha o método de pagamento</h3>
					<div class="bloco-escolha">
						<button class="bt-escolha font-5 bt-escolha-ativo" disabled="disabled" data-type="boleto">BOLETO</button>
						<button class="bt-escolha font-5" disabled="disabled" data-type="cartao">CARTÃO DE CRÉDITO</button>
						@if($usuario->has_pedido_externo)
						<button class="bt-escolha font-5" disabled="disabled" data-type="externo" style="width:100%;">PEDIDO EXTERNO</button>
						@endif
					</div>
				</div>
				<div class="inner-coluna js-pgto" data-target="boleto">
					<div class="txt-boleto font-3">
						<p>Você poderá visualizar ou imprimir o boleto após a finalização do pedido.</p>
						<p>A data de vencimento é de 5 dias após a conclusão do pedido. Após esta data, ele será invalidado.</p>
					</div>
				</div>
				<div class="inner-coluna js-pgto" data-target="cartao" style="display:none;">
					<div class="form-card">
						<div class="inner-card">
							{!! Form::text('numero_cartao', null, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Número do cartão', 'maxlength'=>'19', 'disabled']) !!}
							{!! Form::text('validade_cartao', null, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Val. do cartão', 'maxlength'=>'7', 'disabled']) !!}
							{!! Form::text('codigo_cartao', null, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Cód. segurança', 'maxlength'=>'3', 'disabled']) !!}
							<div class="wrapper-select">
								<span class="select-mobile sm-parcelamento font-3"></span>
								{!! Form::select('parcelas', [], null, ['class'=>'font-3 js-select3', 'disabled']) !!}
							</div>
							{!! Form::text('nome_titular', $usuario->nome, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Nome do Titular', 'maxlength'=>'255', 'disabled']) !!}
							{!! Form::text('cpf_titular', $usuario->cpf, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'CPF do Titular', 'maxlength'=>'14', 'disabled']) !!}
							{!! Form::text('telefone_titular', $usuario->telefone, ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Tel. do Titular', 'maxlength'=>'15', 'disabled']) !!}
							{!! Form::text('nasc_titular', $usuario->data_nascimento->format('d/m/Y'), ['class'=>'input-cartao tam-1 font-3', 'placeholder'=>'Data de nascimento', 'maxlength'=>'10', 'disabled']) !!}
						</div>
					</div>
				</div>
				@if($usuario->has_pedido_externo)
				<div class="inner-coluna js-pgto" data-target="externo" style="display:none;">
					<div class="txt-boleto font-3">
						<p>As compras efeutadas através de pedido externo não serão debitadas em cartão de crédito, nem gerarão boletos.</p>
						<p>Todas as compras efeutadas desta forma devem ser pagas periodicamente, conforme combinado previamente com a administração da loja.</p>
					</div>
				</div>
				@endif
				<button class="envia-card font-5 js-bt-av-2" disabled>Avançar</button>
			</div>
			<div class="coluna-3 js-coluna col-disable">
				<div class="faixa-coluna">
					<h2 class="tit-coluna font-3">3. Concluir pedido</h2>
				</div>
				<div class="inner-coluna">
					<h3 class="subtit-coluna font-3">Resumo do pedido</h3>
										@foreach($itens as $cada)
											<div class="produto-coluna">
						<p class="tit-prodcoluna font-5">{{ $cada->nome }}</p>
						<p class="obs-prodcoluna font-3">Qtd: {{ $cada->quantidade }}</p>
						<p class="valor-prodcoluna font-5">R$ {{ number_format($cada->preco * $cada->quantidade, 2, ',', '.') }}</p>
					</div>
					@endforeach
				</div>
            	{!! Form::hidden('subtotal', $subtotal) !!}
				<div class="inner-coluna2">
					<div class="div-resultado ajusta-divresultado">
												{!! Form::hidden('valorDesconto', $desconto) !!}
						<table class="tb-inner font-3 ajusta-tb" {{ !is_object($codigo)?'style=display:none':'' }}>
							<tr>
								<td>Desconto (-)</td>
								<td class="js-valDesc">R$ {{ number_format($desconto, 2, ',', '.') }}</td>
							</tr>
						</table>
						<table class="tb-inner font-3 js-divFrete">
							<tr>
								<td>Val. frete</td>
								<td class="js-valFrete"></td>
							</tr>
						</table>
					</div>
					<div class="inner-coluna">
						<p class="total-pagamento font-5">Total: <span class="js-valTotal">R$ {{ number_format($subtotal - $desconto, 2, ',', '.')  }}</span></p>
						{!! Form::hidden('tipoFrete', null) !!}
						{!! Form::hidden('pagamento', 'boleto') !!}
	                	{!! Form::hidden('bandeira', null) !!}
						{!! Form::hidden('senderHash', null) !!}
						{!! Form::hidden('cardToken', null) !!}
						{!! Form::submit('Finalizar', ['class'=>'finalizar font-5 js-finalizar']) !!}
						<p class="txt-boleto font-3" style="text-align:center; font-size:8pt;">OBS.: Esta compra está sendo feita no Brasil.</p>
					</div>
				</div>
			</div>
		{!! Form::close() !!}
	</div>
</div>
@include('site.zbase::modals.modal', [
    'titulo' => '',
    'mensagem' => ''
])
@endsection
@section('scripts')
<script type="text/javascript">
    var enderecos = new Array();
    var dados = new Array();

    dados['0'] = {
        logradouro: '',
        numero: '',
        complemento: '',
        bairro: '',
        cep: '',
        cidade: '',
        estado: '{{ head(array_flip(StringHelper::$estadosSelect)) }}'
    };
    @foreach($enderecos as $cada_endereco)
    enderecos.push({
        value: '{{ $cada_endereco->id }}',
        text: '{{ $cada_endereco->tipo }}'
    });
    dados['{{ $cada_endereco->id }}'] = JSON.parse('{!! $cada_endereco->toJson() !!}');
    @endforeach

    function toggleSelect () {
		var select = $('.js-select1');
		if ($(window).width() > 1024 - scrollbarWidth() && !select.hasClass('selectized')) {
			select.selectize();
		} else if ($(window).width() <= 1024 && select.hasClass('selectized')) {
			var selectized = select[0].selectize;
			selectized.destroy();
		}

        var select = $('.js-select2');
        if ($(window).width() > 1024 - scrollbarWidth() && !select.hasClass('selectized')) {
			select.selectize();
		} else if ($(window).width() <= 1024 && select.hasClass('selectized')) {
			var selectized = select[0].selectize;
			selectized.destroy();
		}

		var select = $('.js-select3');
        if ($(window).width() > 1024 - scrollbarWidth() && !select.hasClass('selectized')) {
			select.selectize();
		} else if ($(window).width() <= 1024 && select.hasClass('selectized')) {
			var selectized = select[0].selectize;
			selectized.destroy();
		}
	}

    function changeSpan (self) {
        var text = self.find('option[value="'+self.val()+'"]').text();
        self.parent().find('span').text(text);
    }

    function refreshEndereco (endereco_id) {
		var endereco = dados[endereco_id];

		$('input[name="enderecos_id"]').val(endereco_id);

		$('input[name="tipo"]').val(endereco.tipo);
		$('input[name="logradouro"]').val(endereco.logradouro);
		$('input[name="numero"]').val(endereco.numero);
		$('input[name="complemento"]').val(endereco.complemento);
		$('input[name="bairro"]').val(endereco.bairro);
		$('input[name="cep"]').val(endereco.cep);
		$('input[name="cidade"]').val(endereco.cidade);

		var select = $('.js-select2');
		if ($(window).width() > 1024 - scrollbarWidth()) {
			var selectized = select[0].selectize;
			selectized.destroy();
		}
		select.find('option[value="'+endereco.estado+'"]').attr('selected', true);
		if ($(window).width() > 1024 - scrollbarWidth()) {
			select.selectize();
		}
		changeSpan(select);
	}

	function buscarFretes (enderecos_id) {
        $('.js-trfrete').remove();
        $('.js-tablefrete').append('<tr class="js-trfrete"><td colspan="2"><p class="font-4">Por favor, aguarde...</p></td></tr>');

		var data = {
			enderecos_id:enderecos_id
		};

		$.post('{{ route('pagamento.buscaFretes') }}', data, function (data) {
            $('.js-trfrete').remove();

			if (data != false) {
                var html = '';


                for (var i in data) {
					html += '<tr class="js-trfrete" data-preco="'+data[i]['preco']+'">';
					html += '<td><button data-val="'+data[i]['value']+'" class="select-frete">'+data[i]['tipo']+'</button></td>';
					html += '<td class="valor-frete">R$ '+numeral(data[i]['preco']).format('0,0.00')+'</td>';
					html += '</tr>';
                }

                $('.js-tablefrete').append(html);
            }
		});
	}

	function changePgto (target) {
		var select = $('.js-select3');

		if (target == 'cartao') {
			$('input[name="pagamento"]').val('cartao');
			$('.js-pgto[data-target="cartao"] input').prop('disabled', false).prop('required', true);

			if ($(window).width() > 1024) {
				var selectized = select[0].selectize;
				selectized.destroy();
			}
			select.prop('disabled', false);
			if ($(window).width() > 1024) {
				select.selectize();
			}
		} else {
			$('input[name="pagamento"]').val(target);
			$('.js-pgto[data-target="cartao"] input').prop('disabled', true).prop('required', false);

			if ($(window).width() > 1024) {
				var selectized = select[0].selectize;
				selectized.destroy();
			}
			select.prop('disabled', true);
			if ($(window).width() > 1024) {
				select.selectize();
			}
		}
	}

	function changeParcelas () {
		var valor = recalculaPrecos();
		var bandeira = $('input[name="bandeira"]').val();

		if (bandeira != '') {
			PagSeguroDirectPayment.getInstallments({
			    amount: valor,
			    brand: bandeira,
			    maxInstallmentNoInterest: {{ $configuracao->parcelas_sem_juros }},
			    success: function (data) {
					var select = $('.js-select3');

			    	var options = '';
			    	for (var i in data.installments[bandeira]) {
			    		var opcao = data.installments[bandeira][i];

			    		options += '<option value="'+i+'">'+opcao.quantity+'x de R$ '+numeral(opcao.installmentAmount).format('0,0.00')+'</option>';
			    	}

					if ($(window).width() > 1024) {
						var selectized = select[0].selectize;
						selectized.destroy();
					}
					select.html(options);
					if ($(window).width() > 1024) {
						select.selectize();
					}

					changeSpan(select);
			    },
			    error: function(){},
			    complete: function(){}
			});
		}
	}

	function recalculaPrecos () {
		var subtotal = parseFloat($('input[name="subtotal"]').val());
        var desconto = 0;
        var frete = 0;
        var total = 0;

        if ($('input[name="valorDesconto"]').length) {
            desconto = parseFloat($('input[name="valorDesconto"]').val());

        	subtotal -= desconto;
        }

        if ($('.tr-ativo').attr('data-preco') != undefined) {
            frete = parseFloat($('.tr-ativo').attr('data-preco'));
        }

        total = subtotal + frete;

        $('.js-valTotal').html('R$ '+numeral(total).format('0,0.00'));

        return total;
	}

	function openModal (erro) {
		$('.js-tit').html('Atenção!');
		$('.js-msg').html(erro);
		$('.modal-alert').stop().fadeIn();
	}

    $(document).ready(function () {
		var senderHash = '';
		PagSeguroDirectPayment.setSessionId('{{ $sessionId }}');

        toggleSelect();

        $('input[name="numero"]').mask('9?9999', {placeholder:''});
		$('input[name="cep"]').mask('99999-999', {placeholder:''});
		$('input[name="numero_cartao"]').mask('9999 9999 9999 9999', {placeholder:''});
		$('input[name="validade_cartao"]').mask('99/9999', {placeholder:''});
		$('input[name="codigo_cartao"]').mask('999', {placeholder:''});
		$('input[name="cpf_titular"]').mask('999.999.999-99', {placeholder:''});
		$('input[name="telefone_titular"]').mask('(99) 9999-9999?9', {placeholder:''});
		$('input[name="nasc_titular"]').mask('99/99/9999', {placeholder:''});

        $('.js-select1, .js-select2, .js-select3').change(function () {
            changeSpan($(this));
        });

        if (enderecos[0] != undefined) {
            var select = $('.js-select1');

            if ($(window).width() > 1024 - scrollbarWidth()) {
                var selectized = select[0].selectize;
    			selectized.destroy();
            }

			var options = '';
			for (var i in enderecos) {
				options += '<option value="'+enderecos[i].value+'">'+enderecos[i].text+'</option>';
			}
			select.html(options);

            if ($(window).width() > 1024 - scrollbarWidth()) {
                select.selectize();
            }

			changeSpan(select);
			refreshEndereco(enderecos[0].value);
		} else {
			refreshEndereco('0');
		}

		$('.js-novoEnd').click(function () {
			refreshEndereco('0');
			return false;
		});

		$('.js-select1').change(function () {
			refreshEndereco($(this).val());
		});

		$('.js-bt-av-1').click(function () {
			var este = $(this);
			var bloco = este.closest('.js-coluna');

			var data = {
				enderecos_id: $('input[name="enderecos_id"]').val(),
				tipo: $('input[name="tipo"]').val(),
				cep: $('input[name="cep"]').val(),
				logradouro: $('input[name="logradouro"]').val(),
				numero: $('input[name="numero"]').val(),
				complemento: $('input[name="complemento"]').val(),
				bairro: $('input[name="bairro"]').val(),
				cidade: $('input[name="cidade"]').val(),
				estado: $('select[name="estado"]').val()
			};

			for (var i in data) {
				if (i != 'complemento' && (data[i] == '' || data[i] == null)) {
					openModal('Preencha o endereço corretamente!');
					return false;
				}
			}

			if (data.cep == '95720-000') {
				var preco = recalculaPrecos();

				if (preco < 30) {
					openModal('O valor mínimo para o CEP 95720-000 é de R$ 30,00!');
					return false;
				}
			}

			este.prop('disabled', true).html('Aguarde...');

			$.post('{{ route('enderecos.index').'/salvar/' }}'+data.enderecos_id, data, function (data) {
				$('input[name="enderecos_id"]').val(data);

				bloco.addClass('col-disable');
				bloco.next().removeClass('col-disable');

				buscarFretes(data);
			});

			senderHash = PagSeguroDirectPayment.getSenderHash();
			$('input[name="senderHash"]').val(senderHash);

			return false;
		});

		$('.js-tablefrete').on('click', '.js-trfrete button', function () {
			var self = $(this);
			var tr = self.closest('.js-trfrete');

			$('.js-trfrete').removeClass('tr-ativo');
            tr.addClass('tr-ativo');

			$('.js-valFrete').html(tr.find('.valor-frete').html());

			$('input[name="tipoFrete"]').val(self.attr('data-val'));

        	changeParcelas();

			$('.bt-escolha, .js-bt-av-2').prop('disabled', false);

			return false;
        });

		changePgto('boleto');
		$('.bt-escolha').click(function () {
			var este = $(this);
			var target = este.attr('data-type');

			$('.bt-escolha').removeClass('bt-escolha-ativo');
			este.addClass('bt-escolha-ativo');

			$('.js-pgto').hide();
			$('.js-pgto[data-target="'+target+'"]').show();

			changePgto(target);

			return false;
		});

		var numero = '';
        var bandeira = '';
        $('input[name="numero_cartao"]').blur(function () {
    		numero = $(this).val();
    		numero = numero.replace(' ', '').replace(' ', '').replace(' ', '');

    		if (numero != '') {
        		PagSeguroDirectPayment.getBrand({
				    cardBin: numero,
				    success: function (data) {
				    	bandeira = data.brand.name;
				    	$('input[name="bandeira"]').val(bandeira);

				    	changeParcelas();
				    },
				    error: function(){},
				    complete: function(){}
				});
        	}
        });

		$('.js-bt-av-2').click(function () {
			var este = $(this);
			var bloco = este.closest('.js-coluna');

			if ($('.tr-ativo').attr('data-preco') == undefined) {
				openModal('Escolha um tipo de frete!');
				return false;
        	}

			var pagamento = $('input[name="pagamento"]').val();
        	var dadosCartao = {
        		numero: $('input[name="numero_cartao"]').val(),
        		validade: $('input[name="validade_cartao"]').val(),
        		codigo: $('input[name="codigo_cartao"]').val(),
        		parcelas: $('select[name="parcelas"]').val(),
        		nome: $('input[name="nome_titular"]').val(),
        		cpf: $('input[name="cpf_titular"]').val(),
        		telefone: $('input[name="telefone_titular"]').val(),
        		nascimento: $('input[name="nasc_titular"]').val()
        	}

        	if (pagamento == '') {
        		openModal('Selecione a forma de pagamento!');
        		return false;
        	} else if (pagamento == 'cartao') {
        		for (var i in dadosCartao) {
        			if (dadosCartao[i] == '') {
        				openModal('Informe os dados do cartão!');
        				return false;
        			}
        		}

        		PagSeguroDirectPayment.createCardToken({
	  				cardNumber: dadosCartao.numero.replace(' ', '').replace(' ', '').replace(' ', ''),
				    brand: bandeira,
				    cvv: dadosCartao.codigo,
				    expirationMonth: dadosCartao.validade.substr(0, 2),
				    expirationYear: dadosCartao.validade.substr(3, 4),
				    success: function (data) {
				    	$('input[name="cardToken"]').val(data.card.token);
				    },
				    error: function(){},
				    complete: function(){}
	  			});
        	}

			este.prop('disabled', true);
			bloco.addClass('col-disable');
			bloco.next().removeClass('col-disable');

			return false;
		});

		$('.js-formpgto').submit(function () {
        	var pagamento = $('input[name="pagamento"]').val();
        	var senderHash = $('input[name="senderHash"]').val();
        	var cardToken = $('input[name="cardToken"]').val();
        	var tipoFrete = $('input[name="tipoFrete"]').val();

        	if (senderHash == '' || tipoFrete == '' || (pagamento == 'cartao' && cardToken == '')) {
        		return false;
        	}

        	$('.js-finalizar').prop('disabled', true).val('Por favor, aguarde...');
        });

        $(window).resize(function () {
            toggleSelect();
        });
    });
</script>
@endsection