@extends('layouts.front-layout')

@section('content')

   <!-- Begin: Main Slider -->
   <div class="innerBan">
    <img src="{{asset('front-assets/images/innerbnr1.png')}}" class="w-100" alt="">
    <div class="overlay">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-md-12">
                    <h2>bLOG</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- End: Main Slider -->

<section class="newsSec blog-page">
    <div class="container">
        <div class="newsHeading text-center" data-aos="fade-up">
            <span class="smallHeading">Our latest</span>
            <h2 class="secHeading">News</h2>
        </div>

        <div class="row align-items-center">
            @forelse($get_blogs as $blog)
            <div class="col-md-6">
                <div class="newsWraps">
                    <figure>
                        <img src="{{$blog->blogImage('blog_first_image') ? : ''}}" class="img-fluid" alt="">
                    </figure>
                    <div class="newsContent">
                        <div class="newsDate">{{$blog->created_at->format('F d, Y')}}</div>
                        <h3>{{$blog->title ? : ''}}</h3>
                        {!! \Illuminate\Support\Str::limit(strip_tags($blog->first_description), 80, '...') !!}
                        <ul>
                            <li><span>Cosmetic</span></li>
                            <li><span>Fashion</span></li>
                        </ul>
                        <a href="{{route('front.blog.detail',['id'=>$blog->id])}}" class="borderBtn">Read More</a>
                    </div>
                </div>
            </div>
            @empty
                <h2>Blog Data Not Available</h2>
            @endforelse
        </div>

    </div>
</section>


@endsection