@extends('layouts.front.app')

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

@section('content')

@php $cat = $category->segmento ?? $category->grupo->grupo @endphp

<section>
  <nav>
    <div class="container my-4 px-1">
      <ol class="breadcrumb white z-depth-1">
        <li class="breadcrumb-item ">
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold">
            <i class="fas fa-home mr-1"></i> Home
          </a>
        </li>
        <li class="breadcrumb-item disabled font-weight-bolder black-text">Categoria</li>
        <li class="breadcrumb-item black-text font-weight-bolder">
          {!! $cat !!}
        </li>  
      </ol>
    </div>
  </nav>
</section>

<section>
  <div class="container">
    
    <div class="d-lg-block d-none">
      <div class="row">
        @include(config('site.domain').'.front.products.product-list', $products)
      </div>
    </div>
    
    <div class="d-block d-lg-none">
      @include(config('site.domain').'.front.products.product-list-mobile', $products)
    </div>
        
  </div>
</section>

@endsection
@section('js')

<script src="{{ asset('js/axios.js') }}"></script>

<script type="text/javascript">
  let token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  
  $(function () {

    $('.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)
    })
    
    $('.link-categoria').on('click', function(){
      window.location.href = $(this).data('href');
    })
    
    $('.ver_detalhes').on('click', function(){
      let id_prod = $(this).data('detalhes')
      let img = $(this).parents().eq(2).find("img").attr("src")
      let name = $(this).parents().eq(2).find(".titulo-produto").text()
      let desc = $(this).parents().eq(1).find("input[name=description").attr("value")
      let price = $('input[name=final_price-'+id_prod).val()
      let quantity = $(this).parents().eq(1).find("input[name=quantity").attr("max")
      
      $("#modal_prod_img").attr("src",img);
      $('#modal_prod_desc').html(desc)
      $('#modal_prod_name').html(name)
      $('#modal_prod_price').html(price)
      $('#modal_prod_id').val(id_prod)
      $("input[name='modal_prod_quantity']").attr("max", quantity)
      $(".grp-btn input[name='quantity']").attr("max", quantity)
      
      
      if(quantity > 0) {
        $('#btn_modal_add_cart').removeAttr('disabled')
        $('#modal_prod_quantity').attr('max', quantity)
        $('#modal_prod_quantity').removeAttr('disabled')
      } else {
        $(".show-button-buy").hide()
        $('#btn_modal_add_cart').attr('disabled', true)
        $('#modal_prod_quantity').attr('disabled', true)
      }
      $('#modal_variaveis').empty()
      let mostrarVariavel = false
      
      
      $.ajax({
        url: '/api/attributes/' + id_prod,
        contentType: 'json',
        success: function (resultado) {
          $('#modal_variaveis').attr('required', true)
          
          let _htmlOptions
          _htmlOptions += "<option selected> -- </option>"
          $(resultado.data).each(function(i, variaveis){
            if(variaveis.tipo) {
              mostrarVariavel = true
              $(variaveis.tipo).each(function(i, variavel){
                _htmlOptions += "<option value='"+variavel.value+"' data-qty='"+variavel.quantity+"' data-price='"+variavel.price+"' data-product='"+variavel.id+"'>"+variavel.value+"</option>"
              });
            } else {
              $('#modal_variaveis').removeAttr('required')
            }
          });
          if(mostrarVariavel) {
            $('#modal_variaveis').show()
            $('#modal_variaveis').append(_htmlOptions)
          } else {
            $('#modal_variaveis').hide()
          }
        }
      })
    })
    
    $('.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" || 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
      } else {
        
        axios.post(url, {
          token: token,
          customer_id: parseInt(customer_id),
          sku: sku
        }, {headers: {'Accept': 'application/json'}})
        .then((response)=>{
          
          $('#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)
        })
      }
    })
    
    $('#modal_variaveis').on('change', function(){
      let qty = $('#modal_variaveis option:selected').data('qty')
      let price = $('#modal_variaveis option:selected').data('price')
      let product = $('#modal_variaveis option:selected').data('product')
      let quantity = $(this).parents().eq(1).find("input[name=quantity").attr("max")
      
      $('#modal_prod_price').val(price)
      $('#modal_prod_variavel').val(product)
      
      if(qty > 0) {
        $(".show-button-buy").show()
        $("input[name='modal_prod_quantity']").attr("max", qty)
        $('#btn_modal_add_cart').removeAttr('disabled')
        $('#modal_prod_quantity').val(1)
        $('#modal_prod_quantity').removeAttr('disabled')
      } else {
        $('#btn_modal_add_cart').attr('disabled', true)
        $('#modal_prod_quantity').attr('disabled', true)
      }
    })
    
    $('#btn_modal_add_cart').on('click', function(){
      $('#modalProduto').modal( 'hide' )
      $('#adicionandoCarrinho').modal( 'show' )
      $('#adicionandoCarrinho').modal({backdrop: 'static'})
    })
  })
  
</script>

@endsection