@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-5">
    
    <div class="row">
      
      <div class="col-lg">
        <div class="row">
          <div class="col-4 my-auto text-right">
            <i class="fas fa-shipping-fast fa-2x"></i>
          </div>
          <div class="col-8">
            <h4 class="font-weight-bold fosco-text">Entregamos</h4>
            <p class="font-weight-bolder">Para todo o Brasil</p>
          </div>
        </div>
      </div>
      
      <div class="col-lg">
        <div class="row">
          <div class="col-4 my-auto text-right">
            <i class="fas fa-hand-holding-usd fa-2x"></i>
          </div>
          <div class="col-8">
            <h4 class="font-weight-bold fosco-text">Pagamento</h4>
            <p class="font-weight-bolder">Rápido e Fácil</p>
          </div>
        </div>
      </div>
      
      <div class="col-lg">
        <div class="row">
          <div class="col-4 my-auto text-right">
            <i class="fas fa-coins fa-2x pr-2"></i>
          </div>
          <div class="col-8 pl-0">
            <h4 class="font-weight-bold fosco-text">Preços Baixos</h4>
            <p class="font-weight-bolder">Qualidade garantida</p>
          </div>
        </div>
      </div>
      
      <div class="col-lg">
        <div class="row">
          <div class="col-4 my-auto text-right">
            <i class="fas fa-shield-alt fa-2x"></i>
          </div>
          <div class="col-8">
            <h4 class="font-weight-bold fosco-text">Segurança</h4>
            <p class="font-weight-bolder">Compra protegida</p>
          </div>
        </div>
      </div>
      
    </div>
    
  </div>
</section>

@include(config('site.domain').'.layouts.front.tabs-products')

<section>
  <div class="container my-5">
    <div class="text-center">
      
      <div class="barra"></div>
      <span class="bg-white font-weight-bold font-nunito p-3 h3">Produtos em promoção</span>
      
      @if(count($promocionais) > 0)
      <div class="carousel-secondary slider mt-3">        
        @include(config('site.domain').'.front.products.product-carousel', ['products' => $promocionais])
      </div>
      @else 
      <div class="alert alert-warning font-weight-bold mt-3">
        sem produtos cadastrados no momento
      </div>
      @endif
      
    </div>
  </div>
</section>

<section>
  <div class="container my-5">
    <div class="text-center">
      
      <div class="barra"></div>
      <span class="bg-white font-weight-bold font-nunito p-3 h3">Produtos Recentes</span>
      
      @if(count($novos) > 0)
      <div class="carousel-secondary slider mt-3">        
        @include(config('site.domain').'.front.products.product-carousel', ['products' => $novos])
      </div>
      @else 
      <div class="alert alert-warning font-weight-bold mt-3">
        sem produtos cadastrados no momento
      </div>
      @endif
      
    </div>
  </div>
</section>

@endsection

@section('js')
<script type="text/javascript">
  $(function () {
    $('#promocoes-tab-md').on('click', function()  {
      $('#recentes-tab-md').removeClass('active')
      $('#destaque-tab-md').removeClass('active')
    })
    $('#recentes-tab-md').on('click', function()  {
      $('#promocoes-tab-md').removeClass('active')
      $('#destaque-tab-md').removeClass('active')
    })
    $('#destaque-tab-md').on('click', function()  {
      $('#promocoes-tab-md').removeClass('active')
      $('#recentes-tab-md').removeClass('active')
    })
  })
</script>
@endsection