@extends('layout.front.master')

@section('title', $news->title)
@section('meta_description', strip_tags(Str::limit($news->content, 155)))
@section('meta_keywords', $pageKeywords ?? 'news, updates')

@section('og_title', $news->title)
@section('og_description', strip_tags(Str::limit($news->content, 155)))
@section('og_url', url()->current())

@section('twitter_title', $news->title)
@section('twitter_description', strip_tags(Str::limit($news->content, 155)))

@section('content')
<div class="container container-xl-custom">
    <!-- 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('template/img/demos/accounting-1/svg/waves.svg') }}" alt="">
            </div>
        </div>
        <div class="container-fluid 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">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item">
                                    <a href="{{ url('/') }}" class="text-light">{{ trans('Home') }}</a>
                                </li>
                                                                 <li class="breadcrumb-item">
                                     <a href="{{ route('frontend.news.index') }}" class="text-light">{{ trans('News') }}</a>
                                 </li>
                                <li class="breadcrumb-item active text-light" aria-current="page">
                                    {{ Str::limit($news->title, 50) }}
                                </li>
                            </ol>
                        </nav>
                    </div>
                    <div class="appear-animation" data-appear-animation="fadeIn" data-appear-animation-delay="200">
                        <h1 class="text-light text-10 font-weight-semibold line-height-1 mb-2">{{ $news->title }}</h1>
                        <div class="text-light mt-3">
                            <span class="me-4">
                                <i class="fas fa-calendar-alt me-1"></i>
                                {{ $news->created_at->format('F d, Y') }}
                            </span>
                            @if($news->user)
                                <span class="me-4">
                                    <i class="fas fa-user me-1"></i>
                                    {{ $news->user->name }}
                                </span>
                            @endif
                            <span>
                                <i class="fas fa-clock me-1"></i>
                                {{ $news->created_at->diffForHumans() }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content -->
    <div class="row">
        <div class="col-lg-8">
            <!-- Article Content -->
            <article class="post post-large blog-single-post border-0 m-0 p-0">
                <div class="post-content ms-0">
                    <!-- Featured Image -->

                    <!-- Article Body -->
                    <div class="post-content-body">
                        {!! $news->content !!}
                    </div>

                    <!-- Article Meta -->
                    <div class="post-meta mt-5 pt-4 border-top">
                        <div class="d-flex flex-wrap align-items-center justify-content-between">
                            <div>
                                <span class="me-4">
                                    <strong>{{ trans('Published') }}:</strong> {{ $news->created_at->format('F d, Y \a\t H:i') }}
                                </span>
                                @if($news->user)
                                    <span class="me-4">
                                        <strong>{{ trans('Author') }}:</strong> {{ $news->user->name }}
                                    </span>
                                @endif
                            </div>
                            <!-- Social Share -->
                            <div class="social-share">
                                <strong class="me-2">{{ trans('Share') }}:</strong>
                                <a href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-xs btn-facebook me-1">
                                    <i class="fab fa-facebook-f"></i>
                                </a>
                                <a href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($news->title) }}" target="_blank" class="btn btn-xs btn-twitter me-1">
                                    <i class="fab fa-twitter"></i>
                                </a>
                                <a href="https://www.linkedin.com/sharing/share-offsite/?url={{ urlencode(url()->current()) }}" target="_blank" class="btn btn-xs btn-linkedin">
                                    <i class="fab fa-linkedin-in"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </article>

                         <!-- Navigation Between Posts -->
             <div class="post-navigation border-top pt-4 mt-5">
                 <div class="row align-items-center">
                     <div class="col-md-6">
                         <a href="{{ route('frontend.news.index') }}" class="btn btn-outline-primary">
                             <i class="fas fa-arrow-left me-2"></i>{{ trans('Back to News') }}
                         </a>
                     </div>
                    <div class="col-md-6 text-md-end">
                        <!-- Add previous/next navigation if needed -->
                    </div>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <aside class="sidebar mt-5 mt-lg-0">
                <!-- Search -->
                <div class="px-3 mt-4">
                                         <h5 class="text-5 font-weight-semi-bold">{{ trans('Search News') }}</h5>
                     <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...') }}">
                             <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 mb-3">
                                    <div class="col">
                                        <div class="row align-items-center">
                                            <div class="col-auto pe-2">
                                                <div class="date text-center">
                                                    <span class="day text-4 font-weight-bold text-dark d-block">{{ $recent->created_at->format('d') }}</span>
                                                    <span class="month text-1 text-uppercase">{{ $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-1">
                                                     <a href="{{ route('frontend.news.show', $recent->slug) }}" class="text-decoration-none">
                                                         {{ Str::limit($recent->title, 45) }}
                                                     </a>
                                                 </h4>
                                                <p class="mb-0 text-2 text-muted">{{ $recent->created_at->diffForHumans() }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <!-- Related News -->
                @if($relatedNews && $relatedNews->count() > 0)
                    <div class="px-3 mt-4">
                        <h5 class="text-5 font-weight-semi-bold">{{ trans('Related News') }}</h5>
                        <div class="pb-2 mb-1">
                            @foreach($relatedNews as $related)
                                <div class="row mb-3">
                                    <div class="col">
                                        <div class="card border-0 bg-light">
                                            <div class="card-body p-3">
                                                                                                 <h6 class="card-title font-weight-bold mb-2">
                                                     <a href="{{ route('frontend.news.show', $related->slug) }}" class="text-decoration-none">
                                                         {{ Str::limit($related->title, 60) }}
                                                     </a>
                                                 </h6>
                                                <p class="card-text text-2 text-muted mb-2">
                                                    {{ Str::limit(strip_tags($related->content), 80) }}
                                                </p>
                                                <small class="text-muted">{{ $related->created_at->format('M d, Y') }}</small>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                                 <!-- Archive -->
                 <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>
            </aside>
        </div>
    </div>
</div>
@endsection

@section('scripts')
<script>
    $(document).ready(function() {
        // Copy link to clipboard functionality
        $('.copy-link').on('click', function(e) {
            e.preventDefault();
            navigator.clipboard.writeText(window.location.href).then(function() {
                alert('{{ trans("Link copied to clipboard!") }}');
            });
        });
    });
</script>
@endsection