@extends('layouts.front.app')
@section('css')
<link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">
@endsection
@section('content')
<!-- Main content -->

<section class = "container content">
	<div class = "container dark-grey-text">
		<!-- Heading -->
		<div class = "container-fluid">
			<nav>
				<ol class = "breadcrumb transparent mt-3">
					<li class = "breadcrumb-item font-weight-bold"><a href = "{{ route('home') }}" class = "black-text"><i class = "fas fa-home"></i> Home</a></li>
					@if(isset($order_id))
					<li class = "breadcrumb-item font-weight-bold black-text"><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 font-weight-bold black-text"><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>
		</div>
		<!-- Container -->
		@if($products->count() > 0)
		<div class = "container my-1">

			<div class = "border rounded">

				<div class = "p-3 mb-4">

					<ul class = "billing nav nav-justified font-weight-bold elegant-color p-3 rounded">
						<li class = "nav-item">
							<a  class = "nav-link white-text active" data-toggle = "tab" href = "#cadastro" id="tabCadastro" role = "tab">Cadastro</a>
						</li>
						<li class = "nav-item">
							<a  class = "nav-link white-text" data-toggle = "tab" href = "#pagamento" id="tabPagamento" role = "tab">Método de pagamento</a>
						</li>
					</ul>

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

						<div   class = "tab-pane fade in show active" id = "cadastro" role     = "tabpanel">
							<input type  = "hidden" name = "customer_id" value = "{{ auth()->id() }}">
							{{-- <form class="text-center" action="{{ route('customer.store') }}" method="POST">
								{{ csrf_field() }} --}}
								<input type  = "hidden" name = "_method" value= "put">
								<div   class = "form-row">
									<div   class = "col-sm mb-4">
										<div   class = "col-lg custom-control custom-checkbox text-right">
											<input type  = "radio" name= "type_customer" class = "custom-control-input" id = "pFis" value = "F" @if (auth()->user()->type_customer === 'F') checked @endif>
											<label class = "custom-control-label font-weight-bolder" for = "pFis">Pessoa Física</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "col-lg custom-control custom-checkbox">
											<input type  = "radio" name= "type_customer" class = "custom-control-input" id = "pJur" value = "J" @if (auth()->user()->type_customer === 'J') checked @endif>
											<label class = "custom-control-label font-weight-bolder" for = "pJur">Pessoa Jurídica</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "col-lg custom-control custom-checkbox">
											<input type  = "radio" name= "type_customer" class = "custom-control-input" id = "EX" value = "X" @if (auth()->user()->type_customer === 'X') checked @endif>
											<label class = "custom-control-label font-weight-bolder" for = "EX">Estrangeiro</label>
										</div>
									</div>
								</div>
								<div   class = "md-form">
									<input type  = "text" required class = "form-control mb-4" placeholder      = "Nome" name = "name" value = "{{ old('name', auth()->user()->name) }}">
									<label for   = "name" class= "font-weight-light">Nome <span class = "red-text">*</span></label>
								</div>

								<div   class = "form-row">
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "hidden" name = "document_type">
											<input type  = "text" class  = "form-control mb-4" placeholder = "9999999999" name = "document_number" value = "{{ old('document_number', auth()->user()->document_number) }}">
											<label for   = "document_number" class = "font-weight-light">RG</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" required class = "form-control" placeholder       = "999.999.999-99" name = "cpf_cnpj" value = "{{ old('cpf_cnpj', auth()->user()->cpf_cnpj) }}">
											<label for   = "cpf_cnpj" class      = "font-weight-light">CPF / CNPJ <span class = "red-text">*</span></label>
										</div>
									</div>
								</div>

								<div   class = "form-row">
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type = "date" required class = "form-control" placeholder = "Data de Nascimento" name = "birthday" value="{{ auth()->user()->birthday }}">
											<label for   = "birthday" class      = "font-weight-light">Data de Nascimento / Fundação <span class = "red-text">*</span></label>
										</div>
									</div>
									<div    class = "col-sm mb-4">
										<div    class = "md-form">
											<select class = "form-control" name = "gender" required>
												<option value = "">Sexo</option>
												<option value = "M" @if (auth()->user()->gender === 'M') selected @endif >Masculino</option>
												<option value = "F" @if (auth()->user()->gender === 'F') selected @endif>Feminino</option>
											</select>
										</div>
									</div>
								</div>
								<div class = "form-row">
									<a   href  = "{{ route('customer.address.create', auth()->user()->id) }}" class = "btn btn-sm btn-primary rounded text-white">Para cadastrar outro endereço, clique aqui</a>
								</div>
								<div   class = "form-row">
									<div   class = "col-sm-8 mb-4">
										<div   class = "md-form">
											<input type  = "text" required class = "form-control mb-4" placeholder= "Endereço" name = "address_1" value = "{{ old('address_1', $addresses->first()->address_1 ) }}" readonly>
											<label for   = "address_1" class     = "font-weight-light">Endereço <span class = "red-text">*</span></label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class   = "form-control mb-4" placeholder = "Número" name = "numero" value = "{{ old('numero', $addresses->first()->numero ) }}" readonly>
											<label for   = "numero" class = "font-weight-light">Número</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class        = "form-control mb-4" name = "complemento" value = "{{ old('complemento', $addresses->first()->complemento ) }}" readonly>
											<label for   = "complemento" class = "font-weight-light">Complemento</label>
										</div>
									</div>
								</div>

								<div   class = "form-row">
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class      = "form-control" placeholder = "Bairro" name = "address_2" value = "{{ old('address_2', $addresses->first()->address_2 ) }}" readonly>
											<label for   = "address_2" class = "font-weight-light">Bairro</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class = "form-control" placeholder = "Cidade" name = "city" value = "{{ old('city', $addresses->first()->cidade->nome_municipio ) }}" readonly>
											<label for   = "city" class = "font-weight-light">Cidade</label>
										</div>
									</div>
								</div>
								<div   class = "form-row">
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class = "form-control" placeholder = "CEP" name = "zip" value = "{{ $addresses->first()->zip }}" readonly>
											<label for   = "zip" class  = "font-weight-light">CEP</label>
										</div>
									</div>
									<div   class = "col-sm mb-4">
										<div   class = "md-form">
											<input type  = "text" class = "form-control" placeholder = "UF" name = "uf" value = "{{ old('city', $addresses->first()->cidade->uf ) }}" readonly>
											<label for   = "uf" class   = "font-weight-light">UF</label>
										</div>
									</div>
								</div>
								<div   class = "form-row">
									<div   class = "col-sm-4 mb-4">
										<div   class = "md-form">
											<input type  = "text" required class = "form-control" placeholder  = "Email" name = "email" value = "{{ auth()->user()->email }}" readonly>
											<label for   = "email" class         = "font-weight-light">Email <span class = "red-text">*</span></label>
										</div>
									</div>
									<div   class = "col-sm-4 mb-4">
										<div   class = "md-form">
											<input type  = "text" required class = "form-control" placeholder    = "(99)9 9999-9999" name = "mobile" value = "{{ old('mobile', auth()->user()->mobile ) }}" required>
											<label for   = "uf" class  = "font-weight-light">Celular <span class = "red-text">*</span></label>
										</div>
									</div>
									<div   class = "col-sm-4 mb-4">
										<div   class = "md-form">
											<input type  = "text" class  = "form-control" placeholder = "(99) 9999-9999" name = "phone" value = "{{ old('city', auth()->user()->phone ) }}">
											<label for   = "phone" class = "font-weight-light">Telefone</label>
										</div>
									</div>
								</div>
								<div   class     = "form-row">
									<div   class     = "custom-control custom-checkbox">
										<input type  = "checkbox" class                               = "custom-control-input" id = "terms" required>
										<label class     = "custom-control-label font-weight-bolder float-left" for = "terms">
											Li     e Aceito os <a href = "">Termos de Uso</a> <span class               = "red-text">*</span>
										</label>
									</div>
								</div>

								<button class = "btn btn-block btn-lg mt-3 box-green btn-cadastro" type = "submit">Próximo</button>

								{{-- </form> --}}

							</div>

							<div class = "tab-pane fade" id = "pagamento" role = "tabpanel">

								<div class = "pagamento">

									<div class = "mt-4">

										<div class = "text-center">
											<ul  class = "list-unstyled list-inline">
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/visa.png') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/mastercard.png') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/hipercard.jpg') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/diners.png') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/amex.png') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/elo.png') }}" style="width:60px;">
												</li>
												<li  class = "list-inline-item">
													<img src   = "{{ asset('/storage/cards/boleto.jpg') }}" style="width:60px;">
												</li>
											</ul>
										</div>
									</div>

									<ul class = "nav mx-0 checkout" id                           = "myTab" role= "tablist">
										<li class = "nav-item">
											<a  class = "nav-link active font-weight-bolder rounded black-text" id = "credito-tab" data-toggle = "tab"
											href  = "#credito" role= "tab">Cartão de Crédito</a>
										</li>
										<li class = "nav-item">
											<a  class = "nav-link font-weight-bolder rounded black-text" id = "debito-tab" data-toggle = "tab"
											href  = "#debito" role    = "tab">Cartão de Débito</a>
										</li>
									</ul>

									<div class = "tab-content form-pagamento border px-3 py-4">

										<div  class = "tab-pane fade show active" id = "credito" role = "tabpanel" aria-labelledby = "credito-tab">
											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class    = "fas fa-user"></i></span>
														</div>
														<input type = "text" class = "form-control" placeholder = "Nome do Titular do Cartão">
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-credit-card"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Número do cartão">
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-calendar-day"></i></span>
														</div>
														<input type = "text" class = "form-control datepicker" data-date-format="mm/yyyy" placeholder = "Validade do cartão">
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-lock"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "CVV">
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-list-ol"></i></span>
														</div>
														@php
														$preco_valido = $cartTotal;
														@endphp
														<select class = "browser-default custom-select" name="num_parcelas">
															<option>Parcelas</option>
															@for($p = 1 ; $p <= @config('payees.parcels') ; $p++)
															@if (round($preco_valido / $p, 2) > config('payees.parcel_min') )
															<option value="{{ $p }}" data-parcelas="{{ $p }}" data-por-parcela="{{ floatval(round($preco_valido/$p,2)) }}">{{ $p }}</option>
															@endif
															@endfor
														</select>
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3 ">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><strong>{{ config('cart.currency_symbol') }}</strong></span>
														</div>
														<input type = "text" class = "form-control show-parcelas" placeholder = "1 x de {{number_format($cartTotal, 2, ',', '.')}}" disabled>
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class="fas fa-user-secret"></i> </span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Informe o resultado da soma ao lado" name="captcha" required>
													</div>

												</div>
												<div  class = "col-sm">
													{{-- <div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-mobile-alt"></i> </span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Celular">
													</div> --}}
													<p>{!! captcha_img() !!}</p>
												</div>
											</div>
										</div>

										<div  class = "tab-pane fade" id= "debito" role = "tabpanel" aria-labelledby = "debito-tab">
											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-user"></i></span>
														</div>
														<input type = "text" class = "form-control" placeholder = "Nome do Titular do Cartão">
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-credit-card"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Número do cartão">
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-calendar-day"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Validade do cartão">
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-lock"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "CVV">
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm disabled">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-list-ol"></i></span>
														</div>
														<select class = "browser-default custom-select">
															<option>À vista</option>
															<option value = "1">1</option>
															<option value = "2">2</option>
															<option value = "3">3</option>
														</select>
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3 disabled">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><strong>R</strong><i class = "fas fa-dollar-sign"></i></span>
														</div>
														<input type = "number" class = "form-control" placeholder = "1 x de 49,90" disabled = "">
													</div>
												</div>
											</div>

											<div  class = "form-row py-2">
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-phone"></i> </span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Telefone">
													</div>
												</div>
												<div  class = "col-sm">
													<div  class = "input-group mb-3">
														<div  class = "input-group-prepend">
															<span class = "input-group-text"><i class = "fas fa-mobile-alt"></i> </span>
														</div>
														<input type = "number" class = "form-control" placeholder = "Celular">
													</div>
												</div>
											</div>

										</div>

										<div    class = "finalizar-compra">
											<button class = "btn btn-block box-green h3">Realizar Pagamento</button>
										</div>
									</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>
<script src = "{{ asset('js/jquery.mask.js') }}" type = "text/javascript" charset = "utf-8">
</script>
<script src = "{{ asset('js/jquery-ui.min.js') }}" type = "text/javascript" charset = "utf-8">
</script>
<script type  = "text/javascript">
	var token = document.head.querySelector('meta[name="csrf-token"]')
	axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
	$(document).ready(function(){
		$('input[name=cpf_cnpj]').mask('999.999.999-99')
		$('input[name=type_customer]').on('click', function(){
			let tipo = $('input[name=type_customer]:checked').val()
			$('input[name=cpf_cnpj]').unmask()
			$('input[name=cpf_cnpj]').val('')
			$('input[name=mobile]').mask('(99)9 9999-9999')
			$('input[name=phone]').mask('(99)9999-9999')
			if( tipo === 'F'	) {
				$('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 === 'J' ) {
				$('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=mobile]').unmask()
				$('input[name=phone]').unmask()
				$('input[name=document_type]').val('Passport')
			}
		})

		$('input[name=mobile]').mask('(99)9 9999-9999')
		$('input[name=phone]').mask('(99)9999-9999')

		$('.btn-cadastro').on('click', function(){
			let customer_id     = $('input[name=customer_id]').val()
			let name  = $('input[name=name]').val()
			let email = $('input[name=email]').val()
			let cpf_cnpj        = $('input[name=cpf_cnpj]').val()
			let birthday        = $('input[name=birthday]').val()
			let type_customer   = $('input[name=type_customer]').val()
			let gender= $('input[name=gender]').val()
			let document_number = $('input[name=document_number]').val()
			let mobile= $('input[name=mobile]').val()
			let phone = $('input[name=phone]').val()
			let terms = $('#terms:checked')
			console.log(terms)
			if(name === '' || email === '' || cpf_cnpj === '' || birthday === '' || type_customer === '' || mobile === '') {
				let textAviso = ''
				if(name === '') {
					$('label[for=name]').addClass('red-text')
					textAviso += '<li>Nome</li>'
				} else {
					$('label[for=name]').removeClass('red-text')
				}
				if(email === '') {
					$('label[for=email]').addClass('red-text')
					textAviso += '<li>Email</li>'
				} else {
					$('label[for=email]').removeClass('red-text')
				}
				if(cpf_cnpj === '') {
					$('label[for=cpf_cnpj]').addClass('red-text')
					textAviso += '<li>CPF / CNPJ</li>'
				} else {
					$('label[for=cpf_cnpj]').removeClass('red-text')
				}
				if(birthday === '') {
					$('label[for=birthday]').addClass('red-text')
					textAviso += '<li>Aniversário</li>'
				} else {
					$('label[for=birthday]').removeClass('red-text')
				}
				if(mobile === '') {
					$('label[for=mobile]').addClass('red-text')
					textAviso += '<li>Celular</li>'
				} else {
					$('label[for=mobile]').removeClass('red-text')
				}
				if(terms.length === 0) {
					$('label[for=terms]').addClass('red-text')
					textAviso += '<li>Aceite os termos</li>'
				} else {
					$('label[for=terms]').removeClass('red-text')
				}
				$('#modalAviso').on('show.bs.modal', function (event) {
					var modal = $(this)
					modal.find('.modal-dialog').addClass('modal-notify').addClass('modal-danger')
					modal.find('.modal-title').text('Campos obrigatórios')
					modal.find('.modal-body #modal-message').html('Preencha o(s) seguinte(s) campo(s) para prosseguir:<ul>'+textAviso+'</ul>')
				})
				$('#modalAviso').modal( 'show' )

				return false
			} else {
				let url = "{!! url('customer/update') !!}"
				axios.post(url, {
					token          : token,
					customer_id    : parseInt(customer_id),
					name           : name,
					email          : email,
					cpf_cnpj       : cpf_cnpj,
					birthday       : birthday,
					type_customer  : type_customer,
					gender         : gender,
					document_number: document_number,
					mobile         : mobile,
					phone          : phone
				},
				{
					headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},
					crossDomain: true
				})
				.then((response)=>{
					console.log('Status', response.status)
					$('#modalAviso').on('show.bs.modal', function (event) {
						var modal = $(this)
						modal.find('.modal-title').text('Informções gravadas')
						modal.find('.modal-body #modal-message').html('Prossiga com o pagamento.')
					})
					$('#modalAviso').modal( 'show' )
					$('#cadastro').removeClass('active')
					$('#cadastro').removeClass('show')
					$('#tabCadastro').removeClass('active')
					$('#pagamento').addClass('active')
					$('#pagamento').addClass('show')
					$('#tabPagamento').addClass('active')
				}).catch((error)=>{
					console.log('Error', error)
				})
			}
		})

		$(".datepicker").datepicker({
			dateFormat: 'mm/yy',
			minDate: new Date(),
			changeMonth: true,
			changeYear: true,
			showButtonPanel: true,
			monthNamesShort: ['Jan', 'Fev', 'Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago', 'Set', 'Out', 'Nov', 'Dez'],
			nextText: 'Próximo',
			prevText: 'Anterior',
			weekHeader: 'Semana',
			currentText: 'Hoje',
			doneText: 'Ok',

			onClose: function(dateText, inst) {
				var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
				var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
				$(this).val($.datepicker.formatDate('mm/yy', new Date(year, month, 1)));
			},
			onChangeMonthYear: function (year, month, inst) {
				$(this).val($.datepicker.formatDate('mm/yy', new Date(year, month - 1, 1)));
			}
		});

		$(".datepicker").focus(function () {
			$(".ui-datepicker-calendar").hide();
			$("#ui-datepicker-div").position({
				my: "center top",
				at: "center bottom",
				of: $(this)
			});
		});

		$('select[name=num_parcelas]').on('change', function(){
			let parcela = $('select[name=num_parcelas] option:selected').data('parcelas')
			let val_parcela = $('select[name=num_parcelas] option:selected').data('por-parcela')
			let txt_parcela = parcela + ' x de ' + val_parcela.toLocaleString('pt-BR')
			$('.show-parcelas').val(txt_parcela)
			console.log(parcela, val_parcela)
		})
		/* $('#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' || cobranca === '' /*|| entrega === 'undefined' || 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()
					$('#incluiNotification').hide()
					$('#incluiCielo').hide()
					$('#incluiPagseguro').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
				} else if(tipo_pagamento === 'notification') {
					$('#incluiNotification').show()
					$('#incluiBankTransfer').hide()
					$('#incluiCielo').hide()
					$('#incluiPagseguro').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
					$('#formPagamento').attr('method', "POST")
					$('#formPagamento input[name=billing_address]').val(end_cobranca)
					$('#formPagamento').attr('action', "{{ route('notification.store') }}")
				} else if (tipo_pagamento === 'cielo') {
					$('#incluiCielo').show()
					$('#incluiBankTransfer').hide()
					$('#incluiNotification').hide()
					$('#incluiPagseguro').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'pagseguro') {
					$('#incluiPagseguro').removeAttr('style')
					$('#incluiPagseguro').show()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
					$('#incluiNotification').hide()
					$('#incluiPaypal').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'paypal') {
					$('#incluiPaypal').show()
					$('#incluiPagseguro').hide()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
					$('#incluiNotification').hide()
					$('#incluiStripe').hide()
				} else if (tipo_pagamento === 'stripe') {
					$('#incluiStripe').show()
					$('#incluiPaypal').hide()
					$('#incluiPagseguro').hide()
					$('#incluiCielo').hide()
					$('#incluiBankTransfer').hide()
					$('#incluiNotification').hide()
				}
			}
		})

		/* $('input[name=end_cobranca]').on('click', function(){
			$('input[name=address_id]').val($(this).val())
		})
		$('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') !!}
			let cepDest     = $(this).attr('data-cep')
			cepDest     = cepDest.replace('-', '')
			let cepOrig     = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
			let comprimento = {!! config('shipping.correios.min_comprimento') !!}
			let largura     = {!! config('shipping.correios.min_largura') !!}

			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') }}")
		})
		$('#notification').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