@php
    $isReply = !is_null($comment->parent_id);
@endphp

<div
    x-data="{ replyFormOpen: false, replyText: '' }"
    class="{{ $isReply ? 'bg-gray-50 dark:bg-gray-800 border-l-4 border-blue-400 pl-4' : 'bg-white dark:bg-gray-900' }} p-4 rounded shadow space-y-2"
>
    <div class="flex justify-between">
        <strong class="text-gray-800 dark:text-white">{{ $comment->user->name }}</strong>
        <span class="text-xs text-gray-500 dark:text-gray-400">{{ $comment->created_at->diffForHumans() }}</span>
    </div>

    <p class="text-gray-700 dark:text-gray-200">{{ $comment->comment }}</p>

    {{-- 🔁 Tombol Balas --}}
    @auth
        <button
            @click="replyFormOpen = !replyFormOpen"
            class="text-blue-600 hover:underline text-sm"
        >↩️ Balas</button>

        {{-- 💬 Form Balasan --}}
        <div x-show="replyFormOpen" class="mt-2">
            <form
                @submit.prevent="
                    fetch('{{ route('news.komentar.store', $comment->news_id) }}', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        },
                        body: JSON.stringify({
                            comment: replyText,
                            parent_id: {{ $comment->id }},
                        })
                    }).then(res => {
                        if (res.ok) {
                            replyText = '';
                            location.reload(); // sementara reload
                        }
                    });
                "
                class="space-y-2"
            >
                <textarea x-model="replyText"
                    class="w-full rounded border dark:bg-gray-800 dark:text-white text-sm"
                    rows="2"
                    required
                    placeholder="Tulis balasan..."></textarea>
                <button type="submit"
                    class="px-3 py-1 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded">
                    Kirim Balasan
                </button>
            </form>
        </div>
    @endauth

    {{-- 🔁 Nested Balasan --}}
    @if ($comment->replies && $comment->replies->count())
        <div class="space-y-2 mt-4">
            @foreach ($comment->replies as $reply)
                @include('components.comment', ['comment' => $reply])
            @endforeach
        </div>
    @endif
</div>