{{-- Category Tab Navigation --}}
<br> <br>
{{-- Tab Navigation --}}
<div class="category-tab-navigation">
    @foreach ($categories as $index => $category)
        <button class="category-tab-button {{ $loop->first ? 'active' : '' }}"
                onclick="openCategoryTab(event, 'category-{{ $category->id }}')">
            {{ $category->name }}
        </button>
    @endforeach
</div>

{{-- Tab Contents --}}
@php
    $featureNews = leadNews();
@endphp

@forelse ($categories as $category)
<div id="category-{{ $category->id }}" class="category-tab-content {{ $loop->first ? 'active' : '' }}">
    <div class="row">
        <div class="col-md-8 paddingL8">
            <div class="row">
                <div class="col-md-12 col-sm-12 col-xl-12 col-xs-12">
                    <div class="row flex-row">
                        @forelse (leadNews() as $info)
                            @if ($loop->first)
                                <div class="col-md-7 col-sm-7 col-xl-6 col-xs-12 flex-col paddingL15 paddingR0 marginT15">
                                    <div class="itemDiv bgWhite hoverOrange">
                                        <div class="marginB0 borderNone padding0 height100P">
                                            @include('global.image',['w'=>'480px'])
                                        </div>
                                        <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                    </div>
                                </div>
                                <div class="col-md-5 col-sm-5 col-xl-6 col-xs-12 flex-col paddingR10 marginT15">
                                    <div class="itemDiv bgWhite hoverOrange width100P">
                                        <div class="marginB0 borderNone padding0 height100P">
                                            <div class="caption paddingT0Imp">
                                                <h2 class="title4 margin0 paddingB15 ">
                                                    <span class="two-line">{{ $info->title }}</span>
                                                </h2>
                                                <p class="summary3 colorDarkAsh marginB0 paddingB0 xs-paddingB0 borderNone marginT0 five-line">
                                                    {{ strip_tags($info->details) }}
                                                </p>
                                                <p class="colorDarkAsh time marginT10 marginB0">
                                                    <i class="fa fa-clock-o icon"></i> {{ timeAgo($info->created_at) }}
                                                </p>
                                            </div>
                                        </div>
                                        <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                    </div>
                                </div>
                            @endif
                        @empty
                        @endforelse
                    </div>
                </div>

                <div class="col-md-12 col-sm-12 col-xl-12 col-xs-12 marginT15">
                    <p class="dividerDivTag margin0"></p>
                </div>

                <div class="col-md-12 col-sm-12 col-xl-12 col-xs-12 marginT15">
                    <div class="row flex-row">
                        @forelse ($featureNews as $info)
                            @if ($loop->iteration >= 2 && $loop->iteration <= 4)
                                <div class="col-md-4 col-sm-4 col-xl-4 col-xs-12 flex-col paddingL15 paddingR15 borderR1LCN">
                                    <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">
                                                <div class="">
                                                    <h2 class="title3 margin0">
                                                        <span class="four-line">
                                                            @if ($info->sub_title)
                                                                <span class="shoulder">{{ $info->sub_title }}
                                                                    <span></span>
                                                                </span>
                                                            @endif
                                                            {{ $info->title }}
                                                        </span>
                                                    </h2>
                                                </div>
                                            </div>
                                        </div>
                                        <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                                    </div>
                                </div>
                            @endif
                        @empty
                        @endforelse
                    </div>
                </div>
            </div>
        </div>

        <div class="col-md-4 flex-col paddingR8">
            <div class="mediaItemDiv marginT15">
                @forelse ($featureNews as $info)
                    @if ($loop->iteration >= 5 && $loop->iteration <= 9)
                        <div class="media positionRelative hoverOrange paddingT15 paddingB15 marginT0 borderAshB1 firstItemPaddingT0 lastItemPaddingB0">
                            <div class="media-left">
                                <div class="positionRelative">
                                    @include('global.image',['w'=>'140px'])
                                </div>
                            </div>
                            <div class="media-body">
                                <h2 class="title3 margin0 colorBlack">
                                    <span class="two-line">
                                        @if ($info->sub_title)
                                            <span class="shoulder">{{ $info->sub_title }}
                                                <span></span>
                                            </span>
                                        @endif
                                        {{ $info->title }}
                                    </span>
                                </h2>
                            </div>
                            <a href="{{ news_url($info) }}" class="linkOverlay"></a>
                        </div>
                    @endif
                @empty
                @endforelse
            </div>
        </div>

        <div class="col-md-12 marginT15 paddingL8 paddingR8">
            <p class="readMoreDiv">
                <span>
                    <a class="textDecorationNone hoverOrange colorBlack fontSizeReadMore"
                        href="{{ route('news', $category) }}">
                        আরও <i class="fa fa-caret-right fontSize16"></i>
                    </a>
                </span>
            </p>
        </div>
    </div>
</div>
@empty
@endforelse