@extends('layouts.front.app')

@section('og')
  <meta property="og:type" content="home" />
  <meta property="og:title" content="{{ config('app.name') }} - Minha Conta" />
  <meta property="og:description" content="{{ config('app.description') }}" />
@endsection

@section('content')

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

  <section>
    <div class="container">

      <div class="mt-4">

        <div class="my-2 text-right">
          <a href="{{route("logout")}}">
            <h5 class="font-weight-bold font-abeezee text-danger">
              Sair <i class="far fa-times-circle ml-1"></i>
            </h5>
          </a>
        </div>

        <div class="row mt-5">

          <div class="col-lg-3">
            <div class="nav flex-column nav-pills account" role="tablist">

              <a class="nav-link active" data-toggle="pill" href="#account-perfil" role="tab">
                <i class="fas fa-user-check fa-3x text-dark"></i>
                <span class="font-weight-bold fosco-text font-abeezee h6">Meus dados</span>
              </a>

              <a class="nav-link" data-toggle="pill" href="#account-pedidos" role="tab">
                <i class="fas fa-inbox fa-3x text-dark"></i>
                <span class="font-weight-bold fosco-text font-abeezee h6">Orçamentos</span>
              </a>

              <a class="nav-link" data-toggle="pill" href="#account-endereco" role="tab">
                <i class="fas fa-map-marker-alt fa-3x text-dark"></i>
                <span class="font-weight-bold fosco-text font-abeezee h6">Endereço</span>
              </a>

              <a class="nav-link" data-toggle="pill" href="#account-password" role="tab">
                <i class="fas fa-key fa-3x text-dark"></i>
                <span class="font-weight-bold fosco-text font-abeezee h6">Atualizar Senha</span>
              </a>

              {{--
              <a class="nav-link" data-toggle="pill" href="#account-wishlist" role="tab">
              <img src="{{ asset("storage/images/account/wishlist.png") }}" height="50">
              <span class="font-weight-bold fosco-text font-abeezee h6">Lista de desejos</span>
            </a>

            <a class="nav-link" data-toggle="pill" href="#account-depoimento" role="tab">
            <img src="{{ asset("storage/images/account/depoimento.png") }}" height="45" class="ml-2">
            <span class="font-weight-bold fosco-text font-abeezee h6 ml-1">Depoimentos</span>
          </a>
          --}}

        </div>
      </div>

      <div class="col-lg-9 mt-md-0 mt-5">
        <div class="tab-content">

          <div class="tab-pane fade show active" id="account-perfil" role="tabpanel">

            <div>
              <label for="nome" class="font-weight-bolder h4 font-monstserrat">Razão Social</label>
              <input type="text" id="nome" class="form-control form-control-lg" value="{{ $customer->name }}" readonly>
            </div>

            <div class="row my-3">

              <div class="col-lg-4">
                <label for="cpf" class="font-weight-bolder h4 font-monstserrat">CNPJ</label>
                <input type="text" id="cpf" name="cliente_cnpj" class="form-control form-control-lg" value="{{ $customer->cpf_cnpj ? $customer->cpf_cnpj : 'não informado' }}" readonly>
              </div>

              <div class="col-lg-4">
                <label for="email" class="font-weight-bolder h4 font-monstserrat">E-mail</label>
                <input type="text" id="email" class="form-control form-control-lg" value="{{ $customer->email }}" readonly>
              </div>

              <div class="col-lg-4">
                <label for="telefone" class="font-weight-bolder h4 font-monstserrat">Telefone</label>
                <input type="text" id="telefone" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->phone != null ? $customer->addresses->first()->phone : 'não informado' : 'não informado' }}" readonly>
              </div>

            </div>

            <div class="row my-4">

              <div class="col-lg">
                <label for="cidade" class="font-weight-bolder h4 font-monstserrat">Cidade</label>
                <input type="text" id="cidade" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->cidade->nome_municipio : 'não informado' }}" readonly>
              </div>

              <div class="col-lg">
                <label for="cep" class="font-weight-bolder h4 font-monstserrat">CEP</label>
                <input type="text" id="cep" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->zip : 'não informado' }}" readonly>
              </div>

            </div>

            <div class="row my-4">
              <div class="col-lg">
                <label for="bairro" class="font-weight-bolder h4 font-monstserrat">Bairro</label>
                <input type="text" id="bairro" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->address_2 : 'não informado' }}" readonly>
              </div>

              <div class="col-lg-5">
                <label for="endereco" class="font-weight-bolder h4 font-monstserrat">Endereço</label>
                <input type="text" id="endereco" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->address_1 : 'não informado' }}" readonly>
              </div>

              <div class="col-lg-4">
                <label for="numero" class="font-weight-bolder h4 font-monstserrat">Número</label>
                <input type="text" id="numero" class="form-control form-control-lg" value="{{ (count($customer->addresses) > 0 ) ? $customer->addresses->first()->numero : 'não informado' }}" readonly>
              </div>

            </div>

          </div>

          <div class="tab-pane fade" id="account-pedidos" 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 or&ccedil;amento. <a href="{{ route('home') }}" class="fosco-text"> Comprar agora!</a>
              </div>

            @else

              <div class="accordion" id="accordionPedidos">

                @foreach ($customer->orders->sortByDesc('created_at')->paginate(6) as $order)
                  <div class="card border mb-3 @if($order->orderStatus->id === 2) left-red @elseif($order->orderStatus->id === 5) left-blue @else left-green @endif">

                    <div class="card-header">
                      <h5 class="font-weight-normal pointer mb-0" data-toggle="collapse" data-target="#order-{{$order->id }}">
                        #Or&ccedil;amento: {{$order->id }}
                        <span class="float-right" title="Exibir Or&ccedil;amento">

                          <i>
                            realizado dia
                            <strong>
                              {!! \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $order->created_at)->format('d/m/Y') !!}
                            </strong>
                          </i>

                          <i class="fas fa-search fosco-text mx-2"></i>
                        </span>
                      </h5>
                    </div>

                    <div id="order-{{ $order->id }}" class="collapse" data-parent="#accordionPedidos">
                      <div class="card-body">
                        @foreach ($order->products as $product)

                          @php
                          $id_sku = ($product->pivot->product_attribute_sku) ?? $product->pivot->product_sku;
                          $productAttribute = $product->attributes->where('attribute_sku', $id_sku)->first();
                          $nameAttribute = (isset($productAttribute->attribute_name)) ? '['.$productAttribute->attribute_name .']' : '';
                          @endphp

                          <div class="row">

                            <div class="col-lg-3">
                              @php
                              $quantity = null;
                              $product->cover ? $src = config('site.url') . "storage/". $product->cover : $src=asset("storage/images/img-indisponivel.jpg");
                              $product->pivot->quantity == 1 ? $quantity = "unidade" : $quantity = "unidades";
                              @endphp
                              <div class="view zoom">
                                <img src="{{$src}}" alt="" class="img-fluid">
                              </div>
                            </div>

                            <div class="col-lg my-auto">

                              <h5 class="font-weight-normal">{{ $product->name }} {{ $nameAttribute }}</h5>
                              {{-- Descomentar após aprovação --}}
                              <h5 class="fosco-text">
                                <strong>
                                  {{ $product->pivot->quantity }} {{$quantity}}
                                  {{-- @php

                                  $preco_valido = (isset($product->pivot->product_price)) ? $product->pivot->product_price : $product->price;
                                  @endphp
                                  - {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2,',','.') }} --}}
                                </strong>
                              </h5>

                            </div>

                          </div>

                          <hr>

                        @endforeach

                        <div class="text-center">

                          <div>
                            {{-- Descomentar após aprovação --}}
                            {{-- <h5 class="font-weight-normal">
                              @if($order->total_shipping != "0.00")
                                Frete: {{ number_format($order->total_shipping, 2,',','.') }} |
                              @endif
                              TOTAL: <span class="red-text font-weight-bold">{{ number_format($order->total, 2,',','.') }}</span>
                            </h5> --}}
                          </div>

                          <div>
                            <h5 class="font-weight-normal">
                              status:
                              @switch($order->orderStatus->name)

                                @case("pendente")
                                <span class="red-text font-weight-bold text-uppercase">{{$order->orderStatus->name}}</span>
                                @break
                                @case("pago")
                                <span class="green-text font-weight-bold text-uppercase">{{$order->orderStatus->name}}</span>
                                @break
                                @case("encomendado")
                                <span class="blue-text font-weight-bold text-uppercase">{{$order->orderStatus->name}}</span>
                                @break
                                @default

                              @endswitch
                            </h5>
                          </div>

                          @if($order->orderStatus->id === 2 && $order->total > 0)
                            <a href="{{ route('checkout.view', $order['id']) }}" class="btn btn-red btn-lg font-weight-bolder">
                              Efetuar pagamento
                            </a>
                          @else
                            <a href="{{ route('checkout.view', $order->id) }}" class="btn btn-green btn-lg font-weight-bolder">
                              Acompanhar or&ccedil;amento
                            </a>
                          @endif
                          <a href="{{ route('contato')}}" class="btn btn-outline-red btn-lg font-weight-bolder">
                            <i class="fas fa-comments mr-1"></i> Preciso de ajuda
                          </a>

                        </div>

                      </div>
                    </div>

                  </div>
                @endforeach

                <div class="d-flex justify-content-center">
                  {!!$customer->orders->sortByDesc('id')->paginate(6)->links()!!}
                </div>

              </div>

            @endif

          </div>

          <div class="tab-pane fade" id="account-password" role="tabpanel">

            <form class="border border-light p-5" id="formChangePassword">

              <p class="h4 mb-4 text-center">Troque sua senha</p>

              <label for="password">Informe sua senha:</label>
              <input type="password" id="password" name="password" class="form-control mb-4" required>

              <label for="password_repeat">Repita a senha:</label>
              <input type="password" id="password_repeat" name="password_repeat" class="form-control mb-4" required>

              <button class="btn btn-green btn-lg btn-block font-weight-bold btnChangePassword my-4" type="submit">
                Alterar
              </button>

            </form>

          </div>

          <div class="tab-pane fade" id="account-endereco" role="tabpanel">

            @php $address = $customer->addresses->first() @endphp

            <div class="card border my-4">
              <div class="card-header">
                <h4 class="font-weight-normal mb-0">Endereço</h4>
              </div>
              <div class="card-body">
                <blockquote class="blockquote left-green mb-0">
                  <div class="ml-3">
                    <h5>{{ $address->alias}} - {{$address->phone}}</h5>
                    <h6>{{$address->address_1}}, {{ $address->numero }} - {{$address->address_2}} - {{$address->zip}}</h6>
                    <h6>{{ $address->cidade->nome_municipio }}/{{ $address->state_code}} - {{$address->country->name}}</h6>
                  </div>
                </blockquote>
              </div>
            </div>


            <div class="card hoverable my-4 py-2" style="border: 3px dashed #979797;">
              <div class="text-center">

                <h6 class="font-weight-bolder fosco-text font-montserrat">
                  Para alteração dos dados cadastrais, entrar em contato com
                  @if(config('shop.email_aprovacao')) o consultor em sua região @endif:
                  </h6>
                  <h6 class="font-weight-bolder fosco-text font-montserrat">Telefone: {{ config('shop.phone') }}</h6>
                  <h6 class="font-weight-bolder fosco-text font-montserrat">E-mail:
                    @if(config('shop.email_aprovacao'))
                      <a href="mailto:{{config('shop.email_aprovacao')}}" target="_blank">{{config('shop.email_aprovacao')}}</a>
                    @else
                      <a href="mailto:{{config('shop.email')}}" target="_blank">{{config('shop.email')}}</a>
                    @endif
                  </h6>
                  <a href="{{route('contato')}}" target="_blank" class="font-weight-bolder fosco-text font-montserrat">
                    <u>ou entre em contato conosco</u>
                  </a>

                </div>
              </div>

            </div>

            <div class="tab-pane fade" id="account-wishlist" role="tabpanel">
              @if (count($customer->avisos) > 0)

                <div class="accordion" id="accordionWishlist">

                  @foreach ($customer->avisos as $produto)
                    <div class="card border mb-3">

                      <div class="card-header">
                        <h5 class="font-weight-normal pointer mb-0" data-toggle="collapse" data-target="#wishlist-{{$produto->product[0]->id}}">
                          #Lista de desejos: {{$produto->product[0]->name}}
                          <span class="float-right" title="Exibir lista de desejos">
                            <i class="fas fa-search fosco-text mr-1"></i>
                          </span>
                        </h5>
                      </div>

                      <div id="wishlist-{{$produto->product[0]->id}}" class="collapse" data-parent="#accordionWishlist">
                        <div class="card-body">

                          <div class="row">

                            <div class="col-lg-3">
                              @php
                              $product->cover ? $src = config('site.url') . "storage/". $product->cover : $src=asset("storage/images/img-indisponivel.jpg");
                              @endphp
                              <img src="{{$src}}" alt="" class="img-fluid">
                            </div>

                            <div class="col-lg my-auto">

                              <h5 class="font-weight-normal"> {{$produto->product[0]->name}}</h5>

                              <div>
                                <h5 class="font-weight-normal mt-3">
                                  status:
                                  <span>
                                    @if($produto->product[0]->quantity > 0)
                                      <a href="{{ route('front.get.product', [$produto->product[0]->slug, $produto->product[0]->id]) }}" class="green-text font-weight-bolder text-uppercase">Em estoque, visualizar agora!</a>
                                    @else
                                      <a class="red-text font-weight-bolder text-uppercase"> Fora de estoque</a>
                                    @endif
                                  </span>
                                </h5>
                              </div>

                            </div>

                          </div>

                        </div>
                      </div>

                    </div>
                  @endforeach

                </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="account-depoimento" 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="font-weight-normal fosco-text">
                  crie um agora <i class="fas fa-comments ml-2"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

      </div>

    </div>

    <div class="my-5 ml-4">
      <a href="{{ route('home')}}" class="font-weight-bold text-danger">
        <i class="fas fa-arrow-left"></i> Voltar à página inicial
      </a>
    </div>

  </div>
</section>

@endsection
@section('js')
  <script src = "{{ mix('js/axios.js') }}"></script>
  <script type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  $(document).ready( function() {

    $('.btnChangePassword').click(function(e) {

      e.preventDefault()
      let password = $('input[name=password]').val()
      let password_repeat = $('input[name=password_repeat]').val()
      let cpf_cnpj = $('input[name=cliente_cnpj]').val()
      let customer_id = "{!! auth()->user()->id !!}"
      if (typeof password === 'undefined' || typeof password_repeat === 'undefined'
      || password.length === 0 || password_repeat.length === 0 ) {
        $("#modalAviso").on('show.bs.modal', function() {
          $('.modal-title').empty()
          $('.modal-title').html('Preencha a senha')
          $('.modal-body').html('Informe a senha e a confirme.')
        });
        $("#modalAviso").modal('show')

        return false
      } else if (password !== password_repeat) {
        $("#modalAviso").on('show.bs.modal', function() {
          $('.modal-title').empty()
          $('.modal-title').html('Preencha a senha')
          $('.modal-body').html('As senhas não conferem.')
        });
        $("#modalAviso").modal('show')

        return false
      } else {
        let url = "{!! url('customer/update') !!}"
        axios.post(url, {
          token       : token.content,
          password    : window.btoa(password),
          cpf_cnpj    : cpf_cnpj,
          customer_id : customer_id
        },
        {
          headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},
          crossDomain: true
        })
        .then((response)=>{
          console.log(response.data)
        })
        .catch((error)=>{
          console.log('Error', error)
        })
      }

    })

  })
  </script>
@endsection