@php $edit = $edit ?? false; @endphp

<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="md:col-span-2">
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Judul <span class="text-red-500">*</span></label>
        <input type="text" name="title" required placeholder="Judul berita..."
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
    <div>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Kategori <span class="text-red-500">*</span></label>
        <input type="text" name="category" required placeholder="Contoh: Perusahaan, SDM, Produk..."
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
    <div>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Penulis <span class="text-red-500">*</span></label>
        <input type="text" name="author" required placeholder="Nama penulis..."
            value="{{ auth()->user()->username }}"
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
    <div class="md:col-span-2">
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Ringkasan <span class="text-red-500">*</span></label>
        <textarea name="excerpt" rows="2" required placeholder="Ringkasan singkat berita (tampil di card)..."
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"></textarea>
    </div>
    <div class="md:col-span-2">
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Konten Lengkap <span class="text-red-500">*</span></label>
        <textarea name="content" rows="5" required placeholder="Isi lengkap berita..."
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition resize-none"></textarea>
    </div>
    <div>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Gambar Slider <span class="text-gray-400 font-normal">(hero/featured)</span></label>
        @if($edit)
        <img id="editImgSliderPreview" src="" class="hidden w-full h-24 object-cover rounded-lg mb-2">
        @endif
        <input type="file" name="image_slider" accept="image/*"
            class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm file:mr-3 file:border-0 file:bg-blue-50 file:text-blue-700 file:px-2 file:py-1 file:rounded file:text-xs">
        <p class="text-xs text-gray-400 mt-1">Dipakai untuk hero slider landing page</p>
    </div>
    <div>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Gambar Detail <span class="text-gray-400 font-normal">(halaman detail)</span></label>
        @if($edit)
        <img id="editImgDetailPreview" src="" class="hidden w-full h-24 object-cover rounded-lg mb-2">
        @endif
        <input type="file" name="image_detail" accept="image/*"
            class="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm file:mr-3 file:border-0 file:bg-blue-50 file:text-blue-700 file:px-2 file:py-1 file:rounded file:text-xs">
    </div>
    <div>
        <label class="block text-xs font-semibold text-gray-600 mb-1.5">Tanggal Publikasi</label>
        <input type="datetime-local" name="published_at"
            value="{{ now()->format('Y-m-d\TH:i') }}"
            class="w-full px-3 py-2.5 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 transition">
    </div>
    <div class="flex items-center gap-3 pt-4">
        <label class="relative inline-flex items-center cursor-pointer">
            <input type="checkbox" name="featured" value="1" class="sr-only peer">
            <div class="w-11 h-6 bg-gray-200 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-amber-500"></div>
            <span class="ml-3 text-xs font-semibold text-gray-600">Featured <span class="text-gray-400 font-normal">(tampil di hero slider)</span></span>
        </label>
    </div>
</div>