@extends('frontend.layouts.main')
{{-- @section('meta_title', $post->meta_title ?? $post->title) --}}
{{-- @section('meta_keywords', $post->meta_keywords ?? 'news, article') --}}
{{-- @section('meta_description', $post->meta_description ?? Str::limit(strip_tags($post->content), 150)) --}}
{{-- @push --}}
@section('section')
    <!-- Breadcrumb Start -->
    <div class="breadcrumb-wrap">
        <div class="container">
            <ul class="breadcrumb">
                <li class="breadcrumb-item"><a href="#">Home</a></li>
                <li class="breadcrumb-item"><a href="#">News</a></li>
                <li class="breadcrumb-item active">Category</li>
            </ul>
        </div>
    </div>
    <!-- Breadcrumb End -->

    <!-- Single News Start-->
    <div class="single-news">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="row">
                        @foreach ($posts as $post)
                            <div class="cat-post">
                                <div class="cat-post-img">
                                    <img src="{{ asset($post->featured_image) }}" alt="{{ $post->title }}" />
                                </div>
                                <div class="cat-post-content">
                                    <!-- Post Title -->
                                    <div class="cat-post-title">
                                        <a href="{{ route('post.view', $post->slug) }}">{{ Str::limit($post->title, 50) }}</a>
                                    </div>

                                    <!-- Post Metadata -->
                                    <div class="cat-post-meta">
                                        <!-- Category -->
                                        <div class="meta-item">
                                            <i class="fa fa-folder"></i>
                                            <a
                                                href="{{ route('category', $post->category->slug) }}">{{ $post->category->name }}</a>
                                        </div>

                                        <!-- Views -->
                                        <div class="meta-item">
                                            <i class="fa fa-eye"></i>
                                            {{ $post->views }} views
                                        </div>

                                        <!-- Author -->
                                        <div class="meta-item">
                                            <i class="fa fa-user"></i>
                                            {{ $post->author->name }}
                                        </div>

                                        <!-- Created Date -->
                                        <div class="meta-item">
                                            <i class="fa fa-calendar"></i>
                                            {{ $post->created_at->format('M d, Y') }}
                                        </div>
                                    </div>

                                    <!-- Post Description -->
                                    <div class="cat-post-desc">
                                        <p>{{ Str::limit(strip_tags($post->content), 150) }}</p>
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                    {{-- Pagination links --}}
                    {{-- <div class="pagination-container">
                        {{ $posts->links() }}
                    </div> --}}
                </div>


                <div class="col-lg-4">
                    <div class="sidebar">
                        <div class="sidebar-widget">
                            <h2 class="sw-title">In This Category</h2>
                            <div class="news-list">
                                @foreach ($relatedPosts as $rpost)
                                    <div class="nl-item">
                                        <div class="nl-img">
                                            <img src="{{ asset($rpost->featured_image) }}"
                                                alt="{{ $rpost->title }}">
                                        </div>
                                        <div class="nl-title">
                                            <a
                                                href="{{ route('post.view', $rpost->slug) }}">{{ Str::limit($rpost->title, 70) }}</a>
                                        </div>
                                    </div>
                                @endforeach
                            </div>
                        </div>


                        {{-- <div class="sidebar-widget">
                            <div class="image">
                                <a href="https://htmlcodex.com/"><img src="img/ads-2.jpg" alt="Image"></a>
                            </div>
                        </div> --}}

                        <div class="sidebar-widget">
                            <div class="tab-news">
                                <ul class="nav nav-pills nav-justified">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-toggle="pill" href="#featured">Featured</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="pill" href="#popular">Popular</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-toggle="pill" href="#latest">Latest</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->featured_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->featured_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->featured_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 class="sidebar-widget">
                            <div class="image">
                                <a href="https://htmlcodex.com/"><img src="img/ads-2.jpg" alt="Image"></a>
                            </div>
                        </div> --}}

                        <div class="sidebar-widget">
                            <h2 class="sw-title">News Category</h2>
                            <div class="category">
                                <ul>
                                    @foreach ($categories as $category)
                                        <li>
                                            <a href="{{route('category', $category->slug)}}">{{ $category->name }}</a>
                                            <span>({{ $category->posts_count }})</span>
                                        </li>
                                    @endforeach
                                </ul>

                            </div>
                        </div>

                        {{-- <div class="sidebar-widget">
                            <div class="image">
                                <a href="https://htmlcodex.com/"><img src="img/ads-2.jpg" alt="Image"></a>
                            </div>
                        </div> --}}

                        <div class="sidebar-widget">
                            <h2 class="sw-title">Tags Cloud</h2>
                            <div class="tags">
                                @foreach ($tags as $tag)
                                    <a href="{{route('tag', $tag->slug)}}">{{ $tag->name }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Single News End-->
@endsection

@push('style')

    <style>
        /* General Styles for the Post */
        .cat-post {
            display: flex;
            margin-bottom: 30px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .cat-post-img {
            flex: 1;
            max-width: 300px;
            overflow: hidden;
        }

        .cat-post-img img {
            width: 100%;
            height: auto;
            object-fit: cover;
        }

        .cat-post-content {
            flex: 2;
            padding: 15px;
        }

        .cat-post-title {
            font-size: 20px;
            font-weight: 600;
            color: #333;
            margin-bottom: 10px;
            transition: color 0.3s;
        }

        .cat-post-title a {
            color: inherit;
            text-decoration: none;
        }

        .cat-post-title a:hover {
            color: #007bff;
        }

        .cat-post-desc {
            font-size: 14px;
            color: #555;
            line-height: 1.6;
            margin-bottom: 15px;
        }

        /* Meta Information Styles */
        .cat-post-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 15px;
        }

        .meta-item {
            font-size: 14px;
            color: #777;
        }

        .meta-item i {
            margin-right: 5px;
            /* color: #007bff; */
        }

        .meta-item a {
            color: gray;
            text-decoration: none;
        }

        .meta-item a:hover {
            text-decoration: underline;
        }

        /* Responsive Styles */
        @media (max-width: 768px) {
            .cat-post {
                flex-direction: column;
            }

            .cat-post-img {
                max-width: 100%;
                height: auto;
            }

            .cat-post-content {
                padding: 10px;
            }

            .cat-post-meta {
                flex-direction: column;
            }
        }
    </style>
@endpush