@extends('layouts.front.app')

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


@section('content')

@include('layouts.front.shared.modal-rating')

<section>
  <div class="container">
    <nav>
      <ol class="breadcrumb my-3">
        <li class="breadcrumb-item">
          <a href="{{route('home')}}" class="fosco-text font-weight-bold"><i class="fas fa-home"></i> Home</a>
        </li>
        <li class="breadcrumb-item font-weight-bolder text-dark">Produto</li>
        @if ($product)
        <li class="breadcrumb-item active font-weight-bolder text-dark">{{ $product->name }}</li>
        @endif
      </ol>
    </nav>
  </div>
</section>

<section id="all" v-cloak>
  @if ($product)  
  
  @include('layouts.front.shared.error-success')
  
  <div class="container my-3">
    
    <div class="row">
      
      <div class="col-lg pb-5">
        
        @if(!$product->quantity > 0)
        @include('layouts.front.shared.favoritos')  
        @endif       
        
        @include('layouts.front.shared.floating-button')
        
        <div id="carousel-details" class="carousel slide carousel-thumbnails mb-6" data-ride="carousel">
          <i class="fas fa-search-plus fosco-text position-absolute d-md-block d-none fa-2x m-3" style="z-index:999"></i>
          <div class="carousel-inner" role="listbox">
            
            @php $array = [] @endphp
            
            <!--Pegando a imagem do produto principal-->
            @foreach ($product->images->where('ordem', '!=', 99) as $image)
            @php array_push($array, $image->src)@endphp
            @endforeach
            
            <!--Se existir variaveis, pega suas imagens-->
            @if($product->attributes->where('ordem', '!=', 99)->count() > 0)
            @foreach ($product->attributes as $image)
            @php array_push($array, $image->cover_attribute)@endphp
            @endforeach
            @endif
            
            @php $array = array_unique($array) @endphp
            
            @if(count($array) > 0)
            
            @foreach ($array as $seq => $image)
            @php
            $src = $image ? config('site.url')."storage/".$image : asset('storage/images/img-indisponivel.png')
            @endphp
            
            <div class="carousel-item text-center @if($seq == 0) active @endif">
              <img src="{{ $src }}" alt="{{ $product->name }}" class="img-fluid mx-auto">
            </div>              
            @endforeach
            
            @else 
            
            @php $src = asset('storage/images/img-indisponivel.png') @endphp
            <div class="carousel-item text-center  active ">
              <img src="{{ $src }}" alt="{{ $product->name }}" class="img-fluid mx-auto">
            </div>
            
            @endif
            
          </div>
          
          @if(count($array) > 1)
          <ol class="carousel-indicators ml-auto pl-4">            
            @foreach ($array as $seq => $image)
            @php
            $src = $image ? config('site.url')."storage/".$image : asset('storage/images/img-indisponivel.jpg')
            @endphp
            <li data-target="#carousel-details" data-slide-to="{{ $seq }}" class="@if($seq == 0) active @endif px-pdt">
              <img src="{{ $src }}" height="75" width="75" class="d-block border rounded" alt="{{ $product->name }}">
            </li>
            @endforeach
          </ol>
          @endif
          
        </div>
        
      </div>
      
      <div class="col-lg describe-product">
        <form action="{{route('cart.store')}}" method="POST" class="formAdd">
          {{ csrf_field() }}
          <input type="hidden" name="product" value="{{$product->id}}">
          <input type="hidden" name="frete" value="0.00">
          <div class="my-3">
            
            <img src="{{ asset('storage/images/pneu/marcas/'.strtolower($product->brand->name).'.png') }}" height="50">
            
            <div class="titulo-produto mt-3">
              <h4 class="font-weight-bold font-abeezee">{{ $product->name }}</h4>
            </div>
            
            <span class="font-weight-bold fosco-text mr-2 mb-1">SKU: 
              <span class="badge badge-info p-1">{{ $product->sku }}</span>
            </span>
            
            <span class="font-weight-bold fosco-text mr-2 mb-1">Disponibilidade:
              @if($product->variavel_value->count() > 0)
              <span class="badge badge-primary">Tem Variações</span>
              @elseif($product->quantity > 0 )
              <span class="badge badge-success p-1">Em Estoque</span>
              @else
              <span class="badge badge-danger p-1">Indisponível</span>
              @endif
            </span>
            
            <hr>
          </div>
          
          <div class="rating mt-4">
            <span>
              <i class="@if($product->ratingPercent() >= 20) fas @else far @endif fa-star py-2 px-1 @if(!$product->userAverageRating)rate @endif text-warning" data-rate="1" data-html="true" data-toggle="tooltip" data-placement="top" title="Péssimo"></i>
              <i class="@if($product->ratingPercent() >= 40) fas @else far @endif fa-star py-2 px-1 @if(!$product->userAverageRating)rate @endif text-warning " data-rate="2" data-html="true" data-toggle="tooltip" data-placement="top" title="Ruim"></i>
              <i class="@if($product->ratingPercent() >= 60) fas @else far @endif fa-star py-2 px-1 @if(!$product->userAverageRating)rate @endif text-warning " data-rate="3" data-html="true" data-toggle="tooltip" data-placement="top" title="Regular"></i>
              <i class="@if($product->ratingPercent() >= 80) fas @else far @endif fa-star py-2 px-1 @if(!$product->userAverageRating)rate @endif text-warning " data-rate="4" data-html="true" data-toggle="tooltip" data-placement="top" title="Bom"></i>
              <i class="@if($product->ratingPercent() >= 100) fas @else far @endif fa-star py-2 px-1 @if(!$product->userAverageRating)rate @endif text-warning " data-rate="5" data-html="true" data-toggle="tooltip" data-placement="top" title="Excelente"></i>
              @if ($product->ratings()->count() === 0)
              <span class="font-weight-bolder">Este produto ainda não foi avaliado. </span> <br>
              @else
              {{$product->ratings()->count()}} @if ($product->ratings()->count() === 1) avaliação @else avaliações @endif
              @endif
            </span>
          </div>
          
          <div class="preco-produto mt-4">
            <div class="p-4 grey lighten-4 rounded">
              
              <div class="">
                @php
                if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || is_null($product->sale_price_ini))) {
                  $preco_valido = $product->sale_price;
                } else {
                  $preco_valido = $product->price;
                }
                
                $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
                $valor = 0.00;
                $parcela = 0;
                for($p = 1 ; $p <= config('cart.parc_sem_juros') ; $p++) {
                  if (round($preco_valido / $p, 2) > config('cart.valor_min_parcela')) {
                    $valor = $preco_valido / $p;
                    $parcela = $p;
                  }
                }
                @endphp
                <h4 class="font-weight-bolder">por <strong class="ultra-text font-weight-bold font-abeezee h2">{{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',', '.') }}</strong></h4>
                <input type="hidden" name="preco_valido" value="{{ $preco_valido }}">
                @if(floatval($preco_valido) !== floatval($valor))
                <p class="ml-3 font-weight-bolder">ou em até {{ $parcela }}x de <span>{{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }}</span> s/ juros (somente para o site)</p>
                @else
                <p style="min-height: 50px"></p>
                @endif
                
              </div>
              
              @if($product->quantity > 0)
              
              @if (!config('site.catalogo_produtos')) {{-- Caso o site não esteja marcado como catálogo - possuir compras ativas  --}}
              <div class="number-input my-4">
                <label class="font-weight-bold black-text mr-3" for="qty">QUANTIDADE:</label>
                <div class="white d-inline-block border btn-rounded p-1">
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                    <i class="fas fa-minus other-grey p-2 border btn-rounded white"></i>
                  </a>
                  <input type="hidden" name="frete" id="valFrete">
                  <input type="hidden" name="product" value="{{ $product->id }}">
                  <input type="number" name="quantity" id="qty" min="1" value="1" max="{{ $product->quantity }}" readonly>
                  <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                    <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                  </a>
                </div>
              </div>
              
              <div class="">
                <button class="btn btn-lg btn-block box-green font-weight-bold btn-comprar">Adicionar ao carrinho</button>
              </div>
              @endif              
              
              @endif
              
            </div>
            
          </div>
          
          @if(($product->quantity > 0 || $product->attributes->count() > 0) &&  config('site.busca_correios') && !config('site.catalogo_produtos') )
          
          @if(config('site.domain') == "ultrapneus")
          @php
          $polParaCm = 2.54;
          if( $product->tire_width > 0 ) {
            $largura = floatval($product->tire_width / 10);
          } elseif ( floatval($product->width) > 0 ) {
            $largura = floatval($product->width);
          } else {
            $largura = 15;
          }
          // Pega a altura do item
          if ( floatval($product->tire_rim) > 0 ) {
            $aro = floatval($product->tire_rim) * floatval($polParaCm);
            $altConv = (floatval($product->tire_width) * floatval($product->tire_height) / 100) / 10;
            $altura = ($altConv + $aro);
          } elseif ( $product->height > 0 ) {
            $altura = $product->height;
          } else {
            $altura = 5;
          }
          
          // Pega a profundidade
          if ( floatval($product->tire_height > 0) ) {
            $comprimento = $altura;
          } elseif ( $product->length > 0 ) {
            $comprimento = $product->length;
          } else {
            $comprimento = 20;
          }
          @endphp
          @endif
          
          @include('layouts.front.shared.frete')       
          @endif
          
        </form>
        
      </div>
      
    </div>    
    
  </div>
  
  @else
  
  <div class="container">
    
    <div class="alert alert-warning" role="alert">
      Houve algo de errado nesta requisição
    </div>
  </div>
  
  @endif
  
</section>

@include(config('site.domain').'.front.shared.details-product', ["product"=> $product])

@endsection

@section('js')
<script type="text/javascript" src="{{ asset('js/axios.js') }}"></script>
<script type="text/javascript" src="{{ mix('js/js.cookie.js') }}"></script>


{{--Arquivo VueJS comum aos projetos--}}
@include('layouts.front.js.vueJS')
{{--Arquivo VueJS comum aos projetos--}}

{{--Arquivo com funcoes auto invocaveis comum aos projetos--}}
@include('layouts.front.js.iifeJS')
{{--Arquivo com funcoes auto invocaveis comum aos projetos--}}

{{--Arquivo Anonimas comum aos projetos--}}
@include('layouts.front.js.arrowJS')
{{--Arquivo Anonimas comum aos projetos--}}

{{--Arquivo Jquery comum aos projetos--}}
@include('layouts.front.js.jqueryJS')
{{--Arquivo Jquery comum aos projetos--}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>

<script>
  $(document).ready(function(){
    $('.carousel-item').zoom().css({"cursor": "zoom-in"});
  });
</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 () {
    $('.not-posible').hide()
    
    $('#login_avaliar').on('click', function(){
      let product_id = $('input[name=product_id]').val()
      Cookies.set("product_id", product_id); // Sample 3
    })
    $('.total').hide()
    $('#cepDest').mask ('99999-999')
    $('.aguardeFrete').hide()
    $('.calcularFrete').show()
    
    $('#social-links>ul').addClass('list-group list-group-horizontal-sm')
    $('#social-links>ul>li').addClass('list-group-item')
    $('#social-links>ul>li').addClass('border-0')
    $('#social-links>ul>li>a').attr('target', '_blank')
    $('#social-links>ul').prepend('<i class="fas fa-share-alt blue-text p-3"></i>')
    
    $('#calcularFrete').on('click', function(e){
      $('.aguardeFrete').show()
      $('.calcularFrete').hide()
      $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
      let _tableFrete
      let retirada = {!! config('shipping.retirada.ativo') !!}
      let motoboy = {!! config('shipping.motoboy.ativo') !!}
      let motoboy_custo = {!! config('shipping.motoboy.custo') !!}
      let motoboy_prazo = {!! config('shipping.motoboy.prazo') !!}
      let motoboy_min = {!! config('shipping.motoboy.valor_minimo') !!}
      let motoboy_cep_ini = {!! config('shipping.motoboy.cep_ini') !!}
      let motoboy_cep_fim = {!! config('shipping.motoboy.cep_fim') !!}
      /*Padroes da entrega dos correios*/
      let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
      let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
      let min_altura = {!! config('shipping.correios.min_altura') !!}
      let max_altura = {!! config('shipping.correios.max_altura') !!}
      let min_largura = {!! config('shipping.correios.min_largura') !!}
      let max_largura = {!! config('shipping.correios.max_largura') !!}
      let min_peso = {!! config('shipping.correios.min_peso') !!}
      let max_peso = {!! config('shipping.correios.max_peso') !!}
      
      let cepOrig = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
      let cepDest = $('#cepDest').val()
      cepDest = cepDest.replace('-', '')
      
      let sku = $('input[name=sku]').val()
      let quantity = $('input[name=quantity]').val()
      let peso = $('input[name=peso]').val()
      let altura = $('input[name=altura]').val()
      let largura = $('input[name=largura]').val()
      let comprimento = $('input[name=comprimento]').val()
      let preco = $('input[name=preco_valido]').val()
      preco = parseFloat(preco)
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      
      console.log(peso)
      let send = true
      if(peso < min_peso){
        peso = min_peso
      } else if (peso > max_peso){
        console.log('Peso ['+ peso +'] excede o valor máximo para entregar pelos correios ' + max_peso)
        send = false
      }
      if(altura < min_altura){
        altura = min_altura
      } else if (altura > max_altura){
        console.log('Altura ['+ altura +'] excede o valor máximo para entregar pelos correios ' + max_altura)
        send = false
      }
      if(largura < min_largura){
        largura = min_largura
      } else if (largura > max_largura){
        console.log('Largura ['+ largura +'] excede o valor máximo para entregar pelos correios ' + max_largura)
        send = false
      }
      if(comprimento < min_comprimento){
        comprimento = min_comprimento
      } else if (comprimento > max_comprimento){
        console.log('Comprimento ['+ comprimento +'] excede o valor máximo para entregar pelos correios ' + max_comprimento)
        send = false
      } else if (cepDest === '') {
        $('.msgCEP').removeClass('alert-danger')
        $('.msgCEP').addClass('alert-warning')
        $('.msgCEP').addClass('show')
        $('#msgCEP').html('Verifique se preencheu corretamente o CEP.')
        send = false
      }
      
      // let url = '/api/calculaEntrega/' + cepDest + '/' + preco + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento
      let url = '/api/frete/calcula-frete-unico/' + cepDest + '/' + preco + '/' + quantity + '/' + peso + '/' + altura + '/' + largura + '/' + comprimento + '/' + sku
      
      if(send){
        /* Habilita a linha de retorno, par retirar em Loja */
        if(retirada && cepDest >= motoboy_cep_ini && cepDest <= motoboy_cep_fim){
          _tableFrete += '<tr>'
            _tableFrete += '<td>'
              _tableFrete += '<div class="custom-control custom-radio">'
                _tableFrete += '<input type="radio" class="custom-control-input" id="retirada" name="tipoEntrega" value="retirada" aria-selected="true">'
                _tableFrete += '<label class="" for="retirada">Retirar na Loja</label>'
                _tableFrete += '</div>'
                _tableFrete += '</td>'
                _tableFrete += '<td data-th="dia" class="text-center dia"> 1 dia &uacute;til </td>'
                _tableFrete += '<td data-th="preco" class="text-center preco">Gratuito</td>'
                _tableFrete += '</tr>'
              }
              /* Habilita a linha de retorno, para entrega por Motoboy */
              if((motoboy > 0) && cepDest >= motoboy_cep_ini && cepDest <= motoboy_cep_fim && preco >= motoboy_min){
                let txt_dias = (motoboy_prazo > 1) ? ' dias úteis' : ' dia útil'
                _tableFrete += '<tr>'
                  _tableFrete += '<td>'
                    _tableFrete += '<div class="custom-control custom-radio">'
                      _tableFrete += '<input type="radio" class="custom-control-input" id="motoboy" name="tipoEntrega" value="motoboy" aria-selected="true">'
                      _tableFrete += '<label class="" for="motoboy">Motoboy</label>'
                      _tableFrete += '</div>'
                      _tableFrete += '</td>'
                      _tableFrete += '<td data-th="dia" class="text-center dia"> ' + motoboy_prazo + ' ' + txt_dias +' </td>'
                      _tableFrete += '<td data-th="preco" class="text-center preco"> Frete Grátis </td>'
                      _tableFrete += '</tr>'
                    } else if(motoboy && cepDest >= motoboy_cep_ini && cepDest <= motoboy_cep_fim) {
                      let txt_dias = (motoboy_prazo > 1) ? ' dias úteis' : ' dia útil'
                      _tableFrete += '<tr>'
                        _tableFrete += '<td>'
                          _tableFrete += '<div class="custom-control custom-radio">'
                            _tableFrete += '<input type="radio" class="custom-control-input" id="motoboy" name="tipoEntrega" value="motoboy" aria-selected="true">'
                            _tableFrete += '<label class="" for="motoboy">Motoboy</label>'
                            _tableFrete += '</div>'
                            _tableFrete += '</td>'
                            _tableFrete += '<td data-th="dia" class="text-center dia"> ' + motoboy_prazo + ' ' + txt_dias +' </td>'
                            _tableFrete += '<td data-th="preco" class="text-center preco">' + motoboy_custo.toLocaleString('pt-BR', formato) + '</td>'
                            _tableFrete += '</tr>'
                          }
                          $('.msgCEP').removeClass('show')
                          axios.get(url, {headers: {'Accept': 'application/json'}})
                          .then((response)=>{
                            let retorno = response.data
                            
                            let txt_dias
                            
                            $.each(retorno, function( index, fretes ) {
                              $.each(fretes, function( i, frete ) {
                                console.log('Frete', frete)
                                txt_dias = (frete.prazo > 1) ? ' dias úteis' : ' dia útil'
                                let valor = parseFloat(frete.valor)
                                _tableFrete += '<tr>'
                                  _tableFrete += '<td>'
                                    _tableFrete += '<div class="custom-control custom-radio">'
                                      _tableFrete += '<input type="radio" class="custom-control-input" id="'+frete.servico+'" name="tipoEntrega" value="'+frete.codigo+'" aria-selected="true">'
                                      _tableFrete += '<label class="" for="'+frete.servico+'">'+frete.descServico+'</label>'
                                      _tableFrete += '</div>'
                                      _tableFrete += '</td>'
                                      _tableFrete += '<td data-th="dia" class="text-center dia">' + frete.prazo + txt_dias+ ' </td>'
                                      _tableFrete += '<td data-th="preco" class="text-center preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
                                      _tableFrete += '</tr>'
                                    })
                                  })
                                  $('#frete>tbody').html(_tableFrete)
                                  /*console.log('Resposta', response.data)
                                  console.log('Status', response.status)
                                  $('#frete>tbody>tr>td.servico').html(retorno.servico)
                                  
                                  $('#frete>tbody>tr>td.dia').html(retorno.prazo + txt_dias)
                                  $('#frete>tbody>tr>td.preco').html( "{!! config('cart.currency_symbol') !!} " +  retorno.valor)*/
                                  /*$('input[name=frete]').val(retorno.valor)
                                  
                                  $('.aguardeFrete').hide()
                                  $('.calcularFrete').show()
                                  
                                  let subTotal = $('input[name=subTotal]').val()
                                  subTotal = parseFloat(subTotal)
                                  let vlFrete = parseFloat(retorno.valor)
                                  let vlFinal = subTotal + vlFrete
                                  let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                                  $('.preco_total').html(vlFinal.toLocaleString('pt-BR', formato))
                                  $('.total').show()*/
                                  $('.aguardeFrete').hide()
                                  $('.calcularFrete').show()
                                }).catch((error)=>{
                                  $('.aguardeFrete').hide()
                                  $('.calcularFrete').show()
                                  $('.msgCEP').removeClass('alert-warning')
                                  $('.msgCEP').addClass('alert-danger')
                                  $('.msgCEP').addClass('show')
                                  $('#msgCEP').html('Erro')
                                  console.log('Error', error)
                                })
                              } else {
                                $('.aguardeFrete').hide()
                                $('.calcularFrete').show()
                              }
                            })
                          })
                        </script>
                        @endsection