@extends('layouts.front.app')

@section('og')
<meta property="og:title" content="{{ config('app.name') }}-{{ $title }}" />
<meta property="og:description" content="{{ config('app.description') }}-{{ $title }}" />
@endsection

@section('content')

{{--@include(config('site.domain').'.front.shared.modal-add-cart-pdt')--}}

<section>
  <div class="container px-0 my-3" id="product_list_table">
    <nav>
      <ol class="breadcrumb">
        <li class="breadcrumb-item "><a href="{{ route('home') }}" class="outer-grey-text font-weight-bold">
          <i class="fas fa-home mr-1"></i> Home</a>
        </li>
        <li class="breadcrumb-item outer-grey-text font-weight-bolder">{!! ucfirst($titleGrupo) !!}</li>
        <li class="breadcrumb-item active outer-grey-text font-weight-bolder">
          @if($category){!! ucwords((string) $category->name) !!} @endif
        </li>
      </ol>
    </nav>
  </div>
</section>

<section id="modal_cart_vue">
  
  <!--Modal para versão vue-->
  @include(config('site.domain').'.front.shared.modal-add-cart-vue')     
  <!--Modal para versão vue-->
  
  <div class="container px-0">
    
    @if ($category)
    @php
    $params = \Route::current()->parameters();
    $idSubGrupo = false;
    $btn = 'light';
    if(isset($params['id_subgrupo'])) {
      $idSubGrupo = $params['id_subgrupo'];
    }
    $idGrupo = $params['id_grupo'];
    $slug = $params['slug'];
    @endphp
    
    <div class="d-md-block d-none">
      <div class="row">
        
        <div class="col-lg-3">
          @include(config('site.domain').'.layouts.front.sidebar-left')
        </div>
        
        <div class="col-lg px-0">
          <div class="row">
            @include(config('site.domain').'.front.products.product-list', ['products' => $products])
          </div>
          
          <div class="d-flex justify-content-center mt-5">
            {!!$products->links()!!}
          </div>
        </div>
        
      </div>
    </div>
    
    <div class="d-block d-md-none">
      <div class="row px-3">
        @include(config('site.domain').'.front.products.product-list-mobile', ['products' => $products])
      </div>
      
      <div class="d-flex justify-content-center mt-5">
        {!!$products->links()!!}
      </div>
    </div>
    
    @else
    
    <div class="alert alert-warning" role="alert">
      Não há produtos cadastrados
    </div>
    
    @endif
    
  </div>
  
  <hr class="clearfix w-100 d-md-none">
  
</section>
@endsection


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

{{-- Arquivo JS do modal add cart --}}
@include(config('site.domain').'.front.shared.js.add-cart')
{{-- Arquivo JS do modal add cart --}}

<script type="text/javascript">
  
  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) / 2;
    cy = (result.offsetHeight / lens.offsetHeight) / 2;
    /*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 / 40) );
      y = pos.y - ( (lens.offsetHeight / 40) );
      /*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};
    }
  }
  
  $(document).ready(function () {
    let base_url = "{!! url('/') !!}"
    let base_img = "{!! config('site.url') !!}"
    $('.mensagem-product-cart').hide()
    $('.pagination').addClass('pg-dark')
    
    $('.emulate-click').on('click', function(){
      let product_id = $(this).data('product')
      $('#add-to-cart-btn-'+product_id).trigger('click')
    })
    
    $('.comprar').on('click', function() {
      // let minqty = $(this).data('minimo')
      if($('.qttyProductModal') == 0 ){
        $('#btnModalAddCart').attr('disabled', true).addClass('disabled')
      }
      
      $('.carousel').carousel({
        interval: 5000,
        pause: "hover",
        touch: true
      })
      
      $('#nameProductCart').html("")
      $('#referenceProductCart').html("")
      $('#priceProductCart').html("")
      $('#qttyProductModal').attr('max', 1)
      $('#qttyProductModal').attr('min', 1)
      $('#qttyProductModal').val(0)
      $('#qttyProductModal').addClass('disabled')
      $('.mensagem-product-cart').html("").hide()
      $('.cartTotal').html("")
      
      $('#modalProductCart').modal( 'show' )
      
      let qtyAdd
      let product = $(this).data('product')
      let sku = $(this).data('sku')
      let price = $(this).data('price')
      let maxqty = $(this).data('maxqty')
      let quantidade = null
      let minqty = $(this).data('minimo') || 1
      let name = $(this).data('name')
      let description = $(this).data('description')
      let reference = $(this).data('reference')
      let variacoes = $(this).data('variacoes')
      let ean = $(this).data('ean')
      let cx_interna = $(this).data('cx-interna')
      let cx_master = $(this).data('cx-master')
      let image = $(this).data('image')
      let associa = 0
      let url = {!! json_encode(url('/')) !!}+'/cart-add?product='+product+'&quantity=1&associa='+ associa
      let formato = { minimumFractionDigits: 2 , style: 'currency', currency: 'BRL' }
      
      $('input[name=priceModal]').val(parseFloat(price))
      $('input[name=productModal]').val(product)
      
      if(variacoes.length > 0) {
        $('#btnModalAddCart').attr('disabled', true).addClass('disabled')
        $('#banner-produto>div.btn-group').hide()
        $('.col-variacao').show()
        // $('.ean-product').attr('colspan', 2)
        $('.desc-product').attr('colspan', 6)
        
        let _optionVariable = '<option>Selecione</option>'
        
        $.each(variacoes, function (i, v) {
          console.log(v)
          _optionVariable += '<option value="' + v.id + '"'
          _optionVariable += ' data-var_quantity="' + v.quantity + '"'
          _optionVariable += ' data-var_price="' + v.price + '"'
          _optionVariable += ' data-var_sale_price="' + v.sale_price + '"'
          _optionVariable += ' data-var_attribute_name="' + v.attribute_name + '"'
          _optionVariable += ' data-var_cover_attribute="' + v.cover_attribute + '"'
          _optionVariable += ' data-var_attribute_reference="' + v.attribute_reference + '"'
          _optionVariable += ' data-var_ean="' + v.attribute_ean + '"'
          _optionVariable += ' data-var_ean_qtd="' + v.attribute_ean_qtd + '"'
          _optionVariable += '>'
          _optionVariable += '' + v.attribute_variacao + ''
          _optionVariable += '</option>'
        })
        
        $('#variableProductCart>select[name=productAttribute]').html(_optionVariable)
        
        $('#nameProductCart').html('<span class="text-uppercase">'+variacoes[0].attribute_name+'</span>')
        $('#referenceProductCart').html('<span class="text-uppercase">'+variacoes[0].attribute_reference+'</span>')
        $('#priceProductCart').html(variacoes[0].price.toLocaleString('pt-BR', formato))
        $('#qttyProductModal').attr('max', variacoes[0].quantity)
        
        $('.cartTotal').html(variacoes[0].price.toLocaleString('pt-BR', formato))
        
        associa = 1
      } else {
        // $('#btnModalAddCart').removeAttr('disabled').removeClass('disabled')
        $('#qttyProductModal').val(minqty)
        $('#qttyProductModal').removeClass('disabled')
        $('.col-variacao').hide()
        $('.ean-product').removeAttr('colspan')
        $('.desc-product').attr('colspan', 5)
        
        $('#nameProductCart').html('<span class="text-uppercase">'+name+'</span>')
        $('#referenceProductCart').html('<span class="text-uppercase">'+reference+'</span>')
        $('#priceProductCart').html(price.toLocaleString('pt-BR', formato))
        $('#qttyProductModal').attr('max', maxqty)
        $('#qttyProductModal').attr('min', minqty)
        $('#qttyProductModal').val(minqty)
        
        
        $('.cartTotal').html(price.toLocaleString('pt-BR', formato))
      }
      
      let _divCarousel = ''
      let _imgProduct = ''
      let _imgIndicators = ''
      
      axios.get(base_url + "/api/product/get-images/"+sku)
      .then((response)=>{
        let images = response.data
        if(response.length > 0) {
          $('#banner-produto>div.btn-group').show()
        } else {
          $('#banner-produto>div.btn-group').hide()
        }
        // _imgProduct += '<div id="result_zoom" class="img-zoom-result"></div>'
        $.each(images, function (i, img) {
          let idx = i+1
          if(i === 0) {
            _imgProduct += '<div class="carousel-item img-modal-pdt active ">'
            } else {
              _imgProduct += '<div class="carousel-item img-modal-pdt">'
              }
              _imgProduct += '<div class="view">'
                _imgProduct += '<img src="'+base_img+'storage/products/'+img.file_item_id+'.jpg" class="rounded z-depth-1 image_render" id="image_render_'+img.file_item_id+'" data-image="'+img.file_item_id+'" />'
                _imgProduct += '</div>'
                _imgProduct += '</div>'
                
                _imgIndicators += '<li data-target="#carousel-banner" data-slide-to="'+ idx +'"></li>'
              })
              
              _divCarousel += '<ol class="carousel-indicators">'
                _divCarousel += _imgIndicators
                _divCarousel += '</ol>'
                
                $('#banner-produto>div.carousel-inner').prepend(_divCarousel)
                $('#banner-produto>div.carousel-inner').html(_imgProduct)
                
                $('.carousel-prev').on('click', function() {
                  $('.carousel').carousel('prev')
                })
                $('.carousel-next').on('click', function() {
                  $('.carousel').carousel('next')
                })
                
                $('.image_render').hover( function(){
                  let image = $(this).data('image')
                  $('.img-zoom-result').show()
                  imageZoom("image_render_"+image, "result_zoom")
                  // $('.image_render').attr('style', 'cursor: zoom-in')
                }, function(){
                  $('.img-zoom-result').hide()
                })
              })
              
              $('#EANProduct').html(ean)
              $('#descriptionProduct').html(description)
              $('#cxInternaProduct').html(cx_interna)
              $('#cxMasterProduct').html(cx_master)
              
              $("#modalProductCart").on('shown.bs.modal', function() {
                // quantityProductCart
                $('#qttyProductModal').on('change', function() {
                  let maxqtyVar
                  let minqtyVar
                  if(variacoes.length > 0) {
                    maxqtyVar = $('select[name=productAttribute] option:selected').data('var_quantity')
                    minqtyVar = $('select[name=productAttribute] option:selected').data('var_ean_qtd')
                    price = $('select[name=productAttribute] option:selected').data('var_sale_price')
                    if (price === 0) {
                      price = $('select[name=productAttribute] option:selected').data('var_price')
                    }
                  } else {
                    maxqtyVar = $('#qttyProductModal').attr('max')
                    minqtyVar = $('#qttyProductModal').attr('min')
                  }
                  
                  let quantity = $('#qttyProductModal').val()
                  console.log('Quantidade informada', quantity)
                  console.log('Quantidade maxima', maxqtyVar)
                  console.log('Quantidade mínima', minqtyVar)
                  console.log('Valor está dentro?', parseInt(quantity) <= parseInt(maxqtyVar))
                  
                  if (parseInt(quantity) === parseInt(maxqtyVar)) {
                    $('.mensagem-product-cart').removeClass('alert-success')
                    $('.mensagem-product-cart').addClass('alert-warning')
                    $('.mensagem-product-cart').html('Esta é a quantidade máxima (<strong>' + maxqtyVar + '</strong> unds) para este item.')
                    $('.mensagem-product-cart').show()
                  } else if (parseInt(quantity) < parseInt(minqtyVar)) {
                    $('.mensagem-product-cart').removeClass('alert-success')
                    $('.mensagem-product-cart').addClass('alert-warning')
                    $('.mensagem-product-cart').html('A compra mínima para este item, é de <strong>' + minqtyVar + '</strong> unds.')
                    $('.mensagem-product-cart').show()
                    $('#btnModalAddCart').attr('disabled', true)
                    $('#btnModalAddCart').addClass('disabled')
                    let newPrice = parseFloat(minqtyVar) * parseFloat(price)
                    $('.cartTotal').html(newPrice.toLocaleString('pt-BR', formato))
                  } else if (parseInt(quantity) <= parseInt(maxqtyVar)) {
                    $('#btnModalAddCart').removeAttr('disabled').removeClass('disabled')
                    let newPrice = parseFloat(quantity) * parseFloat(price)
                    // qtyAdd = parseInt(quantity)
                    $('.cartTotal').html(newPrice.toLocaleString('pt-BR', formato))
                    
                  } else {
                    $('.mensagem-product-cart').removeClass('alert-success')
                    $('.mensagem-product-cart').addClass('alert-warning')
                    $('.mensagem-product-cart').html('Quantidade máxima para este item, é de <strong>' + maxqtyVar + '</strong> unds.')
                    $('.mensagem-product-cart').show()
                    $('#btnModalAddCart').attr('disabled', true)
                    $('#btnModalAddCart').addClass('disabled')
                    // qtyAdd = parseInt(maxqtyVar)
                    // $('#qttyProductModal').val(maxqtyVar)
                    let newPrice = parseFloat(maxqtyVar) * parseFloat(price)
                    $('.cartTotal').html(newPrice.toLocaleString('pt-BR', formato))
                  }
                  
                })
                
                $('#variableProductCart>select[name=productAttribute]').on('change', function() {
                  
                  let name_var = $('select[name=productAttribute] option:selected').data('var_attribute_name')
                  let reference_var = $('select[name=productAttribute] option:selected').data('var_attribute_reference')
                  let quantity_var = $('select[name=productAttribute] option:selected').data('var_quantity')
                  let min_quantity_var = $('select[name=productAttribute] option:selected').data('var_ean_qtd')
                  let price_var = $('select[name=productAttribute] option:selected').data('var_sale_price')
                  let ean_var = $('select[name=productAttribute] option:selected').data('var_ean')
                  let product_var = $('select[name=productAttribute] option:selected').val()
                  
                  if (price_var === 0) {
                    price_var = $('select[name=productAttribute] option:selected').data('var_price')
                  }
                  
                  $('#referenceProductCart').html(reference_var)
                  $('#priceProductCart').html(price_var.toLocaleString('pt-BR', formato))
                  $('#qttyProductModal').attr('max', quantity_var)
                  $('#qttyProductModal').attr('min', min_quantity_var || 1)
                  $('#EANProduct').html(ean_var)
                  
                  if(quantity_var > 0) {
                    
                    $('#nameProductCart').html('<span class="text-uppercase">'+name_var+'</span>')
                    
                    $('.cartTotal').html(price_var.toLocaleString('pt-BR', formato))
                    $('input[name=priceModal]').val(parseFloat(price_var))
                    $('#qttyProductModal').removeClass('disabled')
                    $('#qttyProductModal').val(min_quantity_var || 1)
                    $('#btnModalAddCart').removeAttr('disabled').removeClass('disabled')
                  }
                  else {
                    $('#nameProductCart').html('<span class="text-uppercase">'+name_var+' <br /><strong class="outer-red-text">[SEM ESTOQUE]<strong> </span>')
                      $('#qttyProductModal').val(0)
                      $('#qttyProductModal').addClass('disabled')
                      $('#btnModalAddCart').attr('disabled', true)
                      $('#btnModalAddCart').addClass('disabled')
                      $('input[name=priceModal]').val(parseFloat(price_var))
                    }
                    $('#qttyProductModal').trigger('focus')
                  })
                })
                
              })
              //
              $('#btnModalAddCart').on('click', function(e) {
                e.preventDefault()
                let product_var = $('select[name=productAttribute] option:selected').val()
                let total_quantidade = $('.total-quantidade').html()
                let qtdAtual = $('#qttyProductModal').val()
                let productAttribute = ''
                let priceAtual = $('input[name=priceModal]').val()
                let productAtual = $('input[name=productModal]').val()
                let txtSpinner = '<div class="d-flex justify-content-center">'
                  txtSpinner += '<div class="spinner-grow text-light" role="status">'
                    txtSpinner += '<span class="sr-only">Adicionando...</span>'
                    txtSpinner += '</div></div>'
                    $('.mensagem-product-cart').html("").hide()
                    $('.mensagem-product-cart').removeClass('alert-warning')
                    $('.mensagem-product-cart').addClass('alert-light')
                    $('.mensagem-product-cart').html(txtSpinner).show()
                    
                    // url = base_url+'/api/carrinho/pre-adiciona?product='+product+'&quantity='+qtdAtual
                    
                    if(product_var) {
                      let price_var = $('select[name=productAttribute] option:selected').data('var_sale_price')
                      if (price_var === 0) {
                        price_var = $('select[name=productAttribute] option:selected').data('var_price')
                      }
                      
                      // url += '&price='+price_var
                      // url += '&productAttribute=' + product_var
                      productAttribute = product_var
                      priceAtual = price_var
                    } else {
                      // url += '&price='+price
                      productAttribute = null
                    }
                    
                    let body = {
                      token : token.content,
                      productAttribute: productAttribute,
                      product: productAtual,
                      quantity: qtdAtual,
                      price: priceAtual,
                      addFrom: 'modal'
                    }
                    
                    console.log('Enviou', body)
                    // axios.get(url, {headers: {'Accept': 'application/json'}})
                    axios.post(base_url + '/cart',  body, {
                      headers: {'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest','Content-Type': 'application/json'},
                      crossDomain: true
                    })
                    .then((response)=>{
                      $('.mensagem-product-cart').removeClass('alert-light')
                      $('.mensagem-product-cart').addClass('alert-success')
                      $('.mensagem-product-cart').html('Item adicionado ao carrinho, com sucesso.').show()
                      
                      let novaQuantidade = parseInt(total_quantidade) + 1
                      $('.total-quantidade').html(novaQuantidade)
                      
                      var hideModal = function() {
                        $('#modalProductCart').modal( 'hide' )
                      }
                      setTimeout(hideModal, 1000)
                      
                    })
                    
                  })
                  
                })
                
              </script>
              @endsection