@extends('layouts.front.app')

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

@section('content')

@php 
use Illuminate\Support\Str;
@endphp

<!-- Banner do carrinho suspenso -->
<section>
  <div class="modal fade p-5" id="modalCart" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Sua compra</h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span class="text-white">&times;</span>
          </button>
        </div>
        
        <div class="modal-body">
          
          <table class="table table-hover" id="carTable">
            <thead>
              <tr>
                <th>Qtde</th>
                <th>Nome</th>
                <th>Preço</th>
                <th>Remover</th>
              </tr>
            </thead>
            <tbody class="linhaCarrinho">
              
            </tbody>
            <tfoot class="font-italic">
              <th colspan="2">Total</th>
              <th colspan="2">{!! config('cart.currency_symbol') !!} <span class="cartTotal"></span></th>
            </tfoot>
          </table>
          
        </div>
        
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-green" data-dismiss="modal">Fechar</button>
          <a href="{{ route('cart.index') }}" class="btn btn-green" id="verCarrinho">Ver Carrinho</a>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- ./Banner do carrinho suspenso -->

<section>
  <div class="container-fluid w-lg-75">
    <nav>
      <ol class="breadcrumb 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 (isset($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 text-dark">
            {{ $product->categoria->name }}
          </a>
        </li>
        @endif
        <li class="breadcrumb-item font-weight-bold text-dark">
          {{ Str::title($product->name) }}
        </li>
      </ol>
    </nav>
  </div>
</section>
<!-- ./breadcrumb da página -->

@php
if(auth()->check() && config('site.cliente_diferenciado')) {
  $tipoCliente = $getClientData->getTypeCustomer()->cliente_tipo;
  $clienteTabela = $getClientData->getTablePriceFromCustomer();
  $tab_cliente = explode("|", $clienteTabela->cliente_tabela);
  $tabelaValor = config('cart.valor_tabela_padrao');
  
  foreach ($tab_cliente as $key => $vl_tab) {
    if($vl_tab !== "") {
      $tabelaValor = $vl_tab;
    }
  }
}
@endphp

<section>
  <div class="container">
    <div class="row">
      <!-- Lado da Imagem -->
      <div class="col-lg pb-5 product-uni">
        
        <div id="carousel-details" class="carousel slide carousel-fade carousel-thumbnails mb-6" data-ride="carousel">
          
          <div class="carousel-inner" role="listbox">
            @foreach ($product->images as $seq => $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 id="image_render" class="d-block img-fluid mx-auto" src="{{ $src }}" alt="{{ config('app.name') }} - {{ $product->name }}">
            </div>
            @endforeach
          </div>
          
          @if( $product->images->count() > 1)
          
          <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>
          
          @endif
          
          <ol class="carousel-indicators ml-auto pl-4">
            @foreach ($product->images as $seq2 => $image)
            @php
            $image->src ? $src2 = config('site.url')."storage/".$image->src : $src2=asset('storage/images/img-indisponivel.jpg');
            @endphp
            <li data-target="#carousel-details" data-slide-to="{{ $seq2 }}" class="@if($seq2 === 0) active @endif px-3 mx-4">
              <img src="{{ $src2 }}" height="75" width="75" class="d-block border rounded" alt="{{ config('app.name') }} - {{ $product->name }}">
            </li>
            @endforeach
          </ol>
          
        </div>
      </div>
      <!-- Lado dos dados do item -->
      <div class="col-lg describe-product">
        
        <div class="titulo-produto">
          <h4 class="font-weight-bold outer-grey-text text-uppercase">{{ $product->name }}</h4>
        </div>
        
        <div class="my-3">
          @if ($product->reference)
          <h6 class="font-weight-bold outer-grey-text mr-2 mb-1">REF: <span class="variavel_reference"> {{ $product->reference }}</span></h6>
          @endif
          @if ($product->ean)
          <h6 class="font-weight-bold outer-grey-text mr-2 mb-1">EAN: <span class="variavel_ean">{{ $product->ean }}</span></h6>
          @endif
          
          {{-- @if ($product->brand)
            <h6 class="font-weight-bold fosco-text mr-2 mb-1">Marca: <span class="badge badge-secondary p-1">{{ $product->brand->name }}</span></h6>
            @endif --}}
            @if (auth()->check())
            <h6 class="font-weight-bold outer-grey-text mr-2 mb-1">Cx Interna: <span class="">{{ $product->caixa_master }}</span></h6>
            <h6 class="font-weight-bold outer-grey-text mr-2 mb-1">Cx Master: <span class=""> {{ $product->emb_pai }}</span></h6>
            <h5 class="font-weight-bold outer-grey-text mr-2 mb-1">
              @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">SEM ESTOQUE</span>
              @endif
            </h5>
            @endif
          </div>
          
          @if(auth()->check())
          
          <div class="preco-produto">
            <div class="p-lg-4 p-2 gray-100 card-top">
              <div class="pl-4">
                <input type="hidden" name="product" value="{{ $product->id }}">
                <input type="hidden" name="frete" id="valFrete">
                <input type="hidden" name="price" >
                
                @if(count($productAttributes) > 0)
                <input type="hidden" name="productAttribute" value="">
                <!-- Tem variação -->
                <ul class="nav md-pills nav-justified pills-rounded" id="pills-tab" role="tablist">
                  @foreach($productAttributes as $list => $attribute)
                  
                  @php
                  if ($attribute->sale_price && ($attribute->sale_price_ini <= now() && $attribute->sale_price_fim > now() || $attribute->sale_price_ini === null)) {
                    $preco_valido = $attribute->sale_price;
                  } else {
                    $preco_valido = $attribute->price;
                    if(auth()->check() && config('site.cliente_diferenciado')) {
                      switch (intval($tabelaValor)) {
                        case 1:
                        $preco_valido = $attribute->attribute_vl_tab_2; // Mudança na regra de negócio interna
                        break;
                        case 2:
                        $preco_valido = $attribute->attribute_vl_tab_2;
                        break;
                        case 3:
                        $preco_valido = $attribute->attribute_vl_tab_3;
                        break;
                        case 4:
                        $preco_valido = $attribute->attribute_vl_tab_4;
                        break;
                        case 5:
                        $preco_valido = $attribute->attribute_vl_tab_5;
                        break;
                        default:
                        $preco_valido = $attribute->attribute_vl_tab_2;
                        break;
                      }
                    }
                  }
                  
                  $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
                  $valor = 0.00;
                  $parcela = 0;
                  $max = 1;
                  $min = 1;
                  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
                  <li class="nav-item mx-1">
                    
                    <a class="nav-link item-variavel border rounded h6 gray-500 text-white"
                    
                    id="pills-home-tab-{{ $attribute->id }}"
                    
                    data-toggle="pill"
                    
                    role="tab"
                    
                    @if($attribute->quantity <= 0)
                    title="Item sem estoque" data-content="Este item encontra-se sem estoque no momento."
                    @else
                    data-toggle="pill" href="#pills-{{ $attribute->id }}" role="tab"
                    @endif
                    
                    data-product="{{ $attribute->id }}"
                    
                    data-qty="{{ $attribute->quantity }}"
                    
                    data-price="{{ $preco_valido }}"
                    
                    data-name="{{$attribute->attribute_name}}"
                    
                    data-description="{{$attribute->attribute_description}}"
                    
                    data-sku="{{$attribute->attribute_sku}}"
                    
                    data-ean="{{$attribute->attribute_ean}}"
                    
                    data-reference="{{$attribute->attribute_reference}}"
                    
                    @if($attribute->cover_attribute !== '')
                    data-image="{{ config('site.url') }}storage/{{ $attribute->cover_attribute }}"
                    @else
                    data-image=""
                    @endif
                    
                    @if($attribute->quantity <= 0)
                    disabled
                    @endif>
                    
                    {{ $attribute->attributesValues->first()->value }}</a>
                  </li>
                  
                  @endforeach
                </ul>
                <!-- ./ Tem variação -->
                @else
                <!-- Não tem variação -->
                @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;
                  if(auth()->check() && config('site.cliente_diferenciado')) {
                    switch (intval($tabelaValor)) {
                      case 1:
                      $preco_valido = $product->vl_tab_2; // Mudança na regra de negócio interna
                      break;
                      case 2:
                      $preco_valido = $product->vl_tab_2;
                      break;
                      case 3:
                      $preco_valido = $product->vl_tab_3;
                      break;
                      case 4:
                      $preco_valido = $product->vl_tab_4;
                      break;
                      case 5:
                      $preco_valido = $product->vl_tab_5;
                      break;
                      default:
                      $preco_valido = $product->vl_tab_2;
                      break;
                    }
                  }
                }
                
                $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
                $valor = 0.00;
                $parcela = 0;
                $max = 1;
                $min = 1;
                if (intval($product->ean_qtd) > 1) {
                  $min = intval($product->ean_qtd);
                }
                $max = intval($product->quantity);
                
                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
                <!-- ./ Não tem variação -->
                @endif
                
                <div class="tab-content">
                  
                  <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
                  
                  <h4 class="font-weight-bold fosco-text font-nunito price my-3" id="price_item">
                    {{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',','.') }}
                    <span class="font-weight-bolder">(preço unitário)</span>
                  </h4>
                  
                  <h5 class="indisponivel text-warning font-montserrat font-weight-bold my-4"></h5>
                  
                  @if($product->quantity > 0 || count($productAttributes) > 0)
                  
                  <div class="number-input my-4">
                    <label class="font-weight-bold text-dark mr-3" for="qty">QUANTIDADE: </label>
                    <div class="bg-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 bg-white"></i>
                      </a>
                      <input type="number" name="quantity" id="qty" min="{{ $min }}" max="{{$max}}" step="{{ $min }}" value="{{ $min }}">
                      <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                        <i class="fas fa-plus other-grey p-2 border btn-rounded bg-white"></i>
                      </a>
                    </div>
                  </div>
                  
                  <button class="btn btn-lg btn-block box-green font-weight-bold btn-comprar @if(count($productAttributes) > 0 || !$product->quantity > 0) disabled @endif">
                    Adicionar ao carrinho <i class="fas fa-shopping-cart"></i>
                  </button>
                  
                  @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>
                  </div>
                  <a class="btn btn-lg text-white btn-block mx-auto box-red" href="https://wa.me/{!! config('shop.country_ddi').config('shop.whatsapp_link') !!}?text=[Cliente do site {!! config('site.url') !!}] - Eu tenho interesse: {{ $product->name }}" target="_blank">
                    Consulte nosso vendedor <i class="fas fa-comments fa-lg ml-1"></i>
                  </a>
                  
                  @endif
                  
                </div>
                
              </div>
            </div>
          </div>
          @endif
        </div>
        
      </div>
    </div>
    
  </section>
  
  <section>
    <div class="container mt-5 pt-5">
      <h3 class="font-weight-bolder fosco-text">
        <span class="border-description">DETALHES</span>
      </h3>
      <hr class="border-description">
      <p class="font-weight-bolder fosco-text mt-4 p-3">
        {!! nl2br($product->description) !!}
      </p>
    </div>
  </section>
  
  @endsection
  
  @section('js')
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-zoom/1.7.20/jquery.zoom.min.js"></script>
  <script type="text/javascript" src="{{ asset('js/axios.js') }}"></script>
  
  <script>
    (function zoom(){
      const width = window.innerWidth
      if(width > 796){
        $(".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
    $(function () {
      
      // $('.indisponivel').html('Selecione acima, a medida')
      $('.total').hide()
      $('.btn-avise-me').hide()
      $('.grp-comprar').hide()
      $(".tab-content.variable").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()
      
      $('#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) {
              
              let frete = $('input[name=frete]').val()
              let product = $('input[name=product]').val()
              let productAttribute = $('input[name=productAttribute]').val()
              let quantity = $('input[name=quantity]').val()
              let price = $('input[name=subTotal]').val()
              let total_quantidade = $('.total-quantidade').html()
              let novaQuantidade = parseInt(total_quantidade)
              
              let url = {!! json_encode(url('/')) !!}+'/cart-add?product='+product+'&quantity='+quantity+'&price='+price
              
              if (productAttribute && productAttribute !== '') {
                url += '&productAttribute=' + productAttribute
              }
              
              $('#adicionandoCarrinho').modal( 'show' )
              $('#adicionandoCarrinho').modal({ backdrop: 'static' })
              
              axios.get(url, {headers: {'Accept': 'application/json'}})
              .then((response)=>{
                console.log(response)
                novaQuantidade = parseInt(total_quantidade) + parseInt(quantity)
                
                $('.total-quantidade').html(novaQuantidade)
                $('.linhaCarrinho').html("")
                
                let cartQdte = $('#cartCount').html()
                let cartTotal = response.data.subtotal
                let cartItens = response.data.cartItems
                let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                
                let linhaCarrinho;
                
                $.each(cartItens, function (i, v) {
                  let itemPrice = parseFloat(v.price) * parseFloat(v.qty)
                  let name = v.name
                  if (v.options.length !== 0) {
                    name = v.name + ' ['+v.options.combination[0].value+']'
                  }
                  linhaCarrinho += '<tr id="'+v.rowId+'">'
                    linhaCarrinho += '<th scope="row">' + v.qty + '</th>'
                    linhaCarrinho += '<td class="text-uppercase">' + name + '</td>'
                    linhaCarrinho += '<td>' + itemPrice.toLocaleString('pt-BR', formato) + '</td>'
                    linhaCarrinho += '<td class="removeProduct pointer" data-product="'+v.rowId+'"><i class="fas fa-trash-alt"></i></td>'
                    linhaCarrinho += '</tr>'
                  });
                  $('.cartTotal').html(cartTotal.toLocaleString('pt-BR', formato))
                  $('.linhaCarrinho').html(linhaCarrinho)
                  
                  $('.removeProduct').on('click', function(){
                    let id = ($(this).data('product'))
                    var tr = $('#'+id);
                    //change the background color to red before removing
                    tr.css("background-color","#FF3700");
                    $.ajax({
                      type: "GET",
                      url: {!! json_encode(url('/')) !!}+'/cart-del/',
                      data: {id : id},
                      dataType: "json",
                      success: function (response) {
                        let cartTotal = response.subTotal
                        let cartCount = response.cartCount
                        $('.cartCount').html(cartCount)
                        $('.cartTotal').html(cartTotal)
                        tr.fadeOut(400, function(){
                          tr.remove();
                        });
                      }
                    });
                  })
                  
                  var hideModal = function(){
                    $('#adicionandoCarrinho').modal( 'hide' )
                  }
                  setTimeout(hideModal, 1000)
                  // Solicitado para não abrir a tela do carrinho...
                  // var showModalCart = function(){
                    //   $('#modalCart').modal( 'show' )
                    // }
                    // setTimeout(showModalCart, 1500)
                    
                  })
                  
                  // $('#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 formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                  let price = $(this).data('price')
                  price = parseFloat(price)
                  let image = $(this).data('image')
                  let qty = $(this).data('qty')
                  
                  let product_id = $(this).data('product')
                  let quantity = $(this).data('qty')
                  let name = $(this).data('name')
                  let sku = $(this).data('sku')
                  let reference = $(this).data('reference')
                  let ean = $(this).data('ean')
                  
                  $('input[name=subTotal]').val(price)
                  $('input[name=price]').val(price)
                  $('#price_item').html(price.toLocaleString('pt-BR', formato))
                  $('input[name=productAttribute]').val(product_id)
                  // $('input[name=quantity]').val(1)
                  $('input[name=quantity]').attr('max', quantity)
                  
                  $('div.titulo-produto>h4').html(name)
                  $('span.variavel_reference').html(reference)
                  $('span.variavel_ean').html(ean)
                  $('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;">')
                  }
                  $('.item-variavel').removeClass('active')
                  $('.item-variavel').removeClass('bg-primary')
                  if(quantity <= 0) {
                    $(".boleto").hide()
                    //$('#pills-home-tab-'+product_id).removeClass('gray-500')
                    $('#pills-home-tab-'+product_id).addClass('bg-danger')
                    $('#pills-home-tab-'+product_id).removeClass('active')
                    $('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')
                    $('.indisponivel').html('SEM ESTOQUE')
                    $('.indisponivel').show()
                    $(".number-input").hide()
                    $('.grp-comprar').hide()
                    $('.imagem-mascara-esgotado').show()
                    $(this).addClass('bg-danger')
                    $(".btn-comprar").hide()
                    //$(this).removeClass('gray-500')
                    $('input[name=quantity]').val(0)
                    $('input[name=quantity-var]').val(0)
                    $('input[name=quantity-var]').addClass('disabled')
                  } else {
                    $(".tab-content.variable").show()
                    $('#pills-home-tab-'+product_id).removeClass('gray-500')
                    $('#pills-home-tab-'+product_id).addClass('bg-primary')
                    $('#pills-home-tab-'+product_id).addClass('active')
                    $(".boleto").show()
                    $(this).addClass('gray-500')
                    // $('input[name=quantity]').val(1)
                    $('input[name=quantity-var]').val(1)
                    $('input[name=quantity-var]').removeClass('disabled')
                    $('.indisponivel').hide()
                    $('.indisponivel').html('Selecione acima, a medida')
                    $('.grp-comprar').show()
                    $(".btn-comprar").show()
                    $('.imagem-mascara-esgotado').hide()
                    $(".number-input").show()
                    $('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()
                    $('input[name=quantity]').attr('max', )
                    $('#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)
                  }
                })
                
                $('.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