422 lines
18 KiB
PHP
422 lines
18 KiB
PHP
@extends('admin.layouts.app')
|
|
|
|
@section('title', 'Tambah Berita')
|
|
|
|
@push('styles')
|
|
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.css" rel="stylesheet">
|
|
<!-- Fallback CSS -->
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.css" rel="stylesheet">
|
|
<style>
|
|
.soft-card {
|
|
border: 0;
|
|
border-radius: 16px;
|
|
box-shadow: 0 10px 30px rgba(16, 24, 40, .06);
|
|
}
|
|
|
|
.form-label {
|
|
font-weight: 600;
|
|
color: #495057;
|
|
}
|
|
|
|
.required::after {
|
|
content: " *";
|
|
color: #dc3545;
|
|
}
|
|
|
|
.preview-image {
|
|
max-width: 200px;
|
|
max-height: 200px;
|
|
object-fit: cover;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Fix Summernote dropdown issues */
|
|
.note-editor .note-dropdown-menu {
|
|
z-index: 9999 !important;
|
|
position: absolute !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.note-editor .note-btn-group .note-dropdown-menu {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
.note-editor .note-fontname .note-dropdown-menu,
|
|
.note-editor .note-fontsize .note-dropdown-menu,
|
|
.note-editor .note-color .note-dropdown-menu,
|
|
.note-editor .note-para .note-dropdown-menu,
|
|
.note-editor .note-height .note-dropdown-menu {
|
|
z-index: 9999 !important;
|
|
position: absolute !important;
|
|
display: block !important;
|
|
}
|
|
|
|
/* Ensure dropdowns are visible */
|
|
.note-editor .note-dropdown-menu.show {
|
|
display: block !important;
|
|
visibility: visible !important;
|
|
opacity: 1 !important;
|
|
}
|
|
|
|
/* Fix for Bootstrap 4 compatibility */
|
|
.note-editor .dropdown-menu {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* Additional fixes for dropdown positioning */
|
|
.note-editor .note-btn-group {
|
|
position: relative !important;
|
|
}
|
|
|
|
.note-editor .note-dropdown-menu {
|
|
top: 100% !important;
|
|
left: 0 !important;
|
|
min-width: 100px !important;
|
|
}
|
|
|
|
/* Ensure color picker works */
|
|
.note-editor .note-color .note-dropdown-menu {
|
|
min-width: 200px !important;
|
|
}
|
|
|
|
/* Fix font size dropdown */
|
|
.note-editor .note-fontsize .note-dropdown-menu {
|
|
min-width: 80px !important;
|
|
}
|
|
|
|
/* Fix paragraph dropdown */
|
|
.note-editor .note-para .note-dropdown-menu {
|
|
min-width: 120px !important;
|
|
}
|
|
|
|
/* Fix height dropdown */
|
|
.note-editor .note-height .note-dropdown-menu {
|
|
min-width: 100px !important;
|
|
}
|
|
|
|
/* Ensure dropdowns are hidden by default */
|
|
.note-editor .note-dropdown-menu {
|
|
display: none !important;
|
|
}
|
|
|
|
/* Show dropdowns only when they have the 'show' class */
|
|
.note-editor .note-dropdown-menu.show {
|
|
display: block !important;
|
|
}
|
|
|
|
/* Prevent multiple dropdowns from showing */
|
|
.note-editor .note-dropdown-menu:not(.show) {
|
|
display: none !important;
|
|
visibility: hidden !important;
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* Ensure all toolbar buttons are clickable */
|
|
.note-editor .note-btn {
|
|
cursor: pointer !important;
|
|
pointer-events: auto !important;
|
|
}
|
|
|
|
.note-editor .note-btn:hover {
|
|
background-color: #e9ecef !important;
|
|
}
|
|
|
|
.note-editor .note-btn.active {
|
|
background-color: #007bff !important;
|
|
color: white !important;
|
|
}
|
|
|
|
/* Fix link dialog */
|
|
.note-editor .note-link-dialog {
|
|
z-index: 9999 !important;
|
|
}
|
|
|
|
/* Fix fullscreen mode */
|
|
.note-editor.note-editing-area.note-frame.fullscreen {
|
|
z-index: 9999 !important;
|
|
}
|
|
</style>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="card soft-card">
|
|
<div class="card-body">
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<div>
|
|
<h4 class="mb-0">Tambah Berita Baru</h4>
|
|
<small class="text-success">Buat berita baru untuk desa</small>
|
|
</div>
|
|
<a href="{{ route('admin.berita.index') }}" class="btn btn-outline-secondary">
|
|
<i class="ti ti-arrow-left"></i> Kembali
|
|
</a>
|
|
</div>
|
|
|
|
<form action="{{ route('admin.berita.store') }}" method="POST" enctype="multipart/form-data">
|
|
@csrf
|
|
|
|
<div class="row">
|
|
<div class="col-lg-8">
|
|
<!-- Judul -->
|
|
<div class="mb-3">
|
|
<label for="title" class="form-label required">Judul Berita</label>
|
|
<input type="text" class="form-control @error('title') is-invalid @enderror" id="title"
|
|
name="title" value="{{ old('title') }}" placeholder="Masukkan judul berita" required>
|
|
@error('title')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Slug -->
|
|
<div class="mb-3">
|
|
<label for="slug" class="form-label">Slug URL</label>
|
|
<input type="text" class="form-control @error('slug') is-invalid @enderror" id="slug"
|
|
name="slug" value="{{ old('slug') }}" placeholder="slug-berita-otomatis">
|
|
<small class="text-muted">Biarkan kosong untuk generate otomatis dari judul</small>
|
|
@error('slug')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div class="mb-3">
|
|
<label for="content" class="form-label required">Konten Berita</label>
|
|
<textarea class="form-control @error('content') is-invalid @enderror" id="content" name="content" rows="15"
|
|
placeholder="Tulis konten berita disini...">{{ old('content') }}</textarea>
|
|
@error('content')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4">
|
|
<!-- Kategori -->
|
|
<div class="mb-3">
|
|
<label for="category" class="form-label required">Kategori</label>
|
|
<select class="form-select @error('category') is-invalid @enderror" id="category"
|
|
name="category" required>
|
|
<option value="">Pilih kategori</option>
|
|
<option value="Infrastruktur" {{ old('category') == 'Infrastruktur' ? 'selected' : '' }}>
|
|
Infrastruktur</option>
|
|
<option value="Ekonomi" {{ old('category') == 'Ekonomi' ? 'selected' : '' }}>Ekonomi
|
|
</option>
|
|
<option value="Kesehatan" {{ old('category') == 'Kesehatan' ? 'selected' : '' }}>Kesehatan
|
|
</option>
|
|
<option value="Budaya" {{ old('category') == 'Budaya' ? 'selected' : '' }}>Budaya</option>
|
|
<option value="Pemerintahan" {{ old('category') == 'Pemerintahan' ? 'selected' : '' }}>
|
|
Pemerintahan</option>
|
|
<option value="Pendidikan" {{ old('category') == 'Pendidikan' ? 'selected' : '' }}>
|
|
Pendidikan</option>
|
|
<option value="Lingkungan" {{ old('category') == 'Lingkungan' ? 'selected' : '' }}>
|
|
Lingkungan</option>
|
|
<option value="Teknologi" {{ old('category') == 'Teknologi' ? 'selected' : '' }}>Teknologi
|
|
</option>
|
|
<option value="Umum" {{ old('category') == 'Umum' ? 'selected' : '' }}>Umum</option>
|
|
</select>
|
|
@error('category')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Status -->
|
|
<div class="mb-3">
|
|
<label for="status" class="form-label required">Status</label>
|
|
<select class="form-select @error('status') is-invalid @enderror" id="status" name="status"
|
|
required>
|
|
<option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>Draft</option>
|
|
<option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Published
|
|
</option>
|
|
<option value="archived" {{ old('status') == 'archived' ? 'selected' : '' }}>Archived
|
|
</option>
|
|
</select>
|
|
@error('status')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
</div>
|
|
|
|
<!-- Image -->
|
|
<div class="mb-3">
|
|
<label for="image" class="form-label">Gambar</label>
|
|
<input type="file" class="form-control @error('image') is-invalid @enderror" id="image"
|
|
name="image" accept="image/*" onchange="previewImage(this)">
|
|
<small class="text-muted">Format: JPG, PNG, GIF. Maks: 2MB</small>
|
|
@error('image')
|
|
<div class="invalid-feedback">{{ $message }}</div>
|
|
@enderror
|
|
|
|
<!-- Preview Image -->
|
|
<div id="imagePreview" class="mt-2" style="display: none;">
|
|
<img id="preview" class="preview-image" src="" alt="Preview">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="d-flex justify-content-end gap-2 mt-4">
|
|
<a href="{{ route('admin.berita.index') }}" class="btn btn-outline-secondary">
|
|
<i class="ti ti-x"></i> Batal
|
|
</a>
|
|
<button type="submit" class="btn btn-primary">
|
|
<i class="ti ti-device-floppy"></i> Simpan Berita
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-bs4.min.js"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.18/summernote-bs4.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
console.log('Document ready, initializing Summernote...');
|
|
|
|
// Check if Summernote is loaded
|
|
if (typeof $.fn.summernote === 'undefined') {
|
|
console.error('Summernote not loaded!');
|
|
return;
|
|
}
|
|
|
|
// Initialize Summernote
|
|
$('#content').summernote({
|
|
height: 400,
|
|
toolbar: [
|
|
|
|
['font', ['bold', 'underline', 'italic', 'strikethrough', 'clear']],
|
|
['fontname', ['fontname']],
|
|
['fontsize', ['fontsize']],
|
|
['color', ['color', 'backcolor']],
|
|
['para', ['ul', 'ol', 'paragraph']],
|
|
['height', ['height']],
|
|
['insert', ['link']],
|
|
['view', ['fullscreen', 'help']]
|
|
],
|
|
fontNames: [
|
|
'Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Helvetica',
|
|
'Impact', 'Tahoma', 'Times New Roman', 'Trebuchet MS', 'Verdana',
|
|
'Georgia', 'Palatino', 'Garamond', 'Bookman', 'Comic Sans MS',
|
|
'Trebuchet MS', 'Arial Black', 'Impact', 'Lucida Sans Unicode',
|
|
'Tahoma', 'Lucida Grande'
|
|
],
|
|
fontSizes: ['8', '9', '10', '11', '12', '14', '16', '18', '24', '36', '48', '64'],
|
|
colorNames: [
|
|
'Red', 'Orange', 'Yellow', 'Green', 'Blue', 'Purple', 'Pink',
|
|
'Brown', 'Black', 'White', 'Gray', 'Light Gray', 'Dark Gray',
|
|
'Cyan', 'Magenta', 'Lime', 'Navy', 'Teal', 'Maroon', 'Olive'
|
|
],
|
|
callbacks: {
|
|
onInit: function() {
|
|
console.log('Summernote initialized successfully!');
|
|
|
|
// Fix dropdown behavior
|
|
setTimeout(function() {
|
|
// Remove all existing click handlers
|
|
$('.note-fontname, .note-fontsize, .note-color, .note-para, .note-height').off('click');
|
|
|
|
// Add proper click handlers for all dropdowns
|
|
$('.note-fontname, .note-fontsize, .note-color, .note-para, .note-height').on('click', function(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
var $currentDropdown = $(this).find('.note-dropdown-menu');
|
|
var isOpen = $currentDropdown.hasClass('show');
|
|
|
|
// Close all dropdowns first
|
|
$('.note-dropdown-menu').removeClass('show');
|
|
|
|
// Toggle current dropdown only if it wasn't open
|
|
if (!isOpen) {
|
|
$currentDropdown.addClass('show');
|
|
}
|
|
});
|
|
|
|
// Close dropdowns when clicking on dropdown items
|
|
$('.note-dropdown-menu a').on('click', function() {
|
|
$(this).closest('.note-dropdown-menu').removeClass('show');
|
|
});
|
|
|
|
// Close dropdowns when clicking outside
|
|
$(document).on('click', function(e) {
|
|
if (!$(e.target).closest('.note-btn-group').length) {
|
|
$('.note-dropdown-menu').removeClass('show');
|
|
}
|
|
});
|
|
|
|
// Close dropdowns when pressing Escape key
|
|
$(document).on('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
$('.note-dropdown-menu').removeClass('show');
|
|
}
|
|
});
|
|
|
|
// Ensure all buttons are clickable
|
|
$('.note-btn').on('click', function() {
|
|
console.log('Button clicked:', $(this).attr('data-original-title') || $(this).text());
|
|
});
|
|
|
|
// Test link functionality
|
|
$('.note-link-btn').on('click', function() {
|
|
console.log('Link button clicked');
|
|
});
|
|
|
|
// Debug dropdown buttons
|
|
console.log('Found dropdown buttons:');
|
|
$('.note-btn-group').each(function() {
|
|
var $btn = $(this).find('.note-btn');
|
|
var title = $btn.attr('data-original-title') || $btn.text();
|
|
var classes = $btn.attr('class');
|
|
console.log('Button:', title, 'Classes:', classes);
|
|
});
|
|
|
|
}, 500);
|
|
},
|
|
onFocus: function() {
|
|
console.log('Editor focused');
|
|
},
|
|
onChange: function(contents, $editable) {
|
|
console.log('Content changed');
|
|
},
|
|
onPaste: function(e) {
|
|
console.log('Content pasted');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Auto generate slug from title
|
|
$('#title').on('keyup', function() {
|
|
let title = $(this).val();
|
|
let slug = title.toLowerCase()
|
|
.replace(/[^a-z0-9 -]/g, '')
|
|
.replace(/\s+/g, '-')
|
|
.replace(/-+/g, '-')
|
|
.trim('-');
|
|
$('#slug').val(slug);
|
|
});
|
|
|
|
// Test if editor is working
|
|
setTimeout(function() {
|
|
if ($('#content').next('.note-editor').length > 0) {
|
|
console.log('Summernote editor is properly initialized');
|
|
} else {
|
|
console.error('Summernote editor failed to initialize');
|
|
}
|
|
}, 1000);
|
|
});
|
|
|
|
// Image preview function
|
|
function previewImage(input) {
|
|
if (input.files && input.files[0]) {
|
|
var reader = new FileReader();
|
|
reader.onload = function(e) {
|
|
$('#preview').attr('src', e.target.result);
|
|
$('#imagePreview').show();
|
|
}
|
|
reader.readAsDataURL(input.files[0]);
|
|
} else {
|
|
$('#imagePreview').hide();
|
|
}
|
|
}
|
|
</script>
|
|
@endpush
|