@extends('layouts.frontend')

@section('title') {{ $blog->title }} @endsection
@section('meta_title') {{ $blog->meta_title }} @endsection
@section('meta_image') {{ asset('/storage/'.$blog->image) }} @endsection
@section('meta_description') {{ $blog->meta_description }} @endsection

@section('styles')
	<style>
		ul{list-style: initial;margin-left: 30px;}
	</style>

@endsection
@section('content')

	<!--===== BLOG AREA START=======-->

	<div class="blog1 sp bg1 _relative mt-5">
		<div class="container">
			{{-- <div class="row">
				<div class="col-lg-8"> --}}
					
					<div class="blog-details1-all sp pt-0">
				
						<div class="blog-page3-single-box text-center">
							<div class="heading1">
								<div class="social-area">
									{{-- <div class="author-area">
										<div class="author">
											<div class="author-tumb">
												<img src="{{ asset('/asset') }}/img/blog/blog1-author1.png" alt="Sarah Cohen">
											</div>
											<span class="author-text">Sarah Cohen</span>
											
										</div>
										<div class="date">
										</div>
									</div> --}}
									<span><img src="{{ asset('/asset') }}/img/icons/date1.svg" alt="Alternative Healing Plus"> {{ date('d m Y',strtotime($blog->created_at)) }}</span>

									<a href="#" class="time mt-16"><img src="{{ asset('/asset') }}/img/icons/time1.svg" alt="Alternative Healing Plus"> {{ ceil(str_word_count($blog->description) / 200) }} min read</a>
								</div>
								<h4 class="text-muted">{{ $blog->getCategory->name??'' }}</h4>
								<h1 class="text-highlight">{{ $blog->title }}</h1>
								{{-- <p class="mt-16">{{ $blog->short_description }}</p> --}}
							</div>
						</div>

						<div class="thumbnail  _relative mt-20 text-center mb-5">
							
							@if($blog->youtube_video)
								@php

									// Extract video ID inline
									preg_match('/(?:youtu\.be\/|youtube\.com\/(?:watch\?(?:.*&)?v=|embed\/))([^?&"\'>]+)/', $blog->youtube_video, $matches);
									$videoId = $matches[1] ?? null;
								@endphp
								<iframe width="560" height="315"
									src="https://www.youtube.com/embed/{{ $videoId }}"
									allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
									frameborder="0" allowfullscreen>
								</iframe>
							@else 
								<img src="{{ asset('/storage/'.$blog->image) }}" alt="{{ $blog->title }}">
							@endif
						</div>
			
						<div class="details content-area">




							<article>
								{!! $blog->description !!}
							</article>
	
	
							{{-- <div class="clint-review">
								<p>"Your personal brand is the unique story that only you can tell. Own it, share it, and let it shine."</p>
								<span>Henry Fawyel</span>
							</div> --}}
	
							<div class="comments-area">
								<div class="heading1 mt-40">
									<h3>Comments</h3>
								</div>
{{-- 	
								<div class="tags-social-area">
									<div class="row align-items-center">
										<div class="col-md-6">
											<div class="tags">
												<ul>
													<li class="text">Tags:</li>
													<li><a href="#">Social Media</a></li>
													<li><a href="#">UI/UX</a></li>
													<li><a href="#">Business</a></li>
												</ul>
											</div>
										</div>
										<div class="col-md-6">
											<div class="social footer-social1">
												<ul>
													<li class="text">Social:</li>
													<li>
														<a href="#"><i class="fa-brands fa-facebook-f"></i></a>
													</li>
													<li>
														<a href="#"><i class="fa-brands fa-instagram"></i></a>
													</li>
													<li>
														<a href="#"><i class="fa-brands fa-linkedin-in"></i></a>
													</li>
												</ul>
											</div>
										</div>
									</div>
								</div> --}}
	

								<div class="comment-box">

									<form action="{{ route('article.comment') }}" method="POST">
										@csrf 
										<input type="hidden" name="blog" value="{{ $blog->id }}">
										<div class="form-group">
											<textarea class="form-control" name="comment" required>{{ old('comment') }}</textarea>
										</div>
										<div class="text-right">
											<button class="btn btn-success" type="submit">Submit</button>
										</div>
									</form>

									@forelse($comments as $comment)
									<div class="top-area">
										<div class="author-area">
											<div class="image rounded-circle">
												<img src="{{ asset('/avatar.jpg') }}" height="40px" alt="">
											</div>
											<div class="heading1 ml-20">
												<h4><a href="#">User</a></h4>
												<p class="mt-2">{{ $comment->created_at->diffForHumans() }}</p>
											</div>
										</div>
										{{-- <a href="#" class="reply-btn"><i class="fa-solid fa-reply"></i> Reply</a> --}}
									</div>
	
										<div class="heading1 mt-20">
											<p>“{{ $comment->comment }}"</p>
										</div>
									@empty 

									@endforelse

								</div>
								
								{{ $comments->links() }}
	
								{{-- <div class="comment-box ml-60">
									<div class="top-area">
										<div class="author-area">
											<div class="image">
												<img src="{{ asset('/asset') }}/img/blog/comment-author2.png" alt="vexon">
											</div>
											<div class="heading1 ml-20">
												<h4><a href="#">Matthew Kuhnemann</a></h4>
												<p class="mt-2">8/2/2024</p>
											</div>
										</div>
										<a href="#" class="reply-btn"><i class="fa-solid fa-reply"></i> Reply</a>
									</div>
	
									<div class="heading1 mt-20">
										<p>“I love how this breaks down the importance of consistency and authenticity. It's easy to get caught up in trends, but staying true to yourself really is key. Great read!"</p>
									</div>
								</div> --}}
							</div>
	
							{{-- <div class="details-contact-area">
								<div class="heading1">
									<h5>Leave a Reply</h5>
									<p class="mt-10">Provide clear contact information, including phone number, email, and address.</p>
								</div>
	
								<form action="#">
									<div class="row">
										<div class="col-md-6">
											<div class="single-input">
												<input type="text" placeholder="First Name">
											</div>
										</div>
										<div class="col-md-6">
											<div class="single-input">
												<input type="text" placeholder="Last Name">
											</div>
										</div>
										<div class="col-md-6">
											<div class="single-input">
												<input type="email" placeholder="Email">
											</div>
										</div>
										<div class="col-md-6">
											<div class="single-input">
												<input type="number" placeholder="Phone">
											</div>
										</div>
	
										<div class="col-md-12">
											<div class="single-input">
												<input type="text" placeholder="Subject">
											</div>
										</div>
	
										<div class="col-md-12">
											<div class="single-input">
												<textarea rows="5" placeholder="Message"></textarea>
											</div>
											<div class="button mt-30">
												<button class="theme-btn1" type="submit">Get Started</button>
											</div>
										</div>
									</div>
								</form>
							</div> --}}

						</div>
								
					</div>

				{{-- </div>

				<div class="col-lg-4">
					@include('includes.sidebar')
				</div>
			</div> --}}
		</div>
	</div>


@endsection