Nested replies almost done, only need to arrange them in view - laravel

Question

I'm currently doing a small forum in Laravel. This will include(ofcourse) commenting on posts. I also done replies on top of comments. I've done this by adding post_id, commenter_id and parent_id field in Comment model. And that's all alright.And i also done small margin that each reply have depending on their parent .What i have trouble with is displaying appropriate reply, for example: Comment1, then reply to comm.1, then another reply to that reply and so on, then another direct reply on Comment1, every subsequent reply to reply after second direct comment on Comment1 isn't grouped with other replies. How to achieve that?
Here is image of what i'm trying to achieve:
Here is Comment model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
use App\Post;
use App\User;
class Comment extends Model
{
protected $fillable = [
'user_id',
'post_id',
'parent_id',
'body'
];
public function commentPost(){
return $this->belongsTo("App\Post","post_id");
}
public function commentAuthor(){
return $this->belongsTo("App\User","commenter_id");
}
public function replies() {
return $this->hasMany('App\Comment', 'parent_id');
}
}
Here is show view:
#extends("layouts.app")
#section("content")
<?php
/*Pregleda zasebno za title i description da li ima gresaka.
Ukoliko ih ima, dodeljume im klasu(crveni border).*/
$errBody = $errors->has('body') ? 'shake' : '';
?>
Go Back
<div style="float:right;">
<i class="fas fa-arrow-left"></i>
<i class="fas fa-arrow-right"></i>
</div>
<h1>{{$post->title}}</h1>
<div class="postContainer">
<img class="postCover" src="/storage/cover_images/{{$post->cover_image}}">
<div>
<!--Ovako prikazuje html kod.-->
<!--{{$post->body}}-->
{!!$post->body!!}
</div>
<small class="timestamp">Written on {{$post->created_at}}</small>
</div>
#if(!Auth::guest())
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<hr>
Edit
<form action="/posts/{{$post->id}}" method="post" class="float-right">
#csrf
{{method_field("DELETE")}}
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Are yoy sure you want to delete this post?</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<button type="submit" class="btn btn-outline-danger btn-sm">Delete</button>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</form>
<button class="btn btn-outline-danger btn-sm float-right" data-toggle="modal" data-target="#myModal">Delete</button>
#endif
#endif
#auth
<hr>
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<form method="POST" action="/posts/{{$post->id}}/comments">
#csrf
<!-- https://laravel.com/docs/5.7/validation#available-validation-rules -->
<div class="form-group animated {{$errBody}}">
<textarea id="ckeditor" class="form-control" name="body" placeholder="Post body" required value=""></textarea>
</div>
<div>
<button type="submit" class="btn btn-outline-success btn-sm">Post comment</button>
</div>
</form>
#endif
<hr>
#endauth
<h6 style="border-bottom: 1px solid whitesmoke;">Comments <span class="badge" style="background-color: whitesmoke; border: 1px solid silver;vertical-align: top;">{{count($comments)}}</span></h6>
<div class="container commContainer">
<ul class="list-group" style="list-style-type:none">
#if(count($comments) > 0)
#foreach ($comments as $index => $comment)
<li>
#if($index>0)
<div class="horDiv"></div>
#endif
{{$comment->commentAuthor->name}} has said parent_id: {{$comment->parent_id}}
</li>
<li class="list-group-item py-2 commBody" style="margin-left: calc({{$comment->parent_id}}*10px) !important" parent_id="{{$comment->parent_id}}" id="{{$comment->id}}">My id: {{$comment->id}} {!!$comment->body!!}
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<br><span class="btn btn-outline-primary btn-sm" style="width: 40px;height: 20px;line-height: 5px;padding: 5px;" onclick="reply('reply{{ $comment->id }}')";>reply</span>
#include('inc.replyForm')
#endif
</li>
#endforeach
#endif
</ul>
</div>
#endsection
I'm just guessing, but can it be done by in view itself?I tried grouping and ordering before controller passes it to view, but nothing had desired effect. I appreciate every point in right direction.
Edit:
Here is store method in CommentsController.
public function store(Request $request, $id)
{
$this->validate($request, [
"body" => "required"
]);
$data = array(
"body" => $request->input("body"),
"post_id" => intval($id),
"commenter_id" => Auth::user()->id,
"imParent_id" => $request->input("comment_id")
);
//dd($data);
$comment = new Comment;
$comment->body = $data["body"];
$comment->post_id = $data["post_id"];
$comment->commenter_id = $data["commenter_id"];
$comment->parent_id = $data["imParent_id"];
$comment->save();
$post = Post::find($id);
$comments = $post->comments;
//return redirect("/posts/{{$id}}")->with("success", "Post Created")->with('comments', $comments);
//return view("posts.show")->with(compact('post', 'comments'));
//with(['replies' => function($comments){ $comments->orderBy('parent_id') } ])
return back()->with('comments', $comments);
}
Edit2:
And here is show method in PostController:
public function show($id)
{
$post = Post::find($id);
$comments = $post->comments;
$prev = $post->prev($post);
$next = $post->next($post);
return view("posts.show")->with(compact("post", "prev", "next", "comments"));
}
Edit3:
Here is rather flawed attempt(in show view):
#if(count($comments) > 0)
#for($i=0;$i<count($comments);$i++)
#if(!$comments[$i]->parent_id)
<li class="list-group-item py-2 commBody" parent_id="{{$comments[$i]->parent_id}}" id="{{$comments[$i]->id}}">
{!!$comments[$i]->body!!}
</li>
#for($k=0;$k<count($comments);$k++)
#if($comments[$i]->id==$comments[$k]->parent_id)
<?php array_push($myArray,$comments[$i]->id); ?>
<li class="list-group-item py-2 commBody" style="margin-left: calc({{$comments[$k]->parent_id}}*10px) !important" parent_id="{{$comments[$k]->parent_id}}" id="{{$comments[$k]->id}}">
{!!$comments[$k]->body!!}
</li>
#endif
#endfor
{{"///////////////////////////////////////////////"}}
#endif
#if(array_search($comments[$i]->parent_id,$myArray)===false)
#for($k=0;$k<count($comments);$k++)
#if($comments[$i]->id==$comments[$k]->parent_id)
<li class="list-group-item py-2 commBody" style="margin-left: calc({{$comments[$k]->parent_id}}*10px) !important" parent_id="{{$comments[$k]->parent_id}}" id="{{$comments[$k]->id}}">
{!!$comments[$k]->body!!}
</li>
#endif
#endfor
#endif
#endfor
#endif
And how it looks along with duplicates:
Edit4:
Followed Tim Lewis advice of separating comments(parentless) from replies(with parents), here's how to displayed them and sending additional parameter to reply form partial:
<ul class="list-group" style="list-style-type:none">
#if(count($comms) > 0)
#for($i=0;$i<count($comms);$i++)
<li class="list-group-item py-2 commBody" style="margin-left: calc({{"0"}}*10px) !important" parent_id="{{$comms[$i]->parent_id}}" id="{{$comms[$i]->id}}">
{{$comms[$i]->body}}
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<br><span class="btn btn-outline-primary btn-sm" style="width: 40px;height: 20px;line-height: 5px;padding: 5px;" onclick="reply('reply{{ $comms[$i]->id }}')";>reply</span>
#include('inc.replyForm', array('par' => $comms[$i]))
#endif
</li>
<li>#if($i>0) <div class="horDiv"></div> #endif </li>
#if(count($replies) > 0)
#for($j=0;$j<count($replies);$j++)
#if($comms[$i]->id==$replies[$j]->parent_id)
<li class="list-group-item py-2 commBody" style="margin-left: calc({{$comms[$i]->id}}*10px) !important" parent_id="{{$replies[$j]->parent_id}}" id="{{$replies[$j]->id}}">
{{$replies[$j]->body}}
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<br><span class="btn btn-outline-primary btn-sm" style="width: 40px;height: 20px;line-height: 5px;padding: 5px;" onclick="reply('reply{{ $replies[$j]->id }}')";>reply</span>
#include('inc.replyForm', array('par' => $replies[$j]))
#endif
</li>
<li>#if($j>0) <div class="horDiv"></div> #endif </li>
#endif
#for($k=$j;$k<count($replies);$k++)
#if($replies[$k]->parent_id==$replies[$j]->id)
<li class="list-group-item py-2 commBody" style="margin-left: calc({{$replies[$j]->id}}*10px) !important" parent_id="{{$replies[$k]->parent_id}}" id="{{$replies[$k]->id}}">
{{$replies[$k]->body}}
#if(Auth::check() && Auth::user()->role_id<3 && Auth::user()->role_id>0)
<br><span class="btn btn-outline-primary btn-sm" style="width: 40px;height: 20px;line-height: 5px;padding: 5px;" onclick="reply('reply{{ $replies[$k]->id }}')";>reply</span>
#include('inc.replyForm', array('par' => $replies[$k]))
#endif
</li>
<li>#if($k>0) <div class="horDiv"></div> #endif </li>
#endif
#endfor
#endfor
#endif
#endfor
#endif
</ul>

Answer 1

I did it before for making categories. Here is a tip:
<select name="category_id" class="form-control chosen-select" required value="{{ old('category_id') }}">
#foreach(App\Category::where('parent_id',0)->get() as $c)
<option value="{{$c->id}}">*{{$c->name}}</option>
#foreach(App\Category::where('parent_id',$c->id)->get() as $d1)
<option value="{{$d1->id}}"> - {{$d1->name}}</option>
#endforeach
#endforeach
</select>