@extends('layouts.landing')

@section('title')
    {{$search}}
@endsection

@section('content')
<div class="row mb-4">
    <div class="col-12 col-xxl-8 col-lg-8">
        <ul class="nav nav-tabs nav-overflow header-tabs" id="myTab" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="recent-tab" data-toggle="tab" href="#recent" role="tab" aria-controls="recent" aria-selected="true">
                    Most Recent
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="people-tab" data-toggle="tab" href="#people" role="tab" aria-controls="people" aria-selected="false">
                    People
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="announcements-tab" data-toggle="tab" href="#announcements" role="tab" aria-controls="announcements" aria-selected="false">
                    Announcements
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="forum-tab" data-toggle="tab" href="#forum" role="tab" aria-controls="forum" aria-selected="false">
                    Forums
                </a>
            </li>
        </ul>
        <div class="row p-2">
            <div class="tab-content" id="wizardSteps">
                <div class="tab-pane fade show active" id="recent" role="tabpanel" aria-labelledby="recent-tab">
                    <div class="row">
                        @forelse($feeds as $feed)
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body d-block">
                                    <div class="row">
                                        <div class="col">
                                            <div class="d-flex">
                                                @php
                                                    $user = App\Models\User::where('id', $feed->user_id)->first();
                                                @endphp
                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p class="text-muted font-xssss"><i class="feather-clock"></i> Posted {{$feed->created_at->diffForHumans()}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @if(Auth::user()->id == $feed->user_id)
                                            <div class="col-auto">
                                                <div class="dropdown custom-drop">
                                                    <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fe fe-more-vertical"></i>
                                                    </a>
                                                    <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                        {{-- <div class="card-body p-0 d-flex">
                                                            <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                            <a href="#!">
                                                                <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                            </a>
                                                        </div> --}}
                                                        <form action="/feeds/delete-post/{{$feed->id}}" method="POST">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <div class="card-body p-0 d-flex">
                                                                <button type="submit" class="custom-btn-none" onclick="return deletePost();">
                                                                    <span class="button__text"><i class="mdi mdi-delete"></i> Delete</span>
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="pt-2 pb-2">{{$feed->content}}</p>
                                    @php
                                        $photos = json_decode($feed->photo_path);
                                        if($photos) {
                                            $photo_count = count($photos);
                                        }
                                    @endphp
                                    @if($photos)
                                        @if(count($photos) > 0 && count($photos) < 2)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col mb-2" style="padding: 0"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 1 && count($photos) < 3)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 2 && count($photos) < 4)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-4 col-xss-4 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 3 && count($photos) < 5)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 4)
                                            @php
                                                $n = 4; // to get the 4th image if the image count is greater than 3
                                            @endphp
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $key => $photo)
                                                        @if (in_array($key, [0,1,2,3]))
                                                            @if(($key + 1) % $n)
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                            @else
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2">
                                                                    <a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}">
                                                                    {{-- <a class="cursor-pointer" onclick="displayImages('{{$feed->id}}')"> --}}
                                                                        <img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                                                        @php
                                                                            $photo_no = $photo_count - 4;
                                                                        @endphp
                                                                        <span class="img-count font-sm text-white ls-3 fw-600">
                                                                            <b>+
                                                                                @if($photo_no > 0)
                                                                                    {{$photo_no}}
                                                                                @endif
                                                                            </b>
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if($feed->video_path)
                                        <div class="card-body">
                                            <div class="row justify-content-center">
                                                <div class="col mb-2" style="padding: 0">
                                                    <video controls class="w-100 rounded-3">
                                                        <source src="{{$feed->video_path}}" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if($feed->file_path)
                                        <div class="card-body">
                                            <div class="row ">
                                                <div class="col-12 pe-1 ps-1 mb-2">
                                                    <a class="w-full text-gray-700" href="{{$feed->file_path}}" target="_blank">
                                                        @php
                                                            $file_ext = pathinfo($feed->file_path, PATHINFO_EXTENSION);
                                                        @endphp
                                                        @if($file_ext == 'pdf')
                                                            <img src="{{asset('assets/images/pdf.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'doc')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'docx')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @else
                                                            <img src="{{asset('assets/images/document.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @endif
                                                        {{$feed->file_name}}
                                                        <span class="flex align items text-gray-600 dark:text-gray-300">
                                                            <i class="fe fe-download mx-2"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="d-flex mb-3">
                                        <p class="mr-4" id="like-div{{$feed->id}}">
                                            @php
                                                $like_count = App\Models\Like::where('feed_id', $feed->id)->where('like', 1)->count();
                                            @endphp
                                            @if($like_count > 0 && $like_count < 2)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> like </a>
                                            @elseif($like_count > 1)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @else
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @endif
                                        </p>
                                        <span id="show-no"></span>
                                        {{-- <p>
                                            <i class="mdi mdi-share-variant-outline text-pink"></i> 10 Shares
                                        </p> --}}
                                        <p>
                                            @php
                                                $comment_count = App\Models\Comment::where('feed_id', $feed->id)->count();
                                            @endphp
                                            <a class="text-gray-500 cursor-pointer" onclick="showComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple text-pink"></i> <span id="comment-no{{$feed->id}}">{{$comment_count}}</span>
                                                @if($comment_count <= 1)
                                                    comment
                                                @elseif($comment_count > 1)
                                                    comments
                                                @endif
                                            </a>
                                        </p>
                                    </div>
                                    <div class="d-flex border-top-xs pt-4">
                                        <form id="like-form">
                                            <p class="mr-4 cursor-pointer">
                                                <input type="hidden" name="user_id" id="user-id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" id="feed-id" value="{{$feed->id}}">
                                                @php
                                                    $likes = App\Models\Like::where('feed_id', $feed->id)->get();
                                                    $user_has_liked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 1)->first();
                                                    $user_has_unliked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 0)->first();
                                                    $user_has_not_liked = App\Models\Like::where('feed_id', $feed->id)->first();
                                                @endphp
                                                @if(count($likes) > 0)
                                                    @if($user_has_liked)
                                                        <span id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i> <span class="pl-1"> Liked</span></span>
                                                        <span style="display: none" id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_unliked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_not_liked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i></i><span class="pl-1"> Like</span></span>
                                                    @endif
                                                @else
                                                    <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                    <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                @endif
                                            </p>
                                        </form>
                                        <p class="mr-4">
                                            <span class="cursor-pointer" onclick="shareFeed('{{$feed->id}}')">
                                                <i class="mdi mdi-share-variant-outline font-md"></i> <span class="pl-1"> Share</span>
                                            </span>
                                        </p>
                                        <p class="cursor-pointer">
                                            <span id="show-comment{{$feed->id}}" onclick="postComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple font-md"></i> <span class="pl-1 -mt-1">Comment</span></span>
                                        </p>
                                    </div>
                                    <form id="comment-post{{$feed->id}}">
                                        @csrf
                                        <div class="row border-top-xs d-none pt-4" id="comment-box{{$feed->id}}">
                                            <div class="col-auto p-0">
                                                <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                            </div>
                                            <div class="col ms-n2">
                                                <label class="visually-hidden">Leave a comment...</label>
                                                <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                <input name="comment_body" id="comment-body{{$feed->id}}" onkeyup="commentPost('comment-body{{$feed->id}}', 'comment-btn{{$feed->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a comment..">
                                            </div>
                                            <div class="col-auto align-self-end">
                                                <div class="text-muted mb-2">
                                                    <button disabled class="text-color -mt-25 text-dark post_comment{{$feed->id}}" id="comment-btn{{$feed->id}}" style="opacity: .3; cursor: unset">
                                                        Comment
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    @php
                                        $comments = App\Models\Comment::where('feed_id', $feed->id)->orderBy('created_at', 'ASC')->limit(2)->get();
                                        $all_comments = App\Models\Comment::where('feed_id', $feed->id)->count();
                                    @endphp

                                    <div id="comments{{$feed->id}}" class="comment d-none mt-4 mb-4">
                                        @if(count($comments) > 0)
                                            <div class="row my-4">
                                                <small class="text-muted font-xsss text-dark">Most recent</small>
                                            </div>
                                        @endif
                                        @forelse($comments as $comment)
                                            <div class="row">
                                                <div class="col">
                                                    <div class="d-flex">
                                                        @php
                                                            $user = App\Models\User::where('id', $comment->user_id)->first();
                                                        @endphp
                                                        <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                        <div class="pl-3 ml-2 mb-4 comment-body w-100">
                                                            <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                <small class="text-muted text-dark font-xssss">{{$comment->created_at->diffForHumans()}}</small>
                                                            </a>
                                                            <p class="text-gray-400 text-dark">
                                                                {{$comment->comment_body}}
                                                            </p>
                                                            <small class="d-flex justify-content-between my-3 text-gray-400 text-dark">
                                                                <span class="d-flex">
                                                                    <span class="pr-2"> 2 Likes</span>
                                                                    <span class="pr-2">.</span>
                                                                    @php
                                                                        $reply_count = App\Models\CommentReply::where('comment_id', $comment->id)->where('feed_id', $feed->id)->count();
                                                                    @endphp
                                                                    <span class="cursor-pointer" onclick="showReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}', 'post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')">
                                                                        <span id="reply-no{{$comment->id}}">{{$reply_count}}</span>
                                                                        @if($reply_count <= 1)
                                                                            reply
                                                                        @elseif($reply_count > 1)
                                                                            replies
                                                                        @endif
                                                                    </span>
                                                                </span>
                                                                <span class="d-flex">
                                                                    <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                    <span class="cursor-pointer" id="show-reply{{$comment->id}}" onclick="postReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}','post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')"><i class="mdi mdi-arrow-right-top pr-2"></i>Reply</span>
                                                                </span>
                                                            </small>
                                                            <form id="reply-post{{$comment->id}}">
                                                                @csrf
                                                                <div class="row border-top-xs d-none pt-4" id="reply-box{{$comment->id}}">
                                                                    <div class="col-auto p-0">
                                                                        <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                                    </div>
                                                                    <div class="col ms-n2">
                                                                        <label class="visually-hidden">Reply...</label>
                                                                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                                        <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                                        <input type="hidden" name="comment_id" value="{{$comment->id}}">
                                                                        <input name="comment_reply_body" required id="reply-body{{$comment->id}}" onkeyup="replyPost('reply-body{{$comment->id}}', 'reply-btn{{$comment->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a reply..">
                                                                    </div>
                                                                    <div class="col-auto align-self-end">
                                                                        <div class="text-muted mb-2">
                                                                            <button class="text-color -mt-25 text-dark post_reply{{$comment->id}}" id="reply-btn{{$comment->id}}" style="opacity: .3; cursor: unset" disabled>
                                                                                Reply
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                            @php
                                                                $comment_replies = App\Models\CommentReply::where('comment_id', $comment->id)->orderBy('created_at', 'ASC')->get();
                                                                $all_replies = App\Models\CommentReply::where('comment_id', $comment->id)->count();
                                                            @endphp
                                                            <div id="replies{{$comment->id}}" class="comment d-none mt-4 mb-4">
                                                                @forelse($comment_replies as $reply)
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="d-flex">
                                                                                @php
                                                                                    $user = App\Models\User::where('id', $reply->user_id)->first();
                                                                                @endphp
                                                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover; margin-top: 1rem">
                                                                                <div class="pl-3 ml-2 comment-body w-100">
                                                                                    <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                                        <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                                        <small class="text-muted text-dark font-xssss">{{$reply->created_at->diffForHumans()}}</small>
                                                                                    </a>
                                                                                    <p class="text-gray-400 text-dark">
                                                                                        {{$reply->comment_reply_body}}
                                                                                    </p>
                                                                                    <small class="d-flex justify-content-between mt-3 text-gray-400 text-dark">
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-2"> 2 Likes</span>
                                                                                        </span>
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                                        </span>
                                                                                    </small>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @empty
                                                                @endforelse
                                                                <div id="add_reply{{{$comment->id}}}"></div>
                                                                {{-- @if($all_replies > 2)
                                                                    <div class="row mb-4">
                                                                        <small class="text-color font-xsss text-dark">Load more replies..</small>
                                                                    </div>
                                                                @endif --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                        @endforelse
                                        <div id="load-comment{{$feed->id}}"></div>
                                        <div id="add_comment{{$feed->id}}" class="mt-2"></div>
                                        @if($all_comments > 2)
                                            <div class="row mb-4" id="hide_load_comment{{$feed->id}}">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                            <div class="row mb-4" id="hide_load_more_comment{{$feed->id}}" style="display: none">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadMoreComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner1{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner1{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a href="#!" class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-comment-text-multiple font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">No result was found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="tab-pane fade" id="people" role="tabpanel" aria-labelledby="people-tab">
                    <div class="row">
                        @forelse ($users as $user)
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body d-block">
                                    <div class="row mb-4">
                                        <div class="col">
                                            <div class="d-flex">
                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p class="text-muted font-xssss -m-10"><i class="mdi mdi-user"></i>
                                                        @php
                                                            $follows = App\Models\Follower::where('followed_user_id', Auth::user()->id)->where('user_id', $user->id)->where('follow_status', 1)->first();
                                                        @endphp
                                                        @if($follows)
                                                            <mark> Follows you</mark> . {{$user->state}}, {{$user->country}}
                                                        @else
                                                            {{$user->state}}, {{$user->country}}
                                                        @endif
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-auto text-end">
                                            <h6 id="follow-no" style="display: none">{{$follower_count}}</h6>
                                            <form id="follow-form">
                                                <input type="hidden" name="followed_user_id" id="followed_id" value="{{$user->id}}">
                                                <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="follow_status" id="follow" value="1">
                                                @php
                                                    $followers = App\Models\Follower::where('user_id', Auth::user()->id)->get();
                                                    $user_has_followed = App\Models\Follower::where('followed_user_id', $user->id)->where('user_id', Auth::user()->id)->where('follow_status', 1)->first();
                                                    $user_has_unfollowed = App\Models\Follower::where('followed_user_id', $user->id)->where('user_id', Auth::user()->id)->where('follow_status', 0)->first();
                                                    $user_has_not_followed = App\Models\Follower::where('user_id', Auth::user()->id)->first();
                                                @endphp
                                                @if(count($followers) > 0)
                                                    @if($user_has_followed)
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</button>
                                                    @elseif($user_has_unfollowed)
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                                    @elseif($user_has_not_followed)
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                                        <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                                    @endif
                                                @else
                                                    <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                                    <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                                @endif
                                            </form>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="feather-users font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">No User found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="tab-pane fade" id="announcements" role="tabpanel" aria-labelledby="announcements-tab">
                    <div class="row">
                        @forelse($announcements as $feed)
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body d-block">
                                    <div class="row">
                                        <div class="col">
                                            <div class="d-flex">
                                                @php
                                                    $user = App\Models\User::where('id', $feed->user_id)->first();
                                                @endphp
                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p class="text-muted font-xssss"><i class="feather-clock"></i> Posted {{$feed->created_at->diffForHumans()}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @if(Auth::user()->id == $feed->user_id)
                                            <div class="col-auto">
                                                <div class="dropdown custom-drop">
                                                    <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fe fe-more-vertical"></i>
                                                    </a>
                                                    <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                        {{-- <div class="card-body p-0 d-flex">
                                                            <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                            <a href="#!">
                                                                <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                            </a>
                                                        </div> --}}
                                                        <form action="/feeds/delete-post/{{$feed->id}}" method="POST">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <div class="card-body p-0 d-flex">
                                                                <button type="submit" class="custom-btn-none" onclick="return deletePost();">
                                                                    <span class="button__text"><i class="mdi mdi-delete"></i> Delete</span>
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="pt-2 pb-2">{{$feed->content}}</p>
                                    @php
                                        $photos = json_decode($feed->photo_path);
                                        if($photos) {
                                            $photo_count = count($photos);
                                        }
                                    @endphp
                                    @if($photos)
                                        @if(count($photos) > 0 && count($photos) < 2)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col mb-2" style="padding: 0"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 1 && count($photos) < 3)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 2 && count($photos) < 4)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-4 col-xss-4 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 3 && count($photos) < 5)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 4)
                                            @php
                                                $n = 4; // to get the 4th image if the image count is greater than 3
                                            @endphp
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $key => $photo)
                                                        @if (in_array($key, [0,1,2,3]))
                                                            @if(($key + 1) % $n)
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                            @else
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2">
                                                                    <a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}">
                                                                    {{-- <a class="cursor-pointer" onclick="displayImages('{{$feed->id}}')"> --}}
                                                                        <img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                                                        @php
                                                                            $photo_no = $photo_count - 4;
                                                                        @endphp
                                                                        <span class="img-count font-sm text-white ls-3 fw-600">
                                                                            <b>+
                                                                                @if($photo_no > 0)
                                                                                    {{$photo_no}}
                                                                                @endif
                                                                            </b>
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if($feed->video_path)
                                        <div class="card-body">
                                            <div class="row justify-content-center">
                                                <div class="col mb-2" style="padding: 0">
                                                    <video controls class="w-100 rounded-3">
                                                        <source src="{{$feed->video_path}}" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if($feed->file_path)
                                        <div class="card-body">
                                            <div class="row ">
                                                <div class="col-12 pe-1 ps-1 mb-2">
                                                    <a class="w-full text-gray-700" href="{{$feed->file_path}}" target="_blank">
                                                        @php
                                                            $file_ext = pathinfo($feed->file_path, PATHINFO_EXTENSION);
                                                        @endphp
                                                        @if($file_ext == 'pdf')
                                                            <img src="{{asset('assets/images/pdf.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'doc')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'docx')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @else
                                                            <img src="{{asset('assets/images/document.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @endif
                                                        {{$feed->file_name}}
                                                        <span class="flex align items text-gray-600 dark:text-gray-300">
                                                            <i class="fe fe-download mx-2"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="d-flex mb-3">
                                        <p class="mr-4" id="like-div{{$feed->id}}">
                                            @php
                                                $like_count = App\Models\Like::where('feed_id', $feed->id)->where('like', 1)->count();
                                            @endphp
                                            @if($like_count > 0 && $like_count < 2)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> like </a>
                                            @elseif($like_count > 1)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @else
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @endif
                                        </p>
                                        <span id="show-no"></span>
                                        {{-- <p>
                                            <i class="mdi mdi-share-variant-outline text-pink"></i> 10 Shares
                                        </p> --}}
                                        <p>
                                            @php
                                                $comment_count = App\Models\Comment::where('feed_id', $feed->id)->count();
                                            @endphp
                                            <a class="text-gray-500 cursor-pointer" onclick="showComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple text-pink"></i> <span id="comment-no{{$feed->id}}">{{$comment_count}}</span>
                                                @if($comment_count <= 1)
                                                    comment
                                                @elseif($comment_count > 1)
                                                    comments
                                                @endif
                                            </a>
                                        </p>
                                    </div>
                                    <div class="d-flex border-top-xs pt-4">
                                        <form id="like-form">
                                            <p class="mr-4 cursor-pointer">
                                                <input type="hidden" name="user_id" id="user-id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" id="feed-id" value="{{$feed->id}}">
                                                @php
                                                    $likes = App\Models\Like::where('feed_id', $feed->id)->get();
                                                    $user_has_liked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 1)->first();
                                                    $user_has_unliked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 0)->first();
                                                    $user_has_not_liked = App\Models\Like::where('feed_id', $feed->id)->first();
                                                @endphp
                                                @if(count($likes) > 0)
                                                    @if($user_has_liked)
                                                        <span id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i> <span class="pl-1"> Liked</span></span>
                                                        <span style="display: none" id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_unliked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_not_liked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i></i><span class="pl-1"> Like</span></span>
                                                    @endif
                                                @else
                                                    <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                    <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                @endif
                                            </p>
                                        </form>
                                        <p class="mr-4">
                                            <span class="cursor-pointer" onclick="shareFeed('{{$feed->id}}')">
                                                <i class="mdi mdi-share-variant-outline font-md"></i> <span class="pl-1"> Share</span>
                                            </span>
                                        </p>
                                        <p class="cursor-pointer">
                                            <span id="show-comment{{$feed->id}}" onclick="postComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple font-md"></i> <span class="pl-1 -mt-1">Comment</span></span>
                                        </p>
                                    </div>
                                    <form id="comment-post{{$feed->id}}">
                                        @csrf
                                        <div class="row border-top-xs d-none pt-4" id="comment-box{{$feed->id}}">
                                            <div class="col-auto p-0">
                                                <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                            </div>
                                            <div class="col ms-n2">
                                                <label class="visually-hidden">Leave a comment...</label>
                                                <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                <input name="comment_body" id="comment-body{{$feed->id}}" onkeyup="commentPost('comment-body{{$feed->id}}', 'comment-btn{{$feed->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a comment..">
                                            </div>
                                            <div class="col-auto align-self-end">
                                                <div class="text-muted mb-2">
                                                    <button disabled class="text-color -mt-25 text-dark post_comment{{$feed->id}}" id="comment-btn{{$feed->id}}" style="opacity: .3; cursor: unset">
                                                        Comment
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    @php
                                        $comments = App\Models\Comment::where('feed_id', $feed->id)->orderBy('created_at', 'ASC')->limit(2)->get();
                                        $all_comments = App\Models\Comment::where('feed_id', $feed->id)->count();
                                    @endphp

                                    <div id="comments{{$feed->id}}" class="comment d-none mt-4 mb-4">
                                        @if(count($comments) > 0)
                                            <div class="row my-4">
                                                <small class="text-muted font-xsss text-dark">Most recent</small>
                                            </div>
                                        @endif
                                        @forelse($comments as $comment)
                                            <div class="row">
                                                <div class="col">
                                                    <div class="d-flex">
                                                        @php
                                                            $user = App\Models\User::where('id', $comment->user_id)->first();
                                                        @endphp
                                                        <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                        <div class="pl-3 ml-2 mb-4 comment-body w-100">
                                                            <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                <small class="text-muted text-dark font-xssss">{{$comment->created_at->diffForHumans()}}</small>
                                                            </a>
                                                            <p class="text-gray-400 text-dark">
                                                                {{$comment->comment_body}}
                                                            </p>
                                                            <small class="d-flex justify-content-between my-3 text-gray-400 text-dark">
                                                                <span class="d-flex">
                                                                    <span class="pr-2"> 2 Likes</span>
                                                                    <span class="pr-2">.</span>
                                                                    @php
                                                                        $reply_count = App\Models\CommentReply::where('comment_id', $comment->id)->where('feed_id', $feed->id)->count();
                                                                    @endphp
                                                                    <span class="cursor-pointer" onclick="showReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}', 'post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')">
                                                                        <span id="reply-no{{$comment->id}}">{{$reply_count}}</span>
                                                                        @if($reply_count <= 1)
                                                                            reply
                                                                        @elseif($reply_count > 1)
                                                                            replies
                                                                        @endif
                                                                    </span>
                                                                </span>
                                                                <span class="d-flex">
                                                                    <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                    <span class="cursor-pointer" id="show-reply{{$comment->id}}" onclick="postReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}','post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')"><i class="mdi mdi-arrow-right-top pr-2"></i>Reply</span>
                                                                </span>
                                                            </small>
                                                            <form id="reply-post{{$comment->id}}">
                                                                @csrf
                                                                <div class="row border-top-xs d-none pt-4" id="reply-box{{$comment->id}}">
                                                                    <div class="col-auto p-0">
                                                                        <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                                    </div>
                                                                    <div class="col ms-n2">
                                                                        <label class="visually-hidden">Reply...</label>
                                                                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                                        <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                                        <input type="hidden" name="comment_id" value="{{$comment->id}}">
                                                                        <input name="comment_reply_body" required id="reply-body{{$comment->id}}" onkeyup="replyPost('reply-body{{$comment->id}}', 'reply-btn{{$comment->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a reply..">
                                                                    </div>
                                                                    <div class="col-auto align-self-end">
                                                                        <div class="text-muted mb-2">
                                                                            <button class="text-color -mt-25 text-dark post_reply{{$comment->id}}" id="reply-btn{{$comment->id}}" style="opacity: .3; cursor: unset" disabled>
                                                                                Reply
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                            @php
                                                                $comment_replies = App\Models\CommentReply::where('comment_id', $comment->id)->orderBy('created_at', 'ASC')->get();
                                                                $all_replies = App\Models\CommentReply::where('comment_id', $comment->id)->count();
                                                            @endphp
                                                            <div id="replies{{$comment->id}}" class="comment d-none mt-4 mb-4">
                                                                @forelse($comment_replies as $reply)
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="d-flex">
                                                                                @php
                                                                                    $user = App\Models\User::where('id', $reply->user_id)->first();
                                                                                @endphp
                                                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover; margin-top: 1rem">
                                                                                <div class="pl-3 ml-2 comment-body w-100">
                                                                                    <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                                        <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                                        <small class="text-muted text-dark font-xssss">{{$reply->created_at->diffForHumans()}}</small>
                                                                                    </a>
                                                                                    <p class="text-gray-400 text-dark">
                                                                                        {{$reply->comment_reply_body}}
                                                                                    </p>
                                                                                    <small class="d-flex justify-content-between mt-3 text-gray-400 text-dark">
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-2"> 2 Likes</span>
                                                                                        </span>
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                                        </span>
                                                                                    </small>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @empty
                                                                @endforelse
                                                                <div id="add_reply{{{$comment->id}}}"></div>
                                                                {{-- @if($all_replies > 2)
                                                                    <div class="row mb-4">
                                                                        <small class="text-color font-xsss text-dark">Load more replies..</small>
                                                                    </div>
                                                                @endif --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                        @endforelse
                                        <div id="load-comment{{$feed->id}}"></div>
                                        <div id="add_comment{{$feed->id}}" class="mt-2"></div>
                                        @if($all_comments > 2)
                                            <div class="row mb-4" id="hide_load_comment{{$feed->id}}">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                            <div class="row mb-4" id="hide_load_more_comment{{$feed->id}}" style="display: none">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadMoreComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner1{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner1{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a  class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-comment-text-multiple font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">No result was found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
                <div class="tab-pane fade" id="forum" role="tabpanel" aria-labelledby="forum-tab">
                    <div class="row">
                        @forelse($forums as $feed)
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body d-block">
                                    <div class="row">
                                        <div class="col">
                                            <div class="d-flex">
                                                @php
                                                    $user = App\Models\User::where('id', $feed->user_id)->first();
                                                @endphp
                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                <div class="pl-2">
                                                    <a href="{{route('account.profile', $user->id)}}"><h6>{{$user->first_name}} {{$user->last_name}}</h6></a>
                                                    <p class="text-muted font-xssss"><i class="feather-clock"></i> Posted {{$feed->created_at->diffForHumans()}}</p>
                                                </div>
                                            </div>
                                        </div>
                                        @if(Auth::user()->id == $feed->user_id)
                                            <div class="col-auto">
                                                <div class="dropdown custom-drop">
                                                    <a class="dropdown-toggle text-dark" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                                                        <i class="fe fe-more-vertical"></i>
                                                    </a>
                                                    <div class="dropdown-menu custom-dropdown dropdown-menu-end p-4 rounded-3 border-0 shadow-xss">
                                                        {{-- <div class="card-body p-0 d-flex">
                                                            <i class="mdi mdi-pencil text-grey-500 me-3 font-xss" aria-hidden="true"></i>
                                                            <a href="#!">
                                                                <h6 class="fw-600 text-grey-500 mt-1 me-4 setting">Edit</h6>
                                                            </a>
                                                        </div> --}}
                                                        <form action="/feeds/delete-post/{{$feed->id}}" method="POST">
                                                            {{ csrf_field() }}
                                                            {{ method_field('DELETE') }}
                                                            <div class="card-body p-0 d-flex">
                                                                <button type="submit" class="custom-btn-none" onclick="return deletePost();">
                                                                    <span class="button__text"><i class="mdi mdi-delete"></i> Delete</span>
                                                                </button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>
                                    <p class="pt-2 pb-2">{{$feed->content}}</p>
                                    @php
                                        $photos = json_decode($feed->photo_path);
                                        if($photos) {
                                            $photo_count = count($photos);
                                        }
                                    @endphp
                                    @if($photos)
                                        @if(count($photos) > 0 && count($photos) < 2)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col mb-2" style="padding: 0"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 1 && count($photos) < 3)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 2 && count($photos) < 4)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-4 col-xss-4 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 3 && count($photos) < 5)
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $photo)
                                                        <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                    @endforeach
                                                </div>
                                            </div>
                                        @elseif(count($photos) > 4)
                                            @php
                                                $n = 4; // to get the 4th image if the image count is greater than 3
                                            @endphp
                                            <div class="card-body">
                                                <div class="row">
                                                    @foreach ($photos as $key => $photo)
                                                        @if (in_array($key, [0,1,2,3]))
                                                            @if(($key + 1) % $n)
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2"><a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}"><img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3"></a></div>
                                                            @else
                                                                <div class="col-sm-6 col-xss-6 pe-1 ps-1 mb-2">
                                                                    <a href="{{url('storage/'.$photo)}}" data-lightbox="{{$feed->id}}">
                                                                    {{-- <a class="cursor-pointer" onclick="displayImages('{{$feed->id}}')"> --}}
                                                                        <img src="{{url('storage/'.$photo)}}" alt="image" class="img-fluid object-cover h300 w-100 rounded-3">
                                                                        @php
                                                                            $photo_no = $photo_count - 4;
                                                                        @endphp
                                                                        <span class="img-count font-sm text-white ls-3 fw-600">
                                                                            <b>+
                                                                                @if($photo_no > 0)
                                                                                    {{$photo_no}}
                                                                                @endif
                                                                            </b>
                                                                        </span>
                                                                    </a>
                                                                </div>
                                                            @endif
                                                        @endif
                                                    @endforeach
                                                </div>
                                            </div>
                                        @endif
                                    @endif
                                    @if($feed->video_path)
                                        <div class="card-body">
                                            <div class="row justify-content-center">
                                                <div class="col mb-2" style="padding: 0">
                                                    <video controls class="w-100 rounded-3">
                                                        <source src="{{$feed->video_path}}" type="video/mp4">
                                                    </video>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    @if($feed->file_path)
                                        <div class="card-body">
                                            <div class="row ">
                                                <div class="col-12 pe-1 ps-1 mb-2">
                                                    <a class="w-full text-gray-700" href="{{$feed->file_path}}" target="_blank">
                                                        @php
                                                            $file_ext = pathinfo($feed->file_path, PATHINFO_EXTENSION);
                                                        @endphp
                                                        @if($file_ext == 'pdf')
                                                            <img src="{{asset('assets/images/pdf.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'doc')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @elseif($file_ext == 'docx')
                                                            <img src="{{asset('assets/images/doc.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @else
                                                            <img src="{{asset('assets/images/document.png')}}" class="h-2 w-2 mr-2" alt="{{$feed->file_name}}">
                                                        @endif
                                                        {{$feed->file_name}}
                                                        <span class="flex align items text-gray-600 dark:text-gray-300">
                                                            <i class="fe fe-download mx-2"></i>
                                                        </span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    @endif
                                    <div class="d-flex mb-3">
                                        <p class="mr-4" id="like-div{{$feed->id}}">
                                            @php
                                                $like_count = App\Models\Like::where('feed_id', $feed->id)->where('like', 1)->count();
                                            @endphp
                                            @if($like_count > 0 && $like_count < 2)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> like </a>
                                            @elseif($like_count > 1)
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @else
                                                <a href="{{route('feed.liked-users', $feed->id)}}" class="text-gray-500"><i class="mdi mdi-heart-outline text-red"></i> <span id="like-no{{$feed->id}}">{{$like_count}}</span> likes </a>
                                            @endif
                                        </p>
                                        <span id="show-no"></span>
                                        {{-- <p>
                                            <i class="mdi mdi-share-variant-outline text-pink"></i> 10 Shares
                                        </p> --}}
                                        <p>
                                            @php
                                                $comment_count = App\Models\Comment::where('feed_id', $feed->id)->count();
                                            @endphp
                                            <a class="text-gray-500 cursor-pointer" onclick="showComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple text-pink"></i> <span id="comment-no{{$feed->id}}">{{$comment_count}}</span>
                                                @if($comment_count <= 1)
                                                    comment
                                                @elseif($comment_count > 1)
                                                    comments
                                                @endif
                                            </a>
                                        </p>
                                    </div>
                                    <div class="d-flex border-top-xs pt-4">
                                        <form id="like-form">
                                            <p class="mr-4 cursor-pointer">
                                                <input type="hidden" name="user_id" id="user-id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" id="feed-id" value="{{$feed->id}}">
                                                @php
                                                    $likes = App\Models\Like::where('feed_id', $feed->id)->get();
                                                    $user_has_liked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 1)->first();
                                                    $user_has_unliked = App\Models\Like::where('feed_id', $feed->id)->where('user_id', Auth::user()->id)->where('like', 0)->first();
                                                    $user_has_not_liked = App\Models\Like::where('feed_id', $feed->id)->first();
                                                @endphp
                                                @if(count($likes) > 0)
                                                    @if($user_has_liked)
                                                        <span id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i> <span class="pl-1"> Liked</span></span>
                                                        <span style="display: none" id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_unliked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                    @elseif($user_has_not_liked)
                                                        <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                        <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i></i><span class="pl-1"> Like</span></span>
                                                    @endif
                                                @else
                                                    <span id="like-btn{{$feed->id}}" onclick="like('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1"> Like</span></span>
                                                    <span style="display: none" id="unlike-btn{{$feed->id}}" onclick="unLike('{{$like_count}}', 'unlike-btn{{$feed->id}}', 'like-btn{{$feed->id}}', 'like-div{{$feed->id}}', 'like-no{{$feed->id}}', '{{$feed->id}}', '{{Auth::user()->id}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                                @endif
                                            </p>
                                        </form>
                                        <p class="mr-4">
                                            <span class="cursor-pointer" onclick="shareFeed('{{$feed->id}}')">
                                                <i class="mdi mdi-share-variant-outline font-md"></i> <span class="pl-1"> Share</span>
                                            </span>
                                        </p>
                                        <p class="cursor-pointer">
                                            <span id="show-comment{{$feed->id}}" onclick="postComment('show-comment{{$feed->id}}', 'comment-box{{$feed->id}}', 'comment-body{{$feed->id}}', '{{Auth::user()->id}}', '{{$feed->id}}', 'comment-btn{{$feed->id}}', 'post_comment{{$feed->id}}', 'comment-post{{$feed->id}}', 'comment-no{{$feed->id}}', 'add_comment{{$feed->id}}', 'comments{{$feed->id}}')"><i class="mdi mdi-comment-text-multiple font-md"></i> <span class="pl-1 -mt-1">Comment</span></span>
                                        </p>
                                    </div>
                                    <form id="comment-post{{$feed->id}}">
                                        @csrf
                                        <div class="row border-top-xs d-none pt-4" id="comment-box{{$feed->id}}">
                                            <div class="col-auto p-0">
                                                <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                            </div>
                                            <div class="col ms-n2">
                                                <label class="visually-hidden">Leave a comment...</label>
                                                <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                <input name="comment_body" id="comment-body{{$feed->id}}" onkeyup="commentPost('comment-body{{$feed->id}}', 'comment-btn{{$feed->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a comment..">
                                            </div>
                                            <div class="col-auto align-self-end">
                                                <div class="text-muted mb-2">
                                                    <button disabled class="text-color -mt-25 text-dark post_comment{{$feed->id}}" id="comment-btn{{$feed->id}}" style="opacity: .3; cursor: unset">
                                                        Comment
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                    @php
                                        $comments = App\Models\Comment::where('feed_id', $feed->id)->orderBy('created_at', 'ASC')->limit(2)->get();
                                        $all_comments = App\Models\Comment::where('feed_id', $feed->id)->count();
                                    @endphp

                                    <div id="comments{{$feed->id}}" class="comment d-none mt-4 mb-4">
                                        @if(count($comments) > 0)
                                            <div class="row my-4">
                                                <small class="text-muted font-xsss text-dark">Most recent</small>
                                            </div>
                                        @endif
                                        @forelse($comments as $comment)
                                            <div class="row">
                                                <div class="col">
                                                    <div class="d-flex">
                                                        @php
                                                            $user = App\Models\User::where('id', $comment->user_id)->first();
                                                        @endphp
                                                        <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                        <div class="pl-3 ml-2 mb-4 comment-body w-100">
                                                            <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                <small class="text-muted text-dark font-xssss">{{$comment->created_at->diffForHumans()}}</small>
                                                            </a>
                                                            <p class="text-gray-400 text-dark">
                                                                {{$comment->comment_body}}
                                                            </p>
                                                            <small class="d-flex justify-content-between my-3 text-gray-400 text-dark">
                                                                <span class="d-flex">
                                                                    <span class="pr-2"> 2 Likes</span>
                                                                    <span class="pr-2">.</span>
                                                                    @php
                                                                        $reply_count = App\Models\CommentReply::where('comment_id', $comment->id)->where('feed_id', $feed->id)->count();
                                                                    @endphp
                                                                    <span class="cursor-pointer" onclick="showReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}', 'post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')">
                                                                        <span id="reply-no{{$comment->id}}">{{$reply_count}}</span>
                                                                        @if($reply_count <= 1)
                                                                            reply
                                                                        @elseif($reply_count > 1)
                                                                            replies
                                                                        @endif
                                                                    </span>
                                                                </span>
                                                                <span class="d-flex">
                                                                    <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                    <span class="cursor-pointer" id="show-reply{{$comment->id}}" onclick="postReply('show-reply{{$comment->id}}', 'reply-box{{$comment->id}}', 'reply-body{{$comment->id}}', '{{Auth::user()->id}}', '{{$comment->id}}', '{{$feed->id}}', 'reply-btn{{$comment->id}}','post_reply{{$comment->id}}', 'reply-post{{$comment->id}}', 'reply-no{{$comment->id}}', 'add_reply{{$comment->id}}', 'replies{{$comment->id}}')"><i class="mdi mdi-arrow-right-top pr-2"></i>Reply</span>
                                                                </span>
                                                            </small>
                                                            <form id="reply-post{{$comment->id}}">
                                                                @csrf
                                                                <div class="row border-top-xs d-none pt-4" id="reply-box{{$comment->id}}">
                                                                    <div class="col-auto p-0">
                                                                        <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                                                                    </div>
                                                                    <div class="col ms-n2">
                                                                        <label class="visually-hidden">Reply...</label>
                                                                        <input type="hidden" name="user_id" value="{{Auth::user()->id}}">
                                                                        <input type="hidden" name="feed_id" value="{{$feed->id}}">
                                                                        <input type="hidden" name="comment_id" value="{{$comment->id}}">
                                                                        <input name="comment_reply_body" required id="reply-body{{$comment->id}}" onkeyup="replyPost('reply-body{{$comment->id}}', 'reply-btn{{$comment->id}}')" class="form-control h50 br-50" data-autosize rows="1" placeholder="Add a reply..">
                                                                    </div>
                                                                    <div class="col-auto align-self-end">
                                                                        <div class="text-muted mb-2">
                                                                            <button class="text-color -mt-25 text-dark post_reply{{$comment->id}}" id="reply-btn{{$comment->id}}" style="opacity: .3; cursor: unset" disabled>
                                                                                Reply
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </form>
                                                            @php
                                                                $comment_replies = App\Models\CommentReply::where('comment_id', $comment->id)->orderBy('created_at', 'ASC')->get();
                                                                $all_replies = App\Models\CommentReply::where('comment_id', $comment->id)->count();
                                                            @endphp
                                                            <div id="replies{{$comment->id}}" class="comment d-none mt-4 mb-4">
                                                                @forelse($comment_replies as $reply)
                                                                    <div class="row">
                                                                        <div class="col">
                                                                            <div class="d-flex">
                                                                                @php
                                                                                    $user = App\Models\User::where('id', $reply->user_id)->first();
                                                                                @endphp
                                                                                <img src="{{$user->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover; margin-top: 1rem">
                                                                                <div class="pl-3 ml-2 comment-body w-100">
                                                                                    <a href="{{route('account.profile', $user->id)}}" class="d-flex justify-content-between">
                                                                                        <h6>{{$user->first_name}} {{$user->last_name}}</h6>
                                                                                        <small class="text-muted text-dark font-xssss">{{$reply->created_at->diffForHumans()}}</small>
                                                                                    </a>
                                                                                    <p class="text-gray-400 text-dark">
                                                                                        {{$reply->comment_reply_body}}
                                                                                    </p>
                                                                                    <small class="d-flex justify-content-between mt-3 text-gray-400 text-dark">
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-2"> 2 Likes</span>
                                                                                        </span>
                                                                                        <span class="d-flex">
                                                                                            <span class="pr-3 cursor-pointer"><i class="mdi mdi-heart-outline"></i></span>
                                                                                        </span>
                                                                                    </small>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                @empty
                                                                @endforelse
                                                                <div id="add_reply{{{$comment->id}}}"></div>
                                                                {{-- @if($all_replies > 2)
                                                                    <div class="row mb-4">
                                                                        <small class="text-color font-xsss text-dark">Load more replies..</small>
                                                                    </div>
                                                                @endif --}}
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @empty
                                        @endforelse
                                        <div id="load-comment{{$feed->id}}"></div>
                                        <div id="add_comment{{$feed->id}}" class="mt-2"></div>
                                        @if($all_comments > 2)
                                            <div class="row mb-4" id="hide_load_comment{{$feed->id}}">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                            <div class="row mb-4" id="hide_load_more_comment{{$feed->id}}" style="display: none">
                                                <small class="text-color d-flex font-xsss text-dark cursor-pointer" onclick="loadMoreComments('load-comment{{$feed->id}}', '{{$feed->id}}', 'spinner1{{$feed->id}}', 'hide_load_comment{{$feed->id}}', 'hide_load_more_comment{{$feed->id}}')">
                                                    <div class="spinner-border" id="spinner1{{$feed->id}}" style="display: none" role="status">
                                                        <span class="sr-only">Loading...</span>
                                                    </div>
                                                    <span>Load more comments..</span>
                                                </small>
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @empty
                            <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                                <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                                    <a  class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="mdi mdi-comment-text-multiple font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                                    <p class="pt-2">No result was found</p>
                                </div>
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-12 col-xxl-4 col-lg-4">
        <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
            <div class="card-body p-0 my-3">
                <div class="row">
                    <div class="col">
                        <h5 class="mb-4">Search filters</h5>
                    </div>
                </div>
                @if(tenantSetting($_SERVER['HTTP_HOST']) !== '')
                    @if(tenantSetting($_SERVER['HTTP_HOST'])->verify_status == 1)
                        <div class="form-group">
                            <label class="form-label mb-2">
                                Call to bar year
                            </label>
                            <form action="{{ route('search') }}" method="GET">
                                <div class="row">
                                    <div class="col-8 col-xl-8 col-lg-8">
                                        <input type="hidden" name="search_result" value="{{$search}}">
                                                                                <select name="year" class="form-select w-100 custom-h-50 pt-12">
                                            @foreach($years as $year)
                                                <option value="{{$year}}" {{ $year == $selected_year['ctb'] ? 'selected' : '' }}>{{$year}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-4 col-xl-4 col-lg-4">
                                        <div class="-ml-15">
                                            <button class="custom-btn-outline button_load rounded-2" onclick="this.classList.toggle('button--loading1')">
                                                <span class="button__text1">Filter</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    @endif
                @endif
                @if(count($locations) > 0)
                    <div class="form-group">
                        <label class="form-label mb-2">
                            Location
                        </label>
                        <form action="{{ route('search') }}" method="GET">
                            <div class="row">
                                <div class="col-8 col-xl-8 col-lg-8">
                                    <input type="hidden" name="search_result" value="{{$search}}">
                                    <select name="location" class="form-select w-100 custom-h-50 pt-12">
                                        @foreach($locations as $location)
                                            <option value="{{$location}}" {{ $location == $selected_location['state'] ? 'selected' : '' }}>{{$location}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-4 col-xl-4 col-lg-4">
                                    <div class="-ml-15">
                                        <button class="custom-btn-outline button_load rounded-2" onclick="this.classList.toggle('button--loading1')">
                                            <span class="button__text1">Filter</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@include('elements.ask-question')
@include('elements.feeds-script')
@endsection