@extends('frontend::layouts.app')
@section('title', $metaTags['metaTitle'])
@section('description', $metaTags['metaDescription'])
@section('keywords', $metaTags['metaKeywords'])
@section('other_meta_tags')
    {!! $metaTags['otherMetaTags'] !!}
@endsection
@section('content')
    <div id="pageWrapper" class="BlogPage InnerPage">
        @if ($blogs->isNotEmpty())
            <!-- Cmn_Banner -->
            <section id="InnerBanner">
                <picture>
                    <source media="(min-width: 468px)" srcset="{{ $pageBanner['image'] }}" />
                    <img src="{{ $pageBanner['mobileImage'] }}" width="1920" height="480" alt="{{ $pageBanner['name'] }}"
                        loading="lazy" />
                </picture>
            </section>
        @endif

        <section id="blogSec">
            <div class="container">
                @if ($blogs->isNotEmpty())
                    <div class="tleWrap">
                        <h2 class="mTle">Blogs & Updates</h2>
                    </div>
                    <div class="allBlog">
                        <div class="flexBlogWrap">
                            @php
                                $chunkSize = $blogs->count() == 1 ? 1 : 2;
                            @endphp
                            @foreach ($blogs->chunk($chunkSize) as $index => $chunk)
                                <div class="Blckitem">
                                    @foreach ($chunk as $innerIndex => $blog)
                                        <div class="item">
                                            <a href="{{ route('blog-details', $blog->slug) }}"
                                                class="blgBx b{{ ($innerIndex % 6) + 1 }}"
                                                aria-label="Read more about {{ $blog->title }}">
                                                <div class="imGBx">
                                                    <img src="{{ $blog->listing_page_image_value }}"
                                                       width="425" height="330" alt="{{ $blog->title }}" loading="lazy">
                                                </div>
                                                <div class="txtBx">
                                                    <div class="title">
                                                        {{ $blog->title }}
                                                    </div>
                                                    <p>{{ $blog->short_description }}</p>
                                                    <div class="more">Read More</div>
                                                </div>
                                            </a>
                                        </div>
                                    @endforeach
                                </div>
                            @endforeach
                        </div>
                    </div>
                    @if ($blogs->lastPage() > 1)
                        <ul class="pagination">
                            <li>
                                <a href="{{ $blogs->previousPageUrl() }}" class="prev notVld" aria-label="Previous page">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13.003" height="9.971"
                                        viewBox="0 0 13.003 9.971">
                                        <path id="arrow"
                                            d="M857.567,5739.667l-4.231-3.908a1.176,1.176,0,0,1-.168-.2l-.006-.009,0-.005A1,1,0,0,1,853,5735v0a1.033,1.033,0,0,1,.341-.762l4.231-3.9a1.222,1.222,0,0,1,1.649,0,1.015,1.015,0,0,1,.341.757,1.03,1.03,0,0,1-.341.762l-2.239,2.068h7.857a1.082,1.082,0,1,1,0,2.158h-7.857l2.24,2.07a1.024,1.024,0,0,1,0,1.524,1.246,1.246,0,0,1-1.649,0Z"
                                            transform="translate(-852.996 -5730.008)" />
                                    </svg>
                                </a>
                            </li>
                            @for ($i = 1; $i <= $blogs->lastPage(); $i++)
                                <li>
                                    <a href="{{ $blogs->url($i, ['page' => $i]) }}"
                                        class="{{ $blogs->currentPage() == $i ? 'active' : '' }}"
                                        aria-label="Page {{ $i }}">
                                        {{ $i }}
                                    </a>
                                </li>
                            @endfor
                            <li>
                                <a href="{{ $blogs->nextPageUrl() }}" class="next" aria-label="Next page">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="13.003" height="9.972"
                                        viewBox="0 0 13.003 9.972">
                                        <path id="arrow"
                                            d="M4.571.312.341,4.22a1.176,1.176,0,0,0-.168.2L.166,4.43l0,.005A1.008,1.008,0,0,0,0,4.981v0a1.033,1.033,0,0,0,.341.762l4.231,3.9a1.222,1.222,0,0,0,1.649,0,1.015,1.015,0,0,0,.341-.757,1.03,1.03,0,0,0-.341-.762L3.982,6.064h7.857A1.126,1.126,0,0,0,13,4.981a1.125,1.125,0,0,0-1.164-1.076H3.981l2.24-2.07a1.024,1.024,0,0,0,0-1.524,1.246,1.246,0,0,0-1.649,0Z"
                                            transform="translate(13.003 9.972) rotate(180)" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    @endif
                @else
                    <div class="NoResultFound">
                        <div class="icon">
                            <img src="{{ asset('frontend/images/NoResult.svg') }}" alt="no result found">
                        </div>
                        <div class="ttle">Oops! No Results Found</div>
                        <a href="{{ route('blogs') }}" class="back hoveranim">
                            <span>Back to Blogs</span>
                        </a>
                    </div>
                @endif
            </div>
        </section>
    </div>
@endsection