@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 = isset($category->name) ?  $category->name : "produtos" @endphp

<section>
  <div class="container my-4">

  <nav aria-label="breadcrumb">
      <ol class="breadcrumb grey lighten-3">
        <li class="breadcrumb-item ">
          <a href="{{ route('home') }}" class="fosco-text font-weight-bold">
            <i class="fas fa-home mr-1"></i> Home
          </a><i class="fas fa-caret-right mx-2 mt-1" aria-hidden="true"></i>
        </li>
        <li class="breadcrumb-item black-text font-weight-bolder">{!! ucfirst($titleGrupo) !!}<i class="fas fa-caret-right mx-2 mt-1" aria-hidden="true"></i></li>
        <li class="breadcrumb-item active black-text font-weight-bolder">{!! $cat !!}</li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">

    <div class="row">
      <div class="col-lg-3 px-1 d-md-block d-none">
        @include(config('site.domain').'.layouts.front.sidebar-left')
      </div>

      <div class="col-lg">
        <div class="row mt-2">
          @include(config('site.domain').'.front.products.product-list', $products)
        </div>
      </div>
    </div>

    <div class="d-flex justify-content-center my-2">
      @if (isset($search))
      {{ $products->appends(['search' => isset($search) ? $search : ''])->links() }}
      @else
      {{ $products->links() }}
      @endif
    </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 () {
    $('ul.pagination').addClass('pg-blue')
    $('.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