@extends('website.layout.master')

@section('title')

    Blogs

@endsection

@section('content')

    <!-- page title start -->
    <div class="breadcrumb-area bg-cover" style="background-image: url('website/images/bg/9.png');">
        <div class="container">
            <div class="breadcrumb-inner text-center">
                <h2 class="page-title">Blogs</h2>
                <ul class="page-list">
                    <li><a href="{{route('home')}}">Home</a></li>
                    <li>Blogs</li>
                </ul>
            </div>
        </div>
    </div>

    <!-- blog area start -->
    <div class="blog-area pd-top-120 pd-bottom-120">
        <div class="container">
            <div class="row">
                @forelse($blogs as $blog)
                    <div class="col-lg-4 col-md-6">
                        <div class="single-blog-list">
                            <div class="thumb">
                                <img src="{{ URL::asset('admin/assets/uploads/'.$blog->image )}}" alt="img" style="width: 100%;height:280px">
                                <span
                                    class="date-2">{{ \Carbon\Carbon::parse($blog->created_at)->format('d M') }}</span>
                            </div>
                            <div class="details">
                                <p class="date mb-3 me-4 d-inline-block"><i
                                        class="far fa-folder-open"></i>{{ $blog->category_data->name }}</p>
                                <h5 class="mb-3"><a href="{{route('blogdetails',[$blog->slug])}}">{{ $blog->heading }}</a></h5>
                                <p class="mb-4">{{ Str::limit(strip_tags($blog->description), 50) }}</p>
                                <a class="right-arrow-text color-base fw-600" href="{{route('blogdetails',[$blog->slug])}}">Read More
                                    <i class="fa fa-arrow-right ms-2"></i></a>
                            </div>
                        </div>
                    </div>
                @empty
                @endforelse
            </div>
        </div>
    </div>
    <!-- blog area end -->

@endsection