@extends('layouts.front.app')

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

	<nav aria-label="breadcrumb" class="grey lighten-3">
		<div class="container">
			<ol class="breadcrumb">
				<li class="breadcrumb-item"><a href="#"><i class="fas fa-home black-text"></i></a></li>
				<li class="breadcrumb-item active">Minha Conta</li>
			</ol>
		</div>
	</nav>

</section>

<section>
	<div class="container">

		<div class="account my-5">

			<ul class="nav account md-tabs" id="myTabMD" role="tablist">

				<li class="nav-item mr-1">
					<a class="nav-link @if(request()->input('tab') === 'profile') active @endif font-weight-bolder black-text p-3" id="perfil" data-toggle="tab" href="#perfil-md"> Meus Dados</a>
				</li>

				<li class="nav-item mr-1">
					<a class="nav-link @if(request()->input('tab') === 'orders') active @endif font-weight-bolder 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 @if(request()->input('tab') === 'wishes') active @endif font-weight-bolder 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 @if(request()->input('tab') === 'testymonials') active @endif  font-weight-bolder 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 fade @if(request()->input('tab') === 'profile') show active @endif" id="perfil-md" role="tabpanel" aria-labelledby="perfil">
					<table class="table table-bordered table-responsive">
						<thead>
							<tr class="text-center grey lighten-4">
								<th scope="col">Nome</th>
								<th scope="col">CPF</th>
								<th scope="col">Nascimento</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>
								<td>{{ $customer->name }}</td>
								<td>{{ $customer->cpf_cnpj }}</td>
								<td>{{ $customer->byrthday }}</td>
								<td>{{ $customer->email }}</td>
								<td>{{-- (count($customer->addresses) > 0 ) ? $customer->addresses->first()->city->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 fade @if(request()->input('tab') === 'orders') show active @endif" id="pedido-md" role="tabpanel" aria-labelledby="pedido">
					@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=""> Comprar agora!</a>
					</div>
					@else
					<table class="table table-bordered table-responsive">
						<thead>
							<tr class="grey lighten-4 text-center">
								<th scope="col" style="width: 35%">Pedidos</th>
								<th scope="col" style="width: 35%">Entrega</th>
								<th scope="col" style="width: 35%">Status</th>
							</tr>
						</thead>
						<tbody>
							@foreach ($customer->orders as $pedidos)
							<tr>
								<td>{{ $pedidos->id }}</td>
								<td>{{ $pedidos->entrega }}</td>
								<td><a class="btn btn-{{ $pedidos->orderStatus->color }} btn-md p-3 w-100">{{ $pedidos->orderStatus->name }}</a></td>
							</tr>
							@endforeach
						</tbody>
					</table>
					@endif
				</div>

				<div class="tab-pane fade @if(request()->input('tab') === 'wishes') show active @endif" id="wishlist-md" role="tabpanel" aria-labelledby="wishlist">
					@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 fade @if(request()->input('tab') === 'testymonials') show active @endif" id="depoimento-md" role="tabpanel" aria-labelledby="depoimento">
					<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-vitas-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