@extends('LandingPage.Layouts.master')



@section('content')
<div class="breadcrumb-block style-shared">
    <div class="breadcrumb-main bg-linear overflow-hidden">
        <div class="container lg:pt-[134px] pt-24 pb-10 relative">
            <div class="main-content w-full h-full flex flex-col items-center justify-center relative z-[1]">
                <div class="text-content">
                    <div class="heading2 text-center">{{translate('Blog ')}}</div>
                    <div class="link flex items-center justify-center gap-1 caption1 mt-3">
                        <a href='{{route('Landing.index')}}'>{{translate('Homepage')}}</a>
                        <i class="ph ph-caret-right text-sm text-secondary2"></i>
                        <div class='text-secondary2 capitalize'>{{translate('Blog ')}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>



<div class='blog grid md:py-20 py-10'>
    <div class="container">
        <div class="list-blog grid lg:grid-cols-3 sm:grid-cols-2 md:gap-[42px] gap-8">



            @if ($blogs->isEmpty())
            <p>{{translate('No blogs found')}}</p>
            @else
            @foreach ($blogs as $blog)
            <div class="blog-item style-one h-full cursor-pointer">
                <a href="{{ route('landing.blogs.viewblogdetails', $blog->getTranslation('slug')) }}">
                <div class="blog-main h-full block">
                    <div class="blog-thumb rounded-[20px] overflow-hidden">
                        <img alt="blog-img" loading="lazy" width="2000" height="1500"
                         decoding="async" class="w-full duration-500" style="color:transparent"
                         src="{{ asset($blog->banner) }}">
                    </div>
                    <div class="blog-infor mt-7">

                        @if ($blog->category)
                        <div class="blog-tag bg-green py-1 px-2.5 rounded-full text-button-uppercase inline-block">
                            {{ $blog->category->getTranslation('name') ?? 'No Translation' }}

                        </div>
                        @else
                        <p>{{ translate('No category available') }}</p>
                        @endif

                        <div class="heading6 blog-title mt-3 duration-300">
                            {{ $blog->getTranslation('title') ?? 'No Translation' }}
                        </div>

                        <div class="flex items-center gap-2 mt-2">
                            <div class="blog-date caption1 text-secondary">
                                {{ $blog->created_at->format('M d, Y') }}
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            </div>
            @endforeach
            @endif




        </div>
        {{ $blogs->links() }}
    </div>
</div>




@endsection