@if(!empty($comments))
    @foreach($comments as $comment)
        <div class="comment-item" data-comment-id="{{ $comment['id'] }}">
            <div class="d-flex">
                <img src="{{ $comment['user']['profile_pic_url'] ?? asset('defaults/noimage/no_img.jpg') }}" class="comment-avatar" alt="Avatar">
                <div>
                    <div class="comment-author">{{ $comment['user']['name'] ?? 'Anonymous' }}</div>
                    <div class="comment-text">{{ $comment['comment'] }}</div>
                    <div class="comment-footer">
                        @php
                            $replyCount = is_array($comment['replies']) ? count($comment['replies']) : 0;
                        @endphp
                        {{ $replyCount }} {{ \Illuminate\Support\Str::plural('Reply', $replyCount) }} · <a href="#" class="reply-toggle">Reply</a>
                    </div>
                    <!-- Nested Replies Section -->
                    @if(!empty($comment['replies']))
                        <div class="nested-comments ml-5 mt-3">
                            @foreach($comment['replies'] as $nestedComment)
                                <div class="comment-item d-flex" data-comment-id="{{ $nestedComment['id'] }}">
                                    <img src="{{ $nestedComment['user']['profile_pic_url'] ?? asset('defaults/noimage/no_img.jpg') }}" class="comment-avatar" alt="Avatar">
                                    <div>
                                        <div class="comment-author">{{ $nestedComment['user']['name'] ?? 'Anonymous' }}</div>
                                        <div class="comment-text">{{ $nestedComment['comment'] }}</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
            <!-- Reply Input Box -->
            <div class="reply-input-box">
                <div class="input-group comment-input-box">
                    <textarea class="form-control reply-input" rows="2" placeholder="Write your reply..." style="resize: none; margin-left: 52px"></textarea>
                    <button class="btn reply-submit" type="button">
                        <i class="fa fa-paper-plane"></i>
                    </button>
                </div>
            </div>
        </div>
    @endforeach
@else
    <p>No comments yet. Be the first to comment!</p>
@endif