@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="home"/>
<meta property="og:description" content="{{ config('app.description') }}"/>
@endsection
@section('css')
<style type="text/css">
	.flex-1 {
		flex: 1;
	}
</style>
@endsection

@section('content')
<section class="content container">

	<nav aria-label="breadcrumb" class="grey lighten-3">
		<ol class="breadcrumb">
			<li class="breadcrumb-item"><a href="#"><i class="fas fa-home black-text"></i></a></li>
			<li class="breadcrumb-item active">Meus Produtos</li>
		</ol>
	</nav>
	@if ($cartItems->count() > 0)
	<div class="row">
		<div class="col-lg my-1 table-responsive ">

			<table class="table border table-hover my-3">

				<thead>
					<tr class="black-vitas">
						<th style="width:50%"><h4 class="white-text font-weight-bold">Produto</h4></th>
						<th style="width:10%"><h4 class="white-text font-weight-bold">Preço</h4></th>
						<th style="width:8%"><h4 class="white-text font-weight-bold">Quantidade</h4></th>
						<th style="width:22%"><h4 class="white-text font-weight-bold text-center">SubTotal</h4></th>
						<th style="width:10%"></th>
					</tr>
				</thead>
				<tbody>
					@foreach ($cartItems as $cartItem)
					<tr>
						<td data-th="Produto">
							<div class="row">
								<div class="col-lg-3">
									<img src="{{ asset($cartItem->cover) }}" width="100%"  class="img-responsive"/>
								</div>
								<div class="col-lg-9">
									<h6 class="font-weight-bolder">{{ $cartItem->name }}</h6>
								</div>
							</div>
						</td>
						<td data-th="Preço" class="text-center h6">{{ config('cart.currency_symbol') }} {{ number_format($cartItem->price, 2, ',', '.') }}</td>
						<td data-th="Quantidade">
							<input type="number" class="form-control text-center" value="{{$cartItem->qty}}"  min="1" max="{{$cartItem->product->quantity}}">
						</td>
						<td data-th="Subtotal" class="text-center h6">{{ config('cart.currency_symbol') }} {{ number_format($cartItem->subtotal, 2, ',', '.') }}</td>
						<td class="actions" data-th="Actions">
							<form action="{{ route('cart.destroy', $cartItem->rowId) }}" class="" method="post" id="ExcluiItem_{{ $cartItem->rowId }}">
								{{ csrf_field() }}
								<input type="hidden" name="_method" value="delete">
								<button onclick="return confirm('Tem certeza??')" class="btn red-shadow btn-sm my-0 p white-text"><i class="fas fa-trash"></i></button>
							</form>
						</td>
					</tr>

					@endforeach
				</tbody>
			</table>
			<div class="row">
				<div class="col-lg-6 mb-4">
					<a href="{{ url()->previous() }}" class="font-weight-bold red-vitas-text"><i class="fas fa-arrow-left"></i> Continuar Comprando</a>
				</div>

				<div class="col-lg table-responsive">
					<table class="table text-center border">
						<thead>
							<tr class="black-vitas">
								<th class="white-text">Subtotal</th>
								<th class="white-text">Frete</th>
								<th class="white-text">Total</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<th class="font-weight-bold"><span id="sudTotal">{{ config('cart.currency_symbol') }} {{ number_format($subtotal, 2, ',', '.') }}</span>  <i class="fas fa-plus float-right"></i>

									<input type="hidden" name="quantity" value="1">
								</th>
							<td class="font-weight-bold"><span id="valFrete">{{ config('cart.currency_symbol') }} {{ number_format($cartItem->options->frete, 2, ',', '.') }}</span> <i class="fas fa-equals float-right red-vitas-text"></i></td>
								<td class="font-weight-bold red-vitas-text"><span id="valid_price">{{ config('cart.currency_symbol') }} {{ number_format(floatval($total) + floatval($cartItem->options->frete), 2, ',', '.') }}</span> </td>
							</tr>
						</tbody>
					</table>
						@if (auth()->check())
						<button class="btn btn-block green-shadow btn-cart" data-href="{{ route('checkout.index') }}"><i class="fas fa-shopping-cart"></i> Finalizar Pedido</button>
						@else
						<button data-toggle="modal" data-target="#modalLRForm" class="btn btn-block green-shadow btn-logar"><i class="fas fa-shopping-cart"></i> Finalizar Pedido</button>
						@endif
				</div>
			</div>

		</div>
	</div>
	@else
	<div class="row container my-5 text-center">
		<div class="alert alert-warning" role="alert">
			<p class="">Você não possui itens em seu carrinho</p>
			<a href="{{ route('home') }}" class="btn btn-light-blue btn-md">Voltar à página inicial</a>
		</div>
	</div>
	@endif
</section>
@endsection
@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}" 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 () {
		$('.total').hide()

		$('.carousel').carousel()
		$('ul.navbar-nav li.dropdown').hover(function() {
			$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
		}, function() {
			$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
		});

		$('.popover-dismiss').popover({
			trigger: 'focus'
		})

		$('.link-categoria').on('click', function(){
			window.location.href = $(this).data('href');
		})

		$('#cepDest').mask ('99999-999')
		$('.aguardeFrete').hide()
		$('.calcularFrete').show()
		$('.frete').hide()

		$('#calcularFrete').on('click', function(e){
			e.preventDefault()
			$('.aguardeFrete').show()
			$('.calcularFrete').hide()
			$('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
			/*Padroes da entrega dos correios*/
			let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
			let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
			let min_altura = {!! config('shipping.correios.min_altura') !!}
			let max_altura = {!! config('shipping.correios.max_altura') !!}
			let min_largura = {!! config('shipping.correios.min_largura') !!}
			let max_largura = {!! config('shipping.correios.max_largura') !!}
			let min_peso = {!! config('shipping.correios.min_peso') !!}
			let max_peso = {!! config('shipping.correios.max_peso') !!}

			let cepOrig = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
			let cepDest = $('#cepDest').val()
			cepDest = cepDest.replace('-', '')

			let quantity = $('input[name=quantity]').val()
			let peso = $('input[name=peso]').val()
			let altura = $('input[name=altura]').val() * 100
			let largura = $('input[name=largura]').val() * 100
			let comprimento = $('input[name=comprimento]').val() * 100
			let preco = $('input[name=subTotal]').val()
			preco = parseFloat(preco)

			console.log(peso)
			let send = true
			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 url = '/api/calculaEntrega/' + cepDest + '/' + preco + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento
			if(send){
				$('.msgCEP').removeClass('show')
				axios.get(url, {headers: {'Accept': 'application/json'}})
				.then((response)=>{
					let retorno = response.data
					let _tableFrete
					let txt_dias
					let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
					$.each(retorno, function( index, fretes ) {
						$.each(fretes, function( i, frete ) {
							console.log('Frete', frete)
							txt_dias = (frete.prazo > 1) ? ' dias úteis' : ' dia útil'
							let valor = parseFloat(frete.valor)
							_tableFrete += '<tr>'
								_tableFrete += '<td>'
									_tableFrete += '<div class="custom-control custom-radio">'
										_tableFrete += '<input type="radio" class="custom-control-input" id="'+frete.servico+'" name="tipoEntrega" value="'+frete.codigo+'" aria-selected="true" data-frete="'+valor+'">'
										_tableFrete += '<label class="custom-control-label" for="'+frete.servico+'">'+frete.descServico+'</label>'
										_tableFrete += '</div>'
										_tableFrete += '</td>'
										_tableFrete += '<td data-th="dia" class="text-center dia">' + frete.prazo + txt_dias+ ' </td>'
										_tableFrete += '<td data-th="preco" class="text-center preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
										_tableFrete += '</tr>'
									})
								})

								$('#frete>tbody').html(_tableFrete)

								$('.aguardeFrete').hide()
								$('.calcularFrete').show()
								$('.frete').show()
								/**
								* Insere os valores nos devidos campos após a escolha do frete
								*/
								$('input[name=tipoEntrega]').on('click', function(){
									let frete_val = $('input[name=tipoEntrega]:checked').data('frete')
									let valorFinal = preco + parseFloat(frete_val)
									let parc_sem_juros = {!! config('cart.parc_sem_juros') !!}
									let valor_min_parcela = {!! config('cart.valor_min_parcela') !!}
									let valor_parcela = 0.00
									let parcela = 0


									$('input[name=frete]').val(parseFloat(frete_val))
									$('#valid_price').html(valorFinal.toLocaleString('pt-BR', formato))
									$('#valFrete').html(frete_val.toLocaleString('pt-BR', formato))
									$('#numero_parcelas').html(parcela)
									$('#valor_parcela').html(valor_parcela.toLocaleString('pt-BR'))
									$('button.btn-comprar').removeClass('disabled')
									$('button.btn-logar').removeClass('disabled')
								})

							}).catch((error)=>{
								$('.aguardeFrete').hide()
								$('.calcularFrete').show()
								$('.msgCEP').removeClass('alert-warning')
								$('.msgCEP').addClass('alert-danger')
								$('.msgCEP').addClass('show')
								$('#msgCEP').html('Erro')
								$('button.btn-comprar').addClass('disabled')
								$('button.btn-logar').addClass('disabled')
								console.log('Error', error)
								$('.frete').show()
							})
						} else {
							$('.aguardeFrete').hide()
							$('.calcularFrete').show()
						}
					})

					$('.btn-comprar').on('click', function(e){
						e.preventDefault()
						let frete = $('input[name=frete]').val()
						/*if(frete === '') {
							$('.msgCEP').addClass('show')
							$('#msgCEP').html('Você não escolheu o método de entrega...')
						} else {*/
							$('#adicionandoCarrinho').modal( 'show' )
							$('#adicionandoCarrinho').modal({
								backdrop: 'static'
							})
							$('#toCheckout').submit()
							/*}*/
						})

						$('.avise-me').on('click', function() {
							let url = "{!! url('api/avise-me') !!}"
							let sku = $(this).data('sku')

							let customer_id = $('#user_id_loged').val()

							if (customer_id === "null") {
								$('#modalAviso').modal( 'show' )
								$('#modalAviso').on('show.bs.modal', function (event) {
									var modal = $(this)
									modal.find('.modal-title').text('Efetuar Login')
									modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
								})
								return false
							}

							console.log(sku, customer_id)
							axios.post(url, {
								token: token,
								customer_id: parseInt(customer_id),
								sku: sku
							},
							{
								/*headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},*/
								crossDomain: true
							})
							.then((response)=>{
								console.log('Resposta', response.data)
								console.log('Status', response.status)

								$('#modalAviso').modal( 'show' )
								$('#modalAviso').on('show.bs.modal', function (event) {
									var modal = $(this)
									modal.find('.modal-title').text('Aviso Gravado')
									modal.find('.modal-body #modal-message').html('Você será avisado quando este produto chegar.')
								})
							}).catch((error)=>{
								console.log('Error', error)
							})
						})

						$('.item-variavel').on('click', function(){
							let product_id = $(this).data('product')
							let price = $('input[name=final_price-'+product_id+'').val()
							let quantity = $('input[name=quantity-'+product_id+'').val()
							let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
							price = parseFloat(price)

							$('input[name=subTotal]').val(price)
							$('input[name=quantity]').val(1)
							$('input[name=productAttribute]').val(product_id)
							$('input[name=quantity]').attr('max', quantity)
							$('span.price').html(price.toLocaleString('pt-BR', formato))
							if(quantity <= 0) {
								$('button.btn-comprar').attr('disabled', true)
								$('button#calcularFrete').attr('disabled', true)
								$('.imagem-mascara-esgotado').show()
							} else {
								$('button.btn-comprar').removeAttr('disabled')
								$('button#calcularFrete').removeAttr('disabled')
								$('.imagem-mascara-esgotado').hide()
							}
						})
						$('.cart-del').on('click', function(e) {
							e.preventDefault()
							$('#formDestroy').submit()
						})
					})
				</script>

				@endsection