@extends('web.layouts.app')

@section('content')
    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb__area" style="background-image: url('/web/assets/img/page/breadcrumb.jpg');">
		<div class="container">
			<div class="row">
				<div class="col-xl-12">
					<div class="breadcrumb__area-content">
						<h2>{{ $news->title }}</h2>
						<ul>
							<li><a href="{{ route('home') }}">Home</a><i class="fa-regular fa-angle-right"></i></li>
							<li><a href="{{ route('news.index') }}">News</a><i class="fa-regular fa-angle-right"></i></li>
							<li>{{ $news->title }}</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
    <!-- Breadcrumb Area End -->

    <!-- Blog Details Area Start -->
    <div class="blog__details section-padding">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 lg-mb-25">
                    <div class="blog__details-area">
                        <img src="/storage/{{ $news->image }}" alt="image">
                        <h3 class="mt-25 mb-20">{{ $news->title }}</h3>
						<p>{{ $news->description }}</p>
                       
						<div class="blog__details-area-author">
                            <div class="blog__details-area-author-image">
                                <img src="/storage/{{ $news->author->profile_image ?? '/web/assets/img/team/member-1.jpg' }}" alt="avatar">
                            </div>
                            <div class="blog__details-area-author-content">
                                <h5>{{ $news->author->name ?? 'Admin' }}</h5>
                                <p>{{ $news->description ?? 'Super Admin' }}</p>
                            </div>
                        </div>
                        <div class="blog__details-area-comment mt-40">
							<h3 class="mb-30">Comments ({{ $news->comments->count() }})</h3>
                            @forelse ($news->comments as $comment)
							<div class="blog__details-area-comment-item">
								<div class="blog__details-area-comment-item-comment">
									<div class="blog__details-area-comment-item-comment-image">
										<img src="/web/assets/img/team/member-5.jpg" alt="avatar-image">									
									</div>									
									<div class="blog__details-area-comment-item-comment-content">
										<h5>{{ $comment->title ?? '-' }}</h5>
										<span>Submitted {{ $comment->created_at->diffForHumans() }} by {{ $comment->author_name ?? 'Anonymous' }}</span>
                                        <p>{{ $comment->message }}</p>
                                    </div>
								</div>
							</div>
                            @empty
                                <p>No comments yet</p>
                            @endforelse
						</div>
                        <div class="blog__details-area-contact mt-60">
							<h3>Post Comment</h3>
                            <p>Required fields are marked</p>
                            <div class="blog__details-area-contact-form">
                                <form action="{{ route('comments.store', $news->slug) }}" method="POST">	
                                    @csrf
                                    <div class="row">
                                        <div class="col-sm-6 mt-25"> 
                                            <div class="blog__details-area-contact-form-item contact-item">                                                
                                                <input type="text" name="author_name" placeholder="Full Name" required="required">
                                            </div>										
                                        </div>
                                        <div class="col-sm-6 mt-25">
                                            <div class="blog__details-area-contact-form-item contact-item">                                                
                                                <input type="text" name="title" placeholder="Title" required="required">											
                                            </div>									
                                        </div>
                                        <div class="col-sm-12 mt-25"> 
                                            <div class="blog__details-area-contact-form-item contact-item">                                                
                                                <textarea name="message" placeholder="Type your comments...."></textarea>	
                                                <input type="hidden" name="news_id" value="{{ $news->id }}">
                                            </div>										
                                        </div>
                                        <div class="col-lg-12 mt-25">
                                            <div class="blog__details-area-contact-form-item">
                                                <button class="build_button" type="submit">Submit Comment<i class="flaticon-right-up"></i></button>
                                            </div>
                                        </div>
                                    </div>
                                </form>
                            </div>
						</div>
                    </div>
				</div>
                <div class="col-lg-4 columns_sticky">
                    <div class="all__sidebar">
                        
                        <div class="all__sidebar-item">
                            <h4>Recent Blog</h4>
                            <div class="all__sidebar-item-post dark_image">
                                @foreach($recentNews as $news)
                                <div class="post__item">
                                    <div class="post__item-image">
                                        <a href="{{ route('news.show', $news->slug) }}"><img src="/storage/{{ $news->image }}" alt="post-image"></a>
                                    </div>
                                    <div class="post__item-title">
                                        <h6><a href="{{ route('news.show', $news->slug) }}">{{ $news->title }}</a></h6>
                                        <span><i class="far fa-calendar-alt"></i>{{ \Carbon\Carbon::parse($news->published_at)->format('d M Y') }}</span>
                                    </div>
                                </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Details Area End -->
@endsection