@extends('layouts.admin')

@section('title', 'Tambah Penyakit')

@section('content')

<div class="card shadow-sm">
    <div class="card-body">

        <form action="{{ route('penyakit.store') }}" method="POST">
            @csrf

            <!-- Kode Penyakit -->
            <div class="mb-3">
                <label class="form-label">Kode Penyakit</label>
                <input type="text"
                        name="kode"
                        class="form-control"
                        value="{{ $kode }}"
                        readonly>
            </div>

            <!-- Nama Penyakit -->
            <div class="mb-3">
                <label class="form-label">Nama Penyakit</label>
                <input type="text" name="nama" class="form-control" placeholder="Masukan Penyakit" required>
            </div>

            <!-- Deskripsi -->
            <div class="mb-3">
                <label class="form-label">Deskripsi</label>
                <textarea id="deskripsi" name="deskripsi"></textarea>
            </div>

            <!-- Solusi -->
            <div class="mb-3">
                <label class="form-label">Solusi</label>
                <textarea id="solusi" name="solusi"></textarea>
            </div>

            <!-- Komplikasi -->
            <div class="mb-3">
                <label class="form-label">Komplikasi</label>
                <textarea id="komplikasi" name="komplikasi"></textarea>
            </div>

            <!-- Button -->
            <button class="btn btn-success">Simpan</button>
            <a href="{{ route('penyakit.index') }}" class="btn btn-secondary">Kembali</a>

        </form>

    </div>
</div>

@endsection


@push('scripts')

<!-- CKEditor 5 -->
<script src="https://cdn.ckeditor.com/ckeditor5/39.0.1/classic/ckeditor.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {

    const config = {
        toolbar: [
            'heading', '|',
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'alignment', '|',
            'bulletedList', 'numberedList', 'outdent', 'indent', '|',
            'link', 'blockQuote', 'insertTable', 'mediaEmbed', '|',
            'undo', 'redo'
        ]
    };

    ClassicEditor.create(document.querySelector('#deskripsi'), config)
        .catch(error => console.error(error));

    ClassicEditor.create(document.querySelector('#solusi'), config)
        .catch(error => console.error(error));

    ClassicEditor.create(document.querySelector('#komplikasi'), config)
        .catch(error => console.error(error));

});
</script>

@endpush