@extends('layouts.admin')

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

@section('content')

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

       <!--  <form action="{{ route('edukasi.store') }}" method="POST"> -->
            <form action="{{ route('edukasi.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <!-- GAMBAR -->
            <div class="mb-3">
                <label class="form-label">Gambar</label>
                <input type="file" name="gambar" class="form-control">
            </div>

            <!-- JUDUL -->
            <div class="mb-3">
                <label class="form-label">Judul</label>
                <input type="text" name="judul" class="form-control" required>
            </div>

            <!-- ISI -->
            <div class="mb-3">
                <label class="form-label">Isi Edukasi</label>
                <textarea id="isi" name="isi"></textarea>
            </div>

            <!-- BUTTON -->
            <button class="btn btn-success">Simpan</button>
            <a href="{{ route('edukasi.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 () {

    ClassicEditor.create(document.querySelector('#isi'), {
        toolbar: [
            'heading', '|',
            'bold', 'italic', 'underline', 'strikethrough', '|',
            'fontSize', 'fontFamily', 'fontColor', 'fontBackgroundColor', '|',
            'alignment', '|',
            'bulletedList', 'numberedList', 'outdent', 'indent', '|',
            'link', 'blockQuote', 'insertTable', '|',
            'undo', 'redo'
        ]
    }).catch(error => console.error(error));

});
</script>

@endpush