@extends('layouts.front.app')

@section('og')
  <meta property="og:type" content="home"/>
  <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>
          @if ($product->categoria)
            <li class="breadcrumb-item">
              <a href="{{ route('front.group.list', [$product->categoria->slug, $product->id_segment, $product->id_grupo]) }}" class="font-weight-bolder black-text">
                {{ $product->categoria->name }}
              </a>
            </li>
          @endif
          <li class="breadcrumb-item active font-weight-bolder black-text">{{ $product->name }}</li>
        </ol>
      </nav>
    </div>

  </section>

  <section>
    <div class="container my-5">
      <div class="row">

        <div class="col-lg pb-5">

          <div id="carousel-details" class="carousel slide carousel-fade carousel-thumbnails mb-6" data-ride="carousel">

            <div class="carousel-inner" role="listbox">

              @php $seq = 0; $uniqueImg = 0; @endphp

              {{--Verifica se existe apenas uma imagem, apesa de ser variavel, se > 1, então nem executa foreach a seguir--}}
              @foreach($product->variavel_value as $key => $atributo)
                @php $atributo->cover_attribute != "" ? $uniqueImg++ : null  @endphp
              @endforeach
              {{--FIM--}}

              {{-- Se for variaveis, e tiver mais de uma imagem, chama aqui --}}
              @if($product->variavel_value->count() > 0 && $uniqueImg > 1)

                @foreach($product->variavel_value as $key => $atributo)

                  @php
                  $atributo->cover_attribute ? $src = config('site.url')."storage/".$atributo->cover_attribute : $src=asset("storage/images/img-indisponivel.jpg")
                  @endphp

                  <div class="carousel-item @if($seq === 0) active @endif">
                    <img class="d-block w-100 mx-auto new-img" src="{{ $src}}" alt="{{ config('app.name') }} - {{ $product->name }}">
                  </div>

                  @php $seq++; @endphp

                @endforeach

              @else

                {{-- Se não for variaveis ou varivel de uma unica imagem... --}}
                @foreach ($product->images as $image)

                  @php
                  $image->src ? $src = config('site.url')."storage/".$image->src : $src=asset("storage/images/img-indisponivel.jpg")
                  @endphp

                  <div class="carousel-item @if($seq === 0) active @endif">
                    <img class="d-block w-100 mx-auto new-img" src="{{ $src }}" alt="{{ config('app.name') }} - {{ $product->name }}">
                  </div>

                  @php $seq++; @endphp

                @endforeach

              @endif

            </div>

          </div>

          <div class="col-lg describe-product @if($uniqueImg > 3) new-height @else normal-height @endif">

            <div class="titulo-produto">
              <h4 class="font-weight-bold font-abeezee">{{ $product->name }}</h4>
            </div>

            <div class="my-3">
              <p class="font-weight-bold fosco-text mr-2 mb-1">Código: <span class="badge badge-info p-1 code-variable">{{ $product->sku }}</span></p>
              <p 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
              </p>
              @if ($product->brand)
                <p class="font-weight-bold fosco-text mr-2 mb-1">Marca: <span class="badge badge-secondary p-1">{{ $product->brand->name }}</span></p>
              @endif
            </p>
            @if ($product->brand)
              <p class="font-weight-bold fosco-text mr-2 mb-1">Marca:
                <span class="badge badge-secondary p-1">{{ $product->brand->name }}</span>
              </p>
            @endif
          </div>

          <hr>

          @if($product->sob_consulta)

            <div class="py-4">
              <h4 class="font-weight-bolder font-abeezee">.:Produto sob consulta</h4>

              <div class="mt-3">
                <a href="{{ route('home') }}" class="btn btn-lg btn-block box-green font-weight-bold ">
                  Entre em contato conosco <i class="fas fa-comments ml-2"></i>
                </a>
              </div>

              <hr>

              @if($product->sob_consulta)

                <div class="py-4">
                  <h4 class="font-weight-bolder font-abeezee">.:Produto sob consulta</h4>

                  <div class="mt-3">
                    <a href="{{ route('home') }}" class="btn btn-lg btn-block box-green font-weight-bold ">Entre em contato conosco <i class="fas fa-comments ml-2"></i></a>
                  </div>
                </div>

              @else
                <div class="preco-produto">
                  <div class="p-lg-4 p-2 grey lighten-4">
                    <div class="pl-lg-4 pl-auto">
                      <form action="{{ route('cart.store') }}" method="post" class="w-100" id="formAddCart">

                        {{ csrf_field() }}

                        <div class="variaveis-item">
                          @php
                          $preco_valido = $atributo->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

                          @foreach ($product->variavel_type as $ch => $tipo)

                            @if ($tipo->name !== 'Cor')

                              <h5 class="orange-text font-montserrat">SELECIONE UM PRODUTO:</h5>
                              <input type="hidden" name="productAttribute">

                              <ul class="nav nav-pills nav-justified pills-success rounded-circle" id="pills-tab" role="tablist">
                                @foreach ($product->variavel_value as $key => $atributo)

                                  <li class="nav-item mx-1">

                                    <a class="nav-link item-variavel border h6 grey white-text" id="pills-home-tab-{{ $atributo->id }}"

                                      @if($atributo->quantity <= 0)
                                        title="Item indisponível"
                                      @else
                                        data-toggle="pill" href="#pills-{{ $atributo->id }}" role="tab"
                                      @endif

                                      data-product="{{ $atributo->id }}"

                                      @if($atributo->cover_attribute !== "" && $uniqueImg > 1 )
                                        data-imagem="{{ $atributo->cover_attribute }}"
                                      @else
                                        data-imagem=""
                                      @endif

                                      @if($atributo->attribute_sku)
                                        data-sku="{{ $atributo->attribute_sku }}"
                                      @endif

                                      @if($atributo->attribute_name)
                                        data-name="{{ $atributo->attribute_name }}"
                                      @endif

                                      @if($atributo->attribute_description)
                                        data-description="{!! nl2br($atributo->attribute_description) !!}"
                                      @endif

                                      @if($atributo->quantity <= 0)
                                        disabled
                                      @endif >

                                      {{ $atributo->value }}

                                    </a>

                                  </li>
                                @endforeach
                              </ul>

                            @else

                              <div class="tab-content">

                                <h6 class="font-weight-bold fosco-text my-2">Selecione uma cor:</h6>

                                <div class="tab-pane fade @if($ch === 0) show active @endif" id="cor-{{ $tipo->id }}" role="tabpanel">
                                  @foreach ($product->variavel_value as $key => $atributo)
                                    <div class="custom-control custom-radio custom-control-inline">
                                      <input type="radio" id="{{ $atributo->id }}" name="productAttribute" value="{{ $atributo->id }}" class="custom-control-input" @if($atributo->cover_attribute !== '') data-image="{{ config('site.url') }}/storage/{{ $atributo->cover_attribute }}" @else data-image="" @endif data-price="{{ $atributo->price }}" data-qty={{ $atributo->quantity }} required>
                                        <label for="{{ $atributo->id }}" class="custom-control-label">
                                          <img src="{{ config('site.url') }}storage/{{ $atributo->cover_attribute }}" class="img-fluid rounded img-thumbnail" width="70" alt="{{ $atributo->value }}" data-toggle="tooltip" title="{{ $atributo->value }}">
                                        </label>
                                      </div>
                                    @endforeach
                                  </div>

                                </div>
                              @endif

                            @endforeach
                          </div>

                          @if($product->variavel_value->count() > 0)

                            <div class="tab-content">

                              @foreach($product->variavel_value as $key => $atributo)

                                <div class="tab-pane fade @if($key === 0) in show active @endif" id="pills-{{ $atributo->id }}" role="tabpanel">

                                  <h3 class="font-weight-bolder fosco-text font-abeezee mt-3">por
                                    <span class="price font-montserrat red-text">{{ config('cart.currency_symbol') }} {{ number_format($atributo->price, 2, ',', '.') }}</span>
                                  </h3>

                                  <input type="hidden" name="final_price-{{$atributo->id}}" value="{{ $atributo->price }}">
                                  <input type="hidden" name="quantity-{{$atributo->id}}" value="{{ $atributo->quantity }}">

                                  <div>
                                    @php
                                    $preco_valido = $atributo->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

                                    @if(config('cart.desconto_boleto'))

                                      <h5 class="boleto font-weight-bolder pl-4 fosco-text">
                                        ou {{ config('cart.currency_symbol') }} {{ number_format($valorBoleto, 2, ',', '.') }} no boleto
                                      </h5>

                                    @endif

                                    @if(floatval($preco_valido) !== floatval($valor) && $parcela > 0)
                                      @if($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null) )
                                        <span></span>
                                      @else
                                        <h5 class="font-weight-bolder pl-4 fosco-text">
                                          ou, em até {{ $parcela }}x de {{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }} sem juros
                                        </h5>
                                      @endif

                                    @endif

                                    @if($atributo->quantity > 0)
                                      <div class="md-form input-group pt-3 mt-5 grp-comprar">
                                        <label class="font-weight-bolder ml-1 font-montserrat" for="qty-var">Quantidade:</label>
                                        <input type="hidden" name="frete" id="valFrete">
                                        <input type="number" name="quantity-var" id="qty-var" min="1" value="1" class="form-control-md p-3 white mr-n2" min="1" max="{{ $atributo->quantity }}" required>
                                        <div>
                                          <button class="btn btn-lg box-green white-text font-weight-bold btn-comprar">Adicionar ao carrinho <i class="fas fa-shopping-cart"></i></button>
                                        </div>
                                      </div>
                                    @endif

                                  </div>

                                </div>

                              @endforeach
                            </div>

                            <div class="btn-avise-me">
                              <div class="h5">
                                <span class="badge badge-pill badge-danger px-3 py-2">Indisponível</span>
                              </div>
                              <a class="font-abeezee black-text @if(auth()->check()) avise-me @endif" data-sku="{{ $product->sku }}" @if(!auth()->check()) data-toggle="modal" data-target="#modalLRForm" @endif >
                                <i class="fas fa-star pb-3"></i> Avise-me quando	chegar
                              </a>
                            </div>

                            <input type="hidden" name="product" value="{{ $product->id }}">
                            <input type="hidden" name="quantity" value="0">

                          @else
                            <h5 class="font-weight-bolder pl-4 fosco-text">
                              ou, em até {{ $parcela }}x de {{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }} sem juros
                            </h5>
                          @endif

                        @endif

                        @if($atributo->quantity > 0)
                          <div class="md-form input-group pt-3 mt-5 grp-comprar">
                            <label class="font-weight-bolder ml-1 font-montserrat" for="qty-var">Quantidade:</label>
                            <input type="hidden" name="frete" id="valFrete">
                            <input type="number" name="quantity-var" id="qty-var" min="1" value="1" class="form-control-md p-3 white mr-n2" min="1" max="{{ $atributo->quantity }}" required>
                            <div>
                              <button class="btn btn-lg box-green white-text font-weight-bold btn-comprar">Adicionar ao carrinho <i class="fas fa-shopping-cart"></i></button>
                            </div>
                          </div>
                        @endif

                      </div>

                    </div>
                  </div>
                  {{-- @endforeach --}}
                </div>

                <div class="btn-avise-me">
                  <div class="h5">
                    <span class="badge badge-pill badge-danger px-3 py-2">Indisponível</span>
                  </div>
                  <a class="font-abeezee black-text @if(auth()->check()) avise-me @endif" data-sku="{{ $product->sku }}" @if(!auth()->check()) data-toggle="modal" data-target="#modalLRForm" @endif >
                    <i class="fas fa-star pb-3"></i> Avise-me quando	chegar
                  </a>
                </div>

                <input type="hidden" name="product" value="{{ $product->id }}">
                <input type="hidden" name="quantity" value="0">

              @else

                @php
                if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null)) {
                  $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

                <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
                <h4 class="font-weight-bold fosco-text font-montserrat h4-responsive" id="price_item">
                  {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',','.') }}
                </h4>

                @if($product->quantity > 0)

                  <div class="number-input my-4">
                    <label class=" black-text mr-3 font-montserrat" 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 <i class="fas fa-shopping-cart ml-2"></i> </button>
                  </div>

                @else

                  <div class="my-4">
                    <h4 class="font-abeezee">Oops...</h4>
                    <h5 class="font-weight-bolder font-montserrat">Esse produto encontra-se indisponível</h5>
                    <hr>
                  </div>

                  <a class="font-abeezee black-text @if(auth()->check()) avise-me @endif" data-sku="{{ $product->sku }}" @if(!auth()->check()) data-toggle="modal" data-target="#modalLRForm" @endif >
                    <i class="fas fa-star piccolino-text pb-3"></i> Avise-me quando	chegar
                  </a>

                @endif

              </form>

            @endif
          </div>
        </div>
      </div>

    </div>
  </section>

  <section>
    <div class="container pt-5">
      <h3 class="font-weight-bolder fosco-text">
        <span class="border-description">DETALHES</span>
      </h3>
      <hr class="border-description mt-n2">
      <p class="font-weight-bolder fosco-text mt-4 p-3 description-variable">
        {!! nl2br($product->description) !!}
      </p>
    </div>
  </section>

@endsection

@section('js')
  <script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8">
  </script>

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

    // $('.indisponivel').html('Selecione acima, a medida')
    $('.total').hide()
    $('.btn-avise-me').hide()
    $('.grp-comprar').hide()
    $(".preco-produto .tab-content").hide()

    $('.carousel').carousel()
    $('ul.navbar-nav li.dropdown').hover(function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
    }, function() {
      $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
    });

    $('.popover-dismiss').popover({
      trigger: 'focus'
    })

    $('.link-categoria').on('click', function(){
      window.location.href = $(this).data('href');
    })

    $('#cepDest').mask ('99999-999')
    $('.aguardeFrete').hide()
    $('.calcularFrete').show()
    $('.frete').hide()

    $(".item-variavel").click(function(){
      const image = $(this).data("imagem")
      const description = $(this).data("description")
      const sku =  $(this).data("sku")
      if (image) {
        $('.carousel').carousel('pause')
        let url = "{!! config('site.url') !!}" + "storage/" + image
        $(".carousel-item.active img").attr("src", url)
        //console.log(image)
      }

      if (description) {
        $('.description-variable').html(description)
      }

      if (sku) {
        $('.code-variable').html(sku)
      }
    })

    $('#calcularFrete').on('click', function(e){
      e.preventDefault()
      $('.aguardeFrete').show()

      $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
      /*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 quantity = $('input[name=quantity]').val()
      let peso = $('input[name=peso]').val()
      let altura = $('input[name=altura]').val() * 100
      let largura = $('input[name=largura]').val() * 100
      let comprimento = $('input[name=comprimento]').val() * 100
      let preco = $('input[name=subTotal]').val()
      preco = parseFloat(preco)

      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
      if(send){
        $('.msgCEP').removeClass('show')
        axios.get(url, {headers: {'Accept': 'application/json'}})
        .then((response)=>{
          let retorno = response.data
          let _tableFrete
          let txt_dias
          let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
          $.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" data-frete="'+valor+'">'
              _tableFrete += '<label class="font-weight-bolder" for="'+frete.servico+'">'+frete.descServico+'</label>'
              _tableFrete += '</div>'
              _tableFrete += '</td>'
              _tableFrete += '<td data-th="dia" class="text-center font-weight-bolder dia">' + frete.prazo + txt_dias+ ' </td>'
              _tableFrete += '<td data-th="preco" class="text-center font-weight-bolder preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
              _tableFrete += '</tr>'
            })
          })

          $('#frete>tbody').html(_tableFrete)

          $('.aguardeFrete').hide()
          $('.calcularFrete').show()
          $('.frete').show()
          /**
          * Insere os valores nos devidos campos após a escolha do frete
          */
          $('input[name=tipoEntrega]').on('click', function(){
            let frete_val = $('input[name=tipoEntrega]:checked').data('frete')
            let valorFinal = preco + parseFloat(frete_val)
            let parc_sem_juros = {!! config('cart.parc_sem_juros') !!}
            let valor_min_parcela = {!! config('cart.valor_min_parcela') !!}
            let valor_parcela = 0.00
            let parcela = 0


            $('input[name=frete]').val(parseFloat(frete_val))
            $('#price_item').html(valorFinal.toLocaleString('pt-BR', formato))
            $('#valFrete').val(parseFloat(frete_val))
            $('#numero_parcelas').html(parcela)
            $('#valor_parcela').html(valor_parcela.toLocaleString('pt-BR'))
            $('button.btn-comprar').removeClass('disabled')
            $('button.btn-logar').removeClass('disabled')
          })

        }).catch((error)=>{
          $('.aguardeFrete').hide()
          $('.calcularFrete').show()
          $('.msgCEP').removeClass('alert-warning')
          $('.msgCEP').addClass('alert-danger')
          $('.msgCEP').addClass('show')
          $('#msgCEP').html('Erro')
          $('button.btn-comprar').addClass('disabled')
          $('button.btn-logar').addClass('disabled')
          console.log('Error', error)
          $('.frete').show()
        })
      } else {
        $('.aguardeFrete').hide()
        $('.calcularFrete').show()
      }
    })

    $('.btn-comprar').on('click', function(e){
      e.preventDefault()
      let frete = $('input[name=frete]').val()
      /*if(frete === '') {
      $('.msgCEP').addClass('show')
      $('#msgCEP').html('Você não escolheu o método de entrega...')
    } else {*/
    $('#adicionandoCarrinho').modal( 'show' )
    $('#adicionandoCarrinho').modal({ backdrop: 'static' })
    $("body").css({"overflow":"hidden"})
    $('#formAddCart').submit()
    /*}*/
  })

  $('.avise-me').on('click', function() {
    let url = "{!! url('api/avise-me') !!}"
    let sku = $(this).data('sku')

    let customer_id = $('#user_id_loged').val()

    if (customer_id === "null") {
      $('#modalAviso').modal( 'show' )
      $('#modalAviso').on('show.bs.modal', function (event) {
        var modal = $(this)
        modal.find('.modal-title').text('Efetuar Login')
        modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
      })
      return false
    }

    @endsection

    @section('js')
    <script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8">
    </script>

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

      // $('.indisponivel').html('Selecione acima, a medida')
      $('.total').hide()
      $('.btn-avise-me').hide()
      $('.grp-comprar').hide()
      $(".preco-produto .tab-content").hide()

      $('.carousel').carousel()
      $('ul.navbar-nav li.dropdown').hover(function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
      }, function() {
        $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
      });

      $('.popover-dismiss').popover({
        trigger: 'focus'
      })

      $('.link-categoria').on('click', function(){
        window.location.href = $(this).data('href');
      })

      $('#cepDest').mask ('99999-999')
      $('.aguardeFrete').hide()
      $('.calcularFrete').show()
      $('.frete').hide()

      $(".item-variavel").click(function(){
        const image = $(this).data("imagem")
        if(image){
          $('.carousel').carousel('pause')
          let url = "{!! config('site.url') !!}" + "storage/" + image
          $(".carousel-item.active img").attr("src", url)
          //console.log(image)
        }
      })

      $('#calcularFrete').on('click', function(e){
        e.preventDefault()
        $('.aguardeFrete').show()

        $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
        /*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 quantity = $('input[name=quantity]').val()
        let peso = $('input[name=peso]').val()
        let altura = $('input[name=altura]').val() * 100
        let largura = $('input[name=largura]').val() * 100
        let comprimento = $('input[name=comprimento]').val() * 100
        let preco = $('input[name=subTotal]').val()
        preco = parseFloat(preco)

        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
        if(send){
          $('.msgCEP').removeClass('show')
          axios.get(url, {headers: {'Accept': 'application/json'}})
          .then((response)=>{
            let retorno = response.data
            let _tableFrete
            let txt_dias
            let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
            $.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" data-frete="'+valor+'">'
                _tableFrete += '<label class="font-weight-bolder" for="'+frete.servico+'">'+frete.descServico+'</label>'
                _tableFrete += '</div>'
                _tableFrete += '</td>'
                _tableFrete += '<td data-th="dia" class="text-center font-weight-bolder dia">' + frete.prazo + txt_dias+ ' </td>'
                _tableFrete += '<td data-th="preco" class="text-center font-weight-bolder preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
                _tableFrete += '</tr>'
              })
            })

            $('#frete>tbody').html(_tableFrete)

            $('.aguardeFrete').hide()
            $('.calcularFrete').show()
            $('.frete').show()
            /**
            * Insere os valores nos devidos campos após a escolha do frete
            */
            $('input[name=tipoEntrega]').on('click', function(){
              let frete_val = $('input[name=tipoEntrega]:checked').data('frete')
              let valorFinal = preco + parseFloat(frete_val)
              let parc_sem_juros = {!! config('cart.parc_sem_juros') !!}
              let valor_min_parcela = {!! config('cart.valor_min_parcela') !!}
              let valor_parcela = 0.00
              let parcela = 0


              $('input[name=frete]').val(parseFloat(frete_val))
              $('#price_item').html(valorFinal.toLocaleString('pt-BR', formato))
              $('#valFrete').val(parseFloat(frete_val))
              $('#numero_parcelas').html(parcela)
              $('#valor_parcela').html(valor_parcela.toLocaleString('pt-BR'))
              $('button.btn-comprar').removeClass('disabled')
              $('button.btn-logar').removeClass('disabled')
            })

          }).catch((error)=>{
            $('.aguardeFrete').hide()
            $('.calcularFrete').show()
            $('.msgCEP').removeClass('alert-warning')
            $('.msgCEP').addClass('alert-danger')
            $('.msgCEP').addClass('show')
            $('#msgCEP').html('Erro')
            $('button.btn-comprar').addClass('disabled')
            $('button.btn-logar').addClass('disabled')
            console.log('Error', error)
            $('.frete').show()
          })
        } else {
          $('.aguardeFrete').hide()
          $('.calcularFrete').show()
        }
      })

      $('.btn-comprar').on('click', function(e){
        e.preventDefault()
        let frete = $('input[name=frete]').val()
        /*if(frete === '') {
        $('.msgCEP').addClass('show')
        $('#msgCEP').html('Você não escolheu o método de entrega...')
      } else {*/
      $('#adicionandoCarrinho').modal( 'show' )
      $('#adicionandoCarrinho').modal({ backdrop: 'static' })
      $("body").css({"overflow":"hidden"})
      $('#formAddCart').submit()
      /*}*/
    })

    $('.avise-me').on('click', function() {
      let url = "{!! url('api/avise-me') !!}"
      let sku = $(this).data('sku')

      let customer_id = $('#user_id_loged').val()

      if (customer_id === "null") {
        $('#modalAviso').modal( 'show' )
        $('#modalAviso').on('show.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Efetuar Login')
          modal.find('.modal-body #modal-message').html('Você precisa estar logado para armazenar as informações.')
        })
        return false
      }

      console.log(sku, customer_id)
      axios.post(url, {
        token: token,
        customer_id: parseInt(customer_id),
        sku: sku
      },
      {
        /*headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},*/
        crossDomain: true
      })
      .then((response)=>{
        console.log('Resposta', response.data)
        console.log('Status', response.status)

        $('#modalAviso').modal( 'show' )
        $('#modalAviso').on('show.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Aviso Gravado')
          modal.find('.modal-body #modal-message').html('Você será avisado quando este produto chegar.')
        })
      }).catch((error)=>{
        console.log('Error', error)
      })
    })

    $('input[name=quantity-var]').on('change', function(){
      let max = $(this).attr('max')
      let quantity = $(this).val()
      if(max > 0) {
        $('input[name=quantity]').val(quantity)
        $('button.btn-comprar').removeAttr('disabled').removeClass('disabled')
      } else {
        $('input[name=quantity]').val(0)
        $('button.btn-comprar').attr('disabled', true).addClass('disabled')
      }
    })
    $('input[name=quantity]').on('change', function(){
      let max = $(this).attr('max')
      let quantity = $(this).val()
      if(max > 0) {
        $('button.btn-comprar').removeAttr('disabled').removeClass('disabled')
      } else {
        $('button.btn-comprar').attr('disabled', true).addClass('disabled')
      }
    })
    $('.item-variavel').on('click', function(){
      let product_id = $(this).data('product')
      let price = $('input[name=final_price-'+product_id+'').val()
      let quantity = $('input[name=quantity-'+product_id+'').val()
      let image = $(this).data('image')
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      price = parseFloat(price)

      $('input[name=subTotal]').val(price)
      $('input[name=productAttribute]').val(product_id)
      $('input[name=quantity]').val(1)
      $('input[name=quantity]').attr('max', quantity)
      $('span.price').html(price.toLocaleString('pt-BR', formato))

      if (image !== '') {
        $('#carousel-thumb>div.carousel-inner>div.carousel-item').html('<a href="#modalLightbox" data-toggle="modal" data-href="'+image+'" class="showModalLightbox"><img src="'+image+'" alt="{{ $product->name }}" class="img-fluid img-prod" style="cursor:pointer;"></a>')
        $('#carouselExample>div.carousel-inner>div.carousel-item').html('<img src="'+image+'" alt="{{ $product->name }}" class="img-fluid img-prod" style="cursor:pointer;">')
      }

      if(quantity <= 0) {
        $(".boleto").hide()
        $('.item-variavel').removeClass('red darken-4')
        $('button.btn-comprar').attr('disabled', true)
        $('button.btn-comprar').addClass('disabled')
        $('button#calcularFrete').attr('disabled', true)
        $('button#calcularFrete').addClass('disabled')
        $('.btn-avise-me').show()
        $('span.price').addClass('text-muted')
        $('.item-variavel').removeClass('active')
        $('.indisponivel').html('Indisponível')
        $('.indisponivel').show()
        $('.grp-comprar').hide()
        $('.imagem-mascara-esgotado').show()
        $(this).addClass('darken-4')
        $('input[name=quantity]').val(0)
        $('input[name=quantity-var]').val(0)
        $('input[name=quantity-var]').addClass('disabled')
      } else {
        $(".preco-produto .tab-content").show()
        $(".boleto").show()
        $('input[name=quantity]').val(1)
        $('input[name=quantity-var]').val(1)
        $('input[name=quantity-var]').removeClass('disabled')
        $('.item-variavel').removeClass('red darken-4')
        $('.indisponivel').hide()
        $('.indisponivel').html('Selecione acima, a medida')
        $('.grp-comprar').show()
        $('.imagem-mascara-esgotado').hide()
        $('span.price').removeClass('text-muted')
        $('button#calcularFrete').removeAttr('disabled')
        $('button#calcularFrete').removeClass('disabled')
        $('button.btn-comprar').removeClass('disabled')
        $('button.btn-comprar').removeAttr('disabled')
        $('.btn-avise-me').hide()
      }
    })

    $('.cart-del').on('click', function(e) {
      e.preventDefault()
      $('#formDestroy').submit()
    })

    $('input[name=productAttribute]').on('click', function() {
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      let productAttribute = $(this).val()
      let price = $(this).data('price')
      price = parseFloat(price)
      let image = $(this).data('image')
      let qty = $(this).data('qty')
      let valorFrete = $('#valFrete').val();

      if(valorFrete > 0.00) {
        price = price + parseFloat(valorFrete)
      }
      if(parseInt(qty) === 0) {
        $('button[type=submit]').addClass('disabled')
      } else {
        $('button[type=submit]').removeClass('disabled')
      }
      $('#carousel-thumb>div.carousel-inner>div.carousel-item').html('<img src="'+image+'">')
      $('#price_item').html(price.toLocaleString('pt-BR', formato))
      $('input[name=subTotal]').val(price)
      $('#qty').attr('max', qty)
      $('#qty').val(1)
    })

  })
  </script>

  @endsection