<div class="mt-6 flex flex-col gap-4 md:px-8 bg-white">
    @foreach ($post_comments as $comment)
        <div class="flex flex-col gap-4">
            <div class="card-comment border rounded-md p-6 bg-white">
                <div class="header flex gap-2 align-middle justify-between">
                    <div class="flex gap-4 mb-6">
                        <div>
                            <p class="text-sm font-semibold text-secondary-700">
                                {{ $comment->user->name }}
                            </p>
                            <p class="font-normal text-xs text-secondary-400">
                                {{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}
                            </p>
                        </div>
                    </div>
                    <div>
                        @if ($comment->user->role->name == 'admin')
                            <span
                                class="hidden md:block bg-yellow-100 h-fit text-yellow-800 text-xs font-medium mr-2 px-2.5 py-1 rounded">Jawaban
                                Admin</span>

                            <button data-popover-target="popover-default" type="button"
                                class="md:hidden text-white bg-orange-500 hover:bg-orange-600 focus:ring-4 focus:outline-none focus:ring-orange-300 rounded-full flex-center w-8 h-8"><i
                                    class="fa-solid fa-star text-xs"></i></button>
                            <div data-popover id="popover-default" role="tooltip"
                                class="absolute z-10 invisible inline-block w-fit text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                <div
                                    class="px-3 py-2 bg-gray-50 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
                                    <h3 class="font-semibold text-orange-500 dark:text-white">Jawaban Admin</h3>
                                </div>
                                <div data-popper-arrow></div>
                            </div>
                        @elseif($comment->user->role->name == 'super-admin')
                            <span
                                class="hidden md:block bg-blue-100 h-fit text-blue-800 text-xs font-medium mr-2 px-2.5 py-1 rounded">Jawaban
                                Super Admin</span>
                            <button data-popover-target="popover-default" type="button"
                                class="md:hidden text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 rounded-full flex-center w-8 h-8"><i
                                    class="fa-solid fa-star text-xs"></i></button>
                            <div data-popover id="popover-default" role="tooltip"
                                class="absolute z-10 invisible inline-block w-fit text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                <div
                                    class="px-3 py-2 bg-gray-50 border-b border-gray-200 rounded-t-lg dark:border-gray-600 dark:bg-gray-700">
                                    <h3 class="font-semibold text-blue-700 dark:text-white">Jawaban Admin</h3>
                                </div>
                                <div data-popper-arrow></div>
                            </div>
                        @endif
                    </div>

                </div>

                <div class="body">
                    <p class="text-gray-500 ">
                        {!! $comment->body !!}
                    </p>

                    <div class="reply-btn mt-4 flex justify-between gap-4">
                        <button id="replyButton" onclick="showInput({{ $comment->id }})" class="">
                            <span
                                class="flex gap-3 items-center text-sm font-medium text-gray-500 {{ $post->is_finished == 1 ? 'hidden' : '' }}"><i
                                    class="fa-regular fa-comment-dots"></i>Balas</span>
                        </button>

                        <button type="button" id="showNestedComments" onclick="showNestedComments({{ $comment->id }})"
                            class="flex items-center gap-3 h-auto px-4 rounded-lg text-sm text-gray-500">
                            Balasan <i class="fa-solid fa-angle-down"></i>
                        </button>
                    </div>
                </div>


                <div id="replyForm" data-name="{{ $comment->id }}" class="hidden form-group mt-4 border-t pt-4">
                    <form action="/posts/comment" method="POST">
                        @csrf
                        <input type="hidden" name="post_id" value="{{ $post->id }}">
                        <input type="hidden" name="parent_id" value="{{ $comment->id }}">

                        <textarea id="message" rows="4" name="body" {{ old('body') }}
                            class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500     "
                            placeholder="Ketikkan komentar Anda disini..."></textarea>

                        <div class="w-full flex justify-end mt-4">
                            <button type="submit" class="btn-link">
                                Balas
                            </button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- REPLY -->
            @include('layouts.components.comments.forum.reply')
            <!-- END REPLY -->
        </div>
    @endforeach


    <script src="{{ url('js/comment.js') }}"></script>
</div>