<div class="comment-section">
    @auth
        <form wire:submit.prevent.defer="addComment" class="mb-8">
            <div class="mb-3">
                @if ($replyingTo)
                    <div class="bg-gray-100 p-3 mb-3 rounded-md">
                        <div class="flex justify-between items-center">
                            <p class="text-sm text-gray-600">
                                Membalas komentar <span class="font-semibold">{{ $parentComment->user->name }}</span>:
                            </p>
                            <button type="button" wire:click="cancelReply" class="text-gray-500 hover:text-gray-700">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20"
                                    fill="currentColor">
                                    <path fill-rule="evenodd"
                                        d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                                        clip-rule="evenodd" />
                                </svg>
                            </button>
                        </div>
                        <p class="text-sm italic mt-1 text-gray-500">"{{ Str::limit($parentComment->content, 100) }}"</p>
                    </div>
                @endif
                <textarea wire:model="newComment"
                    class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151]
                            focus:shadow-[2px_2px_0px_2px_#374151] focus:translate-y-0.5 focus:translate-x-0.5
                            rounded-md focus:outline-none focus:border-none focus:ring-2 focus:ring-gray-700
                            text-gray-700 leading-5 transition duration-150 ease-in-out block mt-1 w-full py-2.5 mb-6 @error('newComment') is-invalid @enderror"
                    rows="4" placeholder="{{ $replyingTo ? 'Tulis balasan...' : 'Tulis komentar...' }}"></textarea>
                @error('newComment')
                    <div class="invalid-feedback text-red-500 text-sm">{{ $message }}</div>
                @enderror
            </div>
            <div class="flex items-center justify-start w-full">
                <x-primary-button type="submit"
                    class="ring-2 ring-gray-700 shadow-[4px_4px_0px_2px_#374151] text-white hover:shadow-[2px_2px_0px_2px_#374151] hover:translate-y-0.5 hover:translate-x-0.5 text-center bg-orange-500 py-2.5 px-4 rounded">
                    {{ $replyingTo ? 'Kirim Balasan' : 'Posting Komentar' }}
                </x-primary-button>
            </div>
        </form>
    @else
        <div class="p-4 mb-4 text-sm text-blue-700 bg-blue-100 rounded-lg">
            <a href="{{ route('login') }}" class="font-medium underline">Log in</a> untuk mengirim komentar
        </div>
    @endauth

    <div class="comments-list">
        @forelse($comments as $comment)
            <div class="comment mb-6 border-b border-gray-100 pb-4">
                <div class="comment-header flex justify-between items-center">
                    <div class="comment-author flex items-center">
                        <span class="font-semibold">{{ $comment->user->name }}</span>
                        <small class="text-gray-500 ml-2">
                            {{ $comment->created_at->diffForHumans() }}
                        </small>
                    </div>
                    <div class="flex items-center space-x-2">
                        <livewire:forum.like-button :model="$comment" wire:key="comment-like-{{ $comment->id }}" />
                        @auth
                            <button wire:click="startReply({{ $comment->id }})"
                                class="text-gray-500 hover:text-gray-700 flex items-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none"
                                    viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                                </svg>
                                <span>Balas</span>
                            </button>
                        @endauth
                    </div>
                </div>
                <div class="comment-body mt-2">
                    {{ $comment->content }}
                </div>

                @if ($comment->replies->count() > 0)
                    <div class="replies-container mt-4 ml-6 pl-4 border-l-2 border-gray-200">
                        @foreach ($comment->replies as $reply)
                            <div class="reply mb-3">
                                <div class="reply-header flex justify-between items-center">
                                    <div class="reply-author flex items-center">
                                        <span class="font-semibold">{{ $reply->user->name }}</span>
                                        <small class="text-gray-500 ml-2">
                                            {{ $reply->created_at->diffForHumans() }}
                                        </small>
                                    </div>
                                    <div>
                                        <livewire:forum.like-button :model="$reply"
                                            :wire:key="'reply-like-'.$reply->id" />
                                    </div>
                                </div>
                                <div class="reply-body mt-2">
                                    {{ $reply->content }}
                                </div>
                            </div>
                        @endforeach
                    </div>
                @endif
            </div>
        @empty
            <p class="text-gray-500">Belum ada komentar</p>
        @endforelse
    </div>
</div>
