@extends('layouts.front.app')

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

@section('content')

@include(config("site.domain").".front.products.product-carousel")

<section>
  <div class="container">
    <div class="my-4 text-center text-md-left">
      <div class="row">

        <div class="col-lg area-hover">
          <div class="row">
            <div class="p-4 col-lg-3 area-info grey lighten-5">
              <div class="text-center">
                <i class="ml-1 far fa-thumbs-up fa-3x"></i>
              </div>
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text">Transparência 100%</h5>
              <h6 class="fosco-text font-weight-bolder">
                garantimos que você tenha um detalhamento sobre cada reparo
              </h6>
            </div>
          </div>
        </div>

        <div class="col-lg area-hover">
          <div class="row">
            <div class="p-4 col-lg-3 area-info grey lighten-5">
              <div class="text-center">
                <i class="fas fa-tools fa-3x"></i>
              </div>
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text">Preças Originais</h5>
              <h6 class="fosco-text font-weight-bolder">
                utilizamos somente peças autorizadas
              </h6>
            </div>
          </div>
        </div>

        <div class="col-lg area-hover">
          <div class="row">
            <div class="p-4 col-lg-3 area-info grey lighten-5">
              <div class="text-center">
                <i class="fas fa-globe-americas fa-3x"></i>
              </div>
            </div>
            <div class="col-lg">
              <h5 class="font-weight-bold fosco-text">Serviço Confiável</h5>
              <h6 class="fosco-text font-weight-bolder">
                mantemos padrões e técnicas que garantem a excelência do serviço
              </h6>
            </div>
          </div>
        </div>

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

<section>
  <div class="px-0 container-fluid elegant-color">

    <div class="container p-lg-3">
      <div class="about">

        <h2 class="py-3 text-center text-white font-weight-bold font-nunito">
          Sobre a Radiadores São José
        </h2>

        @php
        $quemsomos = App\Pagina::where('slug', 'missao-visao-valores')->first();
        @endphp

        {!! $quemsomos->conteudo !!}

      </div>
    </div>

    <div class="view banner-4"></div>

  </div>
</section>

@include(config("site.domain").".layouts.front.topics")

@include(config("site.domain").".layouts.front.services")

@include(config("site.domain").".layouts.front.category")

@include(config("site.domain").".layouts.front.especializada")

@endsection
@section('js')
<script src = "{{ mix('js/axios.js') }}"></script>
<script type="text/javascript">
  var token = document.head.querySelector('meta[name="csrf-token"]')
  axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content
  $(document).ready( function() {
    let base_url = "{!! url('/') !!}"
    console.log('index correto')
    const getMenu = (idMenu) => {
      let _ulMenu = ''
      axios.get(base_url + "/api/menu-superior/menu-grupo-produto/"+idMenu)
      .then((response)=>{
        let menuGrupo = response.data

        $.each(menuGrupo, function(i, mG) {

          _ulMenu += '<li class="dropdown-item dropdown-submenu menu-grupo" data-ref="'+mG.item_id_grupo+'">'
            _ulMenu += '<a href="lista-grupo/'+slug(mG.grupo_grupo)+'/'+mG.item_id_grupo+'/'+idMenu+'" class="white-text">'
              _ulMenu += '<i class="mr-1 fas fa-angle-right"></i>'+mG.grupo_grupo
              _ulMenu += '</a>'
              _ulMenu += '<ul class="dropdown-menu white menu-subgrupo-'+mG.item_id_grupo+' rounded-0 m-0 py-0">'
                _ulMenu += '</ul>'
                _ulMenu += '</li>'

              })
              $('ul.link-menu-'+idMenu).html(_ulMenu)

              $('li.menu-grupo').hover(function() {
                let id_grupo = $(this).data('ref')
                $('ul.menu-subgrupo-'+id_grupo).empty()
                getSubMenu(id_grupo, idMenu)
              })
            })
            .catch((error)=>{
              console.log('Error', error)
            })
          }
          $('.menu-sidebar').hover(function(){ console.log('oi')})
          $('menu-sidebar').hover(function() {
            let id_menu = $(this).data('ref')
            console.log(id_menu)
            getMenu(id_menu)
          })

        })
      </script>
      @endsection