@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')

  <section>

    <div class="container my-4">

      <div class="area-pesquisa">

        <div class="select-veiculo pb-3">
          <div class="row">

            <div class="col-lg-3 my-auto">
              <div class="selector">
                <div class="row">
                  <div class="col-lg-4 col-4">
                    <h2 class="text-right font-weight-bold text-white">1</h2>
                  </div>
                  <div class="col-lg col my-auto pl-0">
                    <h6 class="font-weight-bolder text-white">Escolha seu veículo</h6>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg text-center">
              <!--Categoria de Veículos-->
              <ul class="nav vehicles justify-content-end" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#passeio" id="nav-link-passeio" role="tab">
                    <img src="{{ asset('storage/images/pneu/carro.png') }}" height="50">
                    <p class="font-weight-bold fosco-text">VEÍCULO DE PASSEIO</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#comercial" id="nav-link-comercial" role="tab">
                    <img src="{{ asset('storage/images/pneu/van.png') }}" height="50">
                    <p class="font-weight-bold fosco-text">VEÍCULO COMERCIAL</p>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#van" id="nav-link-van" role="tab">
                    <img src="{{ asset('storage/images/pneu/SUV.png') }}" height="50">
                    <p class="font-weight-bold fosco-text">PICK UP/SUV</p>
                  </a>
                </li>
              </ul>
              <!--.\Categoria de Veículos-->
            </div>

          </div>
        </div>

        <div class="select-medidas py-4">
          <div class="row">

            <div class="col-lg-3 my-auto">
              <div class="selector">
                <div class="row">
                  <div class="col-lg-4 col-4">
                    <h2 class="text-right font-weight-bold text-white">2</h2>
                  </div>
                  <div class="col-lg col my-auto pl-0">
                    <h6 class="font-weight-bolder text-white">Selecione a medida</h6>
                  </div>
                </div>
              </div>
            </div>

            <div class="col-lg my-auto">
              @php
              $prod = new App\Shop\Products\Product();
              @endphp
              <!--Seletores da Categoria de Veículos-->
              @include(config('site.domain').'.layouts.front.busca_medidas')
              <!--.\Seletores da Categoria de Veículos-->
            </div>
          </div>
        </div>

        @include(config('site.domain').'.layouts.front.busca_aro')

      </div>

    </div>

  </section>

  @include(config('site.domain').'.layouts.front.banner-parceiros')

@endsection

@section('blog')
  <section>
    @include(config('site.domain').'.front.blog.recentes', $blog)
  </section>
@endsection

@section('js')
  <script type="text/javascript">
  $(document).ready(function() {

    let show = null

    $('.select-search-car').change(function(){
      let largura = $('select.select-search-car[name=width] option:checked').val();
      let altura = $('select.select-search-car[name=height] option:checked').val();
      let aro = $('select.select-search-car[name=rim] option:checked').val();

      largura == "LARGURA" || altura == "ALTURA" || aro == "ARO" ? show = false : show = true

      show ? $(".btn-search-car").removeClass("disabled") : $(".btn-search-car").addClass("disabled")
    });

    $('.select-search-van').change(function(){
      let largura = $('select.select-search-van[name=width] option:checked').val();
      let altura = $('select.select-search-van[name=height] option:checked').val();
      let aro = $('select.select-search-van[name=rim] option:checked').val();

      largura == "LARGURA" || altura == "ALTURA" || aro == "ARO" ? show = false : show = true

      show ? $(".btn-search-van").removeClass("disabled") : $(".btn-search-van").addClass("disabled")
    });

    $('.select-search-suv').change(function(){
      let largura = $('select.select-search-suv[name=width] option:checked').val();
      let altura = $('select.select-search-suv[name=height] option:checked').val();
      let aro = $('select.select-search-suv[name=rim] option:checked').val();

      largura == "LARGURA" || altura == "ALTURA" || aro == "ARO" ? show = false : show = true

      show ? $(".btn-search-suv").removeClass("disabled") : $(".btn-search-suv").addClass("disabled")
    });


    $('div.image-blog').children().addClass('img-fluid')

    $('#nav-link-passeio').on('click', function() {
      $('#tab-passeio').addClass('show').addClass('active')
      $('#tab-comercial').removeClass('show').removeClass('active')
      $('#tab-van').removeClass('show').removeClass('active')
      $('#tab-onibus').removeClass('show').removeClass('active')
    })

    $('#nav-link-comercial').on('click', function() {
      $('#tab-comercial').addClass('show').addClass('active')
      $('#tab-passeio').removeClass('show').removeClass('active')
      $('#tab-van').removeClass('show').removeClass('active')
      $('#tab-onibus').removeClass('show').removeClass('active')
    })

    $('#nav-link-van').on('click', function() {
      $('#tab-van').addClass('show').addClass('active')
      $('#tab-passeio').removeClass('show').removeClass('active')
      $('#tab-comercial').removeClass('show').removeClass('active')
      $('#tab-onibus').removeClass('show').removeClass('active')
    })

    $('#nav-link-onibus').on('click', function() {
      $('#tab-onibus').addClass('show').addClass('active')
      $('#tab-passeio').removeClass('show').removeClass('active')
      $('#tab-comercial').removeClass('show').removeClass('active')
      $('#tab-van').removeClass('show').removeClass('active')
    })
  })
</script>
@endsection