@extends('admin.layout.tamplate')

@section('content')

<div class="p-6 md:p-10 space-y-8">
    {{-- Header Section --}}
    <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-sky-950 font-poppins tracking-tight">
                {{-- {{ isset($news) ? 'Ubah Berita' : 'Buat Berita Baru' }} --}}
            </h1>
            @include('admin.layout.breadcumb')
        </div>
        <a href="{{ route('dashboard.berita') }}"
            class="text-sky-600 hover:text-sky-700 font-bold text-xs uppercase tracking-widest flex items-center gap-2 transition-all">
            <i class="fas fa-arrow-left"></i> Kembali
        </a>
    </div>

    {{-- Form Start --}}
    <form action="{{ isset($news) ? route('dashboard.berita.update', $news->id) : route('dashboard.berita.store') }}"
        method="POST" enctype="multipart/form-data">
        @csrf
        @if (isset($news))
            @method('PUT')
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
            {{-- Kiri: Input Utama --}}
            <div class="lg:col-span-2 space-y-6">
                <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                    <div class="space-y-6">
                        {{-- Judul Berita --}}
                        <div>
                            <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">
                                Judul Berita <span class="text-red-500">*</span>
                            </label>
                            <input type="text" name="title" value="{{ old('title', $news->title ?? '') }}"
                                placeholder="Masukkan judul berita yang menarik..."
                                class="w-full mt-2 px-6 py-4 rounded-2xl bg-sky-50/30 border @error('title') border-red-400 @else border-sky-100 @enderror outline-none focus:border-sky-500 focus:bg-white transition text-base font-semibold text-sky-950">
                            @error('title')
                                <p class="text-[10px] text-red-500 mt-2 ml-2 font-bold italic"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>
                            @enderror
                        </div>

                        {{-- Konten Lengkap --}}
                        <div>
                            <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">
                                Konten Lengkap <span class="text-red-500">*</span>
                            </label>
                            <div class="mt-2 border @error('content') border-red-400 @else border-sky-100 @enderror rounded-2xl overflow-hidden bg-white shadow-inner">
                                <textarea name="content" id="editor" rows="15" class="hidden">{{ old('content', $news->content ?? '') }}</textarea>
                            </div>
                            @error('content')
                                <p class="text-[10px] text-red-500 mt-2 ml-2 font-bold italic"><i class="fas fa-exclamation-circle mr-1"></i>{{ $message }}</p>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>

            {{-- Kanan: Sidebar --}}
            <div class="space-y-6">
                {{-- Thumbnail Gambar --}}
                <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                    <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest block mb-4">
                        Thumbnail Gambar {{ !isset($news) ? '*' : '' }}
                    </label>
                    <input type="file" name="image" id="imageInput" class="hidden" accept="image/*">
                    
                    <div onclick="document.getElementById('imageInput').click()"
                        class="relative border-2 border-dashed @error('image') border-red-300 @else border-sky-100 @enderror rounded-3xl p-4 transition cursor-pointer bg-sky-50/30 group overflow-hidden min-h-[200px] flex flex-col items-center justify-center hover:bg-sky-50">

                        {{-- Preview Logic yang diperbaiki --}}
                        @php
                            $hasImage = isset($news) && $news->image;
                        @endphp

                        <img id="previewImage"
                            src="{{ $hasImage ? asset('uploads/news/' . $news->image) : '' }}"
                            class="{{ $hasImage ? '' : 'hidden' }} absolute inset-0 w-full h-full object-cover z-10">

                        <div id="placeholderImg" class="{{ $hasImage ? 'hidden' : '' }} z-0 text-center">
                            <i class="fas fa-cloud-upload-alt text-sky-500 text-3xl mb-2"></i>
                            <p class="text-xs font-bold text-sky-900">Klik untuk {{ $hasImage ? 'Ganti' : 'Upload' }}</p>
                            <p class="text-[9px] text-slate-400 mt-1 uppercase">Max 2MB (JPG/PNG/WEBP)</p>
                        </div>
                    </div>
                    @error('image')
                        <p class="text-[10px] text-red-500 mt-3 font-bold italic text-center"><i class="fas fa-exclamation-triangle mr-1"></i>{{ $message }}</p>
                    @enderror
                </div>

                {{-- Kategori --}}
                <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-50">
                    <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Kategori Berita <span class="text-red-500">*</span></label>
                    <div class="relative mt-3">
                        <select name="category_id"
                            class="w-full px-5 py-4 rounded-2xl bg-sky-50/30 border @error('category_id') border-red-400 @else border-sky-100 @enderror outline-none focus:border-sky-500 transition text-sm font-bold text-sky-900 appearance-none cursor-pointer">
                            <option value="" disabled {{ !old('category_id', $news->category_id ?? null) ? 'selected' : '' }}>-- Pilih Kategori --</option>
                            @foreach ($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $news->category_id ?? '') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                        <div class="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-sky-300 text-xs">
                            <i class="fas fa-chevron-down"></i>
                        </div>
                    </div>
                </div>

                {{-- Status & Publish --}}
                <div class="glass-card p-8 rounded-[2.5rem] shadow-sm bg-white border border-sky-100">
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <label class="text-[11px] font-bold text-slate-400 uppercase tracking-widest ml-1">Komentar Aktif?</label>
                            <p class="text-[9px] text-slate-400 ml-1">User dapat berkomentar</p>
                        </div>
                        <label class="inline-flex items-center cursor-pointer relative">
                            {{-- Checkbox logic diperbaiki --}}
                            <input type="checkbox" name="status_comment" value="active" 
                                {{ old('status_comment', $news->status_comment ?? 'active') == 'active' ? 'checked' : '' }} 
                                class="sr-only peer">
                            <div class="w-11 h-6 bg-slate-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-sky-600"></div>
                        </label>
                    </div>

                    <div class="mt-4 flex flex-col gap-3">
                        <button type="submit" name="status" value="publish"
                            class="w-full bg-sky-600 text-white font-bold py-4 rounded-2xl hover:bg-sky-700 transition shadow-lg shadow-sky-100 flex items-center justify-center gap-2 transform active:scale-95">
                            <i class="fas fa-paper-plane text-xs"></i> {{ isset($news) ? 'Simpan Perubahan' : 'Terbitkan Berita' }}
                        </button>
                        <button type="submit" name="status" value="draft"
                            class="w-full bg-slate-100 text-slate-600 font-bold py-4 rounded-2xl hover:bg-slate-200 transition">
                            Simpan ke Draft
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


{{-- CSS KHUSUS CKEDITOR --}}
<style>
    .ck-editor__editable {
        min-height: 450px !important;
        padding: 0 2rem !important;
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }
    .ck-toolbar {
        border: none !important;
        border-bottom: 1px solid rgb(224 242 254) !important;
        background-color: rgb(240 249 255 / 0.8) !important;
        padding: 0.75rem 1.5rem !important;
        border-radius: 1.5rem 1.5rem 0 0 !important;
    }
    .ck-content { line-height: 1.8; font-size: 1rem; color: #334155; }
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-editor__editable_inline) { border-radius: 0 0 1.5rem 1.5rem !important; }
    .ck.ck-editor__main, .ck.ck-editor__top { border: none !important; box-shadow: none !important; }
</style>

{{-- SCRIPT SECTION --}}
<script src="https://cdn.ckeditor.com/ckeditor5/40.0.0/classic/ckeditor.js"></script>
<script>
    // 1. Preview Gambar Utama
    document.getElementById('imageInput').onchange = evt => {
        const [file] = document.getElementById('imageInput').files
        if (file) {
            document.getElementById('previewImage').src = URL.createObjectURL(file)
            document.getElementById('previewImage').classList.remove('hidden')
            document.getElementById('placeholderImg').classList.add('hidden')
        }
    }

    // 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.berita.upload_image') }}', 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