@extends('layouts.admin')

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

@section('content')

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

        <form action="{{ route('edukasi.update', $edukasi->id) }}" 
              method="POST" 
              enctype="multipart/form-data">
            @csrf
            @method('PUT')

            <!-- GAMBAR -->
            @if($edukasi->gambar)
                <div class="mb-3">
                    <label>Gambar Saat Ini</label><br>
                    <img src="{{ asset('uploads/'.$edukasi->gambar) }}" 
                         style="max-height:150px;" 
                         class="rounded mb-2">
                </div>
            @endif

            <div class="mb-3">
                <label class="form-label">Ganti 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" 
                       value="{{ $edukasi->judul }}" 
                       class="form-control" 
                       required>
            </div>

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

            <!-- BUTTON -->
            <button class="btn btn-success">Update</button>
            <a href="{{ route('edukasi.index') }}" class="btn btn-secondary">Kembali</a>

        </form>

    </div>
</div>

@endsection


@push('scripts')

<!-- ✅ CKEDITOR 5 (SAMA SEPERTI CREATE) -->
<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