@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 Single Area Start -->
    <div class="blog-single__area section-padding">
        <div class="container">
            <div class="row">
                <div class="col-xl-8 col-lg-8 lg-mb-50">
                    <div class="blog__single-left">
                        <div class="blog__single-left-image">
                            <img src="/storage/{{ $news->image }}" alt="{{ $news->title }}">
                        </div>
                        <div class="blog__single-left-content">
                            <div class="blog__single-left-content-meta">
                                <ul>
                                    <li><i class="fa-regular fa-calendar"></i> {{ \Carbon\Carbon::parse($news->published_at)->format('d M, Y') }}</li>
                                    <li><i class="fa-regular fa-user"></i> {{ $news->author }}</li>
                                </ul>
                            </div>
                            <h3 class="mb-20">{{ $news->title }}</h3>
                            {!! $news->content !!}
                        </div>
                        <!-- Comments Section -->
                        <div class="comments-area">
                            <h3 class="comments-title">Comments ({{ $news->comments->count() }})</h3>
                            <div class="comments-list">
                                @foreach ($news->comments as $comment)
                                    <div class="single-comment-item">
                                        <div class="single-comment-item-content">
                                            <h5>{{ $comment->title }}</h5>
                                            <span>By {{ $comment->author_name ?? 'Anonymous' }} on {{ \Carbon\Carbon::parse($comment->created_at)->format('d M, Y') }}</span>
                                            <p>{{ $comment->message }}</p>
                                        </div>
                                    </div>
                                @endforeach
                            </div>

                            <div class="comment-form-area">
                                <h3 class="comment-form-title">Leave a Comment</h3>
                                <form action="{{ route('comments.store', $news->slug) }}" method="POST">
                                    @csrf
                                    <div class="row">
                                        <div class="col-lg-6 mb-25">
                                            <input type="text" name="title" placeholder="Comment Title*" required>
                                        </div>
                                        <div class="col-lg-6 mb-25">
                                            <input type="text" name="author_name" placeholder="Your Name (Optional)">
                                        </div>
                                        <div class="col-lg-12 mb-25">
                                            <textarea name="message" rows="5" placeholder="Your Message*" required></textarea>
                                        </div>
                                        <div class="col-lg-12">
                                            <button type="submit" class="theme-btn">Post Comment<i class="flaticon-right-up"></i></button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-4 col-lg-4">
                    <!-- You can add a sidebar here if needed -->
                </div>
            </div>
        </div>
    </div>
    <!-- Blog Single Area End -->
@endsection