@extends('layout.front.master')

@section('title', $pageTitle ?? trans('Latest News'))
@section('meta_description', $pageDescription ?? trans('Stay updated with our latest news and announcements'))
@section('meta_keywords', $pageKeywords ?? 'news, updates, announcements')

@section('og_title', $pageTitle ?? trans('Latest News'))
@section('og_description', $pageDescription ?? trans('Stay updated with our latest news and announcements'))
@section('og_url', url()->current())

@section('twitter_title', $pageTitle ?? trans('Latest News'))
@section('twitter_description', $pageDescription ?? trans('Stay updated with our latest news and announcements'))

@section('content')
<div class="px-3 px-lg-5">
    <!-- Page Header -->
    <div class="page-header py-0 bg-primary px-3 px-xl-0 border-radius-2-top p-relative mb-5 overflow-hidden">
        <div class="overflow-hidden p-absolute top-0 left-0 bottom-0 h-100 w-100">
            <div class="custom-el-5 custom-pos-4">
                <img class="img-fluid opacity-2 opacity-hover-2" src="{{ asset('cd-project/img/demos/accounting-1/svg/waves.svg') }}" alt="">
            </div>
        </div>
        <div class="container p-relative z-index-1 py-2">
            <div class="row mh-200px mh-lg-300px align-items-center py-4">
                <div class="col">
                    <div class="appear-animation" data-appear-animation="fadeInRightShorter" data-appear-animation-delay="0">
                        <span class="badge bg-color-dark-rgba-30 text-light rounded-pill text-uppercase font-weight-semibold text-2-5 px-3 py-2 px-4 mb-3">
                            <span class="d-inline-flex py-1 px-2">{{ config('app.name') }} {{ trans('News') }}</span>
                        </span>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                        <h1 class="text-dark text-14 font-weight-semibold line-height-1 mb-2 text-uppercase ls-1">{{ $pageTitle ?? trans('Latest News') }}</h1>
                    </div>
                </div>
            </div>
        </div>
    </div>

    @if ($news->count() > 0)
        <div class="my-5">
            <div class="row">
                <div class="col-lg-8">
                    <!-- News Grid -->
                    <div class="container">
                        <div class="blog-posts">
                            <div class="masonry-loader masonry-loader-showing">
                                <div class="masonry row pt-3" data-plugin-masonry data-plugin-options="{'itemSelector': '.masonry-item'}">
                                    @foreach ($news as $item)
                                        <div class="masonry-item no-default-style col-sm-6 col-lg-4">
                                            <article class="post post-medium border-0 pb-0 mb-5">
                                                <div class="post-content">
                                                     <h2 class="font-weight-semibold text-5 line-height-6 mt-3 mb-2">
                                                         <a href="{{ route('frontend.news.show', $item->slug) }}" class="text-decoration-none">
                                                            {{ $item->title }}
                                                        </a>
                                                    </h2>
                                                    <div class="post-meta">
                                                        <span class="d-block mt-2">
                                                            <i class="fas fa-calendar-alt me-1"></i>
                                                            {{ $item->created_at->format('d M Y') }}
                                                        </span>
                                                        @if($item->user)
                                                            <span class="d-block mt-1">
                                                                <i class="fas fa-user me-1"></i>
                                                                {{ $item->user->name }}
                                                            </span>
                                                        @endif
                                                    </div>
                                                    <p class="pe-4 mb-4 mt-2">
                                                        {{ Str::limit(strip_tags($item->content), 120) }}
                                                    </p>
                                                                                                         <div class="post-meta mt-3">
                                                         <a href="{{ route('frontend.news.show', $item->slug) }}"
                                                            class="btn btn-outline btn-primary rounded-0 mb-2 text-uppercase">
                                                             {{ trans('Read More') }}
                                                         </a>
                                                     </div>
                                                </div>
                                            </article>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        </div>

                        <!-- Pagination -->
                        @if($news->hasPages())
                            <div class="row">
                                <div class="col">
                                    <div class="d-flex justify-content-center">
                                        {{ $news->links() }}
                                    </div>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <!-- Sidebar -->
                <div class="col-lg-4">
                    <aside class="sidebar">
                                                 <!-- Search -->
                         <div class="px-3 mt-4">
                             <form action="{{ route('frontend.news.search') }}" method="GET">
                                 <div class="input-group mb-3">
                                     <input name="q" type="text" class="form-control" placeholder="{{ trans('Search news...') }}" value="{{ request('q') }}">
                                     <button class="btn btn-primary" type="submit">
                                         <i class="fas fa-search"></i>
                                     </button>
                                 </div>
                             </form>
                         </div>

                        <!-- Recent News -->
                        @if($recentNews && $recentNews->count() > 0)
                            <div class="px-3 mt-4">
                                <h5 class="text-5 font-weight-semi-bold">{{ trans('Recent News') }}</h5>
                                <div class="pb-2 mb-1">
                                    @foreach($recentNews as $recent)
                                        <div class="row">
                                            <div class="col">
                                                <div class="row align-items-center py-2">
                                                    <div class="col-auto pe-2">
                                                        <div class="date">
                                                            <span class="day text-5 font-weight-bold text-dark">{{ $recent->created_at->format('d') }}</span>
                                                            <span class="month text-1">{{ $recent->created_at->format('M') }}</span>
                                                        </div>
                                                    </div>
                                                                                                         <div class="col ps-1">
                                                         <h4 class="text-3 font-weight-medium letter-spacing-0 pt-1 mb-2">
                                                             <a href="{{ route('frontend.news.show', $recent->slug) }}" class="text-decoration-none">
                                                                 {{ Str::limit($recent->title, 50) }}
                                                             </a>
                                                         </h4>
                                                        <p class="mb-1 text-2">{{ $recent->created_at->diffForHumans() }}</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                                                 <!-- Archive Links -->
                         <div class="px-3 mt-4">
                             <h5 class="text-5 font-weight-semi-bold">{{ trans('Archive') }}</h5>
                             <div class="pb-2 mb-1">
                                 <a href="{{ route('frontend.news.archive', ['year' => now()->year]) }}" class="text-decoration-none d-block py-1">
                                     {{ trans('This Year') }} ({{ now()->year }})
                                 </a>
                                 <a href="{{ route('frontend.news.archive', ['year' => now()->subYear()->year]) }}" class="text-decoration-none d-block py-1">
                                     {{ now()->subYear()->year }}
                                 </a>
                             </div>
                         </div>

                         <!-- RSS Feed -->
                         <div class="px-3 mt-4">
                             <h5 class="text-5 font-weight-semi-bold">{{ trans('Subscribe') }}</h5>
                             <div class="pb-2 mb-1">
                                 <a href="{{ route('frontend.news.rss') }}" class="text-decoration-none d-block py-1" target="_blank">
                                     <i class="fas fa-rss me-2"></i>{{ trans('RSS Feed') }}
                                 </a>
                             </div>
                         </div>
                    </aside>
                </div>
            </div>
        </div>
    @else
        <!-- No News Available -->
        <div class="container py-5">
            <div class="row">
                <div class="col-12 text-center">
                    <div class="py-5">
                        <i class="fas fa-newspaper fa-4x text-muted mb-4"></i>
                        <h3 class="text-4 font-weight-bold text-dark mb-3">{{ trans('No News Available') }}</h3>
                        <p class="text-3 text-muted">{{ trans('There are currently no news articles to display. Please check back later.') }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    <!-- Social Share -->
    @if(isset($news) && $news->count() > 0)
        <div class="text-center py-4">
            <p class="text-center">{{ trans('Share') }} {{ config('app.name') }} {{ trans('on') }}...</p>
            <script src="https://apps.elfsight.com/p/platform.js" defer></script>
            <div class="elfsight-app-944fd22e-11a0-4f61-a628-49ed86e428ef pb-3"></div>
        </div>
    @endif
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Masonry initialization
        if ($('.masonry').length) {
            $('.masonry').masonry({
                itemSelector: '.masonry-item'
            });
        }
    });
</script>
@endsection