@extends('layouts.app')

@section('content')
<div x-data="beritaAI()" x-init="init" class="container mx-auto py-10 px-6">

    <h1 class="text-4xl font-bold text-gray-800 dark:text-white mb-8 text-center">📰 Buat Berita Baru</h1>

    <form action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data" class="bg-white dark:bg-gray-800 p-8 rounded-2xl shadow-xl space-y-6">
        @csrf

        {{-- Judul Berita --}}
        <div>
            <label for="title" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Judul Berita</label>
            <input type="text" name="title" id="title" x-model="judul" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required>

            <button type="button" @click="generateBerita" class="mt-2 text-sm text-blue-600 hover:underline">✨ Gunakan AI untuk isi berita</button>

            <template x-if="loading">
                <p class="text-sm text-gray-500 mt-2">⏳ Membuat berita ilmiah berdasarkan judul...</p>
            </template>
        </div>

        {{-- Isi Konten --}}
        <div>
            <label for="content" class="block mb-2 text-sm font-semibold text-gray-700 dark:text-gray-300">Isi Berita</label>
            <textarea name="content" id="content" rows="6" x-model="konten" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" required></textarea>
        </div>

        {{-- Kategori, Tanggal, Gambar, Pin --}}
        <!-- (Kategori, Tanggal Terbit, Upload Gambar, Pin Berita - tetap sama seperti sebelumnya) -->
        {{-- ... [potongan kode kategori, tanggal, gambar, pin] ... --}}

        {{-- Tombol Submit --}}
        <div class="text-center">
            <button type="submit" class="inline-flex items-center px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 shadow-md transition-all">
                🚀 Buat Berita
            </button>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script>
function beritaAI() {
    return {
        judul: '',
        konten: '',
        loading: false,
        init() {
            // Optional: Load existing title/content if editing
        },
        async generateBerita() {
            if (!this.judul) {
                alert("Masukkan judul berita terlebih dahulu.");
                return;
            }

            this.loading = true;

            try {
                const response = await fetch("{{ route('news.generate') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": '{{ csrf_token() }}',
                    },
                    body: JSON.stringify({
                        title: this.judul
                    })
                });

                const data = await response.json();
                this.konten = data.konten || '[Gagal menghasilkan konten]';
            } catch (e) {
                alert("Gagal menghubungi AI. Silakan coba lagi.");
                console.error(e);
            }

            this.loading = false;
        }
    }
}
</script>
@endpush