{{-- resources/views/general/posts/partials/comment-item.blade.php --}}
<div class="comment-item bg-gradient-to-br from-white to-blue-50 dark:from-gray-800 dark:to-gray-900 rounded-2xl p-5 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700" data-comment-id="{{ $comment->id }}">
    <div class="flex items-start gap-4">
        @if($comment->user->avatar_url)
            <img src="{{ $comment->user->avatar_url }}" 
                 alt="{{ $comment->user->name }}" 
                 class="w-11 h-11 rounded-2xl object-cover ring-2 ring-purple-500/30 shadow-md">
        @else
            <div class="w-11 h-11 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center ring-2 ring-purple-500/30 shadow-md">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                </svg>
            </div>
        @endif
        
        <div class="flex-1 min-w-0">
            {{-- Comment Header --}}
            <div class="flex items-center justify-between mb-3">
                <div class="flex-1">
                    <h4 class="text-base font-bold text-gray-900 dark:text-white">{{ $comment->user->name }}</h4>
                    <div class="flex items-center gap-2 mt-1">
                        <svg class="w-3.5 h-3.5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/>
                        </svg>
                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ $comment->formatted_time }}</span>
                    </div>
                </div>
                
                @if($comment->can_delete)
                <button onclick="deleteComment('{{ $comment->id }}')" 
                        class="p-2 hover:bg-red-50 dark:hover:bg-red-900/30 rounded-xl transition-all duration-300 group"
                        title="حذف التعليق">
                    <svg class="w-5 h-5 text-gray-400 group-hover:text-red-500 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
                    </svg>
                </button>
                @endif
            </div>
            
            {{-- Comment Content --}}
            <div class="mb-4">
                <p class="text-base text-gray-800 dark:text-gray-200 leading-relaxed bg-gray-100 dark:bg-gray-800/50 rounded-xl p-4">{{ $comment->content }}</p>
            </div>
            
            {{-- Comment Reactions --}}
            <div class="flex items-center gap-2 flex-wrap mb-3">
                @foreach(['like' => '👍', 'love' => '❤️', 'angry' => '😡', 'sad' => '😢'] as $type => $icon)
                    @if($comment->reaction_counts[$type] > 0 || $comment->user_reaction === $type)
                    <button class="comment-reaction-btn flex items-center gap-2 px-3 py-2 rounded-xl text-sm font-semibold transition-all duration-300 transform hover:scale-105
                                   {{ $comment->user_reaction === $type ? 'bg-gradient-to-r from-blue-500 to-indigo-500 text-white shadow-lg' : 'bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-600' }}"
                            data-comment-id="{{ $comment->id }}" data-type="{{ $type }}">
                        <span class="text-lg">{{ $icon }}</span>
                        <span class="comment-reaction-count">{{ $comment->reaction_counts[$type] }}</span>
                    </button>
                    @endif
                @endforeach
                
                <button class="reply-btn flex items-center gap-2 px-4 py-2 rounded-xl bg-purple-50 dark:bg-purple-900/30 text-purple-600 dark:text-purple-400 hover:bg-purple-100 dark:hover:bg-purple-900/50 transition-all duration-300 transform hover:scale-105" 
                        data-comment-id="{{ $comment->id }}">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
                    </svg>
                    <span class="text-sm font-semibold">رد</span>
                </button>
            </div>
            
            {{-- Reply Form (Hidden by default) --}}
            <div id="reply-form-{{ $comment->id }}" class="hidden mt-4">
                <form class="reply-form bg-gradient-to-br from-purple-50 to-pink-50 dark:from-gray-900 dark:to-gray-800 rounded-2xl p-4 border-2 border-purple-200 dark:border-purple-800" data-comment-id="{{ $comment->id }}">
                    @csrf
                    <div class="flex gap-3">
                        @if(auth()->user()->avatar_url)
                            <img src="{{ auth()->user()->avatar_url }}" 
                                 alt="{{ auth()->user()->name }}" 
                                 class="w-9 h-9 rounded-xl object-cover ring-2 ring-purple-500/30">
                        @else
                            <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-indigo-500 to-purple-500 flex items-center justify-center ring-2 ring-purple-500/30">
                                <svg class="w-5 h-5 text-white" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"/>
                                </svg>
                            </div>
                        @endif
                        
                        <div class="flex-1">
                            <textarea name="content" placeholder="اكتب ردك... 💬" 
                                      class="w-full p-4 text-base border-2 border-gray-300 dark:border-gray-600 rounded-xl resize-none focus:ring-4 focus:ring-purple-500/50 focus:border-purple-500 dark:bg-gray-800 dark:text-white transition-all duration-300 min-h-[100px]"
                                      rows="3"></textarea>
                            <div class="flex justify-end mt-3 gap-3">
                                <button type="button" onclick="cancelReply('{{ $comment->id }}')" 
                                        class="px-5 py-2 text-sm font-semibold text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl transition-all duration-300">
                                    إلغاء
                                </button>
                                <button type="submit" 
                                        class="px-6 py-2 text-sm bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold rounded-xl shadow-lg shadow-purple-500/30 hover:shadow-xl transform hover:scale-105 transition-all duration-300 flex items-center gap-2">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"/>
                                    </svg>
                                    إرسال
                                </button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            
            {{-- Replies List --}}
            <div id="replies-list-{{ $comment->id }}" class="mt-4 space-y-3">
                @foreach($comment->replies()->with('user')->latest()->take(2)->get() as $reply)
                    @include('general.posts.partials.reply-item', ['reply' => $reply])
                @endforeach
                
                @if($comment->replies()->count() > 2)
                <button class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-blue-500 to-indigo-500 hover:from-blue-600 hover:to-indigo-600 text-white text-sm font-bold rounded-xl shadow-lg shadow-blue-500/30 hover:shadow-xl transform hover:scale-105 transition-all duration-300" 
                        onclick="loadMoreReplies('{{ $comment->id }}')">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
                    </svg>
                    عرض المزيد من الردود ({{ $comment->replies()->count() - 2 }})
                </button>
                @endif
            </div>
        </div>
    </div>
</div>