{{-- rajnity --}}
@php
    // dd(homeCategoryNews(8));
    // dd(latestNews());
    // dd(leadNews());
    // dd(mainNews());
    $lead_news = leadNews(9);
    $latestNews = latestNews(20);
@endphp

<style>
    /* Mobile specific padding */
@media (max-width: 768px) { /* 768px বা আপনার mobile breakpoint অনুযায়ী adjust করুন */
    .leadNews {
        padding-top: 60px; /* উপরে 30px space দিবে */
    }

    .leadLarge{
        margin-bottom: 30px
    }
}

</style>

<div class="row marginT15 leadNews">
    <div class="col-md-8 col-sm-8 col-xl-8 col-xs-12">
        <div class="row">
            <div class="col-md-12 col-sm-12 col-xl-12 col-xs-12 paddingL8 paddingR8 ">
                <div class="row flex-row">
                    @forelse ($lead_news as $info)
                        @if ($loop->first)
                            <div class="col-md-7 col-sm-7 col-xl-7 col-xs-12 flex-col paddingL15 paddingR15 borderR1LCN marginB30 leadLarge">
                                <div class="itemDiv bgWhite hoverOrange">
                                    <div class="thumbnail marginB0 borderNone padding0 height100P">
                                        <div class="positionRelative">
                                            @include('global.image')
                                        </div>
                                        <div class="caption paddingL0 paddingR0 paddingB0 five-line">
                                            <h2 class="title4 margin0 paddingB10"><strong class="three-line">
                                                    @if ($info->sub_title)
                                                        <span class="shoulder">{{ $info->sub_title }}
                                                            <span></span> </span>
                                                    @endif
                                                    {{ $info->title }}
                                                </strong></h2>
                                            <p class="title3 colorDarkAsh marginT10 marginB0 ">
                                                {{ strip_tags($info->details) }}</p>
                                        </div>
                                    </div>
                                    <a href="{{ news_url($info) }}"
                                        class="linkOverlay"></a>
                                </div>
                            </div>
                        @endif

                    @empty
                    @endforelse
                    <div class="col-md-5 col-sm-5 col-xl-5 col-xs-12 flex-col paddingL15 paddingR15 borderR1LCN">
                        <div class="mediaItemDiv">
                            @forelse ($lead_news as $info)
                                @if ($loop->iteration > 1 && $loop->iteration < 7)
                                    <div
                                        class="media positionRelative hoverOrange paddingT15 paddingB15 marginT0 borderAshB1 firstItemPaddingT0 lastItemPaddingB0">
                                        <div class="media-left">
                                            <div class="positionRelative">
                                                @include('global.image', [
                                                    'size' => '_small',
                                                    'w' => '130px',
                                                ])
                                            </div>
                                        </div>
                                        <div class="media-body">
                                            <h2 class="title3 margin0 colorBlack three-line ">
                                                @if ($info->sub_title)
                                                    <span class="shoulder">{{ $info->sub_title }}
                                                        <span></span> </span>
                                                @endif
                                                {{ $info->title }}
                                            </h2>
                                        </div>
                                        <a href="{{ news_url($info) }}"
                                            class="linkOverlay"></a>
                                    </div>
                                @endif

                            @empty
                            @endforelse

                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="col-md-4 col-sm-4 col-xl-4 col-xs-12">

        <div class="row paddingL15">
            <div class="row marginB20">
            <div class="col-md-12 flex-col paddingL0 paddingR0">
                <div class="bgWhite height100P width100P borderAsh1 paddingB0">
                    <div class="tabNews bgWhiteImp height100P width100P">
                        <ul class="nav nav-tabs bgAshLight paddingB1" role="tablist">
                            <li role="presentation"
                                class="active title3 text-center borderNone borderRadius0Imp width50P"><a
                                    aria-label="সর্বাধিক" class="borderRadius0Imp padding5Imp margin0Imp colorBlackImp"
                                    href="#highestTab" aria-controls="highestTab" role="tab"
                                    data-toggle="tab">সর্বাধিক</a></li>
                            <li role="presentation" class="title3 text-center borderNone borderRadius0Imp width50P"><a
                                    aria-label="সর্বশেষ" class="borderRadius0Imp padding5Imp margin0Imp colorBlackImp"
                                    href="#latestTab" aria-controls="latestTab" role="tab"
                                    data-toggle="tab">সর্বশেষ</a></li>
                        </ul>
                        <div class="tab-content">
                            <div role="tabpanel" class="tab-pane active" id="highestTab">
                                <div class="bgWhiteImp height100P">
                                    <div class="highestHitNewsDiv scrollbar1 padding0Imp overflowYScroll " style="height: 430px;">
                                        <ul class="colorWhite tabNewsUl mediaItemDiv lastChild padding0Imp">
                                            @forelse ($latestNews as $info)
                                                <li class="borderAshB1 lastChildItemB0">
                                                    <div class="media positionRelative hoverOrange padding15 marginT0">
                                                        <div class="media-left">
                                                            <div class="positionRelative">
                                                                @include('global.image',['size'=>'_small','w'=>'120px'])
                                                            </div>
                                                        </div>
                                                        <div class="media-body">
                                                            <h2 class="title3 margin0 colorBlack three-line">
                                                                @if ($info->sub_title)
                                                                    <span class="shoulder">{{ $info->sub_title }}
                                                                        <span></span> </span>
                                                                @endif
                                                                {{ $info->title }}
                                                            </h2>
                                                        </div>
                                                        <a href="{{ news_url($info) }}"
                                                            class="linkOverlay"></a>
                                                    </div>
                                                </li>
                                            @empty
                                            @endforelse

                                        </ul>
                                    </div>
                                    <p class="bgAshLight padding5 text-center marginB0 borderAshT1 marginT5">
                                        <a aria-label="সব খবর" href="{{ route('news', 'সর্বশেষ') }}"
                                            class="textDecorationNone colorBlack hoverOrange title2">সব
                                            খবর</a>
                                    </p>
                                </div>
                            </div>
                            <div role="tabpanel" class="tab-pane" id="latestTab">
                                <div class="bgWhiteImp height100P">
                                    <div class="highestHitNewsDiv scrollbar1 padding0Imp overflowYScroll"
                                        style="height: 430px;">
                                        <ul class="colorWhite tabNewsUl mediaItemDiv lastChild padding0Imp">
                                            @forelse ($latestNews as $info)
                                                <li class="borderAshB1 lastChildItemB0">
                                                    <div class="media positionRelative hoverOrange padding15 marginT0">
                                                        <div class="media-left">
                                                            <div class="positionRelative">
                                                                @include('global.image',['size'=>'_small','w'=>'120px'])
                                                            </div>
                                                        </div>
                                                        <div class="media-body">
                                                            <h2 class="title3 margin0 colorBlack three-line">
                                                                @if ($info->sub_title)
                                                                    <span class="shoulder">{{ $info->sub_title }}
                                                                        <span></span> </span>
                                                                @endif
                                                                {{ $info->title }}
                                                            </h2>
                                                        </div>
                                                        <a href="{{ news_url($info) }}"
                                                            class="linkOverlay"></a>
                                                    </div>
                                                </li>
                                            @empty
                                            @endforelse
                                        </ul>
                                    </div>
                                    <p class="bgAshLight padding5 text-center marginB0 borderAshT1 marginT5">
                                        <a aria-label="সব খবর" href="{{ route('news', 'সর্বশেষ') }}"
                                            class="textDecorationNone colorBlack hoverOrange title2">সব
                                            খবর</a>
                                    </p>
                                </div>
                                {{-- custom top news ads --}}

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </div>
</div>