{/* Header */}

Tambah Berita Baru

Buat artikel berita untuk dipublikasikan

{/* Flash */} {flash?.success &&

{flash.success}

} {flash?.error &&

{flash.error}

} {/* Form */}

Formulir Berita

Lengkapi informasi berita di bawah ini

{/* Judul */}

Judul Berita * setData('judul', ev.target.value)} placeholder="Masukkan judul berita yang menarik..." className={inputAdminLg(e.judul)} />

{/* Kategori + Tanggal */}

Kategori *

Tanggal Terbit * setData('tanggal_terbit', ev.target.value)} className={inputAdminLg(e.tanggal_terbit)} />

{/* Kutipan */}

Kutipan/Ringkasan *

setData('kutipan', ev.target.value)}
                                    placeholder="Ringkasan singkat berita yang akan ditampilkan di halaman utama..."
                                    className={inputAdminLg(e.kutipan)} />
                                <p className="mt-1 text-xs text-gray-500">Maksimal 200 karakter untuk preview di halaman utama</p>
                                <FieldError message={e.kutipan} />
                            </div>

{/* Isi */}
                            <div>
                                <label htmlFor="isi" className="block text-sm font-medium text-gray-700 sm:text-base">
                                    Isi Berita <span className="text-red-500">*</span>
                                </label>
                                <textarea id="isi" value={data.isi} rows={12}
                                    onChange={(ev) => setData('isi', ev.target.value)}
                                    placeholder="Tulis konten lengkap berita di sini..."
                                    className={inputAdminLg(e.isi)} />
                                <FieldError message={e.isi} />
                            </div>

{/* Gambar */}
                            <div>
                                <label htmlFor="gambar" className="block text-sm font-medium text-gray-700 sm:text-base">Gambar Berita</label>
                                <div className={`mt-1 flex justify-center rounded-md border-2 border-dashed px-6 py-8 transition-colors hover:border-gray-400 ${e.gambar ? 'border-red-300 bg-red-50' : 'border-gray-300'}`}>
                                    <div className="space-y-2 text-center">
                                        <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-lg bg-gray-100">
                                            <FileText className="h-6 w-6 text-gray-600" />
                                        </div>
                                        <div className="text-sm text-gray-600">
                                            <label htmlFor="gambar" className="cursor-pointer font-medium text-orange-600 hover:text-orange-500">Upload gambar</label>
                                            <span className="pl-1">atau drag and drop</span>
                                        </div>
                                        <p className="text-xs text-gray-500">PNG, JPG, GIF hingga 2MB</p>
                                    </div>
                                </div>
                                <input id="gambar" type="file" accept="image/*"
                                    onChange={(ev) => setData('gambar', ev.target.files ? ev.target.files[0] : null)}
                                    className="sr-only" />
                                {data.gambar && <p className="mt-2 text-sm text-gray-600">File terpilih: {data.gambar.name}</p>}
                                <FieldError message={e.gambar} />
                            </div>
                        </div>

{/* Actions */}
                        <div className="mt-6 flex flex-col-reverse gap-3 border-t border-gray-200 pt-6 sm:flex-row sm:justify-end">
                            <Link href={route('admin.berita.index')}
                                className="inline-flex justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 sm:w-auto">
                                Batal
                            </Link>
                            <button type="submit" disabled={processing}
                                className="inline-flex justify-center rounded-md bg-orange-600 px-6 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto">
                                {processing ? 'Menyimpan...' : 'Simpan Berita'}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}