@extends('layouts.front.app')

@section('content')
<!-- Main content -->

<section class="container content">

	<div class="container dark-grey-text">
		<!-- Heading -->
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb piccolino darken-3 ">
				<li><a href="{{ route('home') }}"> <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2"
					aria-hidden="true"></i></li>
					@if(isset($order_id))
					<li class="breadcrumb-item"><a class="black-text" href="{{ route('accounts', ['tab' => 'orders']) }}">Pedidos</a><i class="fas fa-angle-double-right mx-2" aria-hidden="true"></i></li>
					@else
					<li class="breadcrumb-item"><a class="black-text" href="{{ route('cart.index') }}">Carrinho</a><i class="fas fa-angle-double-right mx-2" aria-hidden="true"></i></li>
					@endif
					<li class="active">Pagamento</li>
				</ol>
			</nav>
			<!-- Container -->
			@if($products->count() > 0)
			@if(auth()->check())
			@php
			$cliente = \App\Shop\Customers\Customer::find(auth()->id());
			/* Esta é a primeira compra do cliente  */
			if($cliente->orders->count() === 0) {
				$desconto = (floatVal($subtotal) / 100 * floatVal(config('cart.desconto_iniciante')));
				$valorTotal = floatVal($subtotal) - $desconto;
			} else {
				$desconto = 0;
				$valorTotal = $subtotal;
			}
			@endphp

			@endif
			<div class="card">
				<h2 class="h1-responsive text-center piccolino-text font-weight-bold mt-4"> Finalização</h2>
				<div class="card-body">


					<div class="row">

						<div class="col-lg-8 mb-4">
							<!-- Horizontal Steppers -->

							<!-- Stepers Wrapper -->
							<ul class="stepper stepper-horizontal">

								<!-- First Step -->
								<li class="active" id="tabCadastro">
									<a href="#!">
										<span class="circle">1</span>
										<span class="label piccolino-text">Cadastro</span>
									</a>
								</li>

								<!-- Second Step -->
								<li class="@if($order_id && !$order->pagamento) active @endif" id="tabPagamento">
									<a href="#!" >
										<span class="circle">2</span>
										<span class="label @if($order_id && !$order->pagamento) piccolino-text @endif">Pagar com</span>
									</a>
								</li>

								<!-- Third Step -->
								<li class=" @if($order_id && $order->pagamento) active @endif" id="tabEnviaPagamento">
									<a href="#!" >
										<span class="circle @if($order_id && $order->pagamento) piccolino-text @endif">3</span>
										<span class="label">Conclusão</span>
									</a>
								</li>

							</ul>
							<!-- /.Stepers Wrapper -->

							<!-- /.Horizontal Steppers -->

							<div class="tab-content pt-4">

								<div class="tab-pane fade @if(!$order_id) show active @endif" id="cadastro" role="tabpanel">
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<span class="input-group-text" id="nome">Nome</span>
										</div>
										<input type="text" name="name" class="form-control" placeholder="Nome" aria-label="Nome" aria-describedby="nome" readonly value="{{ auth()->user()->name }}">
									</div>
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<span class="input-group-text" id="email">Email</span>
										</div>
										<input type="text" name="email" class="form-control" placeholder="Email" aria-label="Email" aria-describedby="email" readonly value="{{ auth()->user()->email }}">
									</div>
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<label class="input-group-text" for="tipoPessoa">Tipo de Pessoa</label>
										</div>
										<select class="browser-default custom-select" name="pessoa" id="tipoPessoa">
											<option selected value="0">Pessoa Física</option>
											<option value="1">Jurídica</option>
											<option value="">Extrangeira</option>
										</select>
									</div>
									<div class="input-group mb-3">
										<div class="input-group-prepend">
											<span class="input-group-text" data-tipo="cpf_cnpj">CPF <span class="red-text">*</span></span>
										</div>
										<input type="text" name="cpf_cnpj" class="form-control" placeholder="XX.XXX.XXX-XX" aria-label="CPF / CNPJ" aria-describedby="cpf_cnpj" value="{{ auth()->user()->cpf_cnpj }}">
									</div>
									@if(isset($addresses) && $addresses->count() > 0 )
									<!-- Card deck -->
									<div class="card-deck">
										@foreach ($addresses as $address)
										<!-- Card -->
										<div class="card mb-4">
											<!--Card content-->
											<div class="card-body">

												<!--Marca o tipo de endereço: Cobrança e/ou Entrega-->
												<h4 class="card-title">
													<div class="custom-control custom-radio">
														<input class="custom-control-input" type="radio" name="end_cobranca" id="cobranca_{{ $address->id }}" value="{{ $address->id }}"  required @if(isset($order_id) && $entrega === $address->id) checked @endif>
														<label class="custom-control-label" for="cobranca_{{ $address->id }}">{{ $address->alias }} (Cobrança)</label>
													</div>
												</h4>
												<!--Text-->
												<p class="card-text"><span class="badge badge-pill purple"><i class="fas fa-home fa-2x" aria-hidden="true"></i> {{ $address->address_1 }}, {{ $address->numero }} @if ($address->address_2) - {{ $address->address_2 }}@endif CEP: {{ $address->zip }} - {{ $address->cidade->nome_municipio }}/{{$address->cidade->uf}}</span></p>
												<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
												@if($returnFrete)
												Marque o método de entrega:
												<div class="card-footer text-muted text-center mt-4">
													@foreach ($returnFrete as $frete)
													<div class="custom-control custom-radio ml-3">
														<input class="custom-control-input" type="radio" name="end_entrega" id="entrega_pac_{{ $frete['codigo'] }}" value="{{ $frete['codigo'] }}" data-cep="{{ $address->zip }}" data-street="{{ $address->address_1 }}" data-number="{{ $address->numero }}" data-city="{{ $address->cidade->nome_municipio }}" data-district="{{ $address->address_2 }}" data-state="{{ $address->cidade->uf }}" data-country="BRA" data-shipping="@if($frete['servico'] === 'PAC' ) 1 @else 2 @endif" data-address="{{ $address->id }}" data-valor="{{$frete['valor']}}" data-servico="{{ $frete['servico'] }}" data-codigo="{{ $frete['codigo'] }}" required>
														<label class="custom-control-label float-left" for="entrega_pac_{{ $frete['codigo'] }}">{{ $frete['descServico'] }} Entrega em {{ $frete['prazo'] }} @if ($frete['prazo'] > 1) dias @else dia @endif Valor: {{ config('cart.currency_symbol') }} {{ number_format($frete['valor'], 2, ',', '.') }}</label>
													</div>
													@endforeach
												</div>
												@endif
											</div>

										</div>
										<!-- Card -->
										@endforeach

									</div>
									<!-- Card deck -->
									<div class="input-group mb-3">
										<p>
											@if(!$order_id)
											<a href="{{ route('customer.address.create', auth()->user()->id) }}" class="btn btn-primary rounded text-white">CADASTRAR OUTRO ENDEREÇO</a>
											@endif
										</p>
									</div>
									@else
									<p>
										@if(!$order_id)
										<a href="{{ route('customer.address.create', auth()->user()->id) }}" class="btn btn-primary rounded text-white">CADASTRAR OUTRO ENDEREÇO</a>
										@endif
									</p>
									@endif
									<a href="#!" class="btn btn-primary btn-lg btn-block" id="seguirPagamento">Próximo</a>
									<a href="#!" class="" id="seguirPagamentoReal"></a>
								</div>

								<div class="tab-pane fade @if($order_id && !$order->pagamento) show active @endif" id="pagamento" role="tabpanel">

									<div class="panel panel-default credit-card-box">
										<table class="table-responsive w-100 ml-3">
											@php
											$pagamentos = explode(',', config('payees.name'));
											@endphp
											<tbody>
												@foreach ($pagamentos as $pagamento)
												@if ($pagamento === 'cielo')
												<tr>
													<th>
														<div class="custom-control custom-radio">
															<input class="form-check-input" type="radio" name="tipo_pagamento" value="{{ $pagamento }}">
															<label class="form-check-label" for="tipo_pagamento_{{ $pagamento }}">
																<span class="input-group-text">
																	<img class="img-thumbnail rounded float-left mr-5" style="width: 250px" src="{{ asset('images/cartoes-cielo.jpg') }}"> Cartão Crédito ou Débito
																</span>
															</label>
														</div>
													</th>
												</tr>

												@endif
												@if ($pagamento === 'pagseguro')
												<tr>
													<th>
														<div class="custom-control custom-radio">
															<input class="form-check-input" type="radio" name="tipo_pagamento" value="{{ $pagamento }}">
															<label class="form-check-label" for="tipo_pagamento_{{ $pagamento }}">
																<span class="input-group-text">
																	<img class="img-thumbnail rounded float-left mr-5" style="width: 250px" src="{{ asset('images/pagseguro.png') }}"> Cartão Crédito, Débito ou Boleto bancário
																</span>
															</label>
														</div>
													</th>
												</tr>
												@endif
												@if ($pagamento === 'bank-transfer')
												<tr>
													<th>
														<div class="custom-control custom-radio">
															<input class="form-check-input" type="radio" name="tipo_pagamento" value="{{ $pagamento }}">
															<label class="form-check-label" for="tipo_pagamento_{{ $pagamento }}">
																<span class="input-group-text">
																	<p>
																		<i class="fas fa-exchange-alt fa-2x"></i> <i class="fas fa-university fa-2x"></i> Pagar com Transferência Bancária
																	</p>
																</span>
															</label>
														</div>
													</th>
												</tr>

												@endif
												@endforeach
											</tbody>
											<tfoot>
												<tr>
													<th>
														<input type="hidden" name="tipoPagamentoEnvia" >
														<a href="#!" class="btn btn-primary btn-lg btn-block" id="concluirPagamento">
															Próximo
														</a>
														<a href="#!" id="concluirPagamentoReal">

														</a>
													</th>
												</tr>
											</tfoot>
										</table>
									</div>

								</div>

								<div class="tab-pane fade" id="enviaPagamento" role="tabpanel">
									<input type="hidden" name="items" value="{{ $products }}">
									{{-- Para o endereço --}}
									<input type="hidden" name="address_id" value="@if($order_id){!! $order->address->id !!}@endif">
									<input type="hidden" name="entrega_id" value="@if($order_id && $order->entrega){!! $order->entrega->id !!}@endif">
									<input type="hidden" name="frete" value="@if($order_id){!! $order->total_shipping !!}@endif">
									<input type="hidden" name="postalCode" value="@if($order_id){!! $order->address->zip !!}@endif">
									<input type="hidden" name="street" value="@if($order_id){!! $order->address->address_1 !!}@endif">
									<input type="hidden" name="number" value="@if($order_id){!! $order->address->numero !!}@endif">
									<input type="hidden" name="district" value="@if($order_id){!! $order->address->address_2 !!}@endif">
									<input type="hidden" name="city" value="@if($order_id){!! $order->address->cidade->nome_municipio !!}@endif">
									<input type="hidden" name="state" value="@if($order_id){!! $order->address->cidade->uf !!}@endif">
									<input type="hidden" name="country" value="BRA">
									<input type="hidden" name="type" value="@if($order_id){!! $order->courier_id !!}@endif">
									<input type="hidden" name="cost" value="@if($order_id){!! $order->total_shipping !!}@endif">
									<input type="hidden" name="discount" value="@if($order_id){!! $order->discounts !!}@elseif($desconto > 0){!! $desconto !!}@endif">
									<input type="hidden" name="order_id" value="{!! ($order_id) ?? null !!}">
									{{-- Para o comprador --}}
									<input type="hidden" name="email" value="{{ auth()->user()->email }} ">
									<input type="hidden" name="name" value="{{ auth()->user()->name }}">
									<input type="hidden" name="document_number" value="{{ auth()->user()->cpf_cnpj }}">
									<input type="hidden" name="document_type" value="CPF">
									<input type="hidden" name="document_phone">

									<div id="incluiBankTransfer" style="display: none;">
										@include(config('site.domain').'.front.payments.bank-transfer')
									</div>
									<div id="incluiCielo" style="display: none;">
										{{-- 	@include(config('site.domain').'.front.payments.cielo') --}}
									</div>
									<div id="incluiPagseguro" style="display: none;">
										{{-- @include(config('site.domain').'.front.payments.pagseguro') --}}
									</div>
									<div id="incluiPaypal" style="display: none;">
										{{-- @include(config('site.domain').'.front.payments.paypal') --}}
									</div>
									<div id="incluiStripe" style="display: none;">
										{{-- @include(config('site.domain').'.front.payments.stripe') --}}
									</div>
								</div>
								<div class="tab-pane fade @if($order_id && $order->pagamento) show active @endif" id="resultadoPagamento" role="tabpanel">
									<!-- Section heading -->
									<h2 class="h1-responsive font-weight-bold text-center">Pedido Concluído</h2>
									<!-- Section description -->
									<!-- Grid row -->
									<div class="row">
										@if($order)
										<p class="text-center w-responsive mx-auto mb-5">Pedido nº <span class="pedido_id"> @if($order) {{ $order_id }} @endif </span></p>

										<!-- Grid column -->
										<div class="col-lg-6">
											<ul class="list-group">
												<li class="list-group-item">Pagamento efetuado por <span class="payment"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->payment }} @endif </span> </li>
												<li class="list-group-item">Código da Transação <span class="transaction_id"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->transaction_id }} @endif </span></li>
												<li class="list-group-item">Total em Produtos <span class="total_products"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->total_products }} @endif </span></li>
												<li class="list-group-item">Valor do Frete <span class="total_shipping"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->total_shipping }} @endif </span></li>
												<li class="list-group-item">Valor do desconto <span class="discounts"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->discounts }} @endif </span></li>
												<li class="list-group-item">Valor total do Pedido <span class="total"> @if($order) {{ config('cart.currency_symbol') }} {{ $order->total }} @endif </span></li>
												<li class="list-group-item">Valor Pago <span class="total @if($order && ($order->total_paid < $order->total)) text-danger @endif" > @if($order){{ config('cart.currency_symbol') }} {{ $order->total_paid }} @endif </span></li>
											</ul>

										</div>
										<!-- Grid column -->

										<!-- Grid column -->
										<div class="col-lg-6">
											<!-- Post title -->
											<h3 class="font-weight-bold mb-3"><strong>Dados para entrega:</strong></h3>
											<!-- Excerpt -->
											<p>Este pedido será entregue no seguinte endereço:</p>
											<p><span class="address"> {{ $order->address->address_1 }}, {{ $order->address->numero }} {{ $order->address->address_2 }} - {{ $order->address->zip }} - {{ $order->address->cidade->nome_municipio }} / {{ $order->address->cidade->uf }}</span></p>
											<!-- Post data -->
											<p><a><strong>Data do Pedido</strong></a>, {{ \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $order->created_at)->format('d/m/Y h:m') }}<span class="dt_criacao_pedido"></span></p>
											<!-- Read more button -->
											<a class="btn btn-success btn-md" href="{{ route('accounts', ['tab' => 'orders']) }}">Ver todos os Pedidos</a>

										</div>
										<!-- Grid column -->
										@else
										<!-- Read more button -->
										<a class="btn btn-success btn-md" href="{{ route('accounts', ['tab' => 'orders']) }}">Ver todos os Pedidos</a>
										@endif
									</div>
									<!-- Grid row -->
								</div>
							</div>

						</div>


						<div class="col-lg-4 mb-4">

							<div class="card">

								<div class="card-body">
									<h4 class="mb-4 mt-1 h5 text-center font-weight-bold">Sumário</h4>

									<hr>
									@foreach($products as $product)
									<dl class="row">
										<dd class="col-sm-8">
											{{ $product->name }}
										</dd>
										<dd class="col-sm-4">
											{{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}
										</dd>
									</dl>
									<hr>
									<input type="hidden" name="peso_total" value="{{ floatVal($product->weight) }}">
									@endforeach

									<dl class="row">
										<dt class="col-sm-8">
											Sub Total
										</dt>
										<dt class="col-sm-4">
											{{ config('cart.currency_symbol') }} {{ number_format(floatVal($subtotal), 2, ',', '.') }}
											<input type="hidden" name='total' value="{{ floatVal($valorTotal) }}">
										</dt>
									</dl>
									<hr>
									<dl class="row">
										<dd class="col-sm-8">
											Descontos
										</dd>
										<dd class="col-sm-4">

											<span class="text-success">{{ config('cart.currency_symbol') }}<span class="valorPromocao"> {{$desconto}} </span></span>
											<input type="hidden" name="id_voucher">
										</dd>
									</dl>
									@if (!isset($order_paid) || $order_paid > 1)
									@if(config('possui_descontos_ls'))
									<dl class="row">
										<form class="">
											{{ csrf_field() }}
											<dd class="col-sm-12">
												<!-- Promo code -->
												<input type="text" class="form-control" placeholder="Código Promocional" aria-label="Código Promocional"  aria-describedby="basic-addon2" name="codigoVoucher">
											</dd>
											<dd class="col-sm-12">
												<button class="btn btn-success btn-md waves-effect" type="button" id="resgatar">Resgatar</button>
											</dd>
										</form>
									</dl>
									@endif
									<!-- Promo code -->
									@endif

									<hr>

									<dl class="row">
										<dd class="col-sm-8">
											Frete
										</dd>
										<dd class="col-sm-4">
											<span id="valorFrete">{{ config('cart.currency_symbol') }} @if($valorFrete) {{ number_format($valorFrete, 2, ',', '.') }} @else 0,00 @endif</span>
										</dd>
									</dl>
									<hr>

									<dl class="row">
										<dt class="col-sm-8">
											Total
										</dt>
										<dt class="col-sm-4">
											<span id="valorTotal">{{ config('cart.currency_symbol') }} @if($valorFrete) {{ number_format(floatVal($valorFrete) + floatVal($valorTotal), 2, ',', '.') }} @else {{ number_format(floatVal($valorTotal), 2, ',', '.') }} @endif</span>
										</dt>
									</dl>
								</div>

							</div>


						</div>
					</div>

				</div>

			</div>

		</div>
		@else
		<div class="row wow fadeIn">
			<div class="col-md-12">
				<p class="alert alert-warning">Nenhum produto no carrinho. <a href="{{ route('home') }}">Comprar!</a></p>
			</div>
		</div>
		@endif
		<!-- Container -->

		<!-- Modal informativo do Frete -->
		<div class="modal fade top" id="modalFrete" tabindex="-1" role="dialog" aria-labelledby="modalFrete" aria-hidden="true">

			<div class="modal-dialog modal-frame modal-top modal-notify" role="document">


				<div class="modal-content">
					<div class="modal-body">
						<div class="row d-flex justify-content-center align-items-center">

							<p class="pt-3 pr-2">Valor do Frete: <span class="vl-frete-info badge badge-dark"></span> foi adicionado ao seu Pedido.</p>

							<button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal informativo do Frete -->

		<!-- Modal informativo do Cupom -->
		<div class="modal fade top" id="modalVoucher" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

			<div class="modal-dialog modal-frame modal-top modal-notify" role="document">


				<div class="modal-content">
					<div class="modal-body">
						<div class="row d-flex justify-content-center align-items-center">

							<p class="pt-3 pr-2">O cupom <span class="codigo badge badge-dark"></span> foi adicionado ao seu Pedido.</p>

							<button type="button" class="btn btn-success" data-dismiss="modal">Fechar</button>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal informativo do Cupom -->

		<!-- Modal caso o Cupom esteja vazio -->
		<div class="modal fade" id="modalCupom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		aria-hidden="true">

		<!-- Change class .modal-sm to change the size of the modal -->
		<div class="modal-dialog modal-sm modal-notify modal-danger" role="document">


			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title w-100" id="myModalLabel">Cupom não preenchido</h4>
					<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					Código do Cupom, não informado.
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fechar</button>
				</div>
			</div>
		</div>
	</div>
	<!-- Modal caso o Cupom esteja vazio -->

	<!-- Modal caso o Cupom esteja vazio -->
	<div class="modal fade" id="modalObrigatorio" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
	aria-hidden="true">

	<!-- Change class .modal-sm to change the size of the modal -->
	<div class="modal-dialog modal-sm modal-notify modal-danger" role="document">


		<div class="modal-content">
			<div class="modal-header">
				<h4 class="modal-title w-100" id="myModalLabel">Verifique os seguintes campos</h4>
				<button type="button" class="close" data-dismiss="modal" aria-label="Fechar">
					<span aria-hidden="true">&times;</span>
				</button>
			</div>
			<div class="modal-body">
				<ol>
					<li>CPF</li>
					<li>Endereço de Cobrança</li>
					<li>Endereço de Entrega</li>
				</ol>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-danger btn-sm" data-dismiss="modal">Fechar</button>
			</div>
		</div>
	</div>
</div>
<!-- Modal caso o Cupom esteja vazio -->
</div>
</section>
@endsection
@section('js')
<script src="{{ asset('js/axios.js') }}" type="text/javascript" charset="utf-8">
</script>
<!-- Vamos fazer testes para o PagSeguro -->
<script type="text/javascript" src="https://stc.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
</script>

/*
<!--
	<script type="text/javascript" src="https://stc.sandbox.pagseguro.uol.com.br/pagseguro/api/v2/checkout/pagseguro.lightbox.js">
	</script>
-->
*/
<script type="text/javascript">
	$(document).ready(function(){
		$('input[name=cpf_cnpj]').mask('999.999.999-99')
		$('#tipoPessoa').on('change', function(){
			let tipo = $('#tipoPessoa option:selected').val()
			$('input[name=cpf_cnpj]').unmask()
			$('input[name=cpf_cnpj]').val('')
			if( tipo === '0'	) {
				$('span[data-tipo=cpf_cnpj]').html('CPF <span class="red-text">*</span>')
				$('input[name=cpf_cnpj]').attr('placeholder', 'XX.XXX.XXX-XX')
				$('input[name=cpf_cnpj]').mask('999.999.999-99')
				$('input[name=document_type]').val('CPF')
			} else if( tipo === '1' ) {
				$('span[data-tipo=cpf_cnpj]').html('CNPJ <span class="red-text">*</span>')
				$('input[name=cpf_cnpj]').attr('placeholder', 'XX.XXX.XXX/XXXX-XX')
				$('input[name=cpf_cnpj]').mask('99.999.999/9999-99')
				$('input[name=document_type]').val('CNPJ')
			} else {
				$('span[data-tipo=cpf_cnpj]').html('Passport')
				$('input[name=cpf_cnpj]').attr('placeholder', 'Passport')
				$('input[name=cpf_cnpj]').unmask()
				$('input[name=document_type]').val('Passport')
			}
		})

		$('input[name=cpf_cnpj]').on('blur', function(){
			$('input[name=document_number]').val($(this).val())
		})

		$('#seguirPagamento').on('click', function(e){
			let cpf_cnpj = $('input[name=cpf_cnpj]').val()
			let cobranca = $('input[name=end_cobranca]:checked').val()
			let entrega = $('input[name=end_entrega]:checked').val()
			e.preventDefault()
			console.log({'CPF':cpf_cnpj, 'Cobranca': cobranca, 'Entrega': entrega})
			if(cobranca === 'undefined' || entrega === 'undefined' || cobranca === '' || entrega === '' || cpf_cnpj === '') {
				$('#modalObrigatorio').modal( 'show' )
				return false
			} else {
				$('#tabPagamento').addClass('active')
				$('#tabPagamento>a>span.label').addClass('piccolino-text')

				$('#seguirPagamentoReal').attr( 'href', '#pagamento')
				$('#seguirPagamentoReal').attr( 'data-toggle', 'tab')
				$('#seguirPagamentoReal').attr( 'role', 'tab')
				$('#seguirPagamentoReal').trigger("click")
			}
		})

		$('input[name=tipo_pagamento]').on('click', function() {
			let tipo_pagamento = $(this).val()
			let end_cobranca = $('input[name=end_cobranca]:checked').val()

			if(tipo_pagamento !== '' && tipo_pagamento !== 'undefined') {
				$('#tabEnviaPagamento').addClass('active')
				$('#tabEnviaPagamento>a>span.label').addClass('piccolino-text')

				$('#concluirPagamentoReal').attr( 'href', '#enviaPagamento')
				$('#concluirPagamentoReal').attr( 'data-toggle', 'tab')
				$('#concluirPagamentoReal').attr( 'role', 'tab')
				$('#concluirPagamentoReal').trigger("click")

				if(tipo_pagamento === 'bank-transfer') {
					$('#incluiBankTransfer').show()
					$('#incluiCielo').hide()
					$('#incluiPagseguro').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
					$('.formPagamento').attr('method', "POST")
					$('.formPagamento input[name=billing_address]').val(end_cobranca)
					$('.formPagamento').attr('action', "{{ route('bank-transfer.store') }}")
				} else if (tipo_pagamento === 'cielo') {
					$('#incluiCielo').show()
					$('#incluiBankTransfer').hide()
					$('#incluiPagseguro').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'pagseguro') {
					$('#incluiPagseguro').removeAttr('style')
					$('#incluiPagseguro').show()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'paypal') {
					$('#incluiPaypal').show()
					$('#incluiPagseguro').hide()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'stripe') {
					$('#incluiStripe').show()
					$('#incluiPaypal').hide()
					$('#incluiPagseguro').hide()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
				}
			}
		})

		$('input[name=end_cobranca]').on('click', function(){
			let cobranca = $('input[name=end_cobranca]:checked').val()
			$('input[name=address_id]').val(cobranca)
		})
		$('input[name=end_entrega]').on('click', function(){
			$('#adicionandoCarrinho').modal( 'show' )

			$('#adicionandoCarrinho').on('shown.bs.modal', function (event) {
				var modal = $(this)
				modal.find('.modal-title').text('Calculando o Frete')
				$(this).modal({
					backdrop: 'static'
				})
			})
			let entrega_id = $(this).data('address')
			let street = $(this).data('street')
			let number = $(this).data('number')
			let district = $(this).data('district')
			let city = $(this).data('city')
			let state = $(this).data('state')
			let country = $(this).data('country')
			let type = $(this).data('shipping')
			let vlFrete = $(this).data('valor')
			vlFrete = parseFloat(vlFrete)

			let subTotal = $('input[name=total]').val()
			subTotal = parseFloat(subTotal)

			let cepDest         = $(this).attr('data-cep')
			cepDest             = cepDest.replace('-', '')

			let vlFinal = subTotal + vlFrete

			let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }

			$('#valorFrete').html(vlFrete.toLocaleString('pt-BR', formato))
			$('#valorTotal').html(vlFinal.toLocaleString('pt-BR', formato))
			$('.vl-frete-info').html(vlFrete.toLocaleString('pt-BR', formato))
			$('input[name=frete]').val(vlFrete)
			$('input[name=cost]').val(vlFrete)

			$('input[name=entrega_id]').val(entrega_id)
			$('input[name=postalCode]').val(cepDest)
			$('input[name=street]').val(street)
			$('input[name=number]').val(number)
			$('input[name=district]').val(district)
			$('input[name=city]').val(city)
			$('input[name=state]').val(state)
			$('input[name=country]').val(country)
			$('input[name=type]').val(type)

			$('.vl-frete-info').removeClass('badge-success')
			$('.vl-frete-info').addClass('badge-warning')

			$('#modalFrete').modal( 'show' )
			$('#modalFrete').on('shown.bs.modal', function (e) {
				$('#adicionandoCarrinho').modal( 'hide' )
			})

		})
		/*{{--  Função desabilitada para este processo  --}}*/
		$('input[name=end_entrega_old]').on('click', function(){
			$('#adicionandoCarrinho').modal( 'show' )

			$('#adicionandoCarrinho').on('shown.bs.modal', function (event) {
				var modal = $(this)
				modal.find('.modal-title').text('Calculando o Frete')
				$(this).modal({
					backdrop: 'static'
				})
			})
			/* Abaixo, preenchendo os campos para a busca do CEP */

			let street = $(this).attr('data-street')
			let number = $(this).attr('data-number')
			let city = $(this).attr('data-city')
			let district = $(this).attr('data-district')
			let state = $(this).attr('data-state')
			let country = $(this).attr('data-country')
			let type = $(this).attr('data-shipping')
			let address = $(this).attr('data-address')
			let entrega = $(this).attr('data-entrega')

			let altura          = {!! config('shipping.correios.min_altura') !!} //$('input[name=altura]').val() * 100
			let cepDest         = $(this).attr('data-cep')
			cepDest             = cepDest.replace('-', '')
			let cepOrig         = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
			let comprimento     = {!! config('shipping.correios.min_comprimento') !!} //$('input[name=comprimento]').val() * 100
			let largura         = {!! config('shipping.correios.min_largura') !!} // $('input[name=largura]').val() * 100

			let max_altura      = {!! config('shipping.correios.max_altura') !!}
			let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
			let max_largura     = {!! config('shipping.correios.max_largura') !!}
			let max_peso        = {!! config('shipping.correios.max_peso') !!}
			let min_altura      = {!! config('shipping.correios.min_altura') !!}
			let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
			let min_largura     = {!! config('shipping.correios.min_largura') !!}
			let min_peso        = {!! config('shipping.correios.min_peso') !!}

			let peso            = $('input[name=peso_total]').val()
			let quantity        = {!! $products->count() !!}

			let send            = true
			let servico         = $(this).attr('data-tipoEntrega')

			let subTotal = $('input[name=total]').val()
			subTotal = parseFloat(subTotal)

			let url             = 'api/calculaEntrega/' + cepDest + '/' + subTotal + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento
			let valor_entrega_min = {!! config('shipping.free_value') !!}

			if(peso < min_peso){
				peso = min_peso
			} else if (peso > max_peso){
				console.log('Peso ['+ peso +'] excede o valor máximo para entregar pelos correios ' + max_peso)
				send = false
			}
			if(altura < min_altura){
				altura = min_altura
			} else if (altura > max_altura){
				console.log('Altura ['+ altura +'] excede o valor máximo para entregar pelos correios ' + max_altura)
				send = false
			}
			if(largura < min_largura){
				largura = min_largura
			} else if (largura > max_largura){
				console.log('Largura ['+ largura +'] excede o valor máximo para entregar pelos correios ' + max_largura)
				send = false
			}
			if(comprimento < min_comprimento){
				comprimento = min_comprimento
			} else if (comprimento > max_comprimento){
				console.log('Comprimento ['+ comprimento +'] excede o valor máximo para entregar pelos correios ' + max_comprimento)
				send = false
			} else if (cepDest === '') {
				$('.msgCEP').removeClass('alert-danger')
				$('.msgCEP').addClass('alert-warning')
				$('.msgCEP').addClass('show')
				$('#msgCEP').html('Verifique se preencheu corretamente o CEP.')
				send = false
			}

			let cepFrete = false
			if(	80000000 < cepDest && cepDest < 87999999) {// For do Paraná
				cepFrete = true
			} else if( 88000000 < cepDest && cepDest < 89999999) { // ou de Santa Catarina
				cepFrete = true
			} else if( 90000000 < cepDest && cepDest < 99999999) { // ou do Rio Grande do Sul
				cepFrete = true
			} else if( 01000000 < cepDest && cepDest < 19999999) { // ou de São Paulo
				cepFrete = true
			}

			if(cepFrete && (subTotal > valor_entrega_min)) {
				$('.vl-frete-info').html('GRÁTIS!!!')
				$('.vl-frete-info').removeClass('badge-dark')
				$('.vl-frete-info').addClass('badge-success')
				$('.aguardeFrete').hide()
				$('.calcularFrete').show()
				send = false
			}

			$('input[name=postalCode]').val(cepDest)
			$('input[name=street]').val(street)
			$('input[name=number]').val(number)
			$('input[name=district]').val(district)
			$('input[name=city]').val(city)
			$('input[name=state]').val(state)
			$('input[name=country]').val(country)
			$('input[name=type]').val(type)
			$('input[name=address_id]').val(address)
			$('input[name=entrega_id]').val(entrega)

			if(send){
				$('.msgCEP').removeClass('show')
				axios.get(url, {headers: {'Accept': 'application/json'}})
				.then((response)=>{
					let retorno = response.data[0]
					console.log('Resposta', response.data[0])
					console.log('Status', response.status)
					$('#frete>tbody>tr>td.servico').html(retorno.servico)
					txt_dias = (retorno.prazo > 1) ? ' dias úteis' : ' dia útil'
					$('#frete>tbody>tr>td.dia').html(retorno.prazo + txt_dias)
					$('#frete>tbody>tr>td.preco').html( "{!! config('cart.currency_symbol') !!} " +  retorno.valor)
					$('input[name=frete]').val(retorno.valor)

					$('.aguardeFrete').hide()
					$('.calcularFrete').show()


					let vlFrete = parseFloat(retorno.valor)
					let vlFinal = subTotal + vlFrete
					let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }

					$('#valorFrete').html(vlFrete.toLocaleString('pt-BR', formato))
					$('input[name=frete]').val(vlFrete)
					$('#valorTotal').html(vlFinal.toLocaleString('pt-BR', formato))
					$('.vl-frete-info').html(vlFrete.toLocaleString('pt-BR', formato))
					$('.vl-frete-info').removeClass('badge-success')
					$('.vl-frete-info').addClass('badge-warning')
					$('.prazo-entrega').html("Entrega em " + retorno.prazo + txt_dias)
					$('.valor-frete').html(vlFrete.toLocaleString('pt-BR', formato))
					$('input[name=cost]').val(vlFrete)

					$('#modalFrete').modal( 'show' )
					$('#modalFrete').on('shown.bs.modal', function (e) {
						$('#adicionandoCarrinho').modal( 'hide' )
					})

				}).catch((error)=>{
					$('.aguardeFrete').hide()
					$('.calcularFrete').show()
					$('.msgCEP').removeClass('alert-warning')
					$('.msgCEP').addClass('alert-danger')
					$('.msgCEP').addClass('show')
					$('#msgCEP').html(error.response.data.erro)
					console.log('Error', error.response.data)
				})
			}

		})

		$('#cielo').on('click', function(){
			$('#formPagamento').attr('action', "{{ route('cielo.index') }}")
		})
		$('#bank-transfer').on('click', function(){
			$('.formPagamento').attr('action', "{{ route('bank-transfer.index') }}")
		})
		$('#stripe').on('click', function(){
			$('#formPagamento').attr('action', "{{ route('checkout.execute') }}")
		})
		$('.btn-pagseguro').on('click', function() {
			$('#adicionandoCarrinho').modal( 'show' )

			$('#adicionandoCarrinho').on('shown.bs.modal', function (event) {
				var modal = $(this)
				modal.find('.modal-title').text('Redirecionando para o PagSeguro')
				$(this).modal({
					backdrop: 'static'
				})
			})

			let items = $('input[name=items]').val()
			let postalCode = $('input[name=postalCode]').val()
			let cost = $('input[name=frete]').val()
			let street = $('input[name=street]').val()
			let number = $('input[name=number]').val()
			let district = $('input[name=district]').val()
			let city = $('input[name=city]').val()
			let state = $('input[name=state]').val()
			let country = $('input[name=country]').val()
			let type = $('input[name=type]').val()
			let cpf_cnpj = $('input[name=cpf_cnpj]').val()
			let document_type = $('input[name=document_type]').val()
			let address_id = $('input[name=address_id]').val()
			let entrega_id = $('input[name=entrega_id]').val()
			let order_id = $('input[name=order_id]').val()

			let body = {items: items, cost: cost, postalCode: postalCode, street: street, number: number, district: district, city: city, state: state, country: country, type: type, cpf_cnpj: cpf_cnpj, document_type: document_type, address_id: address_id, entrega_id: entrega_id, order_id: order_id}

			axios({
				method: 'post',
				url: "{!! url('pagseguro/envia-pagamento') !!}",
				data: body
			})
			.then(function (response) {
				let code = response.data.code
				let pedido_id = response.data.pedido.id
				console.log(response.data, pedido_id);

				let callback = {
					success : function(transactionCode) {
						//Insira os comandos para quando o usuário finalizar o pagamento.
						//O código da transação estará na variável "transactionCode"
						console.log("Compra feita com sucesso, código de transação: " + transactionCode)
						axios({
							method: 'get',
							url: "api/pagseguro/confirm/"+code+"/"+transactionCode
						}).then(function (responseC) {
							console.log(responseC)

						})
						.catch(function(error) {
							console.log(error)
						})
					},
					abort : function() {
						//Insira os comandos para quando o usuário abandonar a tela de pagamento.
						console.log("abortado")
					}
				}
				$('#adicionandoCarrinho').modal( 'hide' )
				//Chamada do lightbox passando o código de checkout e os comandos para o callback
				let isOpenLightbox = PagSeguroLightbox(code, callback)
				// Redireciona o comprador, caso o navegador não tenha suporte ao Lightbox
				if (!isOpenLightbox){
					$(location).href="https://pagseguro.uol.com.br/v2/checkout/payment.html?code=" + code
				}

				$('#enviaPagamento').removeClass('active').removeClass('show').addClass('in')
				$('#resultadoPagamento').addClass('show').addClass('active')
			})
			.catch(function (error) {
				console.log(error);
			})

		})

		$('#resgatar').on('click', function(e){
			let voucher = $('input[name=codigoVoucher]').val()
			let valorPedido = $('input[name=total]').val()
			if(voucher === ''){
				$('#modalCupom').modal('show')
			} else {
				e.preventDefault();
				$.ajaxSetup({
					headers: {
						'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
					}
				});
				$.ajax({
					url: "{{ url('api/voucher/findByString') }}",
					method: 'post',
					data: {
						voucher: voucher,
						nome: voucher
					},
					success: function(result){
						/*
						Documentação:
						tipo {
							I = Índice (percentual)
							P = Produto (percentual) - precisa ler também, qual o item está associado ou age em qq item, mas uma única vez (promoção de primeira compra)
							V = Valor do produto
							F = Frete Gratis
							Se o campo qtde = '-1', isto quer dizer que não existe limite para usar
							Observar o campo valor mínimo e o campo da data de validade do cumpom, mesmo que já esteja validado no sistema
						}
						*/
						if(result.total > 0) {
							$(".codigo").html(result.data.voucher)
							$('input[name=id_voucher]').val(result.data.id)
							$('input[name=discount]').val(result.data.valor)
							let novoValor = valorPedido
							let valorDesconto = 0.00
							if(result.data.tipo === 'I') {
								valorDesconto = valorPedido * (result.data.valor / 100)
							}
							novoValor = valorPedido - valorDesconto
							// console.log(result.data, valorPedido, novoValor, valorDesconto)
							$(".valorPromocao").html(valorDesconto.toLocaleString('pt-BR'))
							$(".novoValor").html(novoValor.toLocaleString('pt-BR'))
							$("input[name=total]").val(novoValor.toLocaleString('pt-BR'))
							$('#modalVoucher').modal('show')
						}
					}
				})
			}
		})
	})
</script>
@endsection