@extends('layouts.website')
@section('meta')
    <!-- Title -->
    <title>{{getSetting('blog_title')}} {{getSetting('site_title')}}</title>

    <!-- Description meta tag -->
    <meta name="description" content="{{getSettingDetails('site_description')}}">

    <!-- Keywords meta tag (Note: Google mostly ignores this tag, but other search engines may use it) -->
    <meta name="keywords" content="{{getSettingDetails('site_keywords')}}">

    <!-- Author meta tag -->
    <meta name="author" content="{{getSetting('site_author')}}">

    <!-- Robots meta tag (index/follow means search engines can index the page and follow its links) -->
    <meta name="robots" content="index,follow">

    <!-- Canonical URL (if you have multiple URLs for the same content, specify the preferred one) -->
    <link rel="canonical" href="{{route('home')}}">

    <!-- Open Graph meta tags for social media sharing (Facebook, Twitter, LinkedIn, etc.) -->
    <meta property="og:title" content="{{getSetting('site_title')}} {{getSetting('blog_title')}}">
    <meta property="og:description" content="{{getSettingDetails('site_description')}}">
    <meta property="og:url" content="{{route('home')}}">
    <meta property="og:type" content="website">

    <!-- Twitter Card meta tags for Twitter sharing -->
    <meta name="twitter:title" content="{{getSetting('site_title')}} {{getSetting('blog_title')}}">
    <meta name="twitter:description" content="{{getSettingDetails('site_description')}}">
    <meta name="twitter:card" content="summary_large_image">
@endsection
@section('content')
    <!--================ start banner Area =================-->
    <section class="" id="hero_section" style="background-image: url({{asset('uploads/'.getSetting('blog_bg'))}});">
        <div class="bubbles">
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
            <div class="bubble"></div>
        </div>
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-5 col-md-5 col-sm-12 text-md-start text-center hero_content">
                    <h1 class="hero_title">{!! getSetting('blog_title') !!}</h1>
                    <div class="mt-3">
                        <a href="#our_service" class="primary-btn smooth">Read Article</a>
                    </div>

                </div>

                <div class="col-lg-7 col-md-7 col-sm-12 hero_image">
                    <div class="image-container">
                        <img class="img-fluid" src="{{asset('uploads/'.getSetting('blog_image'))}}">
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--================ End banner Area =================-->
    <div class="container">
      <ins class="adsbygoogle"
         style="display:block"
         data-ad-format="fluid"
         data-ad-layout-key="-fb+5w+4e-db+86"
         data-ad-client="ca-pub-2908437793326427"
         data-ad-slot="2910192384"></ins>
    <script>
         (adsbygoogle = window.adsbygoogle || []).push({});
    </script>  
    </div>
    <!--================ start Our Service Area =================-->
    <section id="our_service" >
        <div class="container">
            <div class="row align-items-center">
                <h2 class="section_title">{!!getSetting('blog_title')!!}</h2>
                <p class="section_content">{!!getSettingDetails('blog_text')!!}</p>
            </div>
        </div>
    </section>
    <!--================ End Our Service Area =================-->
    <!--================ start Our Service Area =================-->
    <section id="blogs_section" class="my-md-5 my-sm-2">
        <div class="container">
                <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="-fb+5w+4e-db+86"
                 data-ad-client="ca-pub-2908437793326427"
                 data-ad-slot="2910192384"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
            <div class="row  gx-sm-3 gy-4">
                @if($blogs->count() > 0)
                @foreach($blogs as $item)
                    <div class="col-xl-3 col-md-4 col-sm-6">
                        <a href="{{route('post',['slug'=>$item->slug])}}" class="text-decoration-none text-success">
                            <div class="card">
                                @php
                                $count = 320;
                                @endphp
                                @if($item->thumbnail)
                                <img src="{{asset('uploads/'.$item->thumbnail)}}" class="card-img-top" alt="{{$item->title}}">
                                    @php
                                        $count = 150;
                                    @endphp
                                @endif
                                <div class="card-body">
                                    <h5 class="card-title">{{$item->title}}</h5>
                                    <p class="card-text">{!! \Illuminate\Support\Str::limit(strip_tags($item->body), $count) !!}</p>
                                    <a href="{{route('post',['slug'=>$item->slug])}}" class="">Read More</a>
                                </div>
                            </div>
                        </a>
                    </div>
                @endforeach
                @else
                    <h2 class="text-warning text-center fw-bold">Article not found</h2>
                @endif

            </div>

            <div class="d-flex justify-content-center">
                {{ $blogs->links() }} {{-- Render pagination links --}}
            </div>
            <ins class="adsbygoogle"
                 style="display:block"
                 data-ad-format="fluid"
                 data-ad-layout-key="-fb+5w+4e-db+86"
                 data-ad-client="ca-pub-2908437793326427"
                 data-ad-slot="2910192384"></ins>
            <script>
                 (adsbygoogle = window.adsbygoogle || []).push({});
            </script>
        </div>
    </section>
    <!--================ End Our Service Area =================-->
@endsection