@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 pt-4">
    <div class="icones">
      <div class="row">

        <div class="col-lg">
          <div class="row pt-4">
            <div class="col-3">
              <i class="fas fa-credit-card fa-3x outer-grey"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold outer-grey">Até 12x sem juros</h5>
              <p class="font-weight-bolder outer-grey">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 outer-grey"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold outer-grey">Promoções</h5>
              <p class="font-weight-bolder outer-grey">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 outer-grey"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold outer-grey">Mais de 30 anos</h5>
              <p class="font-weight-bolder outer-grey ">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 outer-grey"></i>
            </div>
            <div class="col-9">
              <h5 class="font-weight-bold outer-grey">Pode confiar!</h5>
              <p class="font-weight-bolder outer-grey">temos loja física</p>
            </div>
          </div>
        </div>

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

<section>
  @include(config('site.domain').'.front.products.product-carousel')
</section>

<section>
  <div class="container my-3">
    <div class="text-center">
      @php
      $produtosCat2 = $novos;
      $seq2 = 0;
      @endphp
      <div id="carouselCat2" class="carousel slide carousel-fade" data-ride="carousel">
        <h3 class="font-weight-bolder font-abeezee">PRODUTOS EM DESTAQUE</h3>

        @if($produtosCat2->count() > 4)

        <div class="controls-top text-center">
          <a class="btn btn-sm rounded-circle white-text fosco-text" href="#carouselCat2" data-slide="prev"><i
            class="fas fa-chevron-left"></i>
          </a>
          <a class="btn btn-sm rounded-circle white-text fosco-text" href="#carouselCat2" data-slide="next"><i
            class="fas fa-chevron-right"></i>
          </a>
        </div>

        @else

        <div class="mb-4"></div>

        @endif

        <div class="carousel-inner px-3" role="listbox">
          @foreach ($produtosCat2->chunk(4) as $protudosChunk2)

          <div class="carousel-item @if($seq2 === 0) active @endif" >
            <div class="row">
              @foreach ($protudosChunk2 as $protudos2)

              @php
              $src = config('site.url') . "storage/". $protudos2->cover;
              if($protudos2->sales_price !== null) {
                $preco_valido2 = $protudos2->sales_price;
              } else {
                $preco_valido2 = $protudos2->price;
              }
              @endphp

              <div class="col-sm-3 px-1">
                <div class="centro rounded z-depth-1 mb-3 p-2">
                  <a href="{{ route('front.get.product', [$protudos2->slug, $protudos2->id]) }}">
                    <div class="view zoom">
                      <img src="{{ $src }}" class="img-fluid pointer mx-auto">
                    </div>
                  </a>
                  <div class="">
                    <a href="{{ route('front.get.product', [$protudos2->slug, $protudos2->id]) }}">
                      <div class="mt-3">
                        <div class="card-title pdt text-center">
                          <h6 class="font-weight-bolder black-text">{{$protudos2->name}}</h6>
                        </div>
                        <div class="card-text pc text-center">
                          <h5 class="red-text font-weight-bold">{{ config('cart.currency_symbol') }} {{ number_format($preco_valido2, 2, ',','.') }}</h5>
                        </div>
                      </div>
                    </a>
                    <div class="text-center">
                      @if ($protudos2->attributes->count() > 0 || intval($protudos2->quantity) === 0)
                      <a href="{{ route('front.get.product', [$protudos2->slug, $protudos2->id]) }}" class="btn btn-md blue-tda white-text btn-rounded btn-block font-weight-bold">
                        <i class="fas fa-box mr-1"></i> Ver Item
                      </a>
                      @else
                      <form  action="{{ route('cart.store') }}" class="d-flex justify-content-left" method="POST">
                        {{ csrf_field() }}
                        <input type="hidden" name="subTotal" value="{{$preco_valido2}}">
                        <input type="hidden" name="quantity" value="1">
                        <input type="hidden" name="product" value="{{ $protudos2->id }}">
                        <button class="btn btn-md btn-green btn-block btn-rounded font-weight-bold"><i class="fas fa-shopping-cart mr-1"></i> Adicionar ao carrinho</button>
                      </form>
                      @endif
                    </div>
                  </div>
                </div>
              </div>

              @php
              $seq2++;
              @endphp

              @endforeach
            </div>
          </div>
          @endforeach

        </div>
      </div>

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

@endsection