@extends('frontend.layouts.main')
@section('section')


    <!-- Top News Start-->
    <div class="top-news">
        <div class="container">
            <div class="row">
                <!-- Left Section (Slider) -->
                <div class="col-md-6 tn-left">
                    <div class="row tn-slider">
                        @foreach ($topPosts->take(2) as $post)
                            <div class="col-md-6">
                                <div class="tn-img">
                                    <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}" />
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ $post->title }}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <!-- Right Section -->
                <div class="col-md-6 tn-right">
                    <div class="row">
                        @foreach ($topPosts->skip(2)->take(4) as $post)
                            <div class="col-md-6">
                                <div class="tn-img">
                                    <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}" />
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ $post->title }}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>

        </div>
    </div>
    <!-- Top News End-->

    <!-- Category News Start -->
    <div class="cat-news">
        <div class="container">
            <div class="row">
                @foreach ($categories as $category)
                    <div class="col-md-6">
                        <h2>{{ $category->name }}</h2>
                        <div class="row cn-slider">
                            @foreach ($category->posts as $post)
                                <div class="col-md-6">
                                    <div class="cn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}" />
                                        <div class="cn-title">
                                            <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 50) }}</a>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
    <!-- Category News End -->


    <!-- Tab News Start-->
    <div class="tab-news">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <ul class="nav nav-pills nav-justified">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill" href="#featured">Featured News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#popular">Popular News</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#latest">Latest News</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        {{-- Featured Tab --}}
                        <div id="featured" class="container tab-pane active">
                            @foreach($featuredPosts as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Popular Tab --}}
                        <div id="popular" class="container tab-pane fade">
                            @foreach($popularPosts as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                        {{-- Latest Tab --}}
                        <div id="latest" class="container tab-pane fade">
                            @foreach($latestPosts as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>

                <div class="col-md-6">
                    <ul class="nav nav-pills nav-justified">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="pill" href="#m-viewed">Most Viewed</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#m-read">Most Read</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="pill" href="#m-recent">Most Recent</a>
                        </li>
                    </ul>

                    <div class="tab-content">
                        <div id="m-viewed" class="container tab-pane active">
                            @foreach($mostReadPosts as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div id="m-read" class="container tab-pane fade">
                            @foreach($mostViewedThisWeek as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        <div id="m-recent" class="container tab-pane fade">
                            @foreach($latestPosts as $post)
                                <div class="tn-news">
                                    <div class="tn-img">
                                        <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}">
                                    </div>
                                    <div class="tn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 70) }}</a>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Tab News Start-->

    <!-- Main News Start-->
    <div class="main-news">
        <div class="container">
            <div class="row">
                <div class="col-lg-9">
                    <div class="row">
                        @foreach ($oldposts as $post)
                            <div class="col-md-4">
                                <div class="mn-img">
                                    <img src="{{ asset($post->post_image) }}" alt="{{ $post->title }}" />
                                    <div class="mn-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 50) }}</a>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="col-lg-3">
                    <div class="mn-list">
                        <h2>Read More</h2>
                        <ul>
                            @foreach ($topPosts->skip(4)->take(10) as $post)
                                <li> <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 50) }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Main News End-->


@endsection