@foreach($replies as $reply)
    <div class="media mb-2" id="comment-{{ $reply->id }}">
        <img src="{{ $reply->user->getFirstMediaUrl('profile_image') }}" class="mr-3 rounded-circle" width="35" height="35" alt="User">

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

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

            {{-- Count direct replies to this reply --}}
            @php
                $childReplyCount = \App\Models\Comment::where('parent_id', $reply->id)->count();
            @endphp

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

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