128 lines
8.2 KiB
PHP
128 lines
8.2 KiB
PHP
@extends('layout.layout')
|
|
@php
|
|
$title = 'Tambah Berita Baru';
|
|
$subTitle = 'Manajemen Berita';
|
|
@endphp
|
|
|
|
@section('content')
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
|
|
{{-- ============================================== --}}
|
|
{{-- ===== KOLOM KIRI (INFO STATUS) ===== --}}
|
|
{{-- ============================================== --}}
|
|
<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 Pembuatan</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">Penulis</span>
|
|
<span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ auth()->user()->name ?? 'Admin' }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Tanggal</span>
|
|
<span class="w-[65%] text-neutral-800 dark:text-neutral-200 font-bold">: {{ date('d M Y') }}</span>
|
|
</li>
|
|
<li class="flex items-center gap-2">
|
|
<span class="w-[35%] text-sm font-semibold text-neutral-500 uppercase tracking-wider">Status</span>
|
|
<span class="w-[65%]">
|
|
: <span class="bg-amber-50 text-amber-600 px-2 py-1 rounded text-xs font-bold uppercase">Draft</span>
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
|
|
<hr class="my-6 border-neutral-100 dark:border-neutral-700">
|
|
|
|
<div class="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl border border-blue-100 dark:border-blue-800">
|
|
<p class="text-xs text-blue-600 dark:text-blue-400 leading-relaxed font-medium">
|
|
<iconify-icon icon="solar:info-circle-bold" class="inline-block mr-1"></iconify-icon>
|
|
Pastikan judul menarik dan isi berita sudah diperiksa ejaannya sebelum diterbitkan ke publik.
|
|
</p>
|
|
</div>
|
|
|
|
{{-- Container untuk Preview Gambar --}}
|
|
<div id="preview-container" class="mt-6 hidden">
|
|
<p class="text-xs font-bold text-neutral-400 uppercase mb-2">Preview Gambar:</p>
|
|
<img id="image-preview" src="#" alt="Preview" class="w-full h-48 object-cover rounded-xl border-2 border-dashed border-neutral-200">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ============================================== --}}
|
|
{{-- ===== KOLOM KANAN (FORM INPUT 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">Konten Berita</h6>
|
|
|
|
<form action="{{ route('news.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<div class="grid grid-cols-1 gap-5">
|
|
{{-- Input Judul Berita --}}
|
|
<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"
|
|
placeholder="Contoh: Jadwal Pengurasan Bak Penampungan Air"
|
|
value="{{ old('title') }}" required>
|
|
@error('title') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
{{-- Input Isi Berita --}}
|
|
<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"
|
|
placeholder="Tuliskan berita secara detail di sini..." required>{{ old('content') }}</textarea>
|
|
@error('content') <span class="text-xs text-rose-500 mt-1">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
{{-- Input Gambar Berita --}}
|
|
<div>
|
|
<label for="image" class="block font-bold text-neutral-700 dark:text-neutral-200 text-sm mb-2">Gambar Utama / Thumbnail</label>
|
|
|
|
<div class="relative">
|
|
<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">
|
|
</div>
|
|
<p class="text-[11px] text-neutral-400 mt-2 italic">* Format: JPG, PNG, atau WEBP. Maksimal 2MB.</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 dark:shadow-none transition-all flex items-center gap-2">
|
|
<iconify-icon icon="solar:diskette-bold-duotone" class="text-xl"></iconify-icon>
|
|
Simpan Berita
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Script untuk Preview Gambar --}}
|
|
<script>
|
|
document.getElementById('image-input').onchange = evt => {
|
|
const [file] = document.getElementById('image-input').files
|
|
if (file) {
|
|
const container = document.getElementById('preview-container');
|
|
const imgPreview = document.getElementById('image-preview');
|
|
|
|
imgPreview.src = URL.createObjectURL(file);
|
|
container.classList.remove('hidden');
|
|
}
|
|
}
|
|
</script>
|
|
|
|
@endsection |