@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 d-none d-lg-block">
      <div class="row mt-n5">
        @php
        $menuMain = $menu->getMenuListAll();

        foreach ($menuMain as $key => $grupo) {

          switch (str_slug($grupo->grupo_grupo, '-')) {
            case 'loucas-sanitarias':
            $bacias = $grupo;
            break;
            case 'cubas':
            $cubas = $grupo;
            break;
            case 'torneiras-e-misturadores':
            $metais = $grupo;
            break;
            case 'armarios-e-nichos':
            $armarios = $grupo;
            break;
            default:
            break;
          }
        }

        @endphp
        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-1">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Bacias</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-1.png")}}" class="img-fluid">
              </div>
            </div>

            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($bacias->grupo_grupo, '-'), $bacias->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold  white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-2">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Cubas</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-2.png")}}" class="img-fluid">
              </div>
            </div>

            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($cubas->grupo_grupo, '-'), $cubas->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-3">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Metais</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-3.png")}}" class="img-fluid">
              </div>
            </div>

            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($metais->grupo_grupo, '-'), $metais->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

        <div class="col-lg px-1">
          <div class="new-border">
            <div class="color-img cat-4">
              <div class="titulo">
                <h4 class="font-weight-bolder text-center white-text my-3">Armários</h4>
              </div>
              <div class="thumb text-center">
                <img src="{{asset("/storage/images/pdt-4.png")}}" class="img-fluid">
              </div>
            </div>

            <div class="pt-5 pb-3 mt-5">
              <div class="text-center">
                <a href="{{ route('front.list.grupo', [str_slug($armarios->grupo_grupo, '-'), $armarios->grupo_id]) }}" class="btn btn-md rounded elegant-color font-weight-bold white-text px-5">
                  VISUALIZAR <i class="fas fa-arrow-right ml-1"></i>
                </a>
              </div>
            </div>

          </div>
        </div>

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

  <section>

    {{-- Area 1 --}}
    <div class="bg-cia my-5 pt-4">

      <div class="container">
        <div class="cat-1">

          <div class="title d-flex mt-5 justify-content-center font-weight-bold">
            <span class="line"></span><p class="mt-n3 fosco-text text-center h2">Confira nossas promoções</p><span class="line"></span>
          </div>

          <div class="d-lg-block d-none">
            <div class="carousel-secondary">
              @include(config('site.domain').'.front.products.product-carousel', ['products' => $promocionais])
            </div>
          </div>

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

        </div>

      </div>

    </div>

    {{-- Area 2 --}}
    <div class="container">
      <div class="cat-2">

        <div class="title d-flex mt-5 justify-content-center font-weight-bold">
          <span class="line"></span><p class="mt-n3 fosco-text text-center h2">Produtos recentes</p><span class="line"></span>
        </div>

        <div class="d-lg-block d-none">
          <div class="carousel-secondary">
            @include(config('site.domain').'.front.products.product-carousel', ['products' => $novos])
          </div>
        </div>

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

      </div>
    </div>

    {{-- Area 3 --}}
    <div class="container">
      <div class="cat-3">

        <div class="title d-flex mt-5 justify-content-center font-weight-bold">
          <span class="line"></span><p class="mt-n3 fosco-text text-center h2">Produtos em destaque</p><span class="line"></span>
        </div>

        <div class="d-lg-block d-none">
          <div class="carousel-secondary">
            @include(config('site.domain').'.front.products.product-carousel', ['products' => $products])
          </div>
        </div>

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

      </div>
    </div>

  </section>



@endsection