@extends('layouts.front.app')

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

  <nav class="grey lighten-3">
    <div class="container">
      <ol class="breadcrumb transparent mt-3">
        <li class="breadcrumb-item"><a href="#" class="font-weight-bold fosco-text"> <i class="fas fa-home"></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="account my-5">

      <div class="text-right">
				<a href="{{route("logout")}}">
					<h6 class="font-abeezee font-weight-bold red-text">Sair <i class="far fa-times-circle fa-lg"></i></h6>
				</a>
			</div>

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

        <li class="nav-item mr-1">
          <a class="nav-link active 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 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 font-weight-bolder black-text p-3" id="endereco" data-toggle="tab" href="#endereco-md" role="tab">Endere&ccedil;os</a>
        </li>

        <li class="nav-item mr-1">
          <a class="nav-link 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 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 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</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()->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" 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') }}" class="fosco-text"> 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%">Item(s)</th>
                <th scope="col" style="width: 35%">Status</th>
              </tr>
            </thead>

            <tbody>
              @foreach ($customer->orders as $pedidos)
              @php
              $icon = ($pedidos->orderStatus->name !== 'pago') ? '<i class="fas fa-credit-card ml-1"></i>' : '<i class="fas fa-search ml-1"></i>';
              @endphp
              <tr>
                <td>
                  <a href="{{ route('checkout.view', $pedidos->id) }}" class="btn btn-{{ $pedidos->orderStatus->color }} btn-lg btn-block font-weight-bold">
                    {{ $pedidos->id }}
                  </a>
                </td>

                <td>
                  <ul class="list-group list-group-flush border-bottom-0">
                    @foreach ($pedidos->products as $product)
                    <li class="list-group-item">Nome: {!! ($product->name) !!}</li>
                    <li class="list-group-item">Valor:
                      @if ($product->sales_price)
                      {!! number_format($product->sales_price, 2, ',','.') !!}
                      @else
                      {!! number_format($product->price, 2, ',','.') !!}
                      @endif
                    </li>
                    @endforeach
                  </ul>
                </td>

                <td>
                  <a href="{{ route('checkout.view', $pedidos->id) }}" class="btn btn-{{ $pedidos->orderStatus->color }} btn-lg btn-block font-weight-bold">
                    {{ $pedidos->orderStatus->name }} {!! $icon !!}
                  </a>
                </td>

              </tr>
              @endforeach
            </tbody>

          </table>

          @endif
        </div>

        <div class="tab-pane fade" id="endereco-md" role="tabpanel">
          @if (count($customer->addresses) > 0)
          <table class="table table-bordered endereco" align="center">
            <thead align="center">
              <tr class="grey lighten-4 text-center">
                <th scope="col" style="width:17%">Nome</th>
                <th scope="col" style="width:20%">Endere&ccedil;o</th>
                <th scope="col" style="width:09%">N&order;</th>
                <th scope="col" style="width:19%">Bairro</th>
                <th scope="col" style="width:17%">Cidade</th>
                <th scope="col" style="width:6%">UF</th>
                <th scope="col" style="width:12%">CEP</th>
              </tr>
            </thead>

            <tbody align="center">
              @foreach ($customer->addresses as $endereco)
              <tr>
                <td>{{ $endereco->alias }}</td>
                <td>{{$endereco->address_1}}</td>
                <td>{{$endereco->numero}}</td>
                <td>{{$endereco->address_2}}</td>
                <td>{{$endereco->cidade->nome_municipio}}</td>
                <td>{{$endereco->cidade->uf}}</td>
                <td>{{$endereco->zip}}</td>
              </tr>
              @endforeach
            </tbody>

          </table>

          <div class="d-flex justify-content-end">
            <a href="{{ route('customer.address.create', auth()->user()->id) }}" class="btn btn-red btn-rounded btn-md font-weight-bold" >Adicionar Endereço
              <i class="fas fa-map-marked-alt ml-1"></i>
            </a>
          </div>

          @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" 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 fade" 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()) }}" class="fosco-text"> crie um agora <i class="fas fa-comment"></i> </a>
          </div>
        </div>

      </div>

    </div>
    <a href="{{ route('home')}}" class="font-weight-bold red-text font-abeezee">
      <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