@extends('layouts.front.app')

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

@endsection
@section('content')
  @php
  use Illuminate\Support\Str;
  @endphp
  <section>
    <div class="modal fade p-5" id="modalCart" tabindex="-1" role="dialog">
      <div class="modal-dialog" 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="white-text">&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-amber" data-dismiss="modal">Fechar</button>
            <a href="{{ route('cart.index') }}" class="btn btn-amber" id="verCarrinho">Ver Carrinho</a>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section>

    <div class="container-fluid w-75">
      <nav>
        <ol class="breadcrumb grey lighten-3 mt-3">
          <li class="breadcrumb-item">
            <a href="{{ route('home') }}" class="font-weight-bold fosco-text"><i class="fas fa-home"></i> Home</a>
          </li>
          @if ($product->categoria)
            <li class="breadcrumb-item">
              <a href="{{ route('front.group.list', [$product->categoria->slug, $product->id_segment, $product->id_grupo]) }}" class="font-weight-bolder black-text">
                {{ $product->categoria->name }}
              </a>
            </li>
          @endif
          <li class="breadcrumb-item active font-weight-bolder black-text">{!! Str::title($product->name) !!}</li>
        </ol>
      </nav>
    </div>

  </section>

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

        <div class="col-lg pb-5 product-uni">
          <div id="result_zoom" class="img-zoom-result"></div>
          <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-pdt">
                  <img src="{{ $src2 }}" height="75" width="75" class="d-block border rounded" alt="{{ config('app.name') }} - {{ $product->name }}">
                </li>
              @endforeach
            </ol>

          </div>

        </div>

        <div class="col-lg describe-product">

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

          <div class="my-3">
            @if ($product->reference)
              <h6 class="font-weight-bold fosco-text mr-2 mb-1">REF: <span class="variavel_reference"> {{ $product->reference }}</span></h6>
            @endif
            @if ($product->ean)
              <h6 class="font-weight-bold fosco-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 fosco-text mr-2 mb-1">Cx Interna: <span class="">{{ $product->venda_minima }}</span></h6>
          <h6 class="font-weight-bold fosco-text mr-2 mb-1">Cx Master: <span class=""> {{ $product->caixa_master }}</span></h6>
          <h5 class="font-weight-bold fosco-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>

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

                {{ csrf_field() }}
                @if(count($productAttributes) > 0) <!-- Quando se possui variáveis -->
                  <input type="hidden" name="product" value="{{ $product->id }}">
                  <ul class="nav md-pills nav-justified pills-outline-piccolino 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;
                      }
                      @endphp
                      <li class="nav-item mx-1">
                        <input type="hidden" name="final_price_{{ $attribute->id }}" value="{{$preco_valido}}">
                        <a class="nav-link item-variavel border h6 grey white-text"

                        id="pills-home-tab-{{ $attribute->id }}"

                        data-toggle="pill"

                        role="tab"

                        aria-controls="pills-home"

                        aria-selected="true"

                        @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-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>
                <hr>
                <div class="tab-content">
                  @foreach($productAttributes as $list_tab => $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;
                    }
                    $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
                    <div class="tab-pane fade @if($list_tab === 0) in show active @endif" id="pills-{{ $attribute->id }}" role="tabpanel">

                      <div>
                        <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
                        <h4 class="font-weight-bold fosco-text price" id="price_item">
                          <span class="h4-responsive fosco-text font-nunito">{{ config('cart.currency_symbol') }} {{ number_format($preco_valido, 2, ',','.') }}</span>
                        </h4>(pre&ccedil;o unit&aacute;rio)

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

                        <hr>

                        @if($attribute->quantity > 0)

                          <div class="number-input my-4">
                            <label class="font-weight-bold black-text mr-3" for="qty">QUANTIDADE:</label>
                            <div class="white d-inline-block border btn-rounded p-1">
                              <a onclick="this.parentNode.querySelector('input[type=number]').stepDown()">
                                <i class="fas fa-minus other-grey p-2 border btn-rounded white"></i>
                              </a>
                              <input type="hidden" name="frete" id="valFrete">
                              <input type="hidden" name="productAttribute" value="{{ $attribute->id }}">
                              <input type="number" name="quantity" id="qty" min="1" max="{{ $attribute->quantity }}" step="1" value="" class="mx-3">
                              <a onclick="this.parentNode.querySelector('input[type=number]').stepUp()">
                                <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                              </a>
                            </div>
                            {{-- <small class="ml-1"><strong>{{ config('cart.currency_symbol') }}</strong></small> {{ number_format(floatval($attribute->venda_minima) * floatval($preco_valido), 2, ',', '.') }} --}}
                          </div>

                          <div class="col-md-5">
                            <button class="btn btn-md btn-block btn-green font-weight-bold btn-comprar">Adicionar ao carrinho <i class="fas fa-shopping-cart"></i></button>
                          </div>

                        @else
                        </div>

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

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

                      @endif

                    </div>
                    {{-- Fim do Loop --}}
                  </div>

                  @php
                  $list_tab++;
                  @endphp
                @endforeach

              </div>
            @else <!-- Não possui variável -->
              @if($product->quantity > 0)
                @php
                if ($product->sale_price && ($product->sale_price_ini <= now() && $product->sale_price_fim > now() || $product->sale_price_ini === null)) {
                  $preco_valido = $product->sale_price;
                } else {
                  $preco_valido = $product->price;
                }
                $valorBoleto = (config('cart.desconto_boleto') > 0) ? $preco_valido - ($preco_valido * (config('cart.desconto_boleto') / 100)) : $preco_valido;
                $valor = 0.00;
                $parcela = 0;
                for($p = 1 ; $p <= config('cart.parc_sem_juros') ; $p++) {
                  if (round($preco_valido / $p, 2) > config('cart.valor_min_parcela')) {
                    $valor = $preco_valido / $p;
                    $parcela = $p;
                  }
                }
                @endphp
                <input type="hidden" name="subTotal" value="{{ $preco_valido }}">
                <h4 class="font-weight-bold fosco-text price" id="price_item">
                  <span class="h4-responsive fosco-text font-nunito"><strong>{{ config('cart.currency_symbol') }}</strong> {{ number_format($preco_valido, 2, ',','.') }}</span>
                </h4>(pre&ccedil;o unit&aacute;rio)

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

                <hr>
                <input type="hidden" name="product" value="{{ $product->id }}">
                <div class="number-input my-4">
                  <label class="font-weight-bold black-text mr-3" for="qty">QUANTIDADE:</label>
                  <div class="white d-inline-block border btn-rounded p-1">
                    <a onclick="this.parentNode.querySelector('input[id=qty]').stepDown()">
                      <i class="fas fa-minus other-grey p-2 border btn-rounded white"></i>
                    </a>
                    <input type="hidden" name="frete" id="valFrete">
                    <input type="number" name="quantity" id="qty" min="1" max="{{ $product->quantity }}" step="1" class="mx-3">
                    <a onclick="this.parentNode.querySelector('input[id=qty]').stepUp()">
                      <i class="fas fa-plus other-grey p-2 border btn-rounded white"></i>
                    </a>
                  </div>
                </div>

                <div class="col-md-5">
                  <button class="btn btn-md btn-block btn-green font-weight-bold btn-comprar">Adicionar ao carrinho <i class="fas fa-shopping-cart"></i></button>
                </div>

              @else
              </div>

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

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

            @endif
          @endif

        </form>

      </div>
    </div>
  </div>
</div>
</section>

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

@endsection

@section('js')
  <script type="text/javascript" src="{{ asset('js/axios.js') }}" charset="utf-8">
  </script>
  <script>
  function imageZoom(imgID, resultID) {
    var img, lens, result, cx, cy;
    img = document.getElementById(imgID);
    result = document.getElementById(resultID);
    /*create lens:*/
    lens = document.createElement("DIV");
    lens.setAttribute("class", "img-zoom-lens");
    /*insert lens:*/
    img.parentElement.insertBefore(lens, img);
    /*calculate the ratio between result DIV and lens:*/
    cx = result.offsetWidth / lens.offsetWidth;
    cy = result.offsetHeight / lens.offsetHeight;
    /*set background properties for the result DIV:*/
    result.style.backgroundImage = "url('" + img.src + "')";
    result.style.backgroundSize = (img.width * cx) + "px " + (img.height * cy) + "px";
    /*execute a function when someone moves the cursor over the image, or the lens:*/
    lens.addEventListener("mousemove", moveLens);
    img.addEventListener("mousemove", moveLens);
    /*and also for touch screens:*/
    lens.addEventListener("touchmove", moveLens);
    img.addEventListener("touchmove", moveLens);
    function moveLens(e) {
      var pos, x, y;
      /*prevent any other actions that may occur when moving over the image:*/
      e.preventDefault();
      /*get the cursor's x and y positions:*/
      pos = getCursorPos(e);
      /*calculate the position of the lens:*/
      x = pos.x - (lens.offsetWidth / 2);
      y = pos.y - (lens.offsetHeight / 2);
      /*prevent the lens from being positioned outside the image:*/
      if (x > img.width - lens.offsetWidth) {x = img.width - lens.offsetWidth;}
      if (x < 0) {x = 0;}
      if (y > img.height - lens.offsetHeight) {y = img.height - lens.offsetHeight;}
      if (y < 0) {y = 0;}
      /*set the position of the lens:*/
      lens.style.left = x + "px";
      lens.style.top = y + "px";
      /*display what the lens "sees":*/
      result.style.backgroundPosition = "-" + (x * cx) + "px -" + (y * cy) + "px";
    }
    function getCursorPos(e) {
      var a, x = 0, y = 0;
      e = e || window.event;
      /*get the x and y positions of the image:*/
      a = img.getBoundingClientRect();
      /*calculate the cursor's x and y coordinates, relative to the image:*/
      x = e.pageX - a.left;
      y = e.pageY - a.top;
      /*consider any page scrolling:*/
      x = x - window.pageXOffset;
      y = y - window.pageYOffset;
      return {x : x, y : y};
    }
  }
</script>
<script type="text/javascript">

var token = document.head.querySelector('meta[name="csrf-token"]')
axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
$(function () {
  $('.product-uni').on('mouseover', function() {
    $('.product-uni').attr('style', 'cursor: zoom-in')
    imageZoom("image_render", "result_zoom")
  })
  // $('.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){
    e.preventDefault()
    let frete = $('input[name=frete]').val()
    /*if(frete === '') {
    $('.msgCEP').addClass('show')
    $('#msgCEP').html('Você não escolheu o método de entrega...')
  } else {*/
  $('#adicionandoCarrinho').modal( 'show' )
  $('#adicionandoCarrinho').modal({ backdrop: 'static' })
  $("body").css({"overflow":"hidden"})
  // $('#formAddCart').submit()
  /*}*/
})

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

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

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

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

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

$('input[name=quantity-var]').on('change', function(){
  let max = $(this).attr('max')
  let quantity = $(this).val()
  if(max > 0) {
    $('input[name=quantity]').val(quantity)
    $('button.btn-comprar').removeAttr('disabled').removeClass('disabled')
  } else {
    $('input[name=quantity]').val(0)
    $('button.btn-comprar').attr('disabled', true).addClass('disabled')
  }
})
$('input[name=quantity]').on('change', function(){
  let max = $(this).attr('max')
  let quantity = $(this).val()
  if(max > 0) {
    $('button.btn-comprar').removeAttr('disabled').removeClass('disabled')
  } else {
    $('button.btn-comprar').attr('disabled', true).addClass('disabled')
  }
})

$('.item-variavel').on('click', function(){
  let product_id = $(this).data('product')
  let price = $('input[name=final_price_'+product_id+'').val()
  let quantity = $('input[name=quantity-'+product_id+'').val()
  let name = $(this).data('name')
  let sku = $(this).data('sku')
  let reference = $(this).data('reference')
  let ean = $(this).data('ean')
  let image = $(this).data('image')
  let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
  price = parseFloat(price)

  $('input[name=subTotal]').val(price)
  $('#price_item>span').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').addClass('grey')
  $('.item-variavel').removeClass('lighten-1')
  $('.item-variavel').removeClass('orange darken-4')
  if(quantity <= 0) {
    $(".boleto").hide()
    $('#pills-home-tab-'+product_id).removeClass('orange darken-4')
    $('#pills-home-tab-'+product_id).addClass('grey lighten-1')
    $('#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()
    $('.grp-comprar').hide()
    $('.imagem-mascara-esgotado').show()
    $(this).addClass('darken-4')
    $('input[name=quantity]').val(0)
    $('input[name=quantity-var]').val(0)
    $('input[name=quantity-var]').addClass('disabled')
  } else {
    $(".tab-content.variable").show()
    $('#pills-home-tab-'+product_id).removeClass('grey lighten-1')
    $('#pills-home-tab-'+product_id).addClass('orange darken-4')
    $('#pills-home-tab-'+product_id).addClass('active')
    $(".boleto").show()
    // $('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()
    $('.imagem-mascara-esgotado').hide()
    $('span.price').removeClass('text-muted')
    $('button#calcularFrete').removeAttr('disabled')
    $('button#calcularFrete').removeClass('disabled')
    $('button.btn-comprar').removeClass('disabled')
    $('button.btn-comprar').removeAttr('disabled')
    $('.btn-avise-me').hide()
  }
})

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

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

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

})

</script>



@endsection