@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-sky-950 font-poppins tracking-tight">Buat Berita Baru</h1>
            <nav class="flex items-center gap-2 mt-1">
                <span class="text-[10px] font-bold text-sky-500 uppercase tracking-widest">Konten</span>
                <i class="fas fa-chevron-right text-[8px] text-slate-300"></i>
                <span class="text-[10px] font-bold text-slate-400 uppercase tracking-widest">Tambah Berita</span>
            </nav>
        </div>
        <a href="{{ url()->previous() }}" class="text-sky-600 hover:text-sky-700 font-bold text-xs uppercase tracking-widest flex items-center gap-2">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <div class="lg:col-span-2 space-y-6">
            <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                <div class="space-y-6">
                    <div>
                        <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Judul Berita</label>
                        <input type="text" placeholder="Ketikkan judul berita yang menarik..." 
                            class="w-full mt-2 px-6 py-4 rounded-2xl bg-sky-50/30 border border-sky-100 outline-none focus:border-sky-500 focus:bg-white transition text-base font-semibold text-sky-950">
                    </div>
                    
                    <div>
                        <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Konten Lengkap</label>
                        <div class="mt-2 border border-sky-100 rounded-2xl overflow-hidden shadow-inner bg-white">
                            <div class="bg-sky-50/50 border-b border-sky-100 px-4 py-3 flex gap-6 text-slate-400">
                                <i class="fas fa-bold hover:text-sky-600 cursor-pointer transition"></i>
                                <i class="fas fa-italic hover:text-sky-600 cursor-pointer transition"></i>
                                <i class="fas fa-underline hover:text-sky-600 cursor-pointer transition"></i>
                                <span class="w-[1px] h-4 bg-sky-200"></span>
                                <i class="fas fa-link hover:text-sky-600 cursor-pointer transition"></i>
                                <i class="fas fa-image hover:text-sky-600 cursor-pointer transition"></i>
                                <i class="fas fa-list hover:text-sky-600 cursor-pointer transition"></i>
                            </div>
                            <textarea rows="15" placeholder="Tuliskan isi berita Anda di sini secara detail..." 
                                class="w-full px-6 py-5 outline-none focus:bg-white transition resize-none text-slate-600 leading-relaxed"></textarea>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="space-y-6">
            <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Thumbnail Gambar</label>
                <div class="mt-4 border-2 border-dashed border-sky-100 rounded-3xl p-8 text-center hover:border-sky-400 transition cursor-pointer bg-sky-50/30 group">
                    <div class="w-14 h-14 bg-white rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-sm group-hover:scale-110 transition-transform">
                        <i class="fas fa-cloud-upload-alt text-sky-500 text-xl"></i>
                    </div>
                    <p class="text-xs font-bold text-sky-900">Pilih Gambar Utama</p>
                    <p class="text-[10px] text-slate-400 mt-1 uppercase tracking-tighter">Maksimal 2 MB (JPG, PNG)</p>
                </div>
            </div>

            <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Kategori Berita</label>
                <div class="relative">
                    <select class="w-full mt-3 px-5 py-4 rounded-2xl bg-sky-50/30 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-bold text-sky-900 appearance-none cursor-pointer">
                        <option>Kegiatan Yayasan</option>
                        <option>Berita Pendidikan</option>
                        <option>Update Pendaftaran</option>
                    </select>
                    <i class="fas fa-chevron-down absolute right-5 top-[60%] -translate-y-1/2 text-sky-300 pointer-events-none text-xs"></i>
                </div>
            </div>

            <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-100">
                <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Tindakan Publikasi</label>
                <div class="mt-4 flex flex-col gap-3">
                    <button class="w-full bg-sky-600 text-white font-bold py-4 rounded-2xl hover:bg-sky-700 transition shadow-lg shadow-sky-100 flex items-center justify-center gap-2 transform active:scale-95">
                        <i class="fas fa-paper-plane text-xs text-sky-200"></i> Publish Sekarang
                    </button>
                    <button class="w-full bg-slate-100 text-slate-600 font-bold py-4 rounded-2xl hover:bg-slate-200 transition flex items-center justify-center gap-2">
                        <i class="fas fa-save text-xs"></i> Simpan ke Draft
                    </button>
                </div>
                <div class="mt-6 pt-6 border-t border-sky-50">
                    <div class="flex items-center justify-between text-[11px] font-bold text-slate-400">
                        <span>Status:</span>
                        <span class="text-yellow-600 bg-yellow-50 px-2 py-1 rounded-md uppercase">Draft</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div> 
@endsection