@extends('layouts.landing')

@section('title')
    {!! Str::words($comment->comment_body, 5) !!}
@endsection

@section('content')
<div class="row mb-4 mobile-mt-8">
    <div class="col">
        <a href="{{url('feeds/home')}}" class="text-color"><i class="mdi mdi-arrow-left"></i> Back to feeds</a>
    </div>
</div>
<div class="row mb-4">
    <div class="col-12 col-xxl-8 col-lg-8">
        <div class="row">
            @forelse ($comment_likers as $like)
                <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="card-body d-block">
                        <div class="row mb-4">
                            <div class="col">
                                <div class="d-flex">
                                    @php
                                        $user = App\Models\User::where('id', $like->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 -m-10"><i class="mdi mdi-user"></i>
                                            @php
                                                $follows = App\Models\Follower::where('followed_user_id', Auth::user()->id)->where('user_id', $user->id)->where('follow_status', 1)->first();
                                            @endphp
                                            @if($follows)
                                                <mark> Follows you</mark> . {{$user->state}}, {{$user->country}}
                                            @else
                                                {{$user->state}}, {{$user->country}}
                                            @endif
                                        </p>
                                    </div>
                                </div>
                            </div>
                            @if(!Auth::user()->id == $like->user_id)
                                <div class="col-auto text-end">
                                    <h6 id="follow-no" style="display: none">{{$follower_count}}</h6>
                                    <form id="follow-form">
                                        <input type="hidden" name="followed_user_id" id="followed_id" value="{{$user->id}}">
                                        <input type="hidden" name="user_id" id="user_id" value="{{Auth::user()->id}}">
                                        <input type="hidden" name="follow_status" id="follow" value="1">
                                        @php
                                            $followers = App\Models\Follower::where('user_id', Auth::user()->id)->get();
                                            $user_has_followed = App\Models\Follower::where('followed_user_id', $user->id)->where('user_id', Auth::user()->id)->where('follow_status', 1)->first();
                                            $user_has_unfollowed = App\Models\Follower::where('followed_user_id', $user->id)->where('user_id', Auth::user()->id)->where('follow_status', 0)->first();
                                            $user_has_not_followed = App\Models\Follower::where('user_id', Auth::user()->id)->first();
                                        @endphp
                                        @if(count($followers) > 0)
                                            @if($user_has_followed)
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</button>
                                            @elseif($user_has_unfollowed)
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                            @elseif($user_has_not_followed)
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                                <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                            @endif
                                        @else
                                            <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" id="follow-btn{{$user->id}}" onclick="follow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-account-plus-outline"></i> Follow</span>
                                            <span class="align-items-center cursor-pointer font-xsss fw-600 ls-1 custom-btn-outline" style="display: none" id="unfollow-btn{{$user->id}}" onclick="unfollow('{{$follower_count}}', 'unfollow-btn{{$user->id}}', 'follow-btn{{$user->id}}', 'follow-no', '{{$user->id}}', '{{Auth::user()->id}}')"><i class="mdi mdi-check"></i> Following</span>
                                        @endif
                                    </form>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            @empty
                <div class="card w-100 shadow-xss rounded-xxl border-0 ps-4 pt-4 pe-4 pb-3 mb-3 mt-3">
                    <div class="card-body p-0 my-3 position-relative justify-content-center text-center">
                        <a class="p-4 text-center ms-3 menu-icon center-menu-icon"><i class="feather-users font-lg alert-primary btn-round-lg theme-dark-bg text-dark"></i></a>
                        <p class="pt-2">No Likes</p>
                    </div>
                </div>
            @endforelse
        </div>
    </div>
</div>
@include('elements.feeds-script')
@endsection