@extends('admin.layout.tamplate')

@section('content')
<div class="p-6 md:p-10 space-y-8">
    @include('admin.layout.breadcumb')

    <div class="max-w-5xl mx-auto">
        {{-- Logika Penentuan Mode (Tambah atau Edit) --}}
        @php
            $isEdit = isset($data);
            $route = $isEdit ? route('dashboard.program.update', $data->id) : route('dashboard.program.store');
        @endphp

        <form action="{{ $route }}" method="POST" enctype="multipart/form-data" class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            @csrf
            @if($isEdit) @method('PUT') @endif

            {{-- Kolom Kiri: Upload Thumbnail Utama --}}
            <div class="lg:col-span-1 space-y-6">
                <div class="bg-white p-8 rounded-[2.5rem] shadow-sm border border-sky-50 text-center sticky top-10">
                    <h3 class="text-lg font-bold text-sky-950 mb-4">Gambar Sampul</h3>
                    
                    {{-- Preview Container --}}
                    <div class="relative group mx-auto w-full aspect-square mb-6 rounded-3xl overflow-hidden bg-sky-50 border-2 border-dashed border-sky-200 flex items-center justify-center transition-all hover:border-sky-400">
                        @if($isEdit && $data->image_meta)
                            <img id="preview-img" src="{{ asset('uploads/programs/meta/'.$data->image_meta) }}" class="w-full h-full object-cover">
                            <div id="placeholder-upload" class="hidden flex flex-col items-center text-sky-400">
                                <i class="fas fa-cloud-upload-alt text-4xl mb-2"></i>
                                <span class="text-[10px] font-bold uppercase tracking-wider">Pilih Foto</span>
                            </div>
                        @else
                            <img id="preview-img" src="" class="hidden w-full h-full object-cover">
                            <div id="placeholder-upload" class="flex flex-col items-center text-sky-400">
                                <i class="fas fa-cloud-upload-alt text-4xl mb-2"></i>
                                <span class="text-[10px] font-bold uppercase tracking-wider">Pilih Foto</span>
                            </div>
                        @endif
                    </div>

                    <input type="file" name="image" id="image-input" class="hidden" accept="image/*">
                    <label for="image-input" class="inline-block px-6 py-3 bg-sky-50 text-sky-600 rounded-xl text-xs font-bold cursor-pointer hover:bg-sky-600 hover:text-white transition shadow-sm active:scale-95">
                        <i class="fas fa-image mr-2"></i> {{ $isEdit ? 'Ganti Sampul' : 'Pilih Berkas' }}
                    </label>
                    
                    @error('image')
                        <p class="text-red-500 text-[10px] mt-2 font-bold uppercase tracking-tighter">{{ $message }}</p>
                    @enderror
                    <p class="text-[10px] text-slate-400 mt-4 leading-relaxed italic">Rekomendasi ukuran: 800x800px <br> Maksimal 2MB (JPG/PNG/WEBP)</p>
                </div>
            </div>

            {{-- Kolom Kanan: Form Konten --}}
            <div class="lg:col-span-2 space-y-6">
                <div class="bg-white p-8 md:p-10 rounded-[2.5rem] shadow-sm border border-sky-50 space-y-7">
                  

                    <div class="space-y-6">
                        {{-- Title --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Judul Lengkap Program</label>
                            <input type="text" name="title" value="{{ old('title', $data->title ?? '') }}" required 
                                placeholder="Contoh: Program Bantuan Sosial Mandiri"
                                class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 focus:ring-4 focus:ring-sky-500/5 transition text-sm font-bold text-sky-950">
                            @error('title') <span class="text-red-500 text-[10px] font-bold ml-1">{{ $message }}</span> @enderror
                        </div>

                        {{-- Kategori --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Klasifikasi Kategori</label>
                            <select name="program_category_id" required
                                class="w-full px-6 py-4 rounded-2xl bg-sky-50/50 border border-sky-100 outline-none focus:border-sky-500 transition text-sm font-bold text-sky-900 shadow-inner">
                                <option value="">--- Pilih Satu Kategori ---</option>
                                @foreach($categories as $cat)
                                    <option value="{{ $cat->id }}" {{ old('program_category_id', $data->program_category_id ?? '') == $cat->id ? 'selected' : '' }}>
                                        {{ $cat->name }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        {{-- Deskripsi (CKEditor) --}}
                        <div class="space-y-2">
                            <label class="text-[10px] font-bold text-sky-900/40 uppercase ml-1 tracking-widest">Detail Konten & Deskripsi</label>
                            <div class="ck-editor-wrapper">
                                <textarea name="description" id="editor">{{ old('description', $data->description ?? '') }}</textarea>
                            </div>
                            @error('description') <span class="text-red-500 text-[10px] font-bold ml-1 uppercase">{{ $message }}</span> @enderror
                        </div>
                    </div>

                    {{-- Tombol Aksi --}}
                    <div class="flex flex-col md:flex-row gap-4 pt-6 border-t border-sky-50">
                        <a href="{{ route('dashboard.program') }}" class="flex-1 px-8 py-4 rounded-2xl bg-slate-100 text-slate-500 font-bold text-center text-sm hover:bg-slate-200 transition">
                            Kembali ke Daftar
                        </a>
                        <button type="submit" class="flex-[2] px-8 py-4 rounded-2xl bg-sky-600 text-white font-bold text-sm hover:bg-sky-700 shadow-lg shadow-sky-100 transition transform active:scale-95 flex items-center justify-center gap-2">
                            <i class="fas fa-save"></i> {{ $isEdit ? 'Perbarui Data Program' : 'Simpan & Publikasikan' }}
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

{{-- CKEditor 5 & Styling --}}
<script src="https://cdn.ckeditor.com/ckeditor5/41.1.0/classic/ckeditor.js"></script>

<style>
    /* Custom CKEditor Styling to Match UI */
    .ck-editor__editable {
        min-height: 400px !important;
        border-radius: 0 0 1.5rem 1.5rem !important;
        border-color: #f0f9ff !important;
        background-color: #fdfeff !important;
        padding: 0 2rem !important;
        font-size: 0.875rem !important;
    }
    .ck-toolbar {
        border-radius: 1.5rem 1.5rem 0 0 !important;
        background-color: #f8fafc !important;
        border-color: #f0f9ff !important;
        padding: 0.5rem !important;
    }
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) { border-color: #e0f2fe !important; }
    .ck.ck-editor__main>.ck-editor__editable.ck-focused { border-color: #0ea5e9 !important; }
</style>

<script>
    
   
    // Preview Gambar Thumbnail
    const imageInput = document.getElementById('image-input');
    const previewImg = document.getElementById('preview-img');
    const placeholder = document.getElementById('placeholder-upload');

    imageInput.addEventListener('change', function() {
        const file = this.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                previewImg.src = e.target.result;
                previewImg.classList.remove('hidden');
                if(placeholder) placeholder.classList.add('hidden');
            }
            reader.readAsDataURL(file);
        }
    });

     // 2. Custom Upload Adapter untuk CKEditor
    class MyUploadAdapter {
        constructor(loader) { this.loader = loader; }
        upload() {
            return this.loader.file.then(file => new Promise((resolve, reject) => {
                this._initRequest();
                this._initListeners(resolve, reject, file);
                this._sendRequest(file);
            }));
        }
        abort() { if (this.xhr) { this.xhr.abort(); } }
        _initRequest() {
            const xhr = this.xhr = new XMLHttpRequest();
            xhr.open('POST', '{{ route('dashboard.program.upload_editor') }}', true);
            xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
            xhr.responseType = 'json';
        }
        _initListeners(resolve, reject, file) {
            const xhr = this.xhr;
            const loader = this.loader;
            const genericErrorText = `Gagal upload: ${file.name}.`;
            xhr.addEventListener('error', () => reject(genericErrorText));
            xhr.addEventListener('abort', () => reject());
            xhr.addEventListener('load', () => {
                const response = xhr.response;
                if (!response || response.uploaded === 0) {
                    return reject(response && response.error ? response.error.message : genericErrorText);
                }
                resolve({ default: response.url });
            });
            if (xhr.upload) {
                xhr.upload.addEventListener('progress', evt => {
                    if (evt.lengthComputable) {
                        loader.uploadTotal = evt.total;
                        loader.uploaded = evt.loaded;
                    }
                });
            }
        }
        _sendRequest(file) {
            const data = new FormData();
            data.append('upload', file);
            this.xhr.send(data);
        }
    }

    function MyCustomUploadAdapterPlugin(editor) {
        editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
            return new MyUploadAdapter(loader);
        };
    }

    // 3. Inisialisasi CKEditor
    ClassicEditor
        .create(document.querySelector('#editor'), {
            extraPlugins: [MyCustomUploadAdapterPlugin],
            toolbar: [
                'heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 
                'blockQuote', 'insertTable', 'mediaEmbed', 'imageUpload', '|', 'undo', 'redo'
            ],
            language: 'id',
            image: {
                toolbar: ['imageTextAlternative', 'imageStyle:inline', 'imageStyle:block', 'imageStyle:side']
            }
        })
        .catch(error => { console.error(error); });
</script>
@endsection