@extends('admin.layouts.app')
@section('title', 'Edit ' . ucfirst($type))
@section('page-title', 'Edit ' . ucfirst($type))

@section('content')
<form method="POST" action="{{ route('admin.posts.update', [$type, $post->id]) }}" enctype="multipart/form-data"
      x-data="postForm()" @submit.prevent="submit($event)">
    @csrf
    <input type="hidden" name="_method" value="PUT">
    <div class="flex flex-col lg:flex-row gap-6">
        <div class="flex-1 space-y-5">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6 space-y-4">
                <input type="text" name="title" id="post-title" value="{{ $post->title }}" placeholder="Title" required
                       class="w-full text-2xl font-bold bg-transparent border-none outline-none text-gray-900 dark:text-white placeholder-gray-400 focus:ring-0 p-0">
                <div class="flex items-center gap-2 text-sm text-gray-500">
                    <span class="flex-shrink-0">Permalink:</span>
                    <code class="text-indigo-600 dark:text-indigo-400" id="slug-preview">/{{ $post->slug }}</code>
                    <input type="hidden" name="slug" id="post-slug" value="{{ $post->slug }}">
                    <button type="button" id="regenerate-slug"
                            class="text-xs text-gray-400 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors underline underline-offset-2">
                        Regenerate
                    </button>
                </div>
                <div class="border-t border-gray-200 dark:border-gray-700 pt-2">
                    @include('admin.posts.partials.editor-toolbar')
                    <div id="editor"></div>
                    <textarea name="content" id="content-input" class="hidden">{{ $post->content }}</textarea>
                </div>
            </div>

            @if($type === 'page')
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6"
                 x-data="{ useBuilder: {{ $post->page_builder ? 'true' : 'false' }}, fullpage: {{ $post->builder_fullpage ? 'true' : 'false' }} }">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="font-semibold text-gray-900 dark:text-white">Page Builder</h3>
                    <label class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 cursor-pointer">
                        <input type="checkbox" x-model="useBuilder" class="rounded border-gray-300"> Enable
                    </label>
                </div>
                <div x-show="useBuilder" class="space-y-4">
                    <label class="flex items-start gap-3 p-3 rounded-lg border border-indigo-200 dark:border-indigo-800 bg-indigo-50 dark:bg-indigo-900/20 cursor-pointer">
                        <input type="checkbox" name="builder_fullpage" value="1"
                               x-model="fullpage"
                               @checked($post->builder_fullpage)
                               class="rounded border-gray-300 mt-0.5">
                        <div>
                            <p class="text-sm font-medium text-gray-900 dark:text-white">Full Page Builder</p>
                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">Hanya tampilkan section builder — tanpa title, breadcrumb, author, related posts, dll.</p>
                        </div>
                    </label>
                    <div x-data="pageBuilder({{ json_encode($post->page_builder ?? []) }})">
                        @include('admin.posts.partials.page-builder')
                    </div>
                </div>
            </div>
            @endif

            @if($contentType && count($contentType->fields ?? []) > 0)
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-6">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Custom Fields</h3>
                @foreach($contentType->fields as $field)
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">{{ $field['label'] }}</label>
                    @php $fieldValue = $post->custom_fields[$field['key']] ?? '' @endphp
                    @if($field['type'] === 'textarea')
                        <textarea name="custom_fields[{{ $field['key'] }}]" rows="3" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">{{ $fieldValue }}</textarea>
                    @else
                        <input type="{{ $field['type'] ?? 'text' }}" name="custom_fields[{{ $field['key'] }}]" value="{{ $fieldValue }}" class="w-full border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    @endif
                </div>
                @endforeach
            </div>
            @endif
        </div>

        <div class="w-full lg:w-72 space-y-5 flex-shrink-0">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Publish</h3>
                <div class="space-y-3">
                    <div x-data="{ status: '{{ $post->status }}' }">
                        <input type="hidden" name="status" :value="status">
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-2">Status</label>
                        <div class="grid grid-cols-3 gap-1 p-1 bg-gray-100 dark:bg-gray-700 rounded-lg">
                            <button type="button" @click="status='draft'"
                                    :class="status==='draft' ? 'bg-white dark:bg-gray-600 text-gray-900 dark:text-white shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
                                    class="px-2 py-1.5 rounded-md text-xs font-medium transition-all">Draft</button>
                            <button type="button" @click="status='published'"
                                    :class="status==='published' ? 'bg-white dark:bg-gray-600 text-green-600 dark:text-green-400 shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
                                    class="px-2 py-1.5 rounded-md text-xs font-medium transition-all">Published</button>
                            <button type="button" @click="status='scheduled'"
                                    :class="status==='scheduled' ? 'bg-white dark:bg-gray-600 text-amber-600 dark:text-amber-400 shadow-sm' : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200'"
                                    class="px-2 py-1.5 rounded-md text-xs font-medium transition-all">Scheduled</button>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Published At <span class="text-red-500">*</span></label>
                        <input type="datetime-local" name="published_at" required
                               value="{{ ($post->published_at ?? now())->format('Y-m-d\TH:i') }}"
                               class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div x-show="message" x-text="message"
                         :class="saved ? 'bg-green-50 text-green-700 dark:bg-green-900/20 dark:text-green-300' : 'bg-red-50 text-red-700 dark:bg-red-900/20 dark:text-red-300'"
                         class="text-xs p-2 rounded border" style="display:none"></div>
                    <div class="flex gap-2">
                        <a href="{{ route('admin.posts.index', $type) }}"
                           class="flex-1 py-2 border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 rounded-lg text-sm font-medium text-center">
                            Cancel
                        </a>
                        <button type="submit" :disabled="saving"
                                class="flex-1 py-2 bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white rounded-lg text-sm font-medium flex items-center justify-center gap-2">
                            <svg x-show="saving" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
                            </svg>
                            <span x-text="saving ? 'Saving...' : 'Update'"></span>
                        </button>
                    </div>
                </div>
            </div>
            @if($categories->count())
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Categories</h3>
                <div class="space-y-2 max-h-48 overflow-y-auto">
                    @foreach($categories as $cat)
                    <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
                        <input type="checkbox" name="taxonomies[]" value="{{ $cat->id }}"
                               @checked(in_array($cat->id, $selectedTaxonomy))
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        {{ $cat->name }}
                    </label>
                    @endforeach
                </div>
            </div>
            @endif
            @if($tags->count())
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-3">Tags</h3>
                <div class="space-y-2 max-h-48 overflow-y-auto">
                    @foreach($tags as $tag)
                    <label class="flex items-center gap-2 cursor-pointer text-sm text-gray-700 dark:text-gray-300">
                        <input type="checkbox" name="taxonomies[]" value="{{ $tag->id }}"
                               @checked(in_array($tag->id, $selectedTaxonomy))
                               class="rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                        {{ $tag->name }}
                    </label>
                    @endforeach
                </div>
            </div>
            @endif
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-4">Featured Image</h3>
                @if($post->getFirstMedia('featured'))
                <img src="{{ $post->getFirstMediaUrl('featured') }}" alt="" class="w-full rounded-lg mb-3 object-cover h-32">
                @endif
                <input type="file" name="featured_image" accept="image/*" class="w-full text-sm text-gray-500 dark:text-gray-400">
                <input type="text" name="featured_image_caption"
                       value="{{ $post->getFirstMedia('featured')?->getCustomProperty('caption', '') }}"
                       placeholder="Caption (optional)"
                       class="mt-2 w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
            </div>
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-5">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-4">SEO</h3>
                <div class="space-y-3">
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Meta Title</label>
                        <input type="text" name="seo[title]" value="{{ $post->seo['title'] ?? '' }}" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Meta Description</label>
                        <textarea name="seo[description]" rows="2" class="w-full text-sm border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-700 text-gray-900 dark:text-white">{{ $post->seo['description'] ?? '' }}</textarea>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>

@include('admin.posts.partials.image-picker-modal')

<script>
document.addEventListener('DOMContentLoaded', () => {
    if (window.initPostEditor) window.initPostEditor({
        slug: '{{ $post->slug }}',
        content: {!! json_encode($post->content) !!},
    })
})
</script>
@endsection
