@extends('layouts.front.app')

@section('content')

<div class="container-fluid area-central">
  
  <div class="row justify-content-center mt-4">
    
    <div class="col-lg-2">
      @include(config('site.domain').'.front.shared.sidebar')
    </div>
    
    <div class="col-lg">
      
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item">
            <a href="{{route('home')}}" class="font-weight-bold fosco-text">
              <i class="fas fa-home mr-1"></i> Home 
              <i class="fas fa-angle-right mx-2"></i>
            </a>
          </li>
          <li class="breadcrumb-item">
            <a href="{{route('home')}}" class="font-weight-bold fosco-text">
              <i class="fas fa-home mr-1"></i> Home 
            </a>
          </li>
        </ol>
      </nav>
      
      <section class="text-center p-2 ml-2">
        
        @foreach ($blogs as $link => $blog)              
        
        <div class="row blog align-items-center @if($link % 2 != 0) flex-row-reverse @endif">
        
          <div class="col-lg-5">
            
            <div class="bg-image blog rounded text-center p-1">
              {!! $blog->image_default !!}
            </div>
            
          </div>
          
          <div class="col-lg-7">
            
            <a href="{{ route('blog.categoria', $blog->id) }}" class="@if($link % 2 == 0) text-succes @else text-secondary @endif">
              
              <h6 class="font-weight-bold font-abeezee mb-3">
                {!! $blog->icon !!} {{ $blog->nome }}
              </h6>
            </a>
            
            <h3 class="font-weight-bold font-abeezee mb-3">
              <strong>{!! $blog->nome !!}</strong>
            </h3>
            
            <p>{!! $blog->description !!}</p>
            
            <p>por
              <a><strong>{!! config('app.name') !!}</strong></a>, 
              {!! \Carbon\Carbon::createFromFormat('Y-m-d H:i:s', $blog->created_at)->format('d/m/Y') !!}
            </p>
            
            <a class="btn font-weight-bold btn-lg @if($link % 2 == 0) btn-success @else btn-secondary @endif" href="{{ route('blog.individual', [$blog->slug, $blog->id]) }}">
              Ler mais
            </a>
            
          </div>
          
        </div>
        
        @if(!$loop->last)
        <hr class="my-5">
        @endif
        
        @endforeach
        
      </section>
    </div>
    
    <div class="col-lg-2">
      @include(config('site.domain').'.layouts.front.sidebar-ads')
    </div>
    
  </div>
</div>

@endsection

@section('js')
<script type="text/javascript">
(function(){
  const images = document.querySelectorAll(".bg-image img")
  if(images){
    images.forEach(element => {           
      element.classList.add("img-fluid", "hover-shadow")      
    })
  }
})();
</script>
@endsection