121 lines
7.7 KiB
PHP
121 lines
7.7 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title = 'Edit Berita';
|
|
$subTitle = 'Manajemen Berita';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
{{-- ============================================== --}}
|
|
{{-- ===== KOLOM KIRI (INFO STATUS & GAMBAR) ===== --}}
|
|
{{-- ============================================== --}}
|
|
<div class="col-span-12 lg:col-span-4">
|
|
<div class="card border-0 rounded-2xl overflow-hidden bg-white dark:bg-neutral-800 h-full shadow-sm">
|
|
<div class="card-body p-6">
|
|
<h6 class="text-xl mb-4 font-bold text-neutral-800 dark:text-neutral-100">Status Berita</h6>
|
|
<ul class="space-y-4">
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">ID Berita</span>
|
|
<span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: #{{ $news->id }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Dibuat</span>
|
|
<span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ $news->created_at->format('d M Y') }}</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="my-6 border-neutral-100 dark:border-neutral-700">
|
|
|
|
{{-- Preview Gambar Saat Ini --}}
|
|
<div>
|
|
<p class="text-xs font-bold text-neutral-400 uppercase mb-3 text-center">Gambar Saat Ini:</p>
|
|
@if($news->image)
|
|
<img src="{{ asset('storage/' . $news->image) }}" id="image-preview" class="w-full h-48 object-cover rounded-xl border border-neutral-200 shadow-sm" alt="Preview">
|
|
@else
|
|
<div class="w-full h-48 flex items-center justify-center bg-neutral-50 rounded-xl border-2 border-dashed border-neutral-200">
|
|
<span class="text-neutral-400 text-sm">Tidak ada gambar</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div id="new-preview-label" class="mt-4 hidden">
|
|
<span class="bg-primary-50 text-primary-600 px-2 py-1 rounded text-[10px] font-bold uppercase">Gambar Baru Dipilih</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ============================================== --}}
|
|
{{-- ===== KOLOM KANAN (FORM EDIT BERITA) ===== --}}
|
|
{{-- ============================================== --}}
|
|
<div class="col-span-12 lg:col-span-8">
|
|
<div class="card h-full border-0 shadow-sm rounded-2xl">
|
|
<div class="card-body p-6">
|
|
<h6 class="text-xl mb-6 font-bold text-neutral-800 dark:text-neutral-100">Edit Konten Berita</h6>
|
|
|
|
<form action="{{ route('news.update', $news->id) }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
@method('PUT') {{-- PENTING: Untuk Update di Laravel gunakan method PUT --}}
|
|
|
|
<div class="grid grid-cols-1 gap-5">
|
|
{{-- Input Judul --}}
|
|
<div>
|
|
<label for="title" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Judul Berita <span class="text-rose-500">*</span></label>
|
|
<input type="text"
|
|
class="w-full rounded-xl border {{ $errors->has('title') ? 'border-rose-500' : 'border-neutral-200' }} dark:border-neutral-700 dark:bg-neutral-800 p-3 focus:ring-2 focus:ring-primary-500 focus:outline-none transition-all"
|
|
id="title" name="title"
|
|
value="{{ old('title', $news->title) }}" required>
|
|
@error('title') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
{{-- Input Isi --}}
|
|
<div>
|
|
<label for="content" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Isi Berita Lengkap <span class="text-rose-500">*</span></label>
|
|
<textarea name="content"
|
|
class="w-full rounded-xl border {{ $errors->has('content') ? 'border-rose-500' : 'border-neutral-200' }} dark:border-neutral-700 dark:bg-neutral-800 p-3 focus:ring-2 focus:ring-primary-500 focus:outline-none transition-all"
|
|
id="content" rows="10" required>{{ old('content', $news->content) }}</textarea>
|
|
@error('content') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
{{-- Input Gambar Baru --}}
|
|
<div>
|
|
<label for="image" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Ganti Gambar (Opsional)</label>
|
|
<input type="file" name="image" id="image-input" accept="image/*"
|
|
class="block w-full text-sm text-neutral-500 border border-neutral-200 dark:border-neutral-700 rounded-xl cursor-pointer bg-neutral-50 dark:bg-neutral-800 focus:outline-none file:mr-4 file:py-2.5 file:px-4 file:rounded-l-xl file:border-0 file:text-sm file:font-bold file:bg-primary-600 file:text-white hover:file:bg-primary-700 transition-all">
|
|
<p class="text-[11px] text-neutral-400 mt-2 italic">Biarkan kosong jika tidak ingin mengubah gambar utama.</p>
|
|
@error('image') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Tombol Aksi --}}
|
|
<div class="flex items-center justify-end gap-3 mt-10">
|
|
<a href="{{ route('news.index') }}" class="px-6 py-2.5 rounded-xl border border-neutral-200 dark:border-neutral-700 text-neutral-600 dark:text-neutral-400 font-bold text-sm hover:bg-neutral-50 transition-all">
|
|
Batal
|
|
</a>
|
|
<button type="submit" class="bg-primary-600 hover:bg-primary-700 text-white px-8 py-2.5 rounded-xl font-bold text-sm shadow-lg shadow-primary-200 transition-all flex items-center gap-2">
|
|
<iconify-icon icon="solar:check-read-bold" class="text-xl"></iconify-icon>
|
|
Update Berita
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script untuk Preview Real-time saat Ganti Gambar --}}
|
|
<script>
|
|
document.getElementById('image-input').onchange = evt => {
|
|
const [file] = document.getElementById('image-input').files
|
|
if (file) {
|
|
const imgPreview = document.getElementById('image-preview');
|
|
const label = document.getElementById('new-preview-label');
|
|
|
|
imgPreview.src = URL.createObjectURL(file);
|
|
label.classList.remove('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
@endsection |