@extends('layouts.front.app')

@section('content')
<!-- Section: Blog v.1 -->
<section class="container content">
  <!--Navbar-->
  <nav class="navbar navbar-expand-lg navbar-dark red darken font-weight-bold white-text">

    <!-- Navbar brand -->
    <a class="navbar-brand" href="{{ route('blog') }}">Blog {!! config('app.name') !!}</a>

    <!-- Collapse button -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuBlog"
      aria-controls="menuBlog" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="menuBlog">

      <!-- Links -->
      <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>
      <!-- Links -->

      {{--  <form class="form-inline">
        <div class="md-form my-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        </div>
      </form>  --}}
    </div>
    <!-- Collapsible content -->

  </nav>
  <!--/.Navbar-->
  <!-- Section heading -->
  <h2 class="h1-responsive font-weight-bold text-center my-5" style="color: #234125 !important;">Publica&ccedil;&otilde;es recentes</h2>
  <!-- Section description -->
  @php
  $countBlog = 0;
  @endphp
  @foreach ($blogs as $blog)

  @if ($countBlog % 2 === 0)
  <!-- Grid row -->
  <div class="row">

    <!-- Grid column -->
    <div class="col-lg-5">

      <!-- Featured image -->
      <div class="view overlay rounded z-depth-2 mb-4">
        {!! $blog->image_default !!}
        <a>
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

    </div>
    <!-- Grid column -->

    <!-- Grid column -->
    <div class="col-lg-7">

      <!-- Category -->
      <a href="{{ route('blog.categoria', $blog->categoria->id) }}" class="green-text">
        <h6 class="font-weight-bold mb-3">{!! $blog->categoria->icone !!} {{ $blog->categoria->nome }}</h6>
      </a>
      <!-- Post title -->
      <h3 class="font-weight-bold mb-3"><strong>{!! $blog->nome !!}</strong></h3>
      <!-- Excerpt -->
      <p>{!! $blog->description !!}</p>
        <!-- Post data -->
        <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>
        <!-- Read more button -->
        <a class="btn btn-success btn-md" href="{{ route('blog.individual', [$blog->slug, $blog->id]) }}">Ler mais</a>

      </div>
      <!-- Grid column -->

    </div>
    <!-- Grid row -->
    @else
    <!-- Grid row -->
    <div class="row">

      <!-- Grid column -->
      <div class="col-lg-7">

        <!-- Category -->
        <a href="#!" class="pink-text">
          <h6 class="font-weight-bold mb-3">{!! $blog->categoria->icone !!} {{ $blog->categoria->nome }}</h6>
        </a>
        <!-- Post title -->
        <h3 class="font-weight-bold mb-3"><strong>{!! $blog->nome !!}</strong></h3>
        <!-- Excerpt -->
        <p>{!! $blog->description !!}</p>
          <!-- Post data -->
          <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>
          <!-- Read more button -->
          <a class="btn btn-pink btn-md mb-lg-0 mb-4" href="{{ route('blog.individual', [$blog->slug, $blog->id]) }}">Ler mais</a>

        </div>
        <!-- Grid column -->

        <!-- Grid column -->
        <div class="col-lg-5">

          <!-- Featured image -->
          <div class="view overlay rounded z-depth-2">
            {!! $blog->image_default !!}
            <a>
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

        </div>
        <!-- Grid column -->

      </div>
      <!-- Grid row -->
      @endif
      @php
      $countBlog++;
      @endphp
      <hr class="my-5">
      @endforeach

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