@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-3">
    <div class="icones">
      <div class="row mx-auto">
        
        <div class="col-lg">
          <div class="row pt-4">
            <div class="col-3">
              <i class="fas fa-credit-card fa-3x fosco-text"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold fosco-text">Até {!!config('cart.parc_sem_juros')!!}x sem juros</h5>
              <p class="font-weight-bolder fosco-text">no cartão</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row pt-4">
            <div class="col-3">
              <i class="fas fa-percent fa-3x fosco-text"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold fosco-text">Promoções</h5>
              <p class="font-weight-bolder fosco-text">todos os dias</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row pt-4">
            <div class="col-3">
              <i class="fas fa-certificate fa-3x fosco-text"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold fosco-text">Mais de 30 anos</h5>
              <p class="font-weight-bolder fosco-text">de experiência</p>
            </div>
          </div>
        </div>
        
        <div class="col-lg">
          <div class="row pt-4">
            <div class="col-3">
              <i class="fas fa-store fa-3x fosco-text"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold fosco-text">Pode confiar!</h5>
              <p class="font-weight-bolder fosco-text">temos loja física</p>
            </div>
          </div>
        </div>
        
      </div>
    </div>
  </div>
</section>

<section>
  <div class="d-md-block d-none">
    @include(config('site.domain').'.layouts.front.tabs-products')
  </div>
</section>

@foreach ($menu->getSubGrupoHome() as $key => $grupoHome)

@php
$products = $menu->getProducts($grupoHome->grupo_sub_id)->take(8);
@endphp

@if($products->count() > 0)
<section>
  
  <div class="container py-5">
    
    <div class="text-center">
      <div class="barra"></div>
      <span class="bg-white font-weight-bold font-montserrat p-3 h3">
        {{$grupoHome->grupo_sub_sub_grupo}}
      </span>
    </div>
        
    <div class="d-md-block d-none mt-3">
      <div class="carousel-secondary">
        @include(config('site.domain').'.front.products.product-carousel', compact('products'))
      </div>
    </div>
    
    <div class="d-block d-md-none mt-3">
      @include(config('site.domain').'.front.products.product-list-mobile', compact('products'))
    </div>
    
  </div>
  
</section>

@endif

@endforeach

@endsection