@extends('site.layouts.mazfer')
@section('title', $pagePayload->title)

@push('css')
@endpush

@push('js')
<script>
	function replyComment(id) {
		if (id) {
			document.forms['comment-form'].elements['reply_id'].value = id;
			document.forms['comment-form'].elements['comment'].focus();

			const elemReplyTo = document.getElementById('replyTo');

			const elemReplyToSpan = elemReplyTo.querySelector('span');
			elemReplyToSpan.innerText = document.querySelector(`[data-id="${id}"] h5`).innerText;

			elemReplyTo.classList.remove('hide');
		} else {
			document.forms['comment-form'].elements['reply_id'].value = '';
			document.forms['comment-form'].elements['comment'].focus();

			const elemReplyTo = document.getElementById('replyTo');
			elemReplyTo.classList.add('hide');
		}
	}
</script>
@endpush
@php
	$pagePayload->siteManagement['site.components.banner']->title->value = $pagePayload->siteManagement['site.components.banner']->subtitle->value;
	$pagePayload->siteManagement['site.components.banner']->subtitle->value = $pagePayload->title;
@endphp
@section('header')
	@includeWhen(isset($pagePayload->siteManagement['site.components.banner']), 'site.components.banner', [ 'payload' => $pagePayload->siteManagement['site.components.banner'] ?? null ])
@endsection
@section('content')
	<section id="blog-post">
		<div class="container">
			<div  style="margin: -210px 0">
				<div class="row header-bottom">
					<div class="col-sm-12 col-lg-8"  style="width: 100%">
						<div class="single-blog-post">
							<div class="blog-thumb mb-3">
								<a href="#"><img class="blog-post-img" src="{{ asset($post->image) }}" alt="img"></a>
							</div>
							<div class="inner-blog-content">
								<ul class="blog-post-meta">
									<li><a href=""><i class="far fa-user"></i>{{$post->blogCategory->name}}</a></li>
									<li><a href=""><i class="fa-solid fa-comment"></i>Comentários ({{ $post->count_comments }})</a></li>
								</ul>
							</div>
							<h2>{{ $post->title }}</h2>
							<p>{{ $post->descr }}</p>
							<p class="p-about">{!! $post->content !!}</p>
						</div>
						<div id="blog-comment-section">
							<div class="single-comments-section">
								<h4 class="single-content-title">Comentários</h4>
								<div class="single-commentor">
									<ul>
										@foreach ($comments as $comment)
											@include('site.pages.blog.commentMsg', ['comment' => $comment])
										@endforeach
									</ul>
								</div>
							</div>
							<div class="comment-reply-box mt-75">
								<h4 class="single-content-title">Deixe uma resposta</h4>
								<form name="comment-form" class="comment-form" action="{{ route('blog.comment', [ 'blog' => $post->slug ]) }}" method="POST">
									@csrf
									<div id="replyTo" class="hide">
										<h3>Responder a: <span data-to></span></h3>
										<div>
											<a href="javascript:replyComment(null)">Cancelar</a>
										</div>
										<input type="hidden" name="reply_id" value=""/>
									</div>
									<label for="message">Mensagem*</label>
									<textarea id="message" name="comment" placeholder="Sua mensagem*"></textarea>
									<div class="row">
										<div class="col-md-6">
											<label for="name">Nome*</label>
											<input name="name" type="text" placeholder="Nome*" />
										</div>
										<div class="col-md-6">
											<label for="email">Email*</label>
											<input name="email" type="email" placeholder="Email*" />
										</div>
									</div>
									<button class="btn">Postar Comentário</button>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>
@endsection
