@extends('layouts.front.app')

@section('content')

<section>
  <div class="container my-3">
    <nav>
      <ol class="breadcrumb bg-white shadow-1">
        <li class="breadcrumb-item "><a href="{{ route('home') }}" class="fosco-text font-weight-bold">
          <i class="fas fa-home mr-1"></i> Home</a>
        </li>
        <li class="breadcrumb-item ">
          <a href="{{ route('blog') }}" class="font-weight-bolder text-dark">
            <i class="far fa-file-alt mr-1"></i> Blog
          </a>
        </li>
      </ol>
    </nav>
  </div>
</section>

<section>
  <div class="container">

    <div class="bg-white rounded shadow-1 p-3">

      <h2 class="font-weight-bold font-abeezee text-center my-5">Publicações recentes</h2>
      
      @foreach ($blogs as $link => $blog)
      
      <div class="row align-items-center @if($link % 2 != 0) flex-row-reverse @endif">
        
        <div class="col-lg-5">
          
          <div class="bg-image 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
    </div>
  </div>
</section>

@endsection

@section('js')
<script type="text/javascript">
(function(){
  const images = document.querySelectorAll(".bg-image img")
  if(images){
    images.forEach(element => {
      
      /*let src = element.src 
      let url = src.replace("http://localhost:3000/", "https://eletriza.com.br/")       
      element.src = url*/
      element.classList.add("img-fluid", "hover-shadow")
      
    })
  }
})();
</script>
@endsection