@extends('frontend.layouts.app')

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

@section('content')
@php
    $assetPath = fn (string $path) => asset('frontend/' . ltrim($path, '/'));
    $categories = \App\Models\Category::where('type', 'news')->withCount('news')->orderBy('name')->take(6)->get();
    $popularTags = \App\Models\Tag::withCount(['news' => fn ($query) => $query->published()])->orderByDesc('news_count')->take(7)->get();
@endphp

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

<section class="blog-details-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-details-left">
                    <div class="blog-list-card style-2">
                        <div class="image overlay-anim1 cms-frame cms-frame--blog-wide">
                            <img class="cms-img-cover" src="{{ $news->featured_image ? asset('storage/' . $news->featured_image) : $assetPath('images/blog/blog-thumb05.webp') }}" alt="{{ $news->title }}" width="856" height="460">
                        </div>
                        <div class="card-content">
                            <span class="category">{{ strtoupper($news->category?->name ?? 'NEWS') }}</span>
                            <h3 class="title">{{ $news->title }}</h3>
                            <div class="author-info">
                                <div class="author">
                                    <img src="{{ $assetPath('images/blog/social-pr01.jpg') }}" alt="Author Image">
                                    <span class="name"><span>By</span> {{ $news->author?->name ?? 'Admin' }}</span>
                                </div>
                                <span class="date"><i class="icon-calender"></i> {{ optional($news->published_at)->format('F d, Y') }}</span>
                            </div>
                            <div class="pt-20 pb-25"><div class="border dark"></div></div>
                            <p class="mb-25">{{ $news->excerpt }}</p>
                            <div>{!! $news->content !!}</div>
                            <div class="blog-details__bottom mt-30">
                                <div class="blog-details__tags">
                                    <span>Posted In :</span>
                                    <ul class="blog-details__tags">
                                        @foreach($news->tags->take(3) as $tag)
                                            <li>{{ strtoupper($tag->name) }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                <div class="blog-details__social-list">
                                    <span>Share:</span>
                                    <a href="https://www.facebook.com/"><i class="fa-brands fa-facebook-f"></i></a>
                                    <a href="https://x.com/"><i class="fa-brands fa-x-twitter"></i></a>
                                    <a href="https://www.pinterest.com/"><i class="fa-brands fa-pinterest-p"></i></a>
                                </div>
                            </div>
                            <div class="details__pagination-box mt-40">
                                <ul class="details__pagination">
                                    <li class="previous">
                                        <a href="{{ route('frontend.news.index') }}" aria-label="Previous"><i class="fa-light fa-arrow-left-long"></i><span>Previous Post</span></a>
                                    </li>
                                    <li class="next">
                                        <a href="{{ route('frontend.news.index') }}" aria-label="Next"><span>Next Post</span><i class="fa-light fa-arrow-right-long"></i></a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </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">Category</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($relatedNews->take(3) as $related)
                                    <div class="post">
                                        <a href="{{ route('frontend.news.show', $related->slug) }}"><img class="cms-theme-footer-post-thumb" width="88" height="84" src="{{ $related->featured_image ? asset('storage/' . $related->featured_image) : $assetPath('images/blog/latest-details01.webp') }}" alt="{{ $related->title }}"></a>
                                        <div class="post-content">
                                            <a href="{{ route('frontend.news.show', $related->slug) }}">{{ \Illuminate\Support\Str::limit($related->title, 48) }}</a>
                                            <p>{{ optional($related->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 as $tag)
                                    <a href="{{ route('frontend.news.tag', $tag->slug) }}" class="tag">{{ strtoupper($tag->name) }}</a>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@include('frontend.partials.newsletter')
@endsection