{{--<div class="media mb-3" id="comment-{{ $comment->id }}">--}}
{{--    <img src="{{ $comment->user->getFirstMediaUrl('profile_image') }}" class="mr-3 rounded-circle" width="40" height="40">--}}
{{--    <div class="media-body">--}}
{{--        <h6 class="mt-0 mb-1">{{ $comment->user->name }} <small class="text-muted">{{ $comment->created_at->diffForHumans() }}</small></h6>--}}
{{--        <p>{{ $comment->comment }}</p>--}}
{{--        <a href="javascript:void(0);" class="reply-btn text-muted" data-id="{{ $comment->id }}"><i class="fas fa-reply"></i> Reply</a>--}}

{{--        @if($comment->replies->count())--}}
{{--            <div class="ml-4 mt-2">--}}
{{--                @foreach($comment->replies as $reply)--}}
{{--                    @include('chat.partials.single_comment', ['comment' => $reply])--}}
{{--                @endforeach--}}
{{--            </div>--}}
{{--        @endif--}}
{{--    </div>--}}
{{--</div>--}}
<style>
    .media {
        margin-top: 12px;
    }

    .media-body {
        font-size: 0.95rem;
    }

    .media-body p {
        margin-bottom: 0.25rem;
    }

    .border-start {
        border-left: 2px solid #e0e0e0;
    }

</style>
{{--<div class="media mb-2 pb-2 border-bottom" id="comment-{{ $comment->id }}" style="margin-top: 12px;">--}}
{{--    <img src="{{ $comment->user->getFirstMediaUrl('profile_image') }}" class="mr-3 rounded-circle" width="40" height="40" alt="User">--}}

{{--    <div class="media-body">--}}
{{--        <h6 class="mt-0 mb-1">--}}
{{--            {{ $comment->user->name }}--}}
{{--            <small class="text-muted">{{ $comment->created_at->diffForHumans() }}</small>--}}
{{--        </h6>--}}

{{--        <p class="mb-1">{{ $comment->comment }}</p>--}}

{{--        <a href="javascript:void(0);" class="reply-btn text-primary small" data-id="{{ $comment->id }}">--}}
{{--            <i class="fas fa-reply"></i> Reply--}}
{{--        </a>--}}

{{--        @if($comment->replies->count())--}}
{{--            <div class="ml-4 border-start ps-3 mt-2">--}}
{{--                @foreach($comment->replies as $reply)--}}
{{--                    @include('chat.partials.single_comment', ['comment' => $reply])--}}
{{--                @endforeach--}}
{{--            </div>--}}
{{--        @endif--}}
{{--    </div>--}}
{{--</div>--}}
<div class="media mb-2 pb-2 border-bottom" id="comment-{{ $comment->id }}">
    <img src="{{ $comment->user->getFirstMediaUrl('profile_image') }}" class="mr-3 rounded-circle" width="40" height="40" alt="User">

    <div class="media-body">
        <h6 class="mt-0 mb-1">
            {{ $comment->user->name }}
            <small class="text-muted">{{ $comment->created_at->diffForHumans() }}</small>
        </h6>

        <p class="mb-1">{{ $comment->comment }}</p>

        <a href="javascript:void(0);" class="reply-btn text-primary small" data-id="{{ $comment->id }}">
            <i class="fas fa-reply"></i> Reply
        </a>

        @php
            $directRepliesCount = $comment->replies()->count();
        @endphp

        @if($directRepliesCount)
            <div class="replies-wrapper mt-2 ms-4 ps-3 border-start"
                 id="replies-{{ $comment->id }}"
                 data-total="{{ $directRepliesCount }}"
                 data-loaded="0">

                <a href="javascript:void(0);"
                   class="load-replies text-muted small"
                   data-id="{{ $comment->id }}">
                    View {{ $directRepliesCount }}
                    {{ Str::plural('reply', $directRepliesCount) }}
                </a>
            </div>
        @endif

    </div>
</div>
@push('script')
<script>
    const commentsReplyRouteTemplate = "{{ route('comments.replies', ['id' => '__ID__']) }}";

    $(document).on('click', '.load-replies', function () {
        let commentId = $(this).data('id');
        let container = $('#replies-' + commentId);
        let loaded = parseInt(container.attr('data-loaded'));
        let total = parseInt(container.attr('data-total'));
        let url = commentsReplyRouteTemplate.replace('__ID__', commentId);
        $.ajax({
            url: url,
            type: 'GET',
            data: {
                page: Math.floor(loaded / 10) + 1
            },
            success: function (data) {
                container.find('.load-replies').remove();
                container.append(data);

                loaded += 10;
                container.attr('data-loaded', loaded);

                if (loaded < total) {
                    container.append(`<a href="javascript:void(0);" class="load-replies text-muted small" data-id="${commentId}">
                    View more replies…
                </a>`);
                }
            }
        });
    });
</script>
@endpush