@extends('layouts.front-layout')
@section('title') Blog @endsection
@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="
        {{ pagesSingleImage('Blog', 'top_banner_image') }}
            " class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{ $pageData['Blog']['top_banner_title'] ?? '' }}</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">{{ $pageData['Blog']['home_section_top_title'] ?? '' }}</span>
                <h2 class="secHeading">{{ $pageData['Blog']['home_section_heading'] ?? '' }}</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') ?? 'path/to/default/image.jpg'}}" class="img-fluid" alt="">
                        </figure>
                        <div class="newsContent">
                            <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('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