129 lines
7.5 KiB
PHP
129 lines
7.5 KiB
PHP
@extends('server-side.layouts.server-app')
|
|
@section('pageTitle', 'Tambah Data Artikel | KlinikSapi.Go')
|
|
@section('mainContent')
|
|
<div class="content d-flex flex-column flex-column-fluid" id="kt_content">
|
|
<div class="toolbar" id="kt_toolbar">
|
|
<div id="kt_toolbar_container" class="container-fluid d-flex flex-stack">
|
|
<div data-kt-swapper="true" data-kt-swapper-mode="prepend"
|
|
data-kt-swapper-parent="{default: '#kt_content_container', 'lg': '#kt_toolbar_container'}"
|
|
class="page-title d-flex align-items-center flex-wrap me-3 mb-5 mb-lg-0">
|
|
<h1 class="d-flex align-items-center text-dark fw-bolder fs-3 my-1">Manajemen Konten
|
|
<span class="h-20px border-gray-200 border-start ms-3 mx-2"></span>
|
|
<small class="text-muted fs-7 fw-bold my-1 ms-1">Blog Artikel / Tambah Artikel</small>
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="post d-flex flex-column-fluid" id="kt_post">
|
|
<div id="kt_content_container" class="container-xxl">
|
|
<div class="card mb-5 mb-xl-8 px-10 px-lg-15 py-15">
|
|
<form action="{{ route('informasi.store') }}" method="POST" class="form" enctype="multipart/form-data" autocomplete="off">
|
|
@csrf
|
|
<div class="mb-10">
|
|
<h1 class="mb-3">Formulir Penambahan Data Artikel</h1>
|
|
<div class="text-muted fw-bold fs-5">Silahkan lengkapi formulir penambahan <strong>Data Artikel</strong> di bawah ini!</div>
|
|
</div>
|
|
<div class="row g-9 mb-8">
|
|
<div class="col-md-12 fv-row">
|
|
<label class="d-flex align-items-center fs-6 fw-bold mb-2">
|
|
<span class="required">Judul Artikel</span>
|
|
</label>
|
|
<input type="text" class="form-control form-control-solid text-capitalize" name="judul" value="{{ old('judul') }}" />
|
|
@if ($errors->has('judul'))
|
|
<p class="mt-2 text-sm" style="color: red; font-weight: 500;"><span
|
|
class="font-medium">Oops!</span> {{ $errors->first('judul') }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="d-flex align-items-center fs-6 fw-bold mb-2">
|
|
<span class="required">Penulis</span>
|
|
</label>
|
|
<input type="text" class="form-control form-control-solid" value="{{ Auth::user()->name }}" readonly />
|
|
</div>
|
|
<div class="col-md-6 fv-row">
|
|
<label class="d-flex align-items-center fs-6 fw-bold mb-2">
|
|
<span class="required">Kategori Informasi Penyakit</span>
|
|
</label>
|
|
<select class="form-select form-select-solid" data-control="select2" name="penyakitId">
|
|
<option value="">---</option>
|
|
@foreach ($penyakit as $item)
|
|
<option value="{{ $item->penyakitId }}" {{ old('penyakitId') == $item->penyakitId ? 'selected' : '' }}>{{ $item->penyakit }}</option>
|
|
@endforeach
|
|
</select>
|
|
@if ($errors->has('penyakitId'))
|
|
<p class="mt-2 text-sm" style="color: red; font-weight: 500;"><span
|
|
class="font-medium">Oops!</span> {{ $errors->first('penyakitId') }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="col-md-12 fv-row">
|
|
<label class="d-flex align-items-center fs-6 fw-bold mb-2">
|
|
<span class="required">Gambar Artikel</span>
|
|
</label>
|
|
<input type="file" id="gambar" class="form-control form-control-solid" name="gambar" />
|
|
@if ($errors->has('gambar'))
|
|
<p class="mt-2 text-sm" style="color: red; font-weight: 500;"><span class="font-medium">Oops!</span> {{ $errors->first('gambar') }}</p>
|
|
@endif
|
|
<div class="mt-1">
|
|
<span class="text-muted mx-1">Masukkan ekstensi file (.png, .jpg, .jpeg) dan ukuran maksimum 2mb.</span>
|
|
</div>
|
|
<img id="preview" src="" alt="Preview Image" class="d-none rounded-lg w-100 mt-2 rounded" />
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column mb-8">
|
|
<label class="fs-6 fw-bold mb-2 required">Informasi Artikel</label>
|
|
<textarea id="content" class="form-control form-control-solid" name="artikel">{{ old('artikel') }}</textarea>
|
|
@if ($errors->has('artikel'))
|
|
<p class="mt-2 text-sm" style="color: red; font-weight: 500;"><span
|
|
class="font-medium">Oops!</span> {{ $errors->first('artikel') }}</p>
|
|
@endif
|
|
</div>
|
|
<div class="float-start">
|
|
<button type="submit" class="btn btn-primary">
|
|
<span class="indicator-label">Simpan Data</span>
|
|
</button>
|
|
<button type="reset" class="btn btn-light me-3">Batal</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
@push('addScripts')
|
|
<script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
|
|
<script>
|
|
CKEDITOR.replace('content', {
|
|
height: 400
|
|
});
|
|
CKEDITOR.on('instanceReady', function (ev) {
|
|
let editor = ev.editor;
|
|
let editorContainer = editor.container.$;
|
|
editorContainer.style.borderRadius = '5px';
|
|
editorContainer.style.overflow = 'hidden';
|
|
let editableElement = editor.editable().$;
|
|
editableElement.style.borderRadius = '5px';
|
|
editableElement.style.fontSize = '16px';
|
|
editableElement.style.fontFamily = 'Arial';
|
|
editableElement.style.letterSpacing = '1px';
|
|
let editorTop = editorContainer.querySelector('.cke_top');
|
|
editorTop.style.backgroundColor = '#f5f8fa';
|
|
let editorBottom = editorContainer.querySelector('.cke_bottom');
|
|
editorBottom.style.backgroundColor = '#f5f8fa';
|
|
});
|
|
|
|
const input = document.getElementById('gambar');
|
|
const preview = document.getElementById('preview');
|
|
input.addEventListener('change', () => {
|
|
const file = input.files[0];
|
|
if (file) {
|
|
const reader = new FileReader();
|
|
reader.addEventListener('load', () => {
|
|
preview.src = reader.result;
|
|
preview.classList.remove('d-none');
|
|
});
|
|
reader.readAsDataURL(file);
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|