@extends('layouts.blog')
@section('title')
	{{ $post->title . " | Technoblog"}}
@endsection

@section('blog_content')

	<div class="container-fluid m-0 p-0 mb-5">

		<div class="w-100">

			<div class="post-image w-100" style="position: relative;">
				<img src="/uploads/{{ $post->image_link }}">
				<div class="post-info">
					<p class="post-title">{{ $post->title }}</p>

					@if (!empty($post->user->userProfile->profile_photo_link))
						<a href="/profile/{{ $post->user->userProfile->profile_link }}"><img class="author-avatar" src="/uploads/users/{{ $post->user->userProfile->profile_photo_link }}"></a>
					@else
						<a href="/profile/{{ $post->user->userProfile->profile_link }}"><span class="name-avatar">{{ strtoupper($post->user->name[0]) . strtoupper($post->user->surname[0]) }}</span></a>
					@endif

					<span class="author-name">Posted By <br> {{ $post->user->getFullName() }} </span>
					<span class="text-white font-weight-bold pl-5" style="text-shadow: 0 0 1px black;">{{ $post->ago() }} </span>
					<span class="pl-4 font-weight-bold text-white post-reaction" style="font-size: 16px; text-shadow: 0 0 1px black;">
						<span class="likeCounter">{{ $likeCounter }}</span>&nbsp;
						@if ($post->isLiked($ip))
							<i data-unlike-id="{{ $likedId }}" class="text-danger fa fa-heart unlikePost" aria-hidden="true"></i>
						@else
							<i data-post-id="{{ $post->id }}"class="text-danger fa fa-heart-o likePost" aria-hidden="true"></i>
						@endif
					</span>
					<span class="pl-4 font-weight-bold text-white" style="font-size: 16px; text-shadow: 0 0 1px black;">{{ count($comments) }} &nbsp; <i class="text-white fa fa-comment" aria-hidden="true"></i></span>
				</div>
			</div>

			<div class="post-content">
				{!! $post->content !!}
			</div>

			<div class="post-tags">
				@foreach ($post->tag as $tag)
					<span><a href="/tag/{{ $tag->name }}">{{ $tag->name }}</a></span>
				@endforeach
				<div class="post-reaction pt-2 float-right">
					@if ($post->isLiked($ip))
						<i data-unlike-id="{{ $likedId }}" class="text-danger fa fa-heart unlikePost" aria-hidden="true"></i>
					@else
						<i data-post-id="{{ $post->id }}"class="text-danger fa fa-heart-o likePost" aria-hidden="true"></i>
					@endif
				</div>
			</div>

			<div class="post-comments pt-5">

				<h5 class="pb-4">Comments</h5>

				@if($comments->count() == 0)
					No comments yet.
				@endif

				@foreach ($comments as $comment)
					<div class="comment-box" @if(auth()->check() && !$comment->is_active) style="border-left: 2px #f01a37 solid !important;" @endif>
						<div class="row m-0">

							<div class="col-md-1 pl-2 pr-2">
								<span class="name-avatar">{{ strtoupper($comment->name[0])}}</span>
							</div>
							<div class="col-md-10">
								<p class="comment-owner">{{ $comment->name }} - {{ $comment->ago() }}
                                    @if (auth()->check() && !$comment->is_active && (auth()->user()->hasPermission("approve_all_comments") || $comment->post->user->id == auth()->id()))
                                        <a href="javascript:void(0)" onclick="document.getElementById('confirmComment_{{ $comment->id}}').submit()" class="ml-2" style="font-size: 14px; cursor: pointer;">Confirm</a>
                                        <form id="confirmComment_{{ $comment->id}}" action="{{ route("dashboard.comments.confirm", ["id" => $comment->id]) }}" method="post">
                                            @method("patch")
                                            @csrf
                                        </form>
                                    @endif
                                </p>
								<p>{{ $comment->comment }}</p>
							</div>
						</div>
					</div>
				@endforeach
			</div>

			<div class="post-add-comment pt-5">

				<h5 class="pb-2">What are your thoughts?</h5>

				@if ($errors->any())
					<div class="alert alert-danger">
						<ul class="m-0 pl-2">
							@foreach ($errors->all() as $error)
								<li>{{ $error }}</li>
							@endforeach
						</ul>
					</div>
				@endif

				<div class="comment-alert alert alert-dismissible fade show" role="alert">
					<strong></strong>
					<button type="button" class="close" data-dismiss="alert" aria-label="Close"></button>
				</div>

				<form class="commentForm" accept-charset="utf-8">

					@csrf

					<div class="form-group">
						<label class="form-label">Name</label>
						<input type="text" name="name" value="{{ old('name') }}" class="form-control" placeholder="Name" required>
					</div>

					<div class="form-group">
						<label class="form-label">E-mail</label>
						<input type="email" name="email" value="{{ old('email') }}" class="form-control" placeholder="E-mail" required>
					</div>

					<div class="form-group">
						<label class="form-label">Comment</label>
						<textarea class="form-control" rows="4" name="comment" required></textarea>
					</div>

					<input type="hidden" name="post_id" value="{{ $post->id }}">

					<div class="form-group">
						<input type="submit" value="Comment" class="submitBtn btn btn-primary">
					</div>

				</form>

			</div>

		</div>

	</div>

@endsection