@extends('root')
@section('title', isset($post) ? 'Edit Post' : 'New Post')

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/select2-bootstrap-5-theme@1.3.0/dist/select2-bootstrap-5-theme.min.css" rel="stylesheet" />
<style>
    .tox-tinymce { border-radius: 0.5rem !important; }
    .tag-input { display: flex; flex-wrap: wrap; gap: 5px; padding: 8px; border: 1px solid #dee2e6; border-radius: 0.375rem; min-height: 42px; }
    .tag-input .tag { background: #e9ecef; padding: 3px 8px; border-radius: 4px; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; }
    .tag-input .tag .remove { cursor: pointer; color: #dc3545; font-weight: bold; }
    .tag-input input { border: none; outline: none; flex: 1; min-width: 100px; }
    .featured-image-preview { max-width: 100%; max-height: 200px; border-radius: 8px; margin-top: 10px; }
    .seo-preview { background: #f8f9fa; padding: 15px; border-radius: 8px; font-family: Arial, sans-serif; }
    .seo-preview .title { color: #1a0dab; font-size: 18px; margin-bottom: 5px; }
    .seo-preview .url { color: #006621; font-size: 14px; margin-bottom: 5px; }
    .seo-preview .desc { color: #545454; font-size: 14px; }
</style>
@endpush

@section('content')
<div class="container-fluid">
    @include('components.breadcrumb', [
        'title' => isset($post) ? 'Edit Post' : 'New Post',
        'links' => [
            ['url' => route('admin.dashboard'), 'label' => 'Dashboard'],
            ['url' => route('admin.blog.posts.index'), 'label' => 'Blog Posts'],
        ],
        'current' => isset($post) ? 'Edit Post' : 'New Post'
    ])

    <form id="post-form" method="POST" enctype="multipart/form-data"
          action="{{ isset($post) ? route('admin.blog.posts.update', $post) : route('admin.blog.posts.store') }}">
        @csrf
        @if(isset($post))
            @method('PUT')
        @endif

        <div class="row">
            {{-- Main Content --}}
            <div class="col-lg-8">
                   {{-- AI Content Generator --}}
                @if(isset($aiConfig) && $aiConfig['is_configured'])
                <div class="card mb-4" id="ai-generator-card">
                    <div class="card-header d-flex justify-content-between align-items-center bg-gradient" 
                         style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;"
                         data-bs-toggle="collapse" data-bs-target="#ai-collapse" role="button">
                        <div>
                            <h5 class="mb-0"><i class="ti ti-robot me-2"></i>AI Content Generator</h5>
                            <small class="opacity-75">Generate SEO-optimized content with AI</small>
                        </div>
                        <i class="ti ti-chevron-down"></i>
                    </div>
                    <div class="collapse" id="ai-collapse">
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-12 mb-3">
                                    <label class="form-label">Focus Keyword / Topik <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="ai-keyword" 
                                           placeholder="Contoh: Cara Integrasi WhatsApp API untuk Bisnis">
                                    <small class="text-muted">Topik utama atau keyword yang ingin dibahas</small>
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Bahasa</label>
                                    <select class="form-select" id="ai-language">
                                        @foreach($aiConfig['languages'] as $key => $label)
                                            <option value="{{ $key }}" {{ $key === 'id' ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Panjang Konten</label>
                                    <select class="form-select" id="ai-length">
                                        @foreach($aiConfig['lengths'] as $key => $label)
                                            <option value="{{ $key }}" {{ $key === 'medium' ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-4 mb-3">
                                    <label class="form-label">Tone</label>
                                    <select class="form-select" id="ai-tone">
                                        @foreach($aiConfig['tones'] as $key => $label)
                                            <option value="{{ $key }}">{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label class="form-label">AI Model</label>
                                    <select class="form-select" id="ai-model">
                                        @foreach($aiConfig['models'] as $key => $label)
                                            <option value="{{ $key }}" {{ $key === $aiConfig['default_model'] ? 'selected' : '' }}>{{ $label }}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label class="form-label d-block">Generate Options</label>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="ai-gen-meta" checked>
                                        <label class="form-check-label" for="ai-gen-meta">Meta SEO</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="ai-gen-tags" checked>
                                        <label class="form-check-label" for="ai-gen-tags">Tags</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="checkbox" id="ai-gen-image">
                                        <label class="form-check-label" for="ai-gen-image">Image Prompt</label>
                                    </div>
                                </div>
                            </div>

                            <div class="d-grid">
                                <button type="button" class="btn btn-lg text-white" id="btn-ai-generate"
                                        style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
                                    <i class="ti ti-sparkles me-2"></i>Generate dengan AI
                                </button>
                            </div>

                            <div class="alert alert-info mt-3 mb-0 small">
                                <i class="ti ti-info-circle me-1"></i>
                                AI akan mengisi form berdasarkan topik yang diberikan. Anda tetap bisa mengedit semua hasil.
                            </div>
                        </div>
                    </div>
                </div>
                @endif
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Content</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Title <span class="text-danger">*</span></label>
                            <input type="text" class="form-control form-control-lg" name="title" id="input-title"
                                   value="{{ old('title', $post->title ?? '') }}" required
                                   placeholder="Masukkan judul post...">
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Slug</label>
                            <div class="input-group">
                                <span class="input-group-text">/blog/category/</span>
                                <input type="text" class="form-control" name="slug" id="input-slug"
                                       value="{{ old('slug', $post->slug ?? '') }}"
                                       placeholder="auto-generated-from-title">
                            </div>
                            <small class="text-muted">Kosongkan untuk auto-generate dari title</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Short Description</label>
                            <textarea class="form-control" name="short_description" rows="3" maxlength="500"
                                      placeholder="Ringkasan singkat untuk preview..."
                            >{{ old('short_description', $post->short_description ?? '') }}</textarea>
                            <small class="text-muted"><span id="short-desc-count">0</span>/500</small>
                        </div>

                        <div class="mb-3">
                            <label class="form-label">Full Content <span class="text-danger">*</span></label>
                            <textarea class="form-control" name="full_content" id="editor"
                            >{{ old('full_content', $post->full_content ?? '') }}</textarea>
                        </div>
                    </div>
                </div>

                {{-- SEO Settings --}}
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center" 
                         data-bs-toggle="collapse" data-bs-target="#seo-collapse" style="cursor:pointer">
                        <h5 class="mb-0">SEO Settings</h5>
                        <i class="ti ti-chevron-down"></i>
                    </div>
                    <div class="collapse show" id="seo-collapse">
                        <div class="card-body">
                            {{-- SEO Preview --}}
                            <div class="seo-preview mb-4">
                                <div class="title" id="seo-preview-title">{{ $post->title ?? 'Title Preview' }}</div>
                                <div class="url" id="seo-preview-url">{{ url('/blog/category/slug') }}</div>
                                <div class="desc" id="seo-preview-desc">{{ $post->meta_description ?? 'Meta description akan muncul di sini...' }}</div>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Meta Title</label>
                                <input type="text" class="form-control" name="meta_title" id="input-meta-title"
                                       value="{{ old('meta_title', $post->meta_title ?? '') }}"
                                       maxlength="70" placeholder="Kosongkan untuk gunakan title">
                                <small class="text-muted"><span id="meta-title-count">0</span>/70</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Meta Description</label>
                                <textarea class="form-control" name="meta_description" id="input-meta-desc" rows="3"
                                          maxlength="160" placeholder="Kosongkan untuk auto-generate"
                                >{{ old('meta_description', $post->meta_description ?? '') }}</textarea>
                                <small class="text-muted"><span id="meta-desc-count">0</span>/160</small>
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Meta Keywords</label>
                                <input type="text" class="form-control" name="meta_keywords"
                                       value="{{ old('meta_keywords', $post->meta_keywords ?? '') }}"
                                       placeholder="keyword1, keyword2, keyword3">
                            </div>

                            <div class="mb-3">
                                <label class="form-label">Canonical URL</label>
                                <input type="url" class="form-control" name="canonical_url"
                                       value="{{ old('canonical_url', $post->canonical_url ?? '') }}"
                                       placeholder="Kosongkan untuk auto-generate">
                            </div>
                        </div>
                    </div>
                </div>

             
            </div>


            {{-- Sidebar --}}
            <div class="col-lg-4">
                {{-- Publish Settings --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Publish</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Status <span class="text-danger">*</span></label>
                            <select class="form-select" name="status" id="input-status" required>
                                @foreach($statuses as $key => $label)
                                    <option value="{{ $key }}" {{ old('status', $post->status ?? 'draft') == $key ? 'selected' : '' }}>
                                        {{ $label }}
                                    </option>
                                @endforeach
                            </select>
                        </div>

                        <div class="mb-3" id="publish-date-group" style="{{ old('status', $post->status ?? 'draft') == 'scheduled' ? '' : 'display:none' }}">
                            <label class="form-label">Publish Date</label>
                            <input type="datetime-local" class="form-control" name="published_at"
                                   value="{{ old('published_at', isset($post) && $post->published_at ? $post->published_at->format('Y-m-d\TH:i') : '') }}">
                        </div>

                        <div class="d-grid gap-2">
                            <button type="submit" class="btn btn-primary" id="btn-submit">
                                <i class="ti ti-device-floppy me-1"></i> {{ isset($post) ? 'Update Post' : 'Save Post' }}
                            </button>
                            @if(isset($post) && $post->is_visible)
                                <a href="{{ $post->url }}" target="_blank" class="btn btn-outline-info">
                                    <i class="ti ti-eye me-1"></i> View Post
                                </a>
                            @endif
                        </div>
                    </div>
                </div>

                {{-- Category --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Category</h5>
                    </div>
                    <div class="card-body">
                        <select class="form-select" name="category_id" id="input-category" required>
                            <option value="">Pilih Category</option>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ old('category_id', $post->category_id ?? '') == $category->id ? 'selected' : '' }}>
                                    {{ $category->name }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                </div>

                {{-- Tags --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Tags</h5>
                    </div>
                    <div class="card-body">
                        <div class="tag-input" id="tag-container">
                            @if(isset($post))
                                @foreach($post->tags as $tag)
                                    <span class="tag" data-tag="{{ $tag->name }}">
                                        {{ $tag->name }}
                                        <span class="remove">&times;</span>
                                    </span>
                                @endforeach
                            @endif
                            <input type="text" id="tag-input" placeholder="Ketik tag dan tekan Enter">
                        </div>
                        <input type="hidden" name="tags" id="tags-hidden" 
                               value="{{ isset($post) ? $post->tags->pluck('name')->implode(',') : '' }}">
                        <small class="text-muted">Tekan Enter atau koma untuk menambah tag</small>
                    </div>
                </div>

                {{-- Featured Image --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Featured Image</h5>
                    </div>
                    <div class="card-body">
                        <div class="mb-3">
                            <label class="form-label">Image Prompt</label>
                            <input type="text" class="form-control" name="image_prompt" id="input-image-prompt"
                                   value="">
                        </div>
                        <input type="file" class="form-control" name="featured_image" id="input-image"
                               accept="image/jpeg,image/png,image/gif,image/webp">
                        @if(isset($post) && $post->featured_image_url)
                            <img src="{{ $post->featured_image_url }}" class="featured-image-preview" id="current-image">
                        @endif
                        <img src="" class="featured-image-preview d-none" id="image-preview">
                    </div>
                </div>

                {{-- Schema Type --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Schema Type</h5>
                    </div>
                    <div class="card-body">
                        <select class="form-select" name="schema_type">
                            @foreach($schemaTypes as $key => $label)
                                <option value="{{ $key }}" {{ old('schema_type', $post->schema_type ?? 'article') == $key ? 'selected' : '' }}>
                                    {{ $label }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">Schema JSON-LD untuk rich snippets</small>
                    </div>
                </div>

                {{-- Landing Page Option --}}
                <div class="card mb-4">
                    <div class="card-header">
                        <h5 class="mb-0">Landing Page</h5>
                    </div>
                    <div class="card-body">
                        <div class="form-check form-switch">
                            <input class="form-check-input" type="checkbox" name="is_landing_page" value="1" id="is-landing"
                                   {{ old('is_landing_page', $post->is_landing_page ?? false) ? 'checked' : '' }}>
                            <label class="form-check-label" for="is-landing">
                                Aktifkan URL flat /p/{slug}
                            </label>
                        </div>
                        <small class="text-muted">Post ini bisa diakses via /p/{{ $post->slug ?? 'slug' }}</small>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/js/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script src="{{ asset('assets/js/blog-ajax.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize TinyMCE
    tinymce.init({
        selector: '#editor',
        height: 500,
        plugins: 'anchor autolink charmap codesample emoticons image link lists media searchreplace table visualblocks wordcount code',
        toolbar: 'undo redo | blocks fontfamily fontsize | bold italic underline strikethrough | link image media table | align lineheight | numlist bullist indent outdent | emoticons charmap | removeformat | code',
        content_style: 'body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; font-size: 16px; line-height: 1.6; }',
        images_upload_url: '#',
        automatic_uploads: false,
        file_picker_types: 'image',
    });

    // Status change - show/hide publish date
    $('#input-status').on('change', function() {
        $('#publish-date-group').toggle($(this).val() === 'scheduled');
    });

    // Auto-generate slug from title
    var slugTimeout;
    $('#input-title').on('keyup', function() {
        clearTimeout(slugTimeout);
        var title = $(this).val();
        slugTimeout = setTimeout(function() {
            if (!$('#input-slug').val()) {
                var slug = title.toLowerCase()
                    .replace(/[^a-z0-9\s-]/g, '')
                    .replace(/\s+/g, '-')
                    .replace(/-+/g, '-');
                $('#input-slug').val(slug);
            }
            $('#seo-preview-title').text(title || 'Title Preview');
        }, 300);
    });

    // SEO character counters
    $('textarea[name="short_description"]').on('input', function() {
        $('#short-desc-count').text($(this).val().length);
    }).trigger('input');

    $('#input-meta-title').on('input', function() {
        $('#meta-title-count').text($(this).val().length);
        $('#seo-preview-title').text($(this).val() || $('#input-title').val() || 'Title Preview');
    }).trigger('input');

    $('#input-meta-desc').on('input', function() {
        $('#meta-desc-count').text($(this).val().length);
        $('#seo-preview-desc').text($(this).val() || 'Meta description akan muncul di sini...');
    }).trigger('input');

    // Tags input
    var tags = [];
    @if(isset($post))
    tags = {!! json_encode($post->tags->pluck('name')->toArray()) !!};
    @endif

    function updateTagsHidden() {
        $('#tags-hidden').val(tags.join(','));
    }

    function addTag(tagName) {
        tagName = tagName.trim();
        if (tagName && !tags.includes(tagName)) {
            tags.push(tagName);
            var tagEl = $('<span class="tag" data-tag="' + tagName + '">' + tagName + ' <span class="remove">&times;</span></span>');
            $('#tag-input').before(tagEl);
            updateTagsHidden();
        }
        $('#tag-input').val('');
    }

    $('#tag-input').on('keydown', function(e) {
        if (e.key === 'Enter' || e.key === ',') {
            e.preventDefault();
            addTag($(this).val());
        }
    });

    $(document).on('click', '.tag .remove', function() {
        var tag = $(this).parent().data('tag');
        tags = tags.filter(t => t !== tag);
        $(this).parent().remove();
        updateTagsHidden();
    });

    // Image preview
    $('#input-image').on('change', function() {
        var file = this.files[0];
        if (file) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#image-preview').attr('src', e.target.result).removeClass('d-none');
                $('#current-image').addClass('d-none');
            };
            reader.readAsDataURL(file);
        }
    });

    // AI Generate button handler
    $('#btn-ai-generate').on('click', function() {
        var keyword = $('#ai-keyword').val().trim();
        if (!keyword) {
            toastr.warning('Silakan masukkan keyword/topik terlebih dahulu');
            $('#ai-keyword').focus();
            return;
        }

        var btn = $(this);
        var originalHtml = btn.html();
        
        // Disable button and show loading
        btn.prop('disabled', true).html('<span class="spinner-border spinner-border-sm me-2"></span>Generating...');

        $.ajax({
            url: '{{ route("admin.blog.posts.ai-generate") }}',
            method: 'POST',
            data: {
                _token: '{{ csrf_token() }}',
                keyword: keyword,
                language: $('#ai-language').val(),
                length: $('#ai-length').val(),
                tone: $('#ai-tone').val(),
                model: $('#ai-model').val(),
                generate_meta: $('#ai-gen-meta').is(':checked') ? 1 : 0,
                generate_tags: $('#ai-gen-tags').is(':checked') ? 1 : 0,
                generate_image: $('#ai-gen-image').is(':checked') ? 1 : 0
            },
            success: function(res) {
                if (res.meta && res.meta.status === 'success' && res.data) {
                    var data = res.data;
                    
                    // Fill title
                    if (data.title) {
                        $('#input-title').val(data.title).trigger('keyup');
                    }
                    
                    // Fill slug
                    if (data.slug) {
                        $('#input-slug').val(data.slug);
                    }
                    
                    // Fill short description
                    if (data.short_description) {
                        $('textarea[name="short_description"]').val(data.short_description).trigger('input');
                    }
                    
                    // Fill content (TinyMCE)
                    if (data.content && tinymce.get('editor')) {
                        tinymce.get('editor').setContent(data.content);
                    }
                    
                    // Fill meta title
                    if (data.meta_description) {
                        $('#input-meta-desc').val(data.meta_description).trigger('input');
                    }
                    
                    // Fill tags
                    if (data.tags && Array.isArray(data.tags)) {
                        // Clear existing tags
                        $('#tag-container .tag').remove();
                        tags = [];
                        
                        // Add new tags
                        data.tags.forEach(function(tagName) {
                            addTag(tagName);
                        });
                    }
                    
                    // Show image prompt if generated
                    if (data.image_prompt) {
                        toastr.info('Image Prompt: ' + data.image_prompt.substring(0, 100) + '...', 'AI Image Prompt', {timeOut: 10000});
                        console.log('AI Image Prompt:', data.image_prompt);
                        $('#input-image-prompt').val(data.image_prompt).trigger('input');
                    }
                    
                    toastr.success(res.meta.message || 'Konten berhasil di-generate!');
                    
                    // Collapse AI panel after success
                    $('#ai-collapse').collapse('hide');
                } else {
                    toastr.error(res.meta?.message || 'Gagal generate konten');
                }
            },
            error: function(xhr) {
                var msg = xhr.responseJSON?.meta?.message || 'Terjadi kesalahan saat generate konten';
                toastr.error(msg);
            },
            complete: function() {
                btn.prop('disabled', false).html(originalHtml);
            }
        });
    });

    // Form submit using BlogAjax helper
    $('#post-form').on('submit', function(e) {
        e.preventDefault();
        
        BlogAjax.submit('#post-form', {
            redirect: '{{ route('admin.blog.posts.index') }}',
            submitBtn: $('#btn-submit')
        });
    });
});
</script>
@endpush