@extends('layouts.front.app')

@section('content')

<section>
  
  @if($blogs->count() == 0)
  
  <div class="container alert alert-warning font-weight-bolder mt-5">Ops... Não há blogs disponíveis </div>
  
  @else
  
  <div class="container">
    
    {{-- <nav class="navbar navbar-expand-lg navbar-dark grey lug darken-4 my-3">
      
      <a class="navbar-brand" href="{{ route('blog') }}">StrobNews {!! config('app.name') !!}</a>
      
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuBlog">
        <span class="navbar-toggler-icon"></span>
      </button>
      
      <div class="collapse navbar-collapse" id="menuBlog">
        
        <ul class="navbar-nav mr-auto">
          @foreach ($categorias->where('categoria_pai', '>', 0) as $categoria)
          <li class="nav-item @if(intval(request()->category_id) === intval($categoria->id)) active @endif">
            <a class="nav-link" href="{{ route('blog.categoria', $categoria->id) }}">{!! $categoria->nome !!}
              @if(request()->category_id === $categoria->id) <span class="sr-only">(current)</span> @endif
            </a>
          </li>
          @endforeach
        </ul>
        
      </div>
      
    </nav> --}}
    
    <h2 class="h1-responsive font-weight-bold text-center font-montserrat my-5">Publicações recentes</h2>
    
    @php
    $countBlog = 0;
    @endphp
    
    <div class="row">
      
      @foreach ($blogs as $blog)
      
      @if ($countBlog % 2 === 0)
      
      <div class="col-lg-5">
        <div class="view overlay rounded z-depth-2 mb-4">
          {!! $blog->image_default !!}
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
        </div>
      </div>
      
      <div class="col-lg-7">
        
        <a href="{{ route('blog.categoria', $blog->categoria->id) }}" class="green-text">
          <h6 class="font-weight-bold mb-3" style='font-family: "Abeezee"'>{!! $blog->categoria->icone !!} {{ $blog->categoria->nome }}</h6>
        </a>
        
        <h3 class="font-weight-bold mb-3" style='font-family: "Abeezee"'><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 btn-success btn-md" href="{{ route('blog.individual', [$blog->slug, $blog->id]) }}">Ler mais</a>
        
      </div>
      
      @else
      
      <div class="col-lg-7">
        
        <a href="#!" class="pink-text">
          <h6 class="font-weight-bold mb-3">{!! $blog->categoria->icone !!} {{ $blog->categoria->nome }}</h6>
        </a>
        <h3 class="font-weight-bold 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 btn-pink btn-md mb-lg-0 mb-4" href="{{ route('blog.individual', [$blog->slug, $blog->id]) }}">Ler mais</a>
        
      </div>
      
      <div class="col-lg-5">
        
        <div class="view overlay rounded z-depth-2">
          {!! $blog->image_default !!}
          <a>
            <div class="mask rgba-white-slight"></div>
          </a>
        </div>
        
      </div>
      
      @endif
      @php
      $countBlog++;
      @endphp
      <hr class="my-5">
      @endforeach
      
    </div>
    
  </div>
  
  @endif
  
</section>

@endsection

@section('js')
<script type="text/javascript">
  $(document).ready(function () {
    $('div.view.overlay>p>img').addClass('img-fluid')
  })
</script>
@endsection