@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 class="bg-white d-md-block d-none">

  <div class="container py-2">

    <div class="row">

      <div class="col-lg">
        <div class="row">
          <div class="col-lg-4">
            <div class="view">
              <img src="{{asset('storage/images/eletriza/img-5.png')}}"
              class="img-fluid"
              alt="desconto no boleto bancário">
            </div>
          </div>
          <div class="pl-0 my-auto col-lg">
            <h5 class="font-weight-bold font-montserrat fosco-text">{!!config('cart.desconto_boleto')!!}% de desconto
            </h5>
            <h6 class="font-weight-bolder fosco-text">no boleto bancário</h6>
          </div>
        </div>
      </div>

      <div class="col-lg">
        <div class="row">
          <div class="col-lg-4">
            <div class="view">
              <img src="{{asset('storage/images/eletriza/img-2.png')}}"
              class="img-fluid"
              alt="parcelamento no cartão de crédito">
            </div>
          </div>
          <div class="pl-0 my-auto col-lg">
            <h5 class="font-weight-bold font-montserrat fosco-text">{{ config('cart.parc_sem_juros') }}x sem juros <span class="text-danger">*</span></h5>
            <h6 class="font-weight-bolder fosco-text">no cartão de crédito</h6>
          </div>
        </div>
      </div>

      <div class="col-lg">
        <div class="row">
          <div class="col-lg-4">
            <div class="view">
              <img src="{{asset('storage/images/eletriza/img-1.png')}}"
              class="img-fluid"
              alt="site protegido">
            </div>
          </div>
          <div class="pl-0 my-auto col-lg">
            <h5 class="font-weight-bold font-montserrat fosco-text">Compra segura</h5>
            <h6 class="font-weight-bolder fosco-text">site protegido</h6>
          </div>
        </div>
      </div>

      <div class="col-lg">
        <div class="row">
          <div class="col-lg-4">
            <div class="view">
              <img src="{{asset('storage/images/eletriza/img-3.png')}}"
              class="img-fluid"
              alt="frete para todo o brasil">
            </div>
          </div>
          <div class="pl-0 my-auto col-lg">
            <h5 class="font-weight-bold font-montserrat fosco-text">Temos frete</h5>
            <h6 class="font-weight-bolder fosco-text">para todo o Brasil</h6>
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<section>
  @include(config('site.domain').'.layouts.front.banner-secundario')
</section>

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

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

</section>

<section>
  <div class="container mb-5">
    <div class="text-center view">
      <img src="{{asset('storage/images/eletriza/frete.png')}}"
      class="img-fluid"
      alt="compre com segurança">
    </div>
  </div>
</section>

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

<section>
  <div class="container">

    <div class="my-3 title d-flex justify-content-center font-weight-bold fosco-text">
      <span class="line"></span>
      <h3 class="font-montserrat text-dark mt-n3">NOVIDADES</h3>
      <span class="line"></span>
    </div>
    <div class="d-none d-md-block">

      @include(config('site.domain').'.front.products.product-carousel-list',  ['productsCarousel' => $novos->take(12), 'type' => 'novos'])

    </div>

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

</section>

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

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

@if($products->count() > 0)
<section>

  <div class="container mt-5">

    <div class="my-3 title d-flex justify-content-center font-weight-bold fosco-text">
      <span class="line"></span>
      <h3 class="font-montserrat text-dark mt-n3">
        {{$grupoHome->grupo_sub_sub_grupo}}
      </h3>
      <span class="line"></span>
    </div>

    <div class="d-none d-md-block">
      <div class="row">
        @include(config('site.domain').'.front.products.product-carousel-list', ['productsCarousel' => $products->take(12), 'type' => $grupoHome->grupo_sub_sub_grupo])
      </div>
    </div>

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

</section>

@endif

@endforeach
<div class="d-none d-md-block">
  @include(config("site.domain").".layouts.front.banner-categorias")
</div>
{{-- @include(config("site.domain").".front.blog.recentes", ['blog' => $blog]) --}}

{{-- @include(config("site.domain").".layouts.front.banner-parceiros") --}}

@endsection