@extends('Layouts.app')

@section('content')
    <div class="container mx-auto max-w-4xl p-4 md:p-8">

        {{-- Forum Header --}}
        <div class="bg-gradient-to-r from-blue-500 to-blue-600 text-white p-6 rounded-2xl shadow-lg mb-8">
            <h1 class="text-3xl md:text-4xl font-extrabold mb-1">Forum Diskusi</h1>
            <h2 class="text-xl md:text-2xl font-bold mb-2">{{ $meeting->title }}</h2>
            <p class="text-blue-100 text-base">{{ $meeting->description }}</p>
        </div>

        {{-- Conditional Post Creation Form (Visible only to authenticated users) --}}
        @auth
            <div class="bg-white p-6 rounded-xl shadow-lg mb-8 border border-gray-200">
                <h2 class="text-2xl font-semibold text-gray-800 mb-4">Buat Postingan Baru</h2>
                <form action="{{ route('forum.store.post', $meeting) }}" method="POST">
                    @csrf
                    <div class="mb-4">
                        <label for="title" class="block text-gray-700 font-medium mb-2">Judul Postingan</label>
                        <input type="text" name="title" id="title" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition duration-200" required>
                    </div>
                    <div class="mb-6">
                        <label for="body" class="block text-gray-700 font-medium mb-2">Isi Postingan</label>
                        <textarea name="body" id="body" rows="6" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 transition duration-200" required></textarea>
                    </div>
                    <button type="submit" class="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition duration-200">
                        Kirim Postingan
                    </button>
                </form>
            </div>
        @endauth

        {{-- Posts List --}}
        <div class="space-y-8">
            @forelse($posts as $post)
                <div class="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
                    {{-- Post Details --}}
                    <div class="border-b border-gray-200 pb-4 mb-4">
                        <h3 class="text-2xl font-bold text-gray-900 mb-1">{{ $post->title }}</h3>
                        <p class="text-gray-700 leading-relaxed mb-4">{{ $post->body }}</p>
                        <div class="flex items-center text-sm text-gray-500">
                            <span class="font-medium text-blue-600">{{ $post->user->nama }}</span>
                            <span class="mx-2">•</span>
                            <span>{{ $post->created_at->diffForHumans() }}</span>
                        </div>
                    </div>

                    {{-- Comments Section --}}
                    <div class="bg-gray-50 p-4 rounded-xl">
                        <h4 class="text-lg font-semibold text-gray-800 mb-3">Komentar ({{ $post->comments->count() }})</h4>
                        <div id="comments-list-{{ $post->id }}" class="space-y-4">
                            @foreach($post->comments as $comment)
                                <div class="bg-white p-3 rounded-lg flex flex-col md:flex-row items-start md:items-center justify-between shadow-sm" id="comment-{{ $comment->id }}">
                                    <div>
                                        <p class="font-semibold text-gray-800">{{ $comment->user->nama }}</p>
                                        <p class="text-gray-600 mt-1">{{ $comment->body }}</p>
                                    </div>
                                    <div class="md:ml-auto text-right mt-2 md:mt-0">
                                        <span class="text-sm text-gray-500 block mb-1">{{ $comment->created_at->diffForHumans() }}</span>
                                        {{-- Conditional Delete Button for the comment owner --}}
                                        @if(Auth::check() && Auth::user()->id_user === $comment->user_id)
                                            <button type="button" class="text-red-500 hover:text-red-700 text-xs font-semibold delete-comment transition duration-200" data-comment-id="{{ $comment->id }}">
                                                Hapus
                                            </button>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                        
                        {{-- Comment Form (AJAX) --}}
                        @auth
                            <form class="comment-form mt-4" data-post-id="{{ $post->id }}" action="{{ route('comments.store') }}" method="POST">
                                @csrf
                                <input type="hidden" name="post_id" value="{{ $post->id }}">
                                <div class="flex items-center space-x-2">
                                    <textarea name="body" rows="1" placeholder="Tulis komentar..." class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 resize-none transition duration-200" required></textarea>
                                    <button type="submit" class="bg-blue-500 text-white px-5 py-2 rounded-lg font-semibold hover:bg-blue-600 transition duration-200 text-sm flex-shrink-0">
                                        Kirim
                                    </button>
                                </div>
                            </form>
                        @else
                            <p class="text-center text-gray-500 mt-4 text-sm">Masuk untuk menulis komentar.</p>
                        @endauth
                    </div>
                </div>
            @empty
                <div class="text-center py-12 bg-white rounded-xl shadow-lg border border-gray-200">
                    <p class="text-gray-500 text-xl font-medium">Belum ada postingan di forum ini. Jadilah yang pertama!</p>
                </div>
            @endforelse
        </div>
    </div>
@endsection

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Tangani pengiriman form komentar
        $('.comment-form').on('submit', function(e) {
            e.preventDefault();
            const form = $(this);
            const postId = form.data('post-id');
            const url = form.attr('action');
            const data = form.serialize();

            $.ajax({
                url: url,
                type: 'POST',
                data: data,
                success: function(response) {
                    if (response.status === 'success') {
                        // Tambahkan komentar baru ke DOM
                        const newComment = `
                            <div class="bg-gray-50 p-3 rounded-lg flex items-start space-x-3" id="comment-${response.comment.id}">
                                <div>
                                    <p class="font-semibold text-gray-800">${response.comment.user.nama}</p>
                                    <p class="text-gray-600">${response.comment.body}</p>
                                </div>
                                <div class="ml-auto text-right">
                                    <span class="text-sm text-gray-500 block mb-1">Baru saja</span>
                                    {{-- Tambahkan tombol hapus jika user yang login adalah pemilik komentar --}}
                                    {{-- Menggunakan template literal untuk menambahkan tombol secara dinamis --}}
                                    <button type="button" class="text-red-500 hover:text-red-700 text-xs font-semibold delete-comment" data-comment-id="${response.comment.id}">
                                        Hapus
                                    </button>
                                </div>
                            </div>
                        `;
                        $(`#comments-list-${postId}`).append(newComment);
                        // Kosongkan textarea setelah berhasil
                        form.find('textarea[name="body"]').val('');
                    } else {
                        alert(response.message);
                    }
                },
                error: function(xhr, status, error) {
                    console.error("Gagal mengirim komentar:", status, error);
                    alert("Gagal mengirim komentar. Mohon coba lagi.");
                }
            });
        });

        // Tangani penghapusan komentar
        $(document).on('click', '.delete-comment', function() {
            const commentId = $(this).data('comment-id');
            const url = `/comments/${commentId}`;

            if (confirm("Apakah Anda yakin ingin menghapus komentar ini?")) {
                $.ajax({
                    url: url,
                    type: 'DELETE',
                    data: {
                        _token: '{{ csrf_token() }}' // Mengirim token CSRF untuk keamanan
                    },
                    success: function(response) {
                        if (response.status === 'success') {
                            // Hapus elemen komentar dari DOM
                            $(`#comment-${commentId}`).remove();
                        } else {
                            alert(response.message);
                        }
                    },
                    error: function(xhr, status, error) {
                        console.error("Gagal menghapus komentar:", error);
                        alert("Gagal menghapus komentar. Mohon coba lagi.");
                    }
                });
            }
        });
    });
</script>
@endpush