@extends('layouts.front.app')

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

<section>
  <div class="container">
    
    <div class="account my-5">
      
      <ul class="nav minha-conta md-tabs" id="myTabMD" role="tablist">
        
        <li class="nav-item mr-1">
          <a class="nav-link font-weight-bolder 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 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 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 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 fade @if(request()->input('tab') === 'profile') show active @endif" 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 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 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="{{ route('home') }}"> Comprar agora!</a>
          </div>
          
          @else
          
          <div class="card">
            
            <div class="card-body">
              
              <h4 class="card-title">Meus Pedidos</h4>
              
              <div class="modal fade" id="modalCartaoEntrega" tabindex="-1" role="dialog">
                
                
                <div class="modal-dialog modal-dialog-centered" role="document">
                  
                  <div class="modal-content">
                    <div class="modal-header justify-content-center">
                      <h5 class="modal-title" id="exampleModalLongTitle">Cartão Enviado</h5>
                    </div>
                    <div class="modal-body">
                      <span class="para"></span>
                      <span class="mensagem"></span>
                      <span class="assinado"></span>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-md btn-red font-weight-bolder" data-dismiss="modal">Fechar</button>
                    </div>
                  </div>
                </div>
              </div>
              <!-- Modal -->
              <table id="tablePedido"  class="table table-striped table-bordered table-responsive-lg responsive dataTables" cellspacing="0" width="100%">
                <!-- Text -->
                
                <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 @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-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