@extends('frontend.layouts.app')

@section('title', $title)
@section('description', $description)

@section('content')
    @php
        $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    @endphp

    @include('frontend.layouts.breadcrumb', ['title' => 'Blog'])

    <section class="blog-list-section space bg-light">
        <div class="container">
            <div class="row gy-30 flex-column-reverse flex-lg-row">
                <div class="col-xl-8 col-lg-8">
                    <div class="blog-list-left">
                        @forelse($news as $article)
                            <div class="blog-list-card">
                                <div class="image overlay-anim1 cms-frame cms-frame--blog-wide">
                                    <a href="{{ route('frontend.news.show', $article->slug) }}"><img class="cms-img-cover" src="{{ $article->featured_image ? asset('storage/' . $article->featured_image) : $assetPath('images/blog/blog-thumb01.webp') }}" alt="{{ $article->title }}" width="856" height="460"></a>
                                </div>
                                <div class="card-content">
                                    <span class="category">{{ strtoupper($article->category?->name ?? 'NEWS') }}</span>
                                    <h3 class="title"><a href="{{ route('frontend.news.show', $article->slug) }}">{{ $article->title }}</a></h3>
                                    <div class="author-info">
                                        <div class="author">
                                            <img src="{{ $assetPath('images/blog/social-pr01.jpg') }}" alt="Author">
                                            <span class="name"><span>By</span> {{ $article->author?->name ?? 'Admin' }}</span>
                                        </div>
                                        <span class="date"><i class="icon-calender"></i> {{ optional($article->published_at)->format('F d, Y') }}</span>
                                    </div>
                                    <div class="pt-20 pb-25"><div class="border dark"></div></div>
                                    <p class="description">{{ \Illuminate\Support\Str::limit(strip_tags($article->excerpt ?: $article->content), 160) }}</p>
                                    <a href="{{ route('frontend.news.show', $article->slug) }}" class="continue-reading">Continue Reading</a>
                                </div>
                            </div>
                        @empty
                            <div class="alert alert-info">No blog posts found.</div>
                        @endforelse
                        <ul class="pagination-menu">
                            <li>{{ $news->appends(request()->query())->links() }}</li>
                        </ul>
                    </div>
                </div>

                <div class="col-xl-4 col-lg-4">
                    <div class="sidebar-widget blog-sidebar pl-15 lg-pl-0">
                        <div class="sidebar-category-list">
                            <h4 class="sidebar-title">Categories</h4>
                            <div class="widget-box">
                                <ul class="categories">
                                    @foreach($categories as $category)
                                        <li><a href="{{ route('frontend.news.category', $category->slug) }}">{{ $category->name }} <span>({{ $category->news_count }})</span></a></li>
                                    @endforeach
                                </ul>
                            </div>
                        </div>
                        <div class="sidebar-latest-posts">
                            <h4 class="sidebar-title">Latest Posts</h4>
                            <div class="widget-box">
                                <div class="latest-posts">
                                    @foreach($featuredNews->take(3) as $featured)
                                        <div class="post">
                                            <a href="{{ route('frontend.news.show', $featured->slug) }}"><img class="cms-theme-footer-post-thumb" width="88" height="84" src="{{ $featured->featured_image ? asset('storage/' . $featured->featured_image) : $assetPath('images/blog/latest-details01.webp') }}" alt="{{ $featured->title }}"></a>
                                            <div class="post-content">
                                                <a href="{{ route('frontend.news.show', $featured->slug) }}">{{ \Illuminate\Support\Str::limit($featured->title, 48) }}</a>
                                                <p>{{ optional($featured->published_at)->format('F d, Y') }}</p>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="sidebar-tags">
                            <h4 class="sidebar-title">Tags</h4>
                            <div class="widget-box">
                                <div class="tag-list">
                                    @foreach($popularTags->take(7) as $tag)
                                        <a href="{{ route('frontend.news.tag', $tag->slug) }}" class="tag">{{ strtoupper($tag->name) }}</a>
                                    @endforeach
                                </div>
                            </div>
                        </div>
                        <div class="sidebar-newsletter">
                            <h4 class="sidebar-title">Newsletter</h4>
                            <div class="widget-box mb-0">
                                <form class="newsletter-form" action="{{ route('frontend.newsletter.subscribe') }}" method="post">
                                    @csrf
                                    @include('frontend.partials.contact-spam-fields')
                                    <input type="hidden" name="source" value="news-sidebar">
                                    <div class="form-group">
                                        <input type="email" name="email" class="email mb-0" value="{{ old('email') }}" placeholder="Enter email" autocomplete="on" required>
                                        <button type="submit"><i class="far fa-paper-plane"></i><span class="btn-title"></span></button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @include('frontend.partials.newsletter')
@endsection