@foreach($comments as $comment)
    @php 
        $dep = $depth - 1; 
        $userName = $comment->user_info['name'] ?? ($comment->user->name ?? 'Anonymous');
    @endphp
    <div class="display-comment" data-comment-id="{{ $comment->id }}" @if($comment->parent_id != null) style="margin-left:40px;" @endif>
        <div class="comment-list">
            <div class="single-comment" style="margin-bottom: 20px; padding: 15px; background: #f9f9f9; border-radius: 5px;">
                <img src="{{ asset('backend/img/avatar.png') }}" alt="Avatar" style="width: 50px; height: 50px; border-radius: 50%; float: left; margin-right: 15px;">
                <div class="content" style="overflow: hidden;">
                    <h4 style="margin: 0 0 5px 0;">
                        {{ $userName }}
                        <span style="font-size: 12px; color: #666; margin-left: 10px;">
                            <i class="fa fa-clock-o"></i> {{ $comment->created_at->format('g:i a') }} 
                            <i class="fa fa-calendar"></i> {{ $comment->created_at->format('M d, Y') }}
                        </span>
                    </h4>
                    <p style="margin: 5px 0;">{{ $comment->comment }}</p>
                    @if($dep > 0)
                        <div class="button" style="margin-top: 10px;">
                            <a href="#" class="btn btn-sm btn-reply reply" data-id="{{ $comment->id }}" 
                               style="background: #007bff; color: white; padding: 5px 10px; border-radius: 3px; text-decoration: none; display: inline-block;">
                                <i class="fa fa-reply" aria-hidden="true"></i> Reply
                            </a>
                            <a href="#" class="btn btn-sm btn-reply cancel" style="display: none; background: #dc3545; color: white; padding: 5px 10px; border-radius: 3px; text-decoration: none; display: inline-block;">
                                <i class="fa fa-times" aria-hidden="true"></i> Cancel
                            </a>
                        </div>
                    @endif
                </div>
            </div>
        </div>
        
                @php
                // Filter only active replies
                $activeReplies = $comment->replies->where('status', 'active');
            @endphp

            @if($activeReplies && $activeReplies->count() > 0)
                <div class="replies-container" style="margin-left:40px;">
                    @include('front::pages.comment', ['comments' => $activeReplies, 'depth' => $dep])
                </div>
            @endif
    </div>
@endforeach

@if($comments->isEmpty())
    <div class="no-comments" style="text-align: center; padding: 30px; color: #666;">
        <p>No comments yet. Be the first to comment!</p>
    </div>
@endif