@extends('layouts.landing')

@section('title', 'Feeds')


@section('content')
    <style>
        .custom-side {
            position: fixed;
            float: right;
            right: 0;
            width: 28%;
        }

        @media screen and (min-width: 250px) and (max-width: 768px) {
            .custom-side {
                position: relative;
                right: 0;
                width: auto;
            }
        }
    </style>
    <link rel="stylesheet" href="{{ asset('assets/css/stories.css') }}">
    <link href="https://unpkg.com/cropperjs/dist/cropper.css" rel="stylesheet" />
    <script src="https://unpkg.com/cropperjs"></script>
    <div class="row mb-4 mobile-mt-10">
        @include('alerts.alerts')
        <div class="col-12 col-xxl-8 col-lg-8">
            <div class="custom-container card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                <div class="story-container">
                    <div class="content" onclick="createStory()">
                        <div class="img-container">
                            <div class="text-center add-icon">
                                <i class="mdi mdi-plus"></i>
                            </div>
                        </div>
                        <div class="text-container">
                            Add story
                        </div>
                        {{-- <button onclick="showBell()">Click me</button> --}}
                    </div>
                    @if (count($my_stories) > 0)
                        @foreach ($my_stories[Auth::user()->id] as $story)
                            @php
                                $add_day = $story->created_at->addDay(1); // remove story after 24 hours
                                $viewed_story_count = App\Models\ViewedStory::where('story_id', $story->id)->count();
                                $story_created = $story->created_at->diffForHumans();
                                // dd($story);
                            @endphp
                            @if (now() <= $add_day)
                                <div class="content"
                                    onclick="showStory(`{{ Auth::user()->id }}`, `{{ Auth::user()->avatar }}`, `{{ Auth::user()->first_name }}`, `{{ Auth::user()->last_name }}`, `{{ @$story_created }}`, `{{ @$story->photo_path }}`, `{{ @$story->video_path }}`, `{{ @$story->caption }}`, `{{ @$viewed_story_count }}`, `{{ @$story->id }}`)">
                                    <div class="img-container">
                                        <img src="{{ Auth::user()->avatar }}" alt="">
                                    </div>
                                    <div class="text-container">
                                        {{ Auth::user()->first_name }} {{ Auth::user()->last_name }}
                                    </div>
                                </div>
                            @endif
                        @endforeach

                    @endif

                    @if (count($user_stories_id) > 0)

                        @foreach ($user_stories_id as $key => $user_id)
                            @foreach ($stories[$key] as $story)
                                @php
                                    $add_day = $story->created_at->addDay(1); // remove story after 24 hours
                                    $user = App\Models\User::where('id', $story->user_id)->first();
                                    $viewed_story_count = App\Models\ViewedStory::where('story_id', $story->id)->count();
                                    $story_created = $story->created_at->diffForHumans();
                                @endphp
                                @if (now() <= $add_day)
                                    <div class="content"
                                        onclick="showStory(`{{ $user->id }}`, `{{ $user->avatar }}`, `{{ $user->first_name }}`, `{{ $user->last_name }}`, `{{ @$story_created }}`, `{{ @$story->photo_path }}`, `{{ @$story->video_path }}`, `{{ @$story->caption }}`, `{{ @$viewed_story_count }}`, `{{ @$story->id }}`)">
                                        <div class="img-container">
                                            <img src="{{ $user->avatar }}" alt="">
                                        </div>
                                        <div class="text-container">
                                            {{ $user->first_name }} {{ $user->last_name }}
                                        </div>
                                    </div>
                                @endif
                            @endforeach
                        @endforeach

                    @endif
                </div>
            </div>
            <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">
                    <figure class="avatar position-absolute ms-2 mt-1 top-5"><img src="{{ Auth::user()->avatar }}"
                            alt="image" class="shadow-sm rounded-circle h48 w50" style="object-fit: cover"></figure>
                    <input type="text" onclick="createPost()"
                        class="border-0 w-100 py-4 font-xss custom-pl text-grey-500 fw-500 border-light-md theme-dark-bg"
                        placeholder="What's on your mind {{ Auth::user()->first_name }}?">
                </div>
                <div class="card-body p-0 my-2">
                    <div class="row">
                        <div class="col">
                            <div class="d-flex mt-3 ml-3">
                                <a onclick="createPost()"
                                    class="align-items-center cursor-pointer font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i
                                        class="font-md text-success feather-image me-2"></i><span
                                        class="d-none-xs">Photos</span></a>
                                <a onclick="createPost()"
                                    class="align-items-center cursor-pointer font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i
                                        class="font-md text-danger feather-video me-2"></i><span
                                        class="d-none-xs">Video</span></a>
                                <a onclick="createPost()"
                                    class="align-items-center cursor-pointer font-xssss fw-600 ls-1 text-grey-700 text-dark pe-4"><i
                                        class="font-md text-warning feather-file me-2"></i><span
                                        class="d-none-xs">Files</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @if (isset($feed))
                <div class="card w-100 shadow-xss rounded-xxl border-0 pt-4 pb-3 mb-3 mt-3">
                    <div class="d-block">
                        <div class="row ps-4 pe-4">
                            <div class="col">
                                <div class="d-flex">
                                    @php
                                        $user = App\Models\User::where('id', $feed->user_id)->first();
                                    @endphp
                                    <a href="{{ route('account.profile', $user->id) }}">
                                        <img src="{{ $user->avatar }}" class="w50 h50 rounded-circle"
                                            style="object-fit: cover">
                                    </a>
                                    <div class="pl-2">
                                        <a href="{{ route('account.profile', $user->id) }}" class="d-flex">
                                            <h6 class="mr-1">{{ $user->first_name }} {{ $user->last_name }} </h6>
                                            @if (Auth::user()->creatorId() == $user->id)
                                                <img src="{{ asset('assets/images/verify.png') }}" class="h20"
                                                    alt="">
                                            @endif
                                        </a>
                                        <p class="text-muted font-xssss"> {{ $feed->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto d-flex">
                                @if (Auth::user()->isModerator())
                                    @if ($feed->general_pinned_post == 0)
                                        <div class="mr-3">
                                            <form action="{{ route('feed.pin-feed') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="feed_id" value="{{ $feed->id }}">
                                                <input type="hidden" name="general_pinned_post" value="1">
                                                <button type="submit" name="general_pin_post"
                                                    class="custom-btn-none text-dark">
                                                    <i class="mdi mdi-pin"></i> Pin post
                                                </button>
                                            </form>
                                        </div>
                                    @elseif($feed->general_pinned_post == 1)
                                        <div class="mr-3">
                                            <form action="{{ route('feed.pin-feed') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="feed_id" value="{{ $feed->id }}">
                                                <input type="hidden" name="general_pinned_post" value="0">
                                                <button type="submit" name="general_unpin_post" onmouseover="unpin(this)"
                                                    onmouseout="pin(this)" class="custom-btn-none text-color">
                                                    <i class="mdi mdi-pin"></i> Pinned
                                                </button>
                                            </form>
                                        </div>
                                    @endif
                                @else
                                    @if ($feed->general_pinned_post == 1)
                                        <div class="mr-3">
                                            <span class="text-color">
                                                <i class="mdi mdi-pin"></i> Pinned
                                            </span>
                                        </div>
                                    @endif
                                @endif
                                @if (Auth::user()->id == $feed->user_id)
                                    <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 text-gray-900 text-dark"
                                                        onclick="return deletePost();">
                                                        <i class="mdi mdi-delete"></i> Delete
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>


                        {{-- <p class="pt-2 ps-4 pe-4 pb-2">
                            {!! preg_replace(
                                '~[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]~',
                                "<a href=\"\\0\" target='_blank' class='text-color'>\\0</a>",
                                $feed->content,
                            ) !!}
                        </p> --}}
                        <div style="padding: 0px 15px" class="pt-2 ps-4 pe-4 pb-2">
                            {!! $feed->content !!}
                        </div>

                        @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"></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"></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"></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"></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"></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 }}">
                                                            <img src="{{ url('storage/' . $photo) }}" alt="image"
                                                                class="img-fluid object-cover h300 w-100">
                                                            @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 controlsList="nodownload" class="js-player w-100"
                                            data-plyr-config='{ "ratio": "16:9" }'>
                                            <source src="{{ $feed->video_path }}" type="video/mp4">
                                        </video>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($feed->file_path)
                            <div class="card-body">
                                <div class="row pt-2 ps-4 pe-4">
                                    <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 ps-4 pe-4 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> like </a>
                                @endif
                            </p>
                            <span id="show-no"></span>
                            <p>
                                @php
                                    $comment_count = App\Models\Comment::where('feed_id', $feed->id)->count();
                                @endphp
                                <button type="button" id="{{ $feed->id }}"
                                    class="text-gray-500 comment-btn custom-btn-none cursor-pointer"><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
                                </button>
                            </p>
                        </div>
                        <div class="border-top-xs">
                            <div class="d-flex ps-4 pe-4 pt-4">
                                <form id="like-form{{ $feed->id }}" class="like-form">
                                    <p class="mr-4 cursor-pointer">
                                        @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)
                                                ->where('user_id', '<>', Auth::user()->id)
                                                ->count();
                                        @endphp
                                        @if (count($likes) > 0)
                                            @if ($user_has_liked)
                                                <button type="button" class="unlike-btn"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i> <span class="pl-1">
                                                        Liked</span>
                                                </button>
                                                <button class="like-btn" type="button" style="display: none"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i><span
                                                        class="pl-1"> Like</span>
                                                </button>
                                            @elseif($user_has_unliked)
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @elseif($user_has_not_liked < 1)
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @else
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @endif
                                        @else
                                            <button class="like-btn" type="button" id="like-btn{{ $feed->id }}">
                                                <i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1">
                                                    Like</span>
                                            </button>
                                            <button class="unlike-btn" type="button" style="display: none"
                                                id="unlike-btn{{ $feed->id }}">
                                                <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                    Like</span>
                                            </button>
                                        @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">
                                    <button class="comment-btn-2 custom-btn-none" id="show-comment{{ $feed->id }}">
                                        <i class="mdi mdi-comment-text-multiple font-md"></i>
                                        <span class="pl-1 -mt-1">Comment</span>
                                    </button>
                                </p>
                            </div>
                        </div>
                        <form id="comment-form{{ $feed->id }}" class="comment-form ps-4 pe-4">
                            <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 name="comment_body" required id="comment-body{{ $feed->id }}"
                                        class="form-control comment-input 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 type="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 class="ps-4 pe-4 pt-2">
                            <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
                                <div class="spinner-border text-color" id="spin{{ $feed->id }}"
                                    style="display: none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <div id="load-comment{{ $feed->id }}"></div>
                                <div id="load-new-comment{{ $feed->id }}"></div>
                                <div id="load-more-new-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">
                                            <div class="spinner-border" id="spinner{{ $feed->id }}"
                                                style="display: none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            <button type="button" class="load-more cutom-btn-none text-color"
                                                id="load-more{{ $feed->id }}">Load more comments..</button>
                                        </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">
                                            <div class="spinner-border" id="spinner1{{ $feed->id }}"
                                                style="display: none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            <button type="button" class="load-more-comments custom-btn-none text-color"
                                                id="load-more-comments{{ $feed->id }}">Load more comments..</button>
                                        </small>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endif
            <div id="new-feed"></div>
            @forelse($feeds as $feed)
                <div class="card w-100 shadow-xss rounded-xxl border-0 pt-4 pb-3 mb-3 mt-3">
                    <div class="d-block">
                        <div class="row ps-4 pe-4">
                            <div class="col">
                                <div class="d-flex">
                                    @php
                                        $user = App\Models\User::where('id', $feed->user_id)->first();
                                    @endphp
                                    <a href="{{ route('account.profile', $user->id) }}">
                                        <img src="{{ $user->avatar }}" class="w50 h50 rounded-circle"
                                            style="object-fit: cover">
                                    </a>
                                    <div class="pl-2">
                                        <a href="{{ route('account.profile', $user->id) }}" class="d-flex">
                                            <h6 class="mr-1">{{ $user->first_name }} {{ $user->last_name }} </h6>
                                            @if (Auth::user()->creatorId() == $user->id)
                                                <img src="{{ asset('assets/images/verify.png') }}" class="h20"
                                                    alt="">
                                            @endif
                                        </a>
                                        <p class="text-muted font-xssss"> {{ $feed->created_at->diffForHumans() }}</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-auto d-flex">
                                @if (Auth::user()->isModerator())
                                    @if ($feed->general_pinned_post == 0)
                                        <div class="mr-3">
                                            <form action="{{ route('feed.pin-feed') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="feed_id" value="{{ $feed->id }}">
                                                <input type="hidden" name="general_pinned_post" value="1">
                                                <button type="submit" name="general_pin_post"
                                                    class="custom-btn-none text-dark">
                                                    <i class="mdi mdi-pin"></i> Pin post
                                                </button>
                                            </form>
                                        </div>
                                    @elseif($feed->general_pinned_post == 1)
                                        <div class="mr-3">
                                            <form action="{{ route('feed.pin-feed') }}" method="POST">
                                                @csrf
                                                <input type="hidden" name="feed_id" value="{{ $feed->id }}">
                                                <input type="hidden" name="general_pinned_post" value="0">
                                                <button type="submit" name="general_unpin_post"
                                                    onmouseover="unpin(this)" onmouseout="pin(this)"
                                                    class="custom-btn-none text-color">
                                                    <i class="mdi mdi-pin"></i> Pinned
                                                </button>
                                            </form>
                                        </div>
                                    @endif
                                @else
                                    @if ($feed->general_pinned_post == 1)
                                        <div class="mr-3">
                                            <span class="text-color">
                                                <i class="mdi mdi-pin"></i> Pinned
                                            </span>
                                        </div>
                                    @endif
                                @endif
                                @if (Auth::user()->id == $feed->user_id)
                                    <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 class="btn" onclick="editPost({{ $feed }})">
                                                    <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 text-gray-900 text-dark"
                                                        onclick="return deletePost();">
                                                        <i class="mdi mdi-delete"></i> Delete
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>

                        {{-- <p class="pt-2 ps-4 pe-4 pb-2">
                            {!! preg_replace(
                                '~[[:alpha:]]+://[^<>[:space:]]+[[:alnum:]/]~',
                                "<a href=\"\\0\" target='_blank' class='text-color'>\\0</a>",
                                $feed->content,
                            ) !!}
                        </p> --}}

                        <div style="padding: 0px 15px" class="pt-2 ps-4 pe-4 pb-2">
                            {!! $feed->content !!}
                        </div>

                        @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"></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"></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"></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"></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"></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">
                                                            @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 controlsList="nodownload" class="js-player w-100"
                                            data-plyr-config='{ "ratio": "16:9" }'>
                                            <source src="{{ $feed->video_path }}" type="video/mp4">
                                        </video>
                                    </div>
                                </div>
                            </div>
                        @endif
                        @if ($feed->file_path)
                            <div class="card-body">
                                <div class="row pt-2 ps-4 pe-4">
                                    <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 ps-4 pe-4 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> like </a>
                                @endif
                            </p>
                            <span id="show-no"></span>
                            <p>
                                @php
                                    $comment_count = App\Models\Comment::where('feed_id', $feed->id)->count();
                                @endphp
                                <button type="button" id="{{ $feed->id }}"
                                    class="text-gray-500 comment-btn custom-btn-none cursor-pointer"><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
                                </button>
                            </p>
                            @if ($feed->edited)
                                <p class="text-gray-500">edited</p>
                            @endif
                        </div>
                        <div class="border-top-xs">
                            <div class="d-flex ps-4 pe-4 pt-4">
                                <form id="like-form{{ $feed->id }}" class="like-form">
                                    <p class="mr-4 cursor-pointer">
                                        @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)
                                                ->where('user_id', '<>', Auth::user()->id)
                                                ->count();
                                        @endphp
                                        @if (count($likes) > 0)
                                            @if ($user_has_liked)
                                                <button type="button" class="unlike-btn"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i> <span class="pl-1">
                                                        Liked</span>
                                                </button>
                                                <button class="like-btn" type="button" style="display: none"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i><span
                                                        class="pl-1"> Like</span>
                                                </button>
                                            @elseif($user_has_unliked)
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @elseif($user_has_not_liked < 1)
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @else
                                                <button class="like-btn" type="button"
                                                    id="like-btn{{ $feed->id }}">
                                                    <i class="mdi like mdi-heart-outline font-md"></i> <span
                                                        class="pl-1"> Like</span>
                                                </button>
                                                <button class="unlike-btn" type="button" style="display: none"
                                                    id="unlike-btn{{ $feed->id }}">
                                                    <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                        Like</span>
                                                </button>
                                            @endif
                                        @else
                                            <button class="like-btn" type="button" id="like-btn{{ $feed->id }}">
                                                <i class="mdi like mdi-heart-outline font-md"></i> <span class="pl-1">
                                                    Like</span>
                                            </button>
                                            <button class="unlike-btn" type="button" style="display: none"
                                                id="unlike-btn{{ $feed->id }}">
                                                <i class="mdi unlike mdi-heart font-md"></i><span class="pl-1">
                                                    Like</span>
                                            </button>
                                        @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">
                                    <button class="comment-btn-2 custom-btn-none" id="show-comment{{ $feed->id }}">
                                        <i class="mdi mdi-comment-text-multiple font-md"></i>
                                        <span class="pl-1 -mt-1">Comment</span>
                                    </button>
                                </p>

                            </div>
                        </div>
                        <form id="comment-form{{ $feed->id }}" class="comment-form ps-4 pe-4">
                            <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>

                                    <textarea name="comment_body" style="padding: 15px;" required id="comment-body{{ $feed->id }}"
                                        class="form-control comment-input br-50" data-autosize rows="1" contenteditable
                                        placeholder="Add a comment.."></textarea>
                                    {{-- <input name="comment_body" required id="comment-body{{ $feed->id }}"
                                    class="form-control comment-input h50 br-50" data-autosize rows="1" contenteditable role="textbox"
                                    placeholder="Add a comment.."> --}}
                                </div>
                                <div class="col-auto align-self-end">
                                    <div class="text-muted mb-2">
                                        <button type="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 class="ps-4 pe-4 pt-2">
                            <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
                                <div class="spinner-border text-color" id="spin{{ $feed->id }}"
                                    style="display: none" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <div id="load-comment{{ $feed->id }}"></div>
                                <div id="load-new-comment{{ $feed->id }}"></div>
                                <div id="load-more-new-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">
                                            <div class="spinner-border" id="spinner{{ $feed->id }}"
                                                style="display: none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            <button type="button" class="load-more cutom-btn-none text-color"
                                                id="load-more{{ $feed->id }}">Load more comments..</button>
                                        </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">
                                            <div class="spinner-border" id="spinner1{{ $feed->id }}"
                                                style="display: none" role="status">
                                                <span class="sr-only">Loading...</span>
                                            </div>
                                            <button type="button" class="load-more-comments custom-btn-none text-color"
                                                id="load-more-comments{{ $feed->id }}">Load more comments..</button>
                                        </small>
                                    </div>
                                @endif
                            </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" id="noPost">
                    <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="feather-file font-lg alert-primary btn-round-lg theme-dark-bg text-current"></i></a>
                        <p class="pt-2">There are currently no posts yet</p>
                    </div>
                </div>
            @endforelse
        </div>

        <div class="col-12 col-xxl-4 col-lg-4">
            <div class="side-navigation">
                <div class="card w-100 border-0 p-0 bg-white shadow-xss mb-3">
                    <div class="card-body h250 p-0 overflow-hidden">
                        @if (isset(Auth::user()->cover))
                            <img src="{{ Auth::user()->cover }}" class="w-100 card-img-top h-110" alt="image">
                        @elseif(Auth::user()->cover == null)
                            <img src="{{ asset('assets/images/image10.png') }}" class="w-100 card-img-top h-110"
                                alt="image">
                        @else
                            <img src="{{ asset('assets/images/image10.png') }}" class="w-100 card-img-top h-110"
                                alt="image">
                        @endif
                    </div>
                    <div class="card-body p-0 text-center">
                        <figure class="avatar w100 z-index-1 text-center" style="top:-40px"><img
                                src="{{ Auth::user()->avatar }}" alt="image"
                                class="float-right p-1 bg-white rounded-circle h100 w-100" style="object-fit: cover">
                        </figure>
                        <h4 class="fw-700 mb-4 font-sm mt-2 mr-1 text-center">{{ Auth::user()->first_name }}
                            {{ Auth::user()->last_name }}
                            @if (Auth::user()->creatorId() == Auth::user()->id)
                                <img src="{{ asset('assets/images/verify.png') }}" class="h20 -mt-1" alt="">
                            @endif
                        </h4>
                        @if (tenantSetting($_SERVER['HTTP_HOST']) !== '')

                            @if (tenantSetting($_SERVER['HTTP_HOST'])->verify_status == 1)

                                @if (Auth::user()->ctb_status == 'verified')
                                    <p class="mb-4 text-green"><i class="feather-check-circle"></i> Verified</p>
                                @elseif(Auth::user()->ctb_status == 'pending')
                                    <p class="mb-4"><a href="{{ route('account.ctb', Auth::user()->id) }}"
                                            class="text-gray-500"><i class="feather-check-circle"></i> Verification
                                            pending</a></p>
                                @else
                                    <p class="mb-4"><a href="{{ route('account.ctb', Auth::user()->id) }}"
                                            class="text-red"><i class="feather-check-circle"></i> Verify your profile</a>
                                    </p>
                                @endif

                            @endif

                        @endif
                    </div>
                    <div class="card-body border-top-xs text-center pt-4">
                        <div class="row justify-content-center">
                            <div class="col-4">
                                <a href="#" class="text-dark" data-toggle="modal" data-target="#followers">
                                    <h6>
                                        @if ($follower_count > 9999)
                                            {{ substr($follower_count, 0, -3) }}K
                                        @elseif($follower_count > 99999)
                                            {{ substr($follower_count, 0, -3) }}K
                                        @elseif($follower_count > 999999)
                                            {{ substr($follower_count, 0, -4) }}M
                                        @else
                                            {{ number_format($follower_count) }}
                                        @endif
                                    </h6>
                                    <p>Followers</p>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="#" class="text-dark" data-toggle="modal" data-target="#followings">
                                    <h6 id="follow-no">
                                        @if ($following_count > 9999)
                                            {{ substr($following_count, 0, -3) }}K
                                        @elseif($following_count > 99999)
                                            {{ substr($following_count, 0, -3) }}K
                                        @elseif($following_count > 999999)
                                            {{ substr($following_count, 0, -4) }}M
                                        @else
                                            {{ number_format($following_count) }}
                                        @endif
                                    </h6>
                                    <p>Following</p>
                                </a>
                            </div>
                            <div class="col-4">
                                <a href="{{ route('account.profile', Auth::user()->id) }}" class="text-dark">
                                    <h6>{{ number_format($feed_count) }}</h6>
                                    <p>Posts</p>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3">
                    <div class="card-body p-0 mt-3 mb-6">
                        <h5 class="mb-4">Your Network</h5>
                        <div class="">
                            @forelse ($users as $user)
                                <div class="row mb-4">
                                    <div class="col">
                                        <a href="{{ route('account.profile', $user->id) }}"
                                            class="align-items-center d-flex font-xsss fw-600 ls-1 text-grey-700 text-dark pe-4">
                                            <img src="{{ $user->avatar }}" alt="{{ $user->first_name }}"
                                                style="object-fit: cover" class="shadow-sm h40 w40 rounded-circle">
                                            <span class="pl-2"> {{ $user->first_name }} {{ $user->last_name }}</span>
                                        </a>
                                    </div>
                                    <div class="col-auto text-end">
                                        <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>
                            @empty
                                <div class="text-center">
                                    <a href="#!" 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 Friends</p>
                                </div>
                            @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    @include('elements.create-post')
    @include('elements.create-story')
    @include('elements.story')
    @include('elements.share-feed')
    @include('elements.feeds-script')
    @include('elements.feeds-upload-script')
    @include('elements.feeds-story-script')
    @include('elements.followers')
    @include('elements.following')
    @include('modals.edit_post_modal')
    @include('alerts.alerts')

@endsection


<script>
    const editPost = (feed) => {

        let editBtn = document.getElementById("editPostBtn")
        let editPostBtn = document.getElementById("submit_edited_post")

        // let edit_content = document.getElementById("tiny_text_edit")
        let feed_id = document.getElementById("feed_id_edit")
        let edit_content = document.getElementById("post_edit_content")

        // let parsedFeed = JSON.parse(feed)
        feed_id.value = feed.id
        edit_content.value = feed.content;
        let contentToEdit = feed.content
        ClassicEditor
            .create(document.querySelector('#ck_edit_feed'))
            .then(editor => {
                editor.setData(contentToEdit)
                editor.model.document.on('change', (evt) => {
                    let value = editor.getData()
                    if (value.length) {
                        editPostBtn.removeAttribute("disabled")
                        document.getElementById('post_edit_content').value = value;
                    } else {
                        editPostBtn.setAttribute("disabled", true)
                        document.getElementById('post_edit_content').value = value
                    }
                });


            })
            .catch(error => {
                console.error("error...", error);
            });

        editBtn.click()
    }
</script>