@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="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">
        
        <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">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->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
          
          <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 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