@extends('layouts.front.app')

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

@section('content')

<section>
  <nav>
    <div class="container my-3">
      <ol class="breadcrumb grey lighten-3">
        <li class="breadcrumb-item">
          <a href="{{ route('home') }}" class="font-weight-bold fosco-text"><i class="fas fa-home black-text"></i> Home</a>
        </li>
        <li class="breadcrumb-item">
          <a href="{{ route('front.group.list', [$product->categoria->slug, $product->id_segment, $product->id_grupo]) }}" class="font-weight-bolder fosco-text">
            {{ $product->categoria->name }}
          </a>
        </li>
        <li class="breadcrumb-item active">
          <a class="font-weight-bolder mb-0 fosco-text">{{ $product->name }}</a>
        </li>
      </ol>
    </div>
  </nav>
</section>

<section>
  <div class="container my-5">
    
    <div class="row">
      
      <div class="col-lg-7">
        
        <div id="carousel-details" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">
          
          <div class="carousel-inner" role="listbox">
            @php $seq = 0; @endphp
            @foreach ($product->images as $image)
            @php
            if(config('site.conjugado'))
            $src = config('site.url')."storage/".config('site.domain')."/".str_replace("products", "itens", $image->src);
            else
            $src = config('site.url')."storage/".$image->src;
            @endphp
            <div class="carousel-item @if($seq === 0) active @endif">
              <img class="d-block mx-auto" src="{{ $src }}" alt="{{ config('app.name') }} - {{ $product->name }}">
            </div>
            @php
            $seq++;
            @endphp
            @endforeach
          </div>
          
          <a class="carousel-control-prev" href="#carousel-details" role="button" data-slide="prev">
            <i class="fas fa-chevron-left fosco-text fa-2x"></i>
          </a>
          <a class="carousel-control-next" href="#carousel-details" role="button" data-slide="next">
            <i class="fas fa-chevron-right fosco-text fa-2x"></i>
          </a>
          
          <ol class="carousel-indicators ml-auto">
            @php $seq2 = 0; @endphp
            @foreach ($product->images as $image)
            @php
            if(config('site.conjugado'))
            $src2 = config('site.url')."storage/".config('site.domain')."/".str_replace("products", "itens", $image->src);
            else
            $src2 = config('site.url')."storage/".$image->src;
            @endphp
            <li data-target="#carousel-details" data-slide-to="{{ $seq2 }}" class="@if($seq2 === 0) active @endif px-pdt">
              <img src="{{ asset($src2) }}" height="75" class="d-block border rounded" alt="{{ config('app.name') }} - {{ $product->name }}">
            </li>
            @php
            $seq2++;
            @endphp
            @endforeach
          </ol>
          
        </div>
        
      </div>
      
      <div class="col-lg description">
        
        <div class="my-3">
          <h4 class="font-weight-bold fosco-text">{{ $product->name }}</h4>
          <p class="font-weight-bold fosco-text mr-2 mb-1">Código: <span class="badge badge-info p-1">{{ $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
        </div>

        @if($product->tire_width || $product->tire_height || $product->tire_rim)
        <div class="dimensoes">
          <hr>
          <h5 class="font-weight-bold fosco-text">Aro: <small> {{ $product->tire_width }} </small></h5>
          <h5 class="font-weight-bold fosco-text">Largura: <small> {{ $product->tire_height }} </small></h5>
          <h5 class="font-weight-bold fosco-text">Altura: <small> {{ $product->tire_rim }} </small></h5>
          <hr>
        </div>
        @endif
        
        <div class="comprar">
          
          <form action="{{ route('cart.store') }}" method="post" class="w-100">
            {{ csrf_field() }}
            
            @if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null))
            <s> {{ config('cart.currency_symbol') }} {{ $product->price }}</s>
            <h4>{{ config('cart.currency_symbol') }} {{ number_format($product->sale_price, 2, ',', '.') }} </h4>
            @else
            
            @if(config('cart.desconto_dinheiro'))
            
            @php
            $valor_promocao = floatval($product->price) - (floatval($product->price) * (config('cart.desconto_dinheiro') / 100));
            @endphp
            
            <h4 class="font-weight-bolder fosco-text">
              de <s> {{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}</s>
            </h4>
            
            <h3 class="font-weight-bold blue-speed-text">
              <small>por</small> <span>{{ config('cart.currency_symbol') }} {{ number_format($valor_promocao, 2, ',', '.') }}
                <small class="fosco-text h6">(dinheiro ou débito)</small>
              </span>
            </h3>
            
            @else
            
            <h4 class="price font-weight-bold blue-speed-text">{{ config('cart.currency_symbol') }} {{ number_format($product->price, 2, ',', '.') }}</h4>
            @endif
            
            @endif
            
            @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 }}">
            
            <h6 class="price text-left px-3 font-weight-bolder fosco-text">
              ou <b>{{ $parcela }}x</b> de <span><b>{{ config('cart.currency_symbol') }} {{ number_format($valor, 2, ',', '.') }}</b></span>
            </h6>
            
            @if($product->quantity > 0)
            <div class="form-row py-4 mt-4 grey lighten-4">
              <div class="col-lg-4 my-auto">
                <div class="number-input text-center">
                  <label class="font-weight-bold black-text" for="qtd-pdt">QUANTIDADE:</label>
                  <div class="white d-inline-block border btn-rounded p-1">
                    <a onclick="this.parentNode.querySelector('input[name=quantity]').stepDown()" class="count-btn minus-item">
                      <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" value="1" min="1" max="{{ $product->quantity }}" class="item-quantidade" id="qtd-pdt" readonly>
                    <a onclick="this.parentNode.querySelector('input[name=quantity]').stepUp()" class="count-btn plus-item">
                      <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                    </a>
                  </div>
                </div>
              </div>
              <div class="col-lg text-left my-auto">
                <button class="btn btn-3 btn-3d btn-block icon-cart blue-speed font-weight-bold white-text ml-3 w-92">ADICIONAR AO CARRINHO</button>
              </div>
            </div>
            
            @else
            <hr>
            <h4 class="font-weight-bolder font-abeezee fosco-text">Ops</h4>
            <h6 class="font-weight-bolder fosco-text">Esse produto encontra-se indisponível</h6>
            @endif
            
          </form>
          <hr>
          <dl class="row">
            <dt class="col-sm-8">
              Total
            </dt>
            <dt class="col-sm-4" id="total_venda">
              {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2,',','.') }}
            </dt>
          </dl>
          <hr>
          
        </div>
        
        <div class="frete-produto">
          <input type="hidden" name="peso" value="{{ $product->weight }}">
          <input type="hidden" name="altura" value="{{ $product->height }}">
          <input type="hidden" name="largura" value="{{ $product->width }}">
          <input type="hidden" name="comprimento" value="{{ $product->length }}">
          
          <div class="form-inline form-search">
            <input class="form-control form-control-lg pesquisa-frete w-69" id="cepDest" name="cepDest" type="text" placeholder="Informe o CEP">
            <a class="btn btn-green pt-3 px-0 btn-frete calcularFrete" id="calcularFrete">CALCULAR FRETE
              <i class="fas fa-truck ml-2"></i>
            </a>
          </div>
          
          <div class="aguardeFrete text-center p-3" disabled>
            <span class="spinner-border"></span>
            <span class="ml-3 font-weight-bold">BUSCANDO...</span>
          </div>
          
          <div class="alert alert-warning alert-dismissible d-none msgCEP" role="alert">
            <strong>Algo deu errado!</strong> <span id="msgCEP"></span>
            <button type="button" class="close" data-dismiss="alert">
              <span>&times;</span>
            </button>
          </div>
          
          <div class="frete">
            <table id="frete" class="table table-bordered table-hover table-condensed mt-3 mb-3">
              <tbody>
                
              </tbody>
            </table>
          </div>
          
          <p class="font-weight-bolder fosco-text text-right px-2">Não sabe o CEP?
            <b><a href="http://www.buscacep.correios.com.br/sistemas/buscacep/default.cfm" class="black-text" target="_blank">Clique aqui</a></b>
          </p>
          
        </div>
        
        <h6 class="font-weight-bolder"><i class="fas fa-info-circle orange-text mr-1"></i>imagens meramente ilustrativas</h6>
        
      </div>
      
    </div>
    
  </div>
</section>

<section>
  <div class="container">
    <div class="descricao-produto text-justify my-5">
      <div>
        <hr>
        <h4 class="text-left font-weight-bold fosco-text py-2">
          <i class="fas fa-tags mr-2"></i> DESCRIÇÃO DO PRODUTO:
        </h4>
        
        <p class="font-weight-bolder mb-1">
          {!! nl2br($product->description) !!}
        </p>
        
        @if ($product->detalhe_item)
        <p class="font-weight-bolder mb-1">
          {!! nl2br($product->detalhe_item) !!}
        </p>
        @endif
      </div>
    </div>
  </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
  $(document).ready(function () {
    let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
    $('.plus-item').on('click', function() {
      let max = $('input[name=quantity]').attr('max')
      let qty = $('input[name=quantity]').val()
      let valor = $('input[name=subTotal]').val()
      
      if(parseInt(qty) <= parseInt(max)) {
        if (parseInt(qty) === parseInt(max)) {
          $('#modalAviso').modal('show')
          $('#modalAviso').on('shown.bs.modal', function (event) {
            var modal = $(this)
            modal.find('.modal-title').text('Quantidade máxima atingida')
            modal.find('.modal-body').find('#modal-message').text('Este item atingiu a quantidade máxima em estoque.')
          })
        }
      } else {
        $('#modalAviso').modal('show')
        $('#modalAviso').on('shown.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Quantidade máxima atingida')
          modal.find('.modal-body').find('#modal-message').text('Este item atingiu a quantidade máxima em estoque.')
        })
      }
      
      let total = parseFloat(valor) * parseFloat(qty)
      $('#total_venda').html(total.toLocaleString('pt-BR', formato))
      
    })
    $('.minus-item').on('click', function(){
      let max = $('input[name=quantity]').attr('max')
      let qty = $('input[name=quantity]').val()
      let valor = $('input[name=subTotal]').val()
      if(qty < 1) {
        $('#modalAviso').modal('show')
        $('#modalAviso').on('shown.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Quantidade mínima atingida')
          modal.find('.modal-body').find('#modal-message').text('Este item atingiu a quantidade mínima permitida.')
        })
      }
      if(max === 0) {
        $('#modalAviso').modal('show')
        $('#modalAviso').on('shown.bs.modal', function (event) {
          var modal = $(this)
          modal.find('.modal-title').text('Item sem estoque')
          modal.find('.modal-body').find('#modal-message').text('Este item não possui estoque no momento.')
        })
      }
      let total = parseFloat(valor) * parseFloat(qty)
      $('#total_venda').html(total.toLocaleString('pt-BR', formato))
    })
    $('.total').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()
    
    $('input[name=quantity]').on('change', function(){
      let quantity = $(this).val()
      console.log(quantity)
    })
    $('#calcularFrete').on('click', function(e){
      e.preventDefault()
      $('.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 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){
        /* 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" data-frete="0.00">'
                _tableFrete += '<label class="font-weight-bolder" for="retirada">Retirar na Loja</label>'
                _tableFrete += '</div>'
                _tableFrete += '</td>'
                _tableFrete += '<td data-th="dia" class="text-center font-weight-bolder dia"> 1 dia &uacute;til </td>'
                _tableFrete += '<td data-th="preco" class="text-center font-weight-bolder preco">Gratuito</td>'
                _tableFrete += '</tr>'
              }
              /* Habilita a linha de retorno, para entrega por Motoboy */
              if (motoboy && 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"  data-frete="0.00">'
                      _tableFrete += '<label class="custom-control-label" 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" data-frete="'+motoboy_custo+'">'
                            _tableFrete += '<label class="custom-control-label" 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+'" 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="font-weight-bolder dia">' + frete.prazo + txt_dias+ ' </td>'
                                      _tableFrete += '<td data-th="preco" class="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').removeClass('d-none')
                                  $('.msgCEP').addClass('alert-danger')
                                  $('.msgCEP').addClass('d-block')
                                  $('#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'
                                })
                                $('#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)
                                })
                              })
                              
                              $('.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()
                                
                                price = parseFloat(price)
                                
                                $('input[name=subTotal]').val(price)
                                $('input[name=quantity]').val(1)
                                $('input[name=productAttribute]').val(product_id)
                                $('input[name=quantity]').attr('max', quantity)
                                $('span.price').html(price.toLocaleString('pt-BR', formato))
                                if(quantity <= 0) {
                                  $('button.btn-comprar').attr('disabled', true)
                                  $('button#calcularFrete').attr('disabled', true)
                                  $('.imagem-mascara-esgotado').show()
                                } else {
                                  $('button.btn-comprar').removeAttr('disabled')
                                  $('button#calcularFrete').removeAttr('disabled')
                                  $('.imagem-mascara-esgotado').hide()
                                }
                              })
                              $('.cart-del').on('click', function(e) {
                                e.preventDefault()
                                $('#formDestroy').submit()
                              })
                              
                              $('input[name=productAttribute]').on('click', function() {
                                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