@extends('layouts.front.app')

@section('content')
<!-- Main content -->
<section>
	<nav>
		<div class="container">
			<ol class="breadcrumb transparent mt-3">
				<li class="breadcrumb-item">
					<a href="{{route("home")}}" class="font-weight-bold fosco-text"><i class="fas fa-home fosco-text"></i> Home</a>
				</li>
				<li class="breadcrumb-item active font-weight-bolder black-text">Minha Conta</li>
			</ol>
		</div>
	</nav>
</section>

<section>
	<div class="container">
		<div class="text-right">
			<a href="{{ route('logout') }}">
				<h6 class="red-text font-weight-bold px-4 mb-0">Sair <i class="far fa-times-circle fa-lg red-text ml-1"></i></h6>
			</a>
		</div>
	</div>
</section>

<section>
	<div class="container">
		
		<div class="account my-3">
			
			<ul class="nav minha-conta md-tabs" id="myTabMD" role="tablist">
				
				<li class="nav-item mr-1">
					<a class="nav-link font-weight-bolder border border-bottom-0 min-width text-center black-text active p-3" id="perfil" data-toggle="tab" href="#perfil-md"> Meus Dados</a>
				</li>
				
				<li class="nav-item mr-1">
					<a class="nav-link font-weight-bolder border border-bottom-0 min-width text-center black-text p-3" id="pedido" data-toggle="tab" href="#pedido-md" role="tab">Pedidos</a>
				</li>
				
				<li class="nav-item mr-1">
					<a class="nav-link font-weight-bolder border border-bottom-0 min-width text-center black-text p-3" id="wishlist" data-toggle="tab" href="#wishlist-md">Lista de desejos</a>
				</li>
				
				<li class="nav-item">
					<a class="nav-link font-weight-bolder border border-bottom-0 min-width text-center black-text p-3" id="depoimento" data-toggle="tab" href="#depoimento-md" role="tab">Depoimentos</a>
				</li>
				
			</ul>
			
			<div class="tab-content account">
				
				<div class="tab-pane show active" id="perfil-md" role="tabpanel">
					<table class="table table-bordered">
						<thead>
							<tr class="text-center grey lighten-4">
								<th scope="col">NOME</th>
								<th scope="col">CPF/CNPJ</th>
								<th scope="col">E-MAIL</th>
								<th scope="col">CEP</th>
								<th scope="col">CIDADE</th>
								<th scope="col">BAIRRO</th>
								<th scope="col">ENDEREÇO</th>
								<th scope="col">NÚMERO</th>
							</tr>
						</thead>
						<tbody>
							<tr class="td-font-bolder">
								<td>{{ $customer->name }}</td>
								<td>{{ $customer->cpf_cnpj }}</td>
								<td>{{ $customer->email }}</td>
								<td>{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->zip : '' }}</td>
								<td>{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->cidade->nome_municipio : '' }}</td>
								<td>{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->address_2 : '' }}</td>
								<td>{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->address_1 : '' }}</td>
								<td>{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->numero : '' }}</td>
							</tr>
						</tbody>
					</table>
				</div>
				
				<div class="tab-pane" id="pedido-md" role="tabpanel">
					
					@if(count($customer->orders) === 0)
					
					<div class="alert alert-warning font-weight-bolder my-2" role="alert">
						Ainda não foi feito nenhum pedido. <a href="{{route("home")}}"> Comprar agora!</a>
					</div>
					
					@else
					
					<div class="card">
						
						<div class="card-body">
							
							<h4 class="card-title">Meus Pedidos</h4>
							
							<table id="tablePedido"  class="table table-striped table-bordered table-responsive-lg responsive dataTables" cellspacing="0" width="100%">
								
								<thead>
									<tr>
										<th class="text-center">N&ordm;</th>
										<th class="text-center">A&ccedil;&atilde;o</th>
										<th class="text-left">Data</th>
										<th class="text-center" style="width: 34%">Item(s) - pre&ccedil;o</th>
										<th class="">Frete ({{ @config('cart.currency_symbol') }})</th>
										<th class="">Total ({{ @config('cart.currency_symbol') }})</th>
										<th class="">Status</th>
									</tr>
								</thead>
								<tbody>
									
									@foreach ($customer->orders->sortByDesc('id') as $order)
									
									<tr>
										<td class="text-center">{{ $order->id }}</td>
										<td class="">
											@if($order->orderStatus->id === 2 && $order->total > 0)
											<a href="{{ route('checkout.view', $order['id']) }}" class="btn btn-red btn-rounded btn-sm" title="Efetuar pagamento do pedido">
												<i class="far fa-credit-card fa-lg"></i>
											</a>
											@else
											<a href="{{ route('checkout.view', $order->id) }}" class="btn btn-green btn-rounded btn-sm" title="Ver tela do pedido">
												<i class="fa fa-search fa-lg"></i>
											</a>
											@endif
										</td>
										<td class="text-left">{!! \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $order->created_at)->format('d/m/Y H:i') !!}</td>
										<td>
											<ul class="list-unstyled">
												@foreach ($order->products as $product)
												
												<li>
													{{ $product->name }} - ({{ $product->pivot->quantity }}x) {{ config('cart.currency_symbol') }} {{ number_format($product->price, 2,',','.') }}
												</li>
												
												@endforeach
											</ul>
										</td>
										<td class="">{{ number_format($order->total_shipping, 2,',','.') }}</td>
										<td class="">{{ number_format($order->total, 2,',','.') }}</td>
										<td class="text-center black-text {{ $order->orderStatus->color }} h5">
											{{ $order->orderStatus->name }}
										</td>
										
									</tr>
									@endforeach
								</tbody>
							</table>
						</div>
						<!-- ./Card content -->
					</div>
					
					@endif
				</div>
				
				<div class="tab-pane" id="wishlist-md" role="tabpanel">
					@if (count($customer->desejos) > 0)
					<table class="table table-bordered table-responsive wishlist">
						<thead>
							<tr class="grey lighten-4 text-center">
								<th scope="col" style="width: 15%">Produto</th>
								<th scope="col" style="width: 50%">Descrição</th>
								<th scope="col" style="width: 35%">Disponibilidade</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($customer->desejos as $desejo)
							<tr>
								<td><img src="{{ asset('storage/$desejo->cover')}}" width="100%"></td>
								<td>{{$desejo->name}}</td>
								<td>
									@if($desejo->quantity > 0)
									<a href="{{ route('front.get.product', [$desejo->slug, $desejo->id]) }}" class="btn green btn-md p-3 w-100 white-text">Em estoque, visualizar agora!</a>
									@else
									<a class="btn btn-danger btn-md p-3 w-100"> Fora de estoque</a>
									@endif
								</td>
							</tr>
							@endforeach
						</tbody>
					</table>
					
					@else
					<div class="alert alert-warning font-weight-bolder my-2" role="alert">
						Você ainda não possui uma Lista de Desejos.
					</div>
					@endif
					
				</div>
				
				<div class="tab-pane" id="depoimento-md" role="tabpanel">
					<div class="alert alert-warning font-weight-bolder my-2" role="alert">
						Você ainda não deixou seu depoimento,<a href="{{ route('customer.testimony.index', auth()->id()) }}"> crie um agora </a>
					</div>
				</div>
				
			</div>
			
		</div>
		<a href="{{ route('home')}}" class="font-weight-bold red-text"><i class="fas fa-arrow-left"></i> Voltar à página inicial</a>
		
	</div>
</section>								<!-- /.content -->
@endsection

@section('js')
<script type="text/javascript">
	$(document).ready(function () {
		$('[data-toggle="tooltip"]').tooltip()
		$('.carousel').carousel()
	})
</script>
@endsection