@extends('layouts.main')
@push('styles')
<style>
    .ck-editor__editable[role="textbox"] {
        min-height: 200px;
    }
    .ck-content .image {
        max-width: 80%;
        margin: 20px auto;
    }
    .image-blog {
        width: 100%;
        height: 50%;
    }
</style>
@endpush

@section('title', $title)

@section('content')
<div class="row justify-content-center">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <x-buttons.back-small name="blog" :route="route('blog.index')" />
                {{ $title }}
            </div>
            <form id="createBlog" action="{{ $formAction }}" method="POST" enctype="multipart/form-data">
                @csrf
                @if(!$isFormCreate)
                    @method('PUT')
                @endif

                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <x-forms.input-file
                                name="image"
                                :label="__('validation.attributes.image')"
                                :required="$isFormCreate"
                                accept="image/apng,image/avif,image/gif,image/jpeg,image/png,image/svg+xml,image/webp"
                            />
                        </div>
                        <div class="col-md-3">
                            <x-forms.input-datepicker
                                name="publish_at"
                                :label="__('validation.attributes.publish_at')"
                                :value="$blog->publish_at ?? null"
                                required
                            />
                        </div>
                        <div class="col-md-3">
                            <x-forms.input-switch :label="__('validation.attributes.is_active')" name="is_active" value="1" :checked="$blog->is_active ?? true" />
                        </div>
                        <div class="col-12 pt-1">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label><strong><h4>Indonesia</h4></strong>Title</label>
                                            <input type="text" name="translate[id][title]" id="title-id"
                                                class="form-control @error('translate.id.title') is-invalid @enderror"
                                                value="{{ old('translate.id.title', $blog->translate['id']['title'] ?? '') }}" required />
                                            @error('translate.id.title')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <textarea name="translate[id][description]" class="form-control @error('translate.id.description') is-invalid @enderror"
                                                id="description-id" rows="10" required>{{ old('translate.id.description', $blog->translate['id']['description'] ?? '') }}</textarea>
                                            @error('translate.id.description')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Body</label>
                                            <textarea class="form-control @error('translate.id.content') is-invalid @enderror"
                                                id="ckeditor-id" name="translate[id][content]" rows="10">{{ old('translate.id.content', $blog->translate['id']['content'] ?? '') }}</textarea>
                                            @error('translate.id.content')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-12 pt-1">
                            <div class="card">
                                <div class="card-body">
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label><strong><h4>English</h4></strong>Title</label>
                                            <input type="text" name="translate[en][title]" id="title-en"
                                                class="form-control @error('translate.en.title') is-invalid @enderror"
                                                value="{{ old('translate.en.title', $blog->translate['en']['title'] ?? '') }}" required />
                                            @error('translate.en.title')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Description</label>
                                            <textarea name="translate[en][description]" class="form-control @error('translate.en.description') is-invalid @enderror"
                                                id="description-en" rows="10" required>{{ old('translate.en.description', $blog->translate['en']['description'] ?? '') }}</textarea>
                                            @error('translate.en.description')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                    <div class="col-12">
                                        <div class="form-group">
                                            <label>Body</label>
                                            <textarea class="form-control @error('translate.en.content') is-invalid @enderror"
                                                id="ckeditor-en" name="translate[en][content]" rows="10">{{ old('translate.en.content', $blog->translate['en']['content'] ?? '') }}</textarea>
                                            @error('translate.en.content')
                                                <span class="invalid-feedback">{{ $message }}</span>
                                            @enderror
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            @php
                                $categoryOptions = collect($blogCategory)->mapWithKeys(function($c){
                                    $label = ($c->translate['id']['name'] ?? '') . ' - ' . ($c->translate['en']['name'] ?? '');
                                    return [$c->id => $label];
                                })->toArray();
                            @endphp
                            <x-forms.input-select
                                name="blog_category_id"
                                :label="__('module.blog-category')"
                                :options="$categoryOptions"
                                :selected="old('blog_category_id', $blog->blog_category_id ?? null)"
                                :can-clear="true"
                                required
                            />
                        </div>
                        <div class="col-md-6">
                            @php
                                $tagOptions = collect($blogTag)->mapWithKeys(function($t){
                                    $label = ($t->translate['id']['name'] ?? '') . ' - ' . ($t->translate['en']['name'] ?? '');
                                    return [$t->id => $label];
                                })->toArray();
                            @endphp
                            <x-forms.input-select
                                name="tag"
                                :label="__('module.blog-tag')"
                                :options="$tagOptions"
                                :selected="$blog->tag??null"
                                :multiple="true"
                                :tags="true"
                                :can-clear="true"
                                required
                            />
                        </div>
                    </div>
                </div>
                <div class="card-footer">
                    <div class="row">
                        <div class="col-12">
                            <div class="float-end">
                                <x-buttons.submit-save />
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('') }}js/ckeditor/build/ckeditor.js"></script>
<script>
    (function() {
        let editorIdInstance = null;
        let editorEnInstance = null;

        function initCkEditor(selector, assign) {
            const el = document.querySelector(selector);
            if (!el) { return; }
            ClassicEditor.create(el, {
                ckfinder: {
                    uploadUrl: "{{ route('blog.store-image') . '?_token=' . csrf_token() }}",
                }
            }).then(function(instance){
                assign(instance);
            }).catch(function(error) {
                console.error('CKEditor init failed for', selector, error);
            });
        }

        document.addEventListener('DOMContentLoaded', function() {
            initCkEditor('#ckeditor-id', function(i){ editorIdInstance = i; });
            initCkEditor('#ckeditor-en', function(i){ editorEnInstance = i; });

            var form = document.getElementById('createBlog');
            if (form) {
                form.addEventListener('submit', function(e){
                    // Ensure editors sync data back to textareas
                    if (editorIdInstance) { form.querySelector('#ckeditor-id').value = editorIdInstance.getData(); }
                    if (editorEnInstance) { form.querySelector('#ckeditor-en').value = editorEnInstance.getData(); }

                    // Client-side required validation for CKEditor fields
                    var idEmpty = !editorIdInstance || editorIdInstance.getData().trim() === '';
                    var enEmpty = !editorEnInstance || editorEnInstance.getData().trim() === '';

                    if (idEmpty || enEmpty) {
                        e.preventDefault();
                        if (idEmpty && editorIdInstance) {
                            editorIdInstance.editing.view.focus();
                        } else if (editorEnInstance) {
                            editorEnInstance.editing.view.focus();
                        }
                    }
                });
            }
        });
    })();
    </script>
@endpush