80 lines
3.6 KiB
PHP
80 lines
3.6 KiB
PHP
<div class="mx-auto max-w-4xl">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<flux:heading size="xl">Edit Berita</flux:heading>
|
|
<flux:subheading>Perbarui informasi atau edukasi kesehatan yang sudah ada.</flux:subheading>
|
|
</div>
|
|
<flux:button :href="route('admin.news')" variant="ghost" icon="arrow-left" wire:navigate>Kembali</flux:button>
|
|
</div>
|
|
|
|
<flux:card>
|
|
<form wire:submit.prevent="save" class="space-y-6">
|
|
{{-- Input Judul --}}
|
|
<flux:input wire:model="title" label="Judul Berita" />
|
|
|
|
<div class="gap-6 grid grid-cols-1 md:grid-cols-2">
|
|
{{-- Dropdown Kategori --}}
|
|
<div class="space-y-2">
|
|
<flux:select wire:model="category_id" label="Kategori" placeholder="Pilih kategori...">
|
|
@foreach ($categories as $cat)
|
|
<flux:select.option value="{{ $cat->id }}">{{ $cat->name }}</flux:select.option>
|
|
@endforeach
|
|
</flux:select>
|
|
<flux:error name="category_id" />
|
|
</div>
|
|
|
|
{{-- Input Gambar --}}
|
|
<div class="space-y-2">
|
|
<flux:input type="file" wire:model="image" label="Ganti Gambar Thumbnail" secondary />
|
|
<flux:error name="image" />
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Preview Area --}}
|
|
<div class="gap-4 grid grid-cols-1 md:grid-cols-2 mt-2">
|
|
@if ($oldImage && !$image)
|
|
<div>
|
|
<p class="mb-2 text-zinc-500 text-xs italic">Gambar Saat Ini:</p>
|
|
<img src="{{ asset('storage/' . $oldImage) }}" class="border rounded-xl w-full h-40 object-cover">
|
|
</div>
|
|
@endif
|
|
|
|
@if ($image)
|
|
<div>
|
|
<p class="mb-2 text-blue-600 text-xs italic">Preview Gambar Baru:</p>
|
|
<img src="{{ $image->temporaryUrl() }}" class="border border-blue-500 rounded-xl w-full h-40 object-cover">
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Isi Berita (Trix Editor) --}}
|
|
<div class="space-y-2">
|
|
<flux:label>Konten Berita</flux:label>
|
|
|
|
<div wire:ignore
|
|
x-data="{
|
|
value: @entangle('content'),
|
|
init() {
|
|
this.$refs.trix.editor.loadHTML(this.value);
|
|
}
|
|
}"
|
|
x-on:trix-change="value = $refs.trix.value"
|
|
class="bg-white dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 rounded-xl overflow-hidden">
|
|
<input id="x_edit" type="hidden">
|
|
<trix-editor x-ref="trix" input="x_edit" class="p-4 focus:outline-none min-h-[300px] dark:text-white trix-content"></trix-editor>
|
|
</div>
|
|
<flux:error name="content" />
|
|
</div>
|
|
|
|
{{-- Footer Form: Checkbox & Submit --}}
|
|
<div class="flex justify-between items-center bg-zinc-50 dark:bg-white/5 p-4 border border-zinc-200 dark:border-zinc-700 rounded-xl">
|
|
{{-- Gunakan boolean value agar tercentang otomatis --}}
|
|
<flux:checkbox wire:model="is_published" label="Publikasikan Berita"
|
|
:checked="$is_published" />
|
|
|
|
<flux:button type="submit" variant="primary">Perbarui Berita</flux:button>
|
|
</div>
|
|
</form>
|
|
</flux:card>
|
|
</div>
|