@extends('layouts.front.app')

@section('og')
<meta property="og:type" content="product"/>
<meta property="og:title" content="{{ $product->name }}"/>
<meta property="og:description" content='{!! nl2br($product->description) !!}'/>
@if(!is_null($product->cover))
<meta property="og:image" content="{{ asset("storage/$product->cover") }}"/>
@endif
@endsection

@section('css')
<style>
  #lightbox .modal-content {
    display: inline-block;
    text-align: center;
  }
  
  #lightbox .close {
    opacity: 1;
    color: rgb(255, 255, 255);
    background-color: rgb(25, 25, 25);
    padding: 5px 8px;
    border-radius: 30px;
    border: 2px solid rgb(255, 255, 255);
    position: absolute;
    top: -15px;
    right: -55px;
    
    z-index:1032;
  }
  .imagem{
    position:relative;
  }
  .imagem-mascara {
    width:400px; /* largura da imagem m?scara */
    height:400px; /* altura da imagem m?scara */
    position:absolute;
    top:0;
    left:0;
    background:url('storage/img/promocao_2.png') 0 0 no-repeat; /* imagem m?scara */
  }
</style>
@endsection

@section('content')

@include(config('site.domain').'.layouts.front.menu-superior')
@include(config('site.domain').'.layouts.front.menu-banner')

<section>
  <div class="container">
    <nav>
      <ol class="breadcrumb grey lighten-5 mt-5">
        <li><a href="{{ route('home') }}" class="opera-text font-weight-bold">
          <i class="fa fa-home"></i> Home</a><i class="fas fa-angle-double-right mx-2 opera-text"></i>
        </li>
        <li class="breadcrumb-item opera-text font-weight-bolder"><i class="fas fa-box"></i> {{ $product->name }}</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <!-- Modal: modalLightBox -->
  <div class="modal fade" id="modalLightBox" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
        <div class="modal-body">
          <div class="row">
            <div class="col-lg">
              <img class="d-block w-100 img-zoom" src="" alt="">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<section>
  <div class="container my-5">
    
    <div class="row">
      @if($product->status === 1)
      <div class="col-lg-7">
        
        <div id="carousel-detail" class="carousel slide carousel-fade carrossel-detalhes" data-ride="carousel">
          <div class="carousel-inner text-center" role="listbox">
            @foreach ($product->images as $key => $image)
            @php
            $linkImage = config('site.url')."storage/".$image->src
            @endphp
            <div class="carousel-item @if($key === 0) active @endif" data-toggle="modal" data-target="#modalLightBox" style="cursor: zoom-in;">
              <img class="img-fluid z-depth-1 rounded-2 img-product" src="{{ $linkImage }}" alt="{{ config('app.name') }} {{ $product->name }}">
            </div>
            @endforeach
            
          </div>
          
          <a class="carousel-control-prev" href="#carousel-detail" role="button" data-slide="prev">
            <i class="fas fa-chevron-left fa-2x black-text"></i>
          </a>
          <a class="carousel-control-next" href="#carousel-detail" role="button" data-slide="next">
            <i class="fas fa-chevron-right fa-2x black-text"></i>
          </a>
          
          <ol class="carousel-indicators detalhes ml-auto">
            @foreach ($product->images as $key => $image2)
            @php
            $linkThumb = config('site.url')."storage/".$image2->src
            @endphp
            <li data-target="#carousel-detail" data-slide-to="{{ $key }}" class="@if($key === 0) active @endif">
              <img src="{{ $linkThumb }}" height="75" class="d-block border">
            </li>
            @endforeach
            
          </ol>
        </div>
        
      </div>
      
      <div class="col-lg" id="produto_vue">
        
        <div class="descricao">
          <h4 class="font-weight-bold fosco-text">{{ $product->name}}</h4>
          @if($product->reference)
          <p class="mb-0 fosco-text font-weight-bolder">C&oacute;digo de refer&ecirc;ncia: <span class="badge badge-pill red darken-3">{{ $product->reference }}</span></p>
          @endif
          <p class="fosco-text font-weight-bolder">SKU: <span class="badge badge-pill blue darken-3">{{ $product->sku }}</span></p>
          <hr>
        </div>
        
        <div class="details">
          <p class="font-weight-bolder grey-new text-justify">
            {!! nl2br($product->description) !!}
          </p>
          <hr>
        </div>
        
        <div class="comprar">
          @php
          if ($product->sale_price && $product->sale_price > 0 && ($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
          <h3 class="font-weight-bold opera-text">
            @if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null))
            <span class="mt-1 font-italic text-black-50" style="text-decoration: line-through; font-size:11px;">de: {{ config('cart.currency_symbol') }} {{ $product->price }}</span><h3 class="h3-responsive piccolino-text">por: {{ config('cart.currency_symbol') }} {{ number_format($product->sale_price, 2, ',', '.') }} </h3>
            <input type="hidden" name="final_price-{{$product->id}}" value="{{ $product->sale_price }}">
            @else
            <small>por</small> {{ config('cart.currency_symbol')}} <span>{{ number_format($preco_valido, 2,',','.')}}</span>
            @endif
          </h3>
          @if(floatval($preco_valido) !== floatval($valor) && ($valor > 0.00))
          <h6 class="font-weight-bolder fosco-text">ou {{$parcela}}x de <b>R$<span>{{ number_format($valor, 2,',','.')}}</span></b></h6>
          @endif
          
          @if (($product->sob_consulta === 1) || ($product->sob_encomenda === 1))
          <div>
            <a href="https://wa.me/5541998030212?text=Tenho%20interesse%20no%20produto%20{{ $product->name }},%20REF[{{ $product->reference }}] - COD[{{ $product->sku }}]" target="_blank" class="btn btn-lg red-opera white-text" data-toggle="tooltip" title="(Clique para consultar)">
              <i class="fab fa-whatsapp pb-3"></i> Item sob Consulta
            </a>
          </div>
          @else
          @if(($product->quantity) > 0)
          @if (auth()->check())
          
          <form  action="{{ route('cart.store') }}" method="POST">
            <div class="form-row">
              <div class="col-lg-4 my-auto">
                <div class="number-input my-4">
                  <div class="grey lighten-4 d-inline-block border btn-rounded p-1">
                    <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()" class="count-btn minus-item">
                      <i class="fas fa-minus other-grey p-2 border btn-rounded white"></i>
                    </a>
                    <input type="number" name="quantity" id="qty" min="1" value="1" max="{{ $product->quantity }}" class="item-quantidade" readonly>
                    <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="count-btn plus-item">
                      <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                    </a>
                  </div>
                </div>
                {{-- <input type="number" class="form-control form-control-md text-center mt-2" name="quantity" value="1" min="1" step="1" max="{{ intval($product->quantity) }}" class="form-control mt-2 w-25" @if($product->quantity === 0) disabled @endif> --}}
              </div>
              <div class="col-lg my-auto">
                {{ csrf_field() }}
                <input type="hidden" name="product" value="{{ $product->id }}">
                <button type="submit" class="btn btn-block box-detail font-weight-bold" @if($product->quantity === 0) disabled @endif>Adicionar ao carrinho <i class="fas fa-shopping-cart ml-2"></i></button>
              </div>
            </div>
          </form>
          @else
          @if (intval(config('site.login.integra_ls.ativa')) === 1)
          <a href="{{ route('autentica.completo') }}" class="btn btn-block box-detail btn-rounded box-green font-weight-bold">
            @else
            <a class="btn btn-block box-detail btn-rounded box-green font-weight-bold" data-dismiss="modal" data-toggle="modal" data-target="#modalLRForm">
              @endif
              EFETUE LOGIN, PARA COMPRAR<i class="fas fa-sign-in-alt"></i>
            </a>
            @endif
            @else
            @if(auth()->check())
            <div>
              <a class="font-abeezee black-text avise-me" 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>
            </div>
            @else
            <a class="btn btn-block box-detail font-weight-bold mt-1" data-toggle="modal" data-target="#modalLRForm">Efetue login, para ser avisado <i class="fas fa-user ml-2"></i></a>
            @endif
            @endif
            @endif
            <hr>
            
          </div>
          
          
          @if($product->quantity > 0)
          @include("layouts.front.shared.frete")
          @endif
          
          
          <h6 class="font-weight-bolder"><i class="fas fa-info-circle fosco-text mr-1"></i>imagens meramente ilustrativas</h6>
        </div>
        
      </div>
      @else
      <div class="content col-lg-12">
        <div class="alert alert-info" role="alert">
          Este produto encontra-se inativo no momento. <a href="#" class="alert-link">Continue navegando</a> e encontre outros produtos.
        </div>
      </div>
      @endif
    </div>
    
  </section>
  
  <section>
    <div class="container text-center pt-5">
      <hr>
      @php
      $destaques = [
      ['link' => '/pagina/quem-somos', 'banner' => 'banner/30.jpg'],
      ['link' => '/pagina/politicas-de-entregas', 'banner' => 'banner/31.jpg'],
      ['link' => 'http://www.artevegetal.com.br', 'banner' => 'banner/32.jpg'],
      ];
      @endphp
      @include(config('site.domain').'.layouts.front.banner-destaque')
    </div>
  </section>
  
  @endsection
  
  @section('js')
  <script src="{{ asset('js/axios.js') }}"></script>
  
  <script>
    var token = document.head.querySelector('meta[name="csrf-token"]')
    axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
    
    $(document).ready(function () {
      let $lightbox = $('#modalLightBox')
      let $imagesrc
      let $imagealt
      
      $('.img-product').on('click', function(){
        $imagesrc = $(this).attr('src')
        $imagealt = $(this).attr('alt')
      })
      
      $lightbox.on('show.bs.modal', function (e) {
        let $img = $lightbox.find('img');
        
        $lightbox.find('.modal-dialog').find('img').attr('src', $imagesrc);
        $lightbox.find('.close').removeClass('hidden');
      });
      
      $('.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)
        })
      })
      
      $('.total').hide()
      $('#cepDest').mask ('99999-999')
      $('.aguardeFrete').hide()
      $('.calcularFrete').show()
      $('.not-posible').hide()
      
      let qty_max  = $('#qty').attr('max')
      let subTotal  = $('input[name=subTotal]').val()
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      
      $('#qty-sub').on('click', function() {
        let quantity = $('#qty').val()
        let novoValor = parseFloat(quantity) * parseFloat(subTotal)
        $('#val_total').html(novoValor.toLocaleString('pt-BR', formato) )
      })
      
      $('#qty-add').on('click', function() {
        let quantity = $('#qty').val()
        let novoValor = parseFloat(quantity) * parseFloat(subTotal)
        $('#val_total').html(novoValor.toLocaleString('pt-BR', formato) )
      })
      
      $('#calcularFrete').on('click', function(e){
        $('.aguardeFrete').show()
        // $('.calcularFrete').hide()
        $('#frete>tbody').html("<tr><td colspan='3'></td></tr>")
        let _tableFrete
        let retirada = {!! config('shipping.retirada.ativo') !!}
        let motoboy = {!! config('shipping.motoboy.ativo') !!}
        let motoboy_custo = {!! config('shipping.motoboy.custo') !!}
        let motoboy_prazo = {!! config('shipping.motoboy.prazo') !!}
        let motoboy_min = {!! config('shipping.motoboy.valor_minimo') !!}
        let motoboy_cep_ini = {!! config('shipping.motoboy.cep_ini') !!}
        let motoboy_cep_fim = {!! config('shipping.motoboy.cep_fim') !!}
        /*Padroes da entrega dos correios*/
        let min_comprimento = {!! config('shipping.correios.min_comprimento') !!}
        let max_comprimento = {!! config('shipping.correios.max_comprimento') !!}
        let min_altura = {!! config('shipping.correios.min_altura') !!}
        let max_altura = {!! config('shipping.correios.max_altura') !!}
        let min_largura = {!! config('shipping.correios.min_largura') !!}
        let max_largura = {!! config('shipping.correios.max_largura') !!}
        let min_peso = {!! config('shipping.correios.min_peso') !!}
        let max_peso = {!! config('shipping.correios.max_peso') !!}
        
        let cepOrig = {!! str_replace('-', '', config('shop.warehouse.zip')) !!}
        let cepDest = $('#cepDest').val()
        cepDest = cepDest.replace('-', '')
        
        let 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)
        let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
        
        // console.log(peso)
        let send = true
        if(peso < min_peso){
          peso = min_peso
        } else if (peso > max_peso){
          // console.log('Peso ['+ peso +'] excede o valor máximo para entregar pelos correios ' + max_peso)
          send = false
        }
        if(altura < min_altura){
          altura = min_altura
        } else if (altura > max_altura){
          // console.log('Altura ['+ altura +'] excede o valor máximo para entregar pelos correios ' + max_altura)
          send = false
        }
        if(largura < min_largura){
          largura = min_largura
        } else if (largura > max_largura){
          // console.log('Largura ['+ largura +'] excede o valor máximo para entregar pelos correios ' + max_largura)
          send = false
        }
        if(comprimento < min_comprimento){
          comprimento = min_comprimento
        } else if (comprimento > max_comprimento){
          // console.log('Comprimento ['+ comprimento +'] excede o valor máximo para entregar pelos correios ' + max_comprimento)
          send = false
        } else if (cepDest === '') {
          $('.msgCEP').removeClass('alert-danger')
          $('.msgCEP').addClass('alert-warning')
          $('.msgCEP').addClass('show')
          $('#msgCEP').html('Verifique se preencheu corretamente o CEP.')
          send = false
        }
        
        let url = '/api/calculaFreteProprio/' + cepDest
        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">'
                  _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-bold font-abeezee dia"> 1 dia ú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 > 0) && cepDest >= motoboy_cep_ini && cepDest <= motoboy_cep_fim && preco >= motoboy_min){
                  let txt_dias = (motoboy_prazo > 1) ? ' dias úteis' : ' dia útil'
                  _tableFrete += '<tr>'
                    _tableFrete += '<td>'
                      _tableFrete += '<div class="custom-control custom-radio">'
                        _tableFrete += '<input type="radio" class="custom-control-input" id="motoboy" name="tipoEntrega" value="motoboy" aria-selected="true">'
                        _tableFrete += '<label class="font-weight-bolder" for="motoboy">Motoboy</label>'
                        _tableFrete += '</div>'
                        _tableFrete += '</td>'
                        _tableFrete += '<td data-th="dia" class="text-center dia"> ' + motoboy_prazo + ' ' + txt_dias +' </td>'
                        _tableFrete += '<td data-th="preco" class="text-center preco"> Frete Grátis </td>'
                        _tableFrete += '</tr>'
                      } else if(motoboy && cepDest >= motoboy_cep_ini && cepDest <= motoboy_cep_fim) {
                        let txt_dias = (motoboy_prazo > 1) ? ' dias úteis' : ' dia útil'
                        _tableFrete += '<tr>'
                          _tableFrete += '<td>'
                            _tableFrete += '<div class="custom-control custom-radio">'
                              _tableFrete += '<input type="radio" class="custom-control-input" id="motoboy" name="tipoEntrega" value="motoboy" aria-selected="true">'
                              _tableFrete += '<label class="font-weight-bolder" for="motoboy">Motoboy</label>'
                              _tableFrete += '</div>'
                              _tableFrete += '</td>'
                              _tableFrete += '<td data-th="dia" class="text-center font-weight-bold dia font-abeezee"> ' + 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
                              
                              // console.log(retorno, typeof retorno)
                              
                              let txt_dias
                              if(retorno > "0"){
                                txt_dias = "selecionar no momento da compra"
                                let valor = parseFloat(retorno)
                                _tableFrete += `<tr class="entrega">`
                                  _tableFrete += '<td>'
                                    _tableFrete += '<div class="custom-control custom-radio">'
                                      _tableFrete += '<input type="radio" class="custom-control-input" id="entrega" name="tipoEntrega" value="entrega">'
                                      _tableFrete += '<label class="font-weight-bolder" for="entrega">Entrega</label>'
                                      _tableFrete += '</div>'
                                      _tableFrete += '</td>'
                                      _tableFrete += '<td data-th="dia" class="text-center font-weight-bold font-abeezee dia">' +txt_dias+ ' </td>'
                                      _tableFrete += '<td data-th="preco" class="text-center font-weight-bolder preco">' + valor.toLocaleString('pt-BR', formato) + '</td>'
                                      _tableFrete += '</tr>'
                                    }else if(retorno == "0"){
                                      _tableFrete += `<tr class="entrega">`
                                        _tableFrete += '<td>'
                                          _tableFrete += '<div class="custom-control custom-radio">'
                                            _tableFrete += '<input type="radio" class="custom-control-input" id="entrega" name="tipoEntrega" value="entrega">'
                                            _tableFrete += '<label class="font-weight-bolder" for="entrega">Entrega</label>'
                                            _tableFrete += '</div>'
                                            _tableFrete += '</td>'
                                            _tableFrete += '<td data-th="dia" colspan="2" class="text-center font-weight-bold font-abeezee dia">Indisponível neste local </td>'
                                            _tableFrete += '</tr>'
                                          }
                                          
                                          // $.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 class="${frete.servico}">`
                                                //       _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+'">'
                                                    //           _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-bold font-abeezee 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)
                                                    /*console.log('Resposta', response.data)
                                                    console.log('Status', response.status)
                                                    $('#frete>tbody>tr>td.servico').html(retorno.servico)
                                                    
                                                    $('#frete>tbody>tr>td.dia').html(retorno.prazo + txt_dias)
                                                    $('#frete>tbody>tr>td.preco').html( "{!! config('cart.currency_symbol') !!} " +  retorno.valor)*/
                                                    /*$('input[name=frete]').val(retorno.valor)
                                                    
                                                    $('.aguardeFrete').hide()
                                                    $('.calcularFrete').show()
                                                    
                                                    let subTotal = $('input[name=subTotal]').val()
                                                    subTotal = parseFloat(subTotal)
                                                    let vlFrete = parseFloat(retorno.valor)
                                                    let vlFinal = subTotal + vlFrete
                                                    let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                                                    $('.preco_total').html(vlFinal.toLocaleString('pt-BR', formato))
                                                    $('.total').show()*/
                                                    $('.aguardeFrete').hide()
                                                    $('.calcularFrete').show()
                                                  }).catch((error)=>{
                                                    $('.aguardeFrete').hide()
                                                    $('.calcularFrete').show()
                                                    $('.msgCEP').removeClass('alert-warning')
                                                    $('.msgCEP').addClass('alert-danger')
                                                    $('.msgCEP').addClass('show')
                                                    $('#msgCEP').html('Erro')
                                                    console.log('Error', error)
                                                  })
                                                } else {
                                                  $('.aguardeFrete').hide()
                                                  $('.calcularFrete').show()
                                                }
                                              })
                                              
                                              $('.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 formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
                                                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()
                                                }
                                              })
                                              
                                            })
                                          </script>
                                          @endsection