@extends('template-layout.app')
@section('content')
    @include('header')
    <!-- Page Header Start -->
    <div class="page-header dark-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-12">
                    <!-- Page Header Box Start -->
                    <div class="page-header-box">
                        <h1 class="text-anime-style-3" data-cursor="-opaque">Our Blog</h1>
                        <nav class="wow fadeInUp">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="{{ route('index') }}">home</a></li>
                                <li class="breadcrumb-item active" aria-current="page">blog</li>
                            </ol>
                        </nav>
                    </div>
                    <!-- Page Header Box End -->
                </div>
            </div>
        </div>
    </div>
    <!-- Page Header End -->
<h1 class="text-center mt-5">{{ $meta_data->meta_title }}</h1>
    <!-- Page Blog Start -->
    <div class="page-blog">
        <div class="container">
            <div class="row">

                <!-- LEFT: BLOG GRID -->
                <div class="col-lg-12">
                    <div class="row">
                        @foreach ($blogs as $blog)
                            <div class="col-lg-4 col-md-6">
                                <!-- Post Item Start -->
                                <div class="post-item wow fadeInUp">
                                    <div class="post-featured-image">
                                        <a href="{{ route('blog.details', [
                                            'keyword' => $blog->keyword ?? 'Blog',
                                            'name' => Str::slug($blog->Bg_Name),
                                            'bg_id' => $blog->Bg_Id,
                                        ]) }}"
                                            data-cursor-text="View">
                                            <figure class="image-anime">
                                                <img src="{{ asset('/uploads/blogs/' . $blog->Bg_Img) }}"
                                                    alt="{{ $blog->Bg_Img_Alt }}" title="{{ $blog->Bg_Img_Title }}">
                                            </figure>
                                        </a>
                                    </div>

                                    <div class="post-item-body">
                                        <div class="post-item-content">
                                            <h2><a
                                                    href="{{ route('blog.details', [
                                                        'keyword' => $blog->keyword ?? 'Blog',
                                                        'name' => Str::slug($blog->Bg_Name),
                                                        'bg_id' => $blog->Bg_Id,
                                                    ]) }}">{{ $blog->Bg_Name }}</a>
                                            </h2>
                                        </div>
                                        <div class="post-item-btn">
                                            <a href="{{ route('blog.details', [
                                                'keyword' => $blog->keyword ?? 'Blog',
                                                'name' => Str::slug($blog->Bg_Name),
                                                'bg_id' => $blog->Bg_Id,
                                            ]) }}"
                                                class="readmore-btn">read more</a>
                                        </div>
                                    </div>
                                </div>
                                <!-- Post Item End -->
                            </div>
                        @endforeach

                    </div>
                </div>

                <!-- RIGHT: SIDEBAR -->


            </div>
        </div>
    </div>
    <!-- Page Blog End -->

    <!-- Footer Main Start -->
    @include('footer')
@endsection