@extends('layouts.admin')

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

@section('content')

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

        <form action="{{ route('penyakit.update', $penyakit->id) }}" method="POST">
            @csrf
            @method('PUT')

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

            <!-- Nama Penyakit -->
            <div class="mb-3">
                <label class="form-label">Nama Penyakit</label>
                <input type="text" 
                       name="nama" 
                       value="{{ $penyakit->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">{!! $penyakit->deskripsi !!}</textarea>
            </div>

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

            <!-- Komplikasi -->
            <div class="mb-3">
                <label class="form-label">Risiko Komplikasi</label>
                <textarea id="komplikasi" name="komplikasi">{!! $penyakit->komplikasi !!}</textarea>
                <small class="text-muted">
                    Contoh: Stroke, gagal ginjal, penyakit jantung
                </small>
            </div>

            <!-- BUTTON -->
            <button class="btn btn-success">Update</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', '|',
            '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