@props(['post'])

<div class="mt-10 pt-8 border-t border-gray-100">
    <h3 class="text-xl font-bold text-gray-900 mb-6">Tinggalkan Komentar</h3>

    <form action="{{ route('filamentblog.comment.store', ['post' => $post->slug]) }}" method="POST" id="comment-box">
        @csrf
        <div class="space-y-4">
            <div>
                <label for="author-comment" class="block text-sm font-semibold text-gray-700 mb-2">Komentar <span class="text-red-500">*</span></label>
                <textarea name="comment" rows="5" id="author-comment" placeholder="Tulis komentar Anda di sini..."
                    class="w-full rounded-xl border border-gray-200 bg-white px-4 py-3.5 text-sm text-gray-900 placeholder-gray-400 outline-none focus:border-gray-400 focus:ring-0 resize-none transition-colors"></textarea>
                @error('comment')
                    <p class="text-red-500 text-xs mt-1">{{ $message }}</p>
                @enderror
            </div>

            @if(session('success'))
                <div class="flex items-center gap-2 bg-green-50 border border-green-200 text-green-700 text-sm rounded-xl px-4 py-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
                    </svg>
                    {{ session('success') }}
                </div>
            @endif

            <div>
                @if(auth()->user()?->canComment())
                    <button type="submit"
                        class="g-recaptcha inline-flex items-center gap-2 bg-gray-900 hover:bg-gray-800 text-white text-sm font-semibold px-7 py-3 rounded-full transition-colors"
                        @if(config('filamentblog.recaptcha.enabled'))
                            data-sitekey="{{ config('filamentblog.recaptcha.site_key') }}"
                        @endif
                        data-callback="onSubmit"
                        data-action="submit">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
                        </svg>
                        Kirim Komentar
                    </button>
                @else
                    <div class="flex items-center gap-3 bg-gray-50 border border-gray-200 rounded-xl px-5 py-4">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-gray-400 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                        </svg>
                        <p class="text-sm text-gray-600">
                            Anda harus
                            <a href="{{ route(config('filamentblog.route.login.name')) }}" class="font-semibold text-red-600 hover:text-red-700 underline underline-offset-2">
                                login
                            </a>
                            untuk memberikan komentar.
                        </p>
                    </div>
                @endif
            </div>
        </div>
    </form>
</div>