@extends('layouts.front')
@section('content')
@section('css')
<style>
    .blog-post-item img{
        width: 100%;
        height: 210px;
    }
    .blog-post-item .post-item {
        padding: 0px 20px 20px !important;
    }
</style>

@endsection

@php $home = \App\HomePage::findorFail(1); @endphp
<div class="inner-page-banner-area" style="background: url({{asset('/laravel_code/public/banner/' . $home->inner_banner)}}); background-repeat: no-repeat; background-size: cover;">
    <div class="container">
        <div class="pagination-area">
            <h2>Blog</h2>
            <ul>
                <li><a href="{{route('home')}}">Home</a> - </li>
                <li>Blog</li>
            </ul>
        </div>
    </div>
</div>

<div class="contact-us-page-area section-space-bottom">
    <div class="container">
        <div class="row">
            
            @if($blog && !empty($blog))
            @foreach($blog as $row)
            <div class="col-md-4">

                <article class="blog-post-item">
                    <div class="post-thumb">
                        <img src="{{ env('IMAGE_URL').'/blog/'.$row->image}}" alt="{{$row->title}}" class="img-fluid">
                    </div>
                    <div class="post-item mt-4">
                        <div class="post-meta">
                            <span class="post-date"><i class="fa fa-calendar-alt mr-2"></i>{{date('d-M-Y', strtotime($row->created_at))}}</span>
                            <span class="post-author"><i class="fa fa-user mr-2"></i>{{$row->user_name}}</span>
                        </div>
                        <h2 class="post-title"><a href="{{route('blogDetail',$row->slug)}}">{{$row->title}}</a>
                        </h2>

                        <div class="post-content">
                            <p>{!! strlen($row->content) > 100 ? substr($row->content,0,100)."..." : $row->content !!}</p>

                            <a href="{{route('blogDetail',$row->slug)}}" class="read-more">More Details <i
                                    class="fa fa-angle-right ml-2"></i></a>
                        </div>
                    </div>
                </article>

            </div>
            @endforeach
            @endif

        </div>
    </div>
</div>

@endsection