@extends('layouts.front.app')

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

<section class="container content">

	<div class="container dark-grey-text mt-5">
		<!-- Heading -->
		<nav aria-label="breadcrumb">
			<ol class="breadcrumb blue-grey lighten-4">
				<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($products))
					<li class="breadcrumb-item"><a class="black-text" href="/accounts/?tab=orders">Pedidos</a><i class="fas fa-angle-double-right mx-2" aria-hidden="true"></i></li>
					<li class="active">Checkout</li>
					@else
					<li class="active">Carrinho </li>
					@endif
				</ol>
			</nav>
			<!-- Container -->
			@include('layouts.errors-and-messages')
			@if($products)
			<div class="row wow fadeIn">
				<!-- Column -->
				<div class="col-md-8 align-items-stretch">

					<!--Card-->
					<div class="card">
						<div class="card-body">
							<form class="text-center border border-light p-2" id="formPagamento" action="{{ route('cielo.payment') }}" method="POST">
								{{ csrf_field() }}
								<input type="hidden" name="_method" value="post">
								<input type="hidden" class="rate" name="rate" value="">

								<input type="hidden" class="frete" name="frete" value="{!! ($valorFrete) ?? '' !!}">
								<input type="hidden" name="shipment_obj_id" value="{{ $shipment_object_id }}">
								<input type="hidden" name="discount" value="0.00">
								<input type="hidden" name="voucher_id" value="">
								<input type="hidden" name="entrega_para" value="{{ $entrega['entrega_para'] }}">
								<input type="hidden" name="data_entrega" value="{{ $entrega['data_entrega'] }}">
								<input type="hidden" name="horario_entrega" value="{{ $entrega['horario_entrega'] }}">
								<input type="hidden" name="mensagem" value="{{ $entrega['mensagem'] }}">
								<input type="hidden" name="assinatura" value="{{ $entrega['assinatura'] }}">
								<input type="hidden" name="order_id" value="{{ (request()->segment(2)) ?? '' }}">
								<!--firstName-->
								<!--firstName-->
								<div class="md-form ">
									<input type="text" id="firstName" class="form-control" value="@if(auth()->check()) {{ auth()->user()->name }} @endif" require>
									<label for="firstName" class="">Nome Completo <span class="red-text">*</span></label>
								</div>
								<!--email-->
								<div class="md-form mb-5">
									<input type="email" id="email" class="form-control" placeholder="youremail@example.com" value="@if(auth()->check()) {{ auth()->user()->email }} @endif" require>
									<label for="email" class="">Email <span class="red-text">*</span></label>
								</div>
								<!--País-->
								{{-- <div class="md-form mb-5">
									<p class="text-left">Nacionalidade <span class="red-text">*</span></p>
									<!-- Default inline 1-->
									<p class="text-left">
										<div class="custom-control custom-radio custom-control-inline mr-5">
											<input type="radio" class="custom-control-input" id="BR" name="pais" value="BR" checked required>
											<label class="custom-control-label" for="BR">brasileira</label>
										</div>

										<!-- Default inline 2-->
										<div class="custom-control custom-radio custom-control-inline ml-5">
											<input type="radio" class="custom-control-input" id="EX" name="pais" value="EX" required>
											<label class="custom-control-label" for="EX">estrangeira</label>
										</div>
									</p>
								</div> --}}
								<!--cpf-->
								<div class="md-form mb-5">
									<input type="text" id="cpf_cnpj" name="cpf_cnpj" class="form-control" placeholder="xxx.xxx.xxx-xx" required value="{{ $cliente->cpf_cnpj }}">
									<label for="cpf_cnpj" class="">CPF <span class="red-text">*</span>(ou PassPort, para os extrangeiros)</label>
								</div>
								<!--endereço-->

								@if(isset($addresses) && !is_array($addresses))
								<!-- Table  -->
								<table class="table table-bordered table-responsive">
									<!-- Table head -->
									<thead>
										<tr><th colspan="4">Endereço de cobrança</th></tr>
										<tr>
											<th>Nome</th>
											<th>Endereço</th>
											<th>Cidade</th>
											<th>Estado / CEP</th>
										</tr>
									</thead>
									<!-- Table head -->
									<!-- Table body -->
									<tbody>

										@foreach($addresses as $address_cob)
										<tr>
											<th scope="row">
												<div class="custom-control custom-radio">
													<input type="radio" class="custom-control-input" name="billing_address" id="billing_address_{{ $address_cob->id }}" @if( intval($entrega['entrega']) === intval($address_cob->id)) checked @endif value="{{ $address_cob->id }}" required>
													<label class="custom-control-label" for="billing_address_{{ $address_cob->id }}">{{ $address_cob->alias }}</label>
												</div>
											</th>
											<th>{{ $address_cob->address_1 }}, {{ $address_cob->numero }} - {{ $address_cob->address_2 }}</th>
											<th>{{ ($address_cob->cidade->nome_municipio) ?? null }}</th>
											<th>{{ $address_cob->state_code }} / {{ $address_cob->zip }}</th>
										</tr>
										@endforeach
										<tr><th colspan="4"><a href="{{ route('customer.address.create', [auth()->user()->id, 'finaliza' => 1]) }}" class="btn btn-primary text-white">CADASTRAR NOVO ENDEREÇO</a></th></tr>
									</tbody>
									<!-- Table body -->
								</table>
								<!-- Table  -->
								@else
								<a href="{{ route('customer.address.create', [auth()->user()->id, 'finaliza' => 1]) }}" class="btn btn-primary text-white">CADASTRAR NOVO ENDEREÇO</a>
								@endif
								<div class="row">
									@if (!isset($order_paid) || $order_paid > 1)
									@if(isset($payments) && !empty($payments))
									<div class="col-md-12 mb-3">
										<!-- Heading -->
										<h4 class="d-flex justify-content-between align-items-center mb-3">
											<span class="text-muted">Pagar com:</span>
										</div>
									</h4>
									<div class="d-block mb-3">
										@foreach($payments as $payment)
										@if(isset($payment['name']))
										@if($payment['name'] === config('stripe.name'))
										@if(env('STRIPE_KEY'))
										<div class="custom-control custom-radio my-3">
											<div class="custom-control custom-radio text-left">
												<input type="radio" class="custom-control-input" id="stripe" name="paymentMethod" required>
												<label class="custom-control-label h5-responsive" for="stripe"><i class="fab fa-cc-stripe"></i>Stripe</label>
											</div>
										</div>
										@endif
										@elseif($payment['name'] === config('paypal.name'))
										@if(env('PP_ACCOUNT_ID'))
										<div class="custom-control custom-radio my-3">
											<div class="custom-control custom-radio text-left">
												<input type="radio" class="custom-control-input" id="paypal" name="paymentMethod" required>
												<label class="custom-control-label h5-responsive" for="paypal"><i class="fab fa-cc-paypal"></i>PayPal</label>
											</div>
										</div>
										@endif
										@elseif($payment['name'] === config('cielo.name'))
										{{-- @if(env('CIELO_MERCHANTID')) --}}
										<div class="custom-control custom-radio my-3">
											<div class="custom-control custom-radio text-left">
												<input type="radio" class="custom-control-input" id="cielo" name="paymentMethod" checked required>
												<label class="custom-control-label h5-responsive" for="cielo"> <img src="{{ asset('storage/cartoes-cielo.jpg') }}" class="rounded img-fluid w-25" alt="Pagamento Cielo">Cartão Crédito ou Débito</label>
											</div>
										</div>
										{{-- @endif --}}
										@elseif($payment['name'] === config('bank-transfer.name'))
										<div class="custom-control custom-radio my-3">
											<div class="custom-control custom-radio text-left">
												<input type="radio" class="custom-control-input" id="bank-transfer" name="paymentMethod" required>
												<label class="custom-control-label h5-responsive" for="bank-transfer"><i class="fas fa-money-check-alt"></i> Transferência Bancária</label>
												<p><small class="font-italic">"Dependemos do tempo de confirmação da transação, que pode ser longo, por isso não utilizar a transferência para entregas no mesmo período"</small></p>
											</div>
										</div>
										@endif
										@endif
										@endforeach
									</div>
									@if($addresses && !is_array($addresses))
									<button class="btn @if($addresses->count() === 0) btn-danger @else btn-primary @endif  btn-lg btn-block m-3" type="submit" @if($addresses->count() === 0 ) disabled @endif>@if($addresses->count() === 0 ) Cadastre seu endereço de Cobrança @else Efetuar pagamento @endif</button>
									@else
									<button class="btn btn-danger btn-lg btn-block" type="submit" disabled>Cadastre seu endereço de Cobrança</button>
									@endif
									@else
									<p class="alert alert-danger">Nenhum método de pagamento definido</p>
									@endif
									@else
									<div class="row d-flex justify-content-center">
										<!-- Grid column -->
										<div class="col-md-12 ml-4 pl-4">
											<!--Card-->
											<div class="card">
												<!--Card content-->
												<div class="card-body text-center">
													<h2 class="h2-responsive card-meta"><strong>Pagamento Realizado!</strong></h2>
													<hr>
													<div class="table-responsive">
														<table class="table">
															<tbody>
																<tr>
																	<th class="text-left">Meio:</th>
																	<th class="text-left">{{ ucfirst($pagamento->plataforma) }}</th>
																</tr>
																<tr>
																	<th class="text-left">Método:</th>
																	<th class="text-left">{{ ucfirst($pagamento->tipo_pagamento) }}</th>
																</tr>
																<tr>
																	<th class="text-left">Data do pagamento:</th>
																	<th class="text-left">{{ date('d/m/Y h:i', strtotime($pagamento->created_at)) }}</th>
																</tr>
																<tr>
																	<th class="text-left">Autenticação:</th>
																	<th class="text-left">{{ $pagamento->transaction_id }}</th>
																</tr>
															</tbody>
														</table>
													</div>
												</div>
											</div>
										</div>
									</div>
									@endif
									<hr class="mb-4">
								</div>
							</form>
						</div>
					</div>
					<!--/.Card-->

				</div>
				<!-- Column -->

				<!-- Column -->
				<div class="card col-md-4 align-items-stretch">

					<!--Card-->
					<h4 class="d-flex justify-content-between align-items-center mb-3">
						<span class="text-muted">Seus itens</span>
						<span class="badge badge-secondary badge-pill">{{ count($cartItems) }}</span>
					</h4>

					<!--Card content-->
					<div class="card-body">
						<!-- Cart -->
						<ul class="list-group mb-3 z-depth-1">
							@if($products)
							@foreach($cartItems as $product)
							<li class="list-group-item d-flex justify-content-between lh-condensed">
								<div>
									<h6 class="my-0">{{ $product->name }}</h6>
									{{--  <small class="text-muted">{{ $product->description }}</small>  --}}
								</div>
								<span class="text-muted">{{ config('cart.currency_symbol') }}@if (!is_null($product->sale_price) && ($product->sale_price_ini < date("Y-m-d")) && ($product->sale_price_fim >= date("Y-m-d"))) {{ number_format($product->sale_price, 2, ',', '.') }} @else {{ number_format($product->price, 2, ',', '.') }} @endif </span>
							</li>
							@endforeach
							@endif
							<li class="list-group-item d-flex justify-content-between bg-light">
								<div class="text-success">
									<h6 class="my-0">Código promocional</h6>
									<small class="codigo"></small>
								</div>
								<span class="text-success">{{ config('cart.currency_symbol') }}<span class="valorPromocao"> - </span></span>
								<input type="hidden" name="id_voucher">
							</li>

							<li class="list-group-item d-flex justify-content-between lh-condensed">
								<div class="text-default">
									<h6 class="my-0">Frete</h6>
									<small></small>
								</div>
								<span class="text-default">{{ config('cart.currency_symbol') }} {{ number_format(floatval($valorFrete), 2, ',', '.') }}</span>
							</li>

							<li class="list-group-item d-flex justify-content-between lh-condensed">
								<div class="text-default">
									<h6 class="my-0">Taxas</h6>
									<small></small>
								</div>
								<span class="text-default">{{ config('cart.currency_symbol') }} {{ number_format(floatval($rates), 2, ',', '.') }}</span>
							</li>

							<li class="list-group-item d-flex justify-content-between">
								<span>Total ({{ config('cart.currency_symbol') }})</span>
								<strong>{{ config('cart.currency_symbol') }} <span class="novoValor">{{ number_format($total, 2, ',', '.') }}</span></strong>
								<input type="hidden" name="total" value="{{ number_format(floatval($total), 2, '.', '') }}">
								<input type="hidden" name="total_original" value="{{ number_format(floatval($total), 2, '.', '') }}">
							</li>
						</ul>
						@if (!isset($order_paid) || $order_paid > 1)
						<!-- Promo code -->
						<form class="card p-2">
							<div class="input-group">
								<input type="text" class="form-control" placeholder="Código Promocional" aria-label="Código Promocional" aria-describedby="basic-addon2" name="codigoVoucher">
								<div class="input-group-append">
									<button class="btn btn-secondary btn-md waves-effect m-0" type="button" id="resgatar">Resgatar</button>
								</div>
							</div>
						</form>
						<!-- Promo code -->
						@endif
					</div>
					<!--/.Card-->

				</div>
				<!-- Column -->

			</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') }}">Mostrar!</a></p>
				</div>
			</div>
			@endif
			<!-- Container -->
			<!-- Modal informativo do Cupom -->
			<div class="modal mt-5 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-secondary" data-dismiss="modal">Fechar</button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- Modal informativo do Cupom -->

			<!-- Modal caso o Cupom esteja vazio -->
			<div class="modal fade mt-5" 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-md modal-notify modal-warning" role="document">


				<div class="modal-content">
					<div class="modal-header">
						<h4 class="modal-title w-100" id="myModalLabel">Cupom inválido</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 já utilizado, inválido ou campo não preenchido.
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary btn-sm" data-dismiss="modal">Fechar</button>
					</div>
				</div>
			</div>
		</div>
		<!-- Modal caso o Cupom esteja vazio -->
	</div>
</section>
@endsection
@section('js')
<script type="text/javascript">
	$(document).ready(function(){
		$('input[name=sameDeliveryAddress]').on('click', function() {
			let frete = $(this).data('frete')
			let subTotal = $('#subTotal').html()
			let taxa = $('#taxa').html()
			let total = parseFloat(frete.replace('.', '').replace(',', '.')) + parseFloat(subTotal.replace('.', '').replace(',', '.')) + parseFloat(taxa.replace('.', '').replace(',','.'))
			frete = frete.toLocaleString('pt-BR')
			total = total.toLocaleString('pt-BR')
			$('#shippingFee').html(frete)
			$('#grandTotal').html(total)
			$('input[name=frete]').val(frete)
		})

		/* 	$('input[name=pais]').on('click', function(){
			if ($(this).val() === 'EX') {
				$('#cpf_cnpj').unmask()
				$('#cpf_cnpj').val("Estrangeiro")
			} else {
				$('#cpf_cnpj').val("")
				$('#cpf_cnpj').focus()
			}
		}) */

		$('#cpf_cnpj').on('keyup', function(){
			let cpf_cnpj = $(this).val()
			console.log(cpf_cnpj.length)
			if (cpf_cnpj.length > 15) {
				$('#cpf_cnpj').mask('99.999.999/9999-99')
			} else {
				$('#cpf_cnpj').mask('999.999.999-99')
			}
		})
		$('#cielo').on('click', function(){
			let cpf_cnpj = $('#cpf_cnpj').val()
			if($(cpf_cnpj === null || cpf_cnpj === '' || cpf_cnpj.length < 11) {
				$('.alert').html('Você precisa preencher o CPF')
				$('#cpf_cnpj').focus()
				return false
			} else {
				$('#formPagamento').attr('action', "{{ route('cielo.payment') }}")
			}
		})
		$('#bank-transfer').on('click', function(){
			$('#formPagamento').attr('action', "{{ route('bank-transfer.index') }}")
			$('#formPagamento').attr('method', "GET")
		})
		$('#stripe').on('click', function(){
			$('#formPagamento').attr('action', "{{ route('checkout.execute') }}")
			$('#formPagamento').attr('method', "POST")
		})

		$('#resgatar').on('click', function(e){
			let voucher = $('input[name=codigoVoucher]').val()
			let valorPedido = $('input[name=total]').val()
			let valorPedidoOriginal = $('input[name=total_original]').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
							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)
							let novoValor = valorPedido
							let valorDesconto = 0.00
							if(result.data.tipo === 'I') {
								valorDesconto = parseFloat(valorPedidoOriginal) * (result.data.valor / 100)
								novoValor = parseFloat(valorPedidoOriginal) - parseFloat(valorDesconto)
							} else {
								valorDesconto = parseFloat(valorPedido) * (result.data.valor / 100)
								novoValor = parseFloat(valorPedido) - parseFloat(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'))
							$("input[name=voucher_id]").val(result.data.id);
							$("input[name=discount]").val(valorDesconto);
							$('#modalVoucher').modal('show')
						} else {
							$('#modalCupom').modal('show')
						}
					}
				})
			}
		})
	})
</script>
@endsection