@foreach($comments as $comment)
    <li>
        <div class="comment-body">
            <div class="row">
                @if($comment->order_id != null)
                    <div class="col-md-3 col-sm-12">

                        <div
                            class="message-light message-light--purchased">
                            خریدار این محصول
                        </div>

                        <ul class="comments-user-shopping">
                            @php($color = $comment->order->items->where('product_id',$comment->product->id)->first()->color)
                            @if($color->show != 0)
                            <li>
                                <div class="cell">رنگ خریداری
                                    شده:
                                </div>
                                <div class="cell color-cell">
                                                                                        <span
                                                                                            class="shopping-color-value"
                                                                                            style="background-color: {{$color->color}}; border: 1px solid rgba(0, 0, 0, 0.25)"></span>{{$color->name}}
                                </div>
                            </li>
                            @endif
                            <li>
                                <div class="cell">خریداری شده
                                    از:
                                </div>
                                <div class="cell seller-cell">
                                                                                        <span
                                                                                            class="o-text-blue">{{$comment->order->items->where('product_id',$comment->product->id)->first()->seller['name']}}</span>
                                </div>
                            </li>
                        </ul>
                        @if($comment->suggested == 1)
                            <div
                                class="message-light message-light--opinion-positive">
                                خرید این محصول را توصیه می‌کنم
                            </div>
                        @endif
                    </div>
                @endif
                <div @if($comment->order_id != null) class="col-md-9 col-sm-12 comment-content"
                     @else class="col-md-12 col-sm-12 comment-content" @endif>
                    <div class="comment-title">
                        {{$comment->title}}
                    </div>

                    <div class="comment-author">
                        توسط {{\App\Comment::getUser($comment->user_id)}} در
                        تاریخ {{\Morilog\Jalali\Jalalian::forge("{$comment->date}")->format('%d %B %y')}}
                    </div>


                    @if($comment->advantages != null || $comment->disadvantages != null)
                        <div class="row">
                            @if($comment->advantages  != null)
                                <div class="col-md-4 col-sm-6 col-12">
                                    <div
                                        class="content-expert-evaluation-positive">
                                        <span>نقاط قوت</span>
                                        <ul>
                                            @foreach(explode(',',$comment->advantages) as $advantages)
                                                <li>{{$advantages}}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif
                            @if($comment->disadvantages  != null)
                                <div class="col-md-4 col-sm-6 col-12">
                                    <div
                                        class="content-expert-evaluation-negative">
                                        <span>نقاط ضعف</span>
                                        <ul>
                                            @foreach(explode(',',$comment->disadvantages) as $disadvantages)
                                                <li>{{$disadvantages}}</li>
                                            @endforeach
                                        </ul>
                                    </div>
                                </div>
                            @endif
                        </div>
                    @endif

                    <p style="text-align: justify">{!! $comment->body !!}</p>

                    <div class="footer">
                        <div class="comments-likes">
                            <span class="text-comment-like">آیا این نظر برایتان مفید بود؟</span>
                            <button class="btn-like" id="like-{{$comment->id}}"
                                    data-counter="{{$comment->like()->where('type_id','like')->count()}}" onclick="like('{{$comment->id}}','like')">
                                بله
                            </button>
                            <button class="btn-like" id="dislike-{{$comment->id}}"
                                    data-counter="{{$comment->like()->where('type_id','dislike')->count()}}"
                                    onclick="like('{{$comment->id}}','dislike')">خیر
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
@endforeach

{!! $comments->links('vendor.pagination.shop') !!}


<script>
    like = function (comment_id, type) {
        $('#loading').show();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
            }
        });

        $.ajax({
            url: '{{'/post/ajaxLike'}}',
            type: 'POST',
            data: {comment_id: comment_id, type: type},
            success: function (res) {
                $('#loading').hide();
                if (res.status === 200) {
                    var like = document.getElementById("like-" + comment_id);  //   Javascript
                    var dislike = document.getElementById("dislike-" + comment_id);  //   Javascript
                    like.setAttribute('data-counter', res.like);
                    dislike.setAttribute('data-counter', res.dislike);
                }
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $('#loading').hide();
                if(jqXHR.status === 401){
                    $('#loginModal').modal('show');
                }
            }
        });
    }
</script>