@extends('layouts.landing')

@section('title', 'Feeds')


@section('content')
    <div class="row mb-4 mobile-mt-8">
        <div class="col-12 col-xxl-8 col-lg-8">
            <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>
            <div id="new-feed"></div>

            @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">
                                            <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>
                                </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> like </a>
                                @endif
                            </p>
                            <span id="show-no"></span>
                            <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}}">
                                    <input type="hidden" name="parent_id" id="parent-id" value="{{Auth::user()->creatorId()}}">
                                    @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)
                                            <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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><i class="mdi unlike mdi-heart font-md"></i><span class="pl-1"> Like</span></span>
                                        @elseif($user_has_not_liked < 1)
                                            <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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><i class="mdi unlike mdi-heart font-md"></i></i><span class="pl-1"> Like</span></span>
                                        @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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><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}}', '{{Auth::user()->creatorId()}}')"><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>
                        {{-- <comment-container></comment-container> --}}
                        <get-comments :userid="{{json_encode(Auth::user()->id)}}" :feedid="{{json_encode($feed->id)}}" :useravatar="{{json_encode(Auth::user()->avatar)}}" :userfirstname="{{json_encode(Auth::user()->first_name)}}" :userlastname="{{json_encode(Auth::user()->last_name)}}" :parentid="{{json_encode(Auth::user()->creatorId())}}" :currentpage="{{json_encode(url()->current())}}" :routename="{{json_encode(route('feed.feeds'))}}"></get-comments>
                        {{-- <div class="row pt-4" id="comment-box{{$feed->id}}">
                            <div class="col-1 p-0">
                                <img src="{{Auth::user()->avatar}}" class="w50 h50 rounded-circle" style="object-fit: cover">
                            </div>
                            <div class="col-11">

                            </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 custom-side">
            <div class="card w-100 border-0 p-0 bg-white shadow-xss">
                <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 font-sm mt-2 mb-lg-5 mb-4 text-center">{{Auth::user()->first_name}} {{Auth::user()->last_name}}</h4>
                </div>
                <div class="card-body border-top-xs text-center pt-4">
                </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">
                    <h5 class="mb-4">Your Network</h5>
                </div>
            </div>
        </div>
    </div>

    @include('elements.create-post')

@endsection