@if (!empty($headBlogs) && count($headBlogs) >= 1)
    <section class="heading_blogs">
        <h2>JSD - BLOG</h2>
        <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                @foreach ($headBlogs as $key => $itemHeadBlog)
                    <div class="swiper-slide">
                        <div class="card__">
                            <img src="{{ $itemHeadBlog->image }}" style="height:100%; object-fit: cover;" alt="">
                            <div class="bottom__">
                                <div class="left__" style="width:80%;">
                                    <span>{{ $itemHeadBlog->date }}</span>
                                    <h3>{{ substr($itemHeadBlog->bannerBlogLanguages[0]['title'], 0, 40) }}</h3>
                                </div>
                                <div class="right__">
                                    <a href="{{ url('blog/'.$itemHeadBlog->link) }}">By
                                        <span>{{ substr($itemHeadBlog->author, 0, 12) }}</span>
                                        <img
                                            src="{{ asset('landingpage/img/transit enterexit.png') }}"alt=""></a>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="swiper-pagination">
            </div>
        </div>
    </section>
@endif


<section class="new__blogs">
    <div class="container">
        <div class="row">
            @foreach ($newsBlog_tops as $key => $newsBlog_top)
                <div class="col-md-6 mt-3 mt-md-0">
                    <div class="card card__">
                        <div class="row">
                            <div class="col-6">
                                <img src="{{ $newsBlog_top->image }}"
                                    alt=""style="width:100%; height:300px; object-fit: cover;border-radius: 8px;">
                            </div>
                            <div class="col-md-5 col-6 desc__ ">
                                <div class="top__">
                                    <span>{{ $newsBlog_top->date }}</span>
                                    <h2>{{ substr($newsBlog_top->blogLanguages[0]->title, 0, 50) }}</h2>
                                    {!! substr($newsBlog_top->blogLanguages[0]['description'], 0, 80) !!} ...
                                </div>
                                <div class="bottom__">
                                    <a href="{{ url('newsblog/'.$newsBlog_top->link) }}">{{ substr($newsBlog_top->author, 0, 12) }}
                                        <img src="{{ asset('landingpage/img/blogs/next.png') }}" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row mt-3 mt-md-5">
            @foreach ($newsBlog_middles as $key => $newsBlog_middle)
                <div class="col-md-6 mt-3 mt-md-0">
                    <div class="card card__">
                        <div class="row">
                            <div class="col-md-5 order-2 col-6 offset-md-1 desc__">
                                <div class="top__">
                                    <span>{{ $newsBlog_middle->date }}</span>
                                    <h2>{{ substr($newsBlog_middle->blogLanguages[0]->title, 0, 50) }}</h2>
                                    {!! substr($newsBlog_middle->blogLanguages[0]['description'], 0, 80) !!} ...
                                </div>
                                <div class="bottom__">
                                    <a href="{{ url('newsblog/'.$newsBlog_middle->link) }}">
                                        {{ substr($newsBlog_middle->author, 0, 12) }}
                                        <img src="{{ asset('landingpage/img/blogs/next.png') }}" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class="col-6 order-md-2">
                                <img src="{{ $newsBlog_middle->image }}"
                                    alt=""style="width:100%; height:300px; object-fit: cover;border-radius: 8px;">
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
        <div class="row mt-3 mt-md-5">
            @foreach ($newsBlog_bottoms as $key => $newsBlog_bottom)
                <div class="col-md-6 mt-3 mt-md-0">
                    <div class="card card__">
                        <div class="row">
                            <div class="col-6">
                                <img src="{{ $newsBlog_bottom->image }}"
                                    alt=""style="width:100%; height:300px; object-fit: cover;border-radius: 8px;">
                            </div>
                            <div class="col-md-5 col-6 desc__ ">
                                <div class="top__">
                                    <span>{{ $newsBlog_bottom->date }}</span>
                                    <h2>{{ substr($newsBlog_bottom->blogLanguages[0]->title, 0, 50) }}</h2>
                                    {!! substr($newsBlog_bottom->blogLanguages[0]['description'], 0, 80) !!} ...
                                </div>
                                <div class="bottom__">
                                    <a href="{{ url('newsblog/'.$newsBlog_bottom->link) }}">{{ substr($newsBlog_bottom->author, 0, 12) }}
                                        <img src="{{ asset('landingpage/img/blogs/next.png') }}" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</section>