@extends('layouts.admin')

@section('title', __('Create News Article'))

@section('content')
<div class="container-fluid">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('Create News Article') }}</h1>
            <p class="text-muted">{{ __('Add a new news article to your website') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.news.list', ['locale' => app()->getLocale()]) }}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('Back to List') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.news.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data" id="newsForm">
        @csrf
        <div class="row">
            <!-- Main Content -->
            <div class="col-lg-8">
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Article Content') }}</h6>
                    </div>
                    <div class="card-body">
                        <!-- Language Tabs -->
                        <ul class="nav nav-tabs mb-3" id="languageTabs" role="tablist">
                            <li class="nav-item" role="presentation">
                                <a class="nav-link active" id="english-tab" data-toggle="tab" href="#english" role="tab" aria-controls="english" aria-selected="true">
                                    <i class="flag-icon flag-icon-us mr-1"></i> {{ __('English') }}
                                </a>
                            </li>
                            <li class="nav-item" role="presentation">
                                <a class="nav-link" id="arabic-tab" data-toggle="tab" href="#arabic" role="tab" aria-controls="arabic" aria-selected="false">
                                    <i class="flag-icon flag-icon-sa mr-1"></i> {{ __('Arabic') }}
                                </a>
                            </li>
                        </ul>

                        <div class="tab-content" id="languageTabsContent">
                            <!-- English Content -->
                            <div class="tab-pane fade show active" id="english" role="tabpanel" aria-labelledby="english-tab">
                                <div class="form-group">
                                    <label for="title_en">{{ __('Title (English)') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title_en') is-invalid @enderror"
                                           id="title_en" name="title_en" value="{{ old('title_en') }}"
                                           placeholder="{{ __('Enter article title in English') }}" required>
                                    @error('title_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="slug_en">{{ __('Slug (English)') }}</label>
                                    <input type="text" class="form-control @error('slug_en') is-invalid @enderror"
                                           id="slug_en" name="slug_en" value="{{ old('slug_en') }}"
                                           placeholder="{{ __('URL-friendly version of the title') }}">
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate from title') }}</small>
                                    @error('slug_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="excerpt_en">{{ __('Excerpt (English)') }}</label>
                                    <textarea class="form-control @error('excerpt_en') is-invalid @enderror"
                                              id="excerpt_en" name="excerpt_en" rows="3"
                                              placeholder="{{ __('Brief summary of the article') }}">{{ old('excerpt_en') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Short description for previews and SEO') }}</small>
                                    @error('excerpt_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="content_en">{{ __('Content (English)') }} <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('content_en') is-invalid @enderror"
                                              id="content_en" name="content_en" rows="10"
                                              placeholder="{{ __('Write your article content here') }}" required>{{ old('content_en') }}</textarea>
                                    @error('content_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>

                            <!-- Arabic Content -->
                            <div class="tab-pane fade" id="arabic" role="tabpanel" aria-labelledby="arabic-tab">
                                <div class="form-group">
                                    <label for="title_ar">{{ __('Title (Arabic)') }} <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control @error('title_ar') is-invalid @enderror"
                                           id="title_ar" name="title_ar" value="{{ old('title_ar') }}"
                                           placeholder="{{ __('Enter article title in Arabic') }}" dir="rtl" required>
                                    @error('title_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="slug_ar">{{ __('Slug (Arabic)') }}</label>
                                    <input type="text" class="form-control @error('slug_ar') is-invalid @enderror"
                                           id="slug_ar" name="slug_ar" value="{{ old('slug_ar') }}"
                                           placeholder="{{ __('URL-friendly version of the title') }}" dir="rtl">
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate from title') }}</small>
                                    @error('slug_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="excerpt_ar">{{ __('Excerpt (Arabic)') }}</label>
                                    <textarea class="form-control @error('excerpt_ar') is-invalid @enderror"
                                              id="excerpt_ar" name="excerpt_ar" rows="3"
                                              placeholder="{{ __('Brief summary of the article') }}" dir="rtl">{{ old('excerpt_ar') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Short description for previews and SEO') }}</small>
                                    @error('excerpt_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>

                                <div class="form-group">
                                    <label for="content_ar">{{ __('Content (Arabic)') }} <span class="text-danger">*</span></label>
                                    <textarea class="form-control @error('content_ar') is-invalid @enderror"
                                              id="content_ar" name="content_ar" rows="10"
                                              placeholder="{{ __('Write your article content here') }}" dir="rtl" required>{{ old('content_ar') }}</textarea>
                                    @error('content_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- SEO Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('SEO Settings') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_title_en">{{ __('Meta Title (English)') }}</label>
                                    <input type="text" class="form-control @error('meta_title_en') is-invalid @enderror"
                                           id="meta_title_en" name="meta_title_en" value="{{ old('meta_title_en') }}"
                                           maxlength="60" placeholder="{{ __('SEO title for search engines') }}">
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate. Max 60 characters.') }}</small>
                                    @error('meta_title_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_title_ar">{{ __('Meta Title (Arabic)') }}</label>
                                    <input type="text" class="form-control @error('meta_title_ar') is-invalid @enderror"
                                           id="meta_title_ar" name="meta_title_ar" value="{{ old('meta_title_ar') }}"
                                           maxlength="60" placeholder="{{ __('SEO title for search engines') }}" dir="rtl">
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate. Max 60 characters.') }}</small>
                                    @error('meta_title_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_description_en">{{ __('Meta Description (English)') }}</label>
                                    <textarea class="form-control @error('meta_description_en') is-invalid @enderror"
                                              id="meta_description_en" name="meta_description_en" rows="3"
                                              maxlength="160" placeholder="{{ __('SEO description for search engines') }}">{{ old('meta_description_en') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate. Max 160 characters.') }}</small>
                                    @error('meta_description_en')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="meta_description_ar">{{ __('Meta Description (Arabic)') }}</label>
                                    <textarea class="form-control @error('meta_description_ar') is-invalid @enderror"
                                              id="meta_description_ar" name="meta_description_ar" rows="3"
                                              maxlength="160" placeholder="{{ __('SEO description for search engines') }}" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                                    <small class="form-text text-muted">{{ __('Leave empty to auto-generate. Max 160 characters.') }}</small>
                                    @error('meta_description_ar')
                                        <div class="invalid-feedback">{{ $message }}</div>
                                    @enderror
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Sidebar -->
            <div class="col-lg-4">
                <!-- Publishing Settings -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Publishing') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="status">{{ __('Status') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('status') is-invalid @enderror" id="status" name="status" required>
                                <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>{{ __('Draft') }}</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>{{ __('Published') }}</option>
                                <option value="archived" {{ old('status') == 'archived' ? 'selected' : '' }}>{{ __('Archived') }}</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="published_at">{{ __('Publish Date') }}</label>
                            <input type="datetime-local" class="form-control @error('published_at') is-invalid @enderror"
                                   id="published_at" name="published_at" value="{{ old('published_at') }}">
                            <small class="form-text text-muted">{{ __('Leave empty to publish immediately when status is set to published') }}</small>
                            @error('published_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-check mb-2">
                            <input class="form-check-input" type="checkbox" id="is_featured" name="is_featured" value="1" {{ old('is_featured') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_featured">
                                {{ __('Featured Article') }}
                            </label>
                            <small class="form-text text-muted">{{ __('Display this article prominently') }}</small>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_pinned" name="is_pinned" value="1" {{ old('is_pinned') ? 'checked' : '' }}>
                            <label class="form-check-label" for="is_pinned">
                                {{ __('Pinned Article') }}
                            </label>
                            <small class="form-text text-muted">{{ __('Keep this article at the top of lists') }}</small>
                        </div>
                    </div>
                </div>

                <!-- Category & Author -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Category & Author') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="category_id">{{ __('Category') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('category_id') is-invalid @enderror" id="category_id" name="category_id" required>
                                <option value="">{{ __('Select a category') }}</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}" {{ old('category_id') == $category->id ? 'selected' : '' }}>
                                        {{ $category->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('category_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="author_id">{{ __('Author') }} <span class="text-danger">*</span></label>
                            <select class="form-control @error('author_id') is-invalid @enderror" id="author_id" name="author_id" required>
                                @foreach($authors as $author)
                                    <option value="{{ $author->id }}" {{ old('author_id') == $author->id ? 'selected' : '' }}>
                                        {{ $author->full_name ?? $author->name }}
                                    </option>
                                @endforeach
                            </select>
                            @error('author_id')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Media -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Media') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="featured_image">{{ __('Featured Image') }}</label>
                            <input type="file" class="form-control-file @error('featured_image') is-invalid @enderror"
                                   id="featured_image" name="featured_image" accept="image/*">
                            <small class="form-text text-muted">{{ __('Recommended size: 800x600px. Max file size: 2MB') }}</small>
                            @error('featured_image')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>

                        <div class="form-group">
                            <label for="gallery_images">{{ __('Gallery Images') }}</label>
                            <input type="file" class="form-control-file @error('gallery_images.*') is-invalid @enderror"
                                   id="gallery_images" name="gallery_images[]" accept="image/*" multiple>
                            <small class="form-text text-muted">{{ __('Select multiple images. Max 10 images, 2MB each') }}</small>
                            @error('gallery_images.*')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Tags -->
                <div class="card shadow mb-4">
                    <div class="card-header py-3">
                        <h6 class="m-0 font-weight-bold text-primary">{{ __('Tags') }}</h6>
                    </div>
                    <div class="card-body">
                        <div class="form-group">
                            <label for="tags">{{ __('Tags') }}</label>
                            <input type="text" class="form-control @error('tags') is-invalid @enderror"
                                   id="tags" name="tags" value="{{ old('tags') }}"
                                   placeholder="{{ __('Enter tags separated by commas') }}">
                            <small class="form-text text-muted">{{ __('Helpful for search and categorization') }}</small>
                            @error('tags')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Form Actions -->
        <div class="row">
            <div class="col-12">
                <div class="card shadow">
                    <div class="card-body">
                        <div class="d-flex justify-content-between">
                            <div>
                                <button type="button" class="btn btn-outline-secondary" onclick="autoFillSEO()">
                                    <i class="fas fa-magic"></i> {{ __('Auto-fill SEO') }}
                                </button>
                            </div>
                            <div>
                                <button type="submit" class="btn btn-success">
                                    <i class="fas fa-save"></i> {{ __('Create Article') }}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

<!-- Load local TinyMCE -->
<script src="{{ asset('js/tinymce/tinymce.min.js') }}"></script>
<script>
// Auto-generate slugs
document.addEventListener('DOMContentLoaded', function() {
    $('#title_en').on('input', function() {
        if (!$('#slug_en').val()) {
            $('#slug_en').val(slugify($(this).val()));
        }
    });

    $('#title_ar').on('input', function() {
        if (!$('#slug_ar').val()) {
            $('#slug_ar').val(slugify($(this).val()));
        }
    });

    // Initialize TinyMCE after page load
    initializeTinyMCE();
});

// Auto-fill SEO fields
function autoFillSEO() {
    const titleEn = $('#title_en').val();
    const excerptEn = $('#excerpt_en').val();
    const titleAr = $('#title_ar').val();
    const excerptAr = $('#excerpt_ar').val();

    if (titleEn && !$('#meta_title_en').val()) {
        $('#meta_title_en').val(titleEn.substring(0, 60));
    }
    if ((excerptEn || titleEn) && !$('#meta_description_en').val()) {
        const desc = excerptEn || titleEn;
        $('#meta_description_en').val(desc.substring(0, 160));
    }

    if (titleAr && !$('#meta_title_ar').val()) {
        $('#meta_title_ar').val(titleAr.substring(0, 60));
    }
    if ((excerptAr || titleAr) && !$('#meta_description_ar').val()) {
        const desc = excerptAr || titleAr;
        $('#meta_description_ar').val(desc.substring(0, 160));
    }
}

// Slugify function
function slugify(text) {
    return text
        .toString()
        .toLowerCase()
        .trim()
        .replace(/\s+/g, '-')
        .replace(/[^\w\-]+/g, '')
        .replace(/\-\-+/g, '-')
        .replace(/^-+/, '')
        .replace(/-+$/, '');
}

// Initialize TinyMCE with fixed configuration
function initializeTinyMCE() {
    if (typeof tinymce !== 'undefined') {
        // Remove any existing instances
        tinymce.remove();
        
        // Fixed configuration with GPL license and simplified plugins
        tinymce.init({
            selector: '#content_en, #content_ar',
            height: 500,
            menubar: 'file edit view insert format tools table help',
            plugins: [
                'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
                'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
                'insertdatetime', 'media', 'table', 'help', 'wordcount'
            ],
            toolbar: 'undo redo | blocks | bold italic underline strikethrough | ' +
                     'alignleft aligncenter alignright alignjustify | ' +
                     'bullist numlist outdent indent | forecolor backcolor removeformat | ' +
                     'link image media | table | code fullscreen preview | ' +
                     'charmap anchor searchreplace visualblocks help',
            menubar: true,
            toolbar_mode: 'wrap',
            image_advtab: false, // Disable advanced image tab to avoid missing plugins
            paste_data_images: true,
            relative_urls: false,
            remove_script_host: false,
            convert_urls: true,
            branding: false,
            
            // ADD THIS LINE TO FIX LICENSE ERROR
            license_key: 'gpl',
            
            // Set base URL for plugins if needed
            base_url: '/js/tinymce', // Adjust this path to match your installation
            
            // Content style for better editing experience
            content_style: `
                body { 
                    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; 
                    font-size: 14px; 
                    line-height: 1.6;
                    margin: 1rem;
                }
                img { max-width: 100%; height: auto; }
                table { border-collapse: collapse; width: 100%; }
                table, th, td { border: 1px solid #ccc; }
                th, td { padding: 8px; text-align: left; }
                blockquote { 
                    border-left: 4px solid #ccc; 
                    margin: 1rem 0; 
                    padding-left: 16px; 
                    color: #666;
                    font-style: italic;
                }
                h1, h2, h3, h4, h5, h6 { 
                    margin-top: 1rem;
                    margin-bottom: 0.5rem;
                }
            `,
            
            // Setup callback for additional configurations
            setup: function (editor) {
                editor.on('init', function () {
                    console.log('TinyMCE initialized successfully:', editor.id);
                    
                    // Set direction for Arabic editor
                    if (editor.id === 'content_ar') {
                        editor.getBody().dir = 'rtl';
                        editor.getBody().style.textAlign = 'right';
                    }
                });
                
                // Handle tab switching
                editor.on('focus', function () {
                    const tabId = editor.id === 'content_ar' ? 'arabic-tab' : 'english-tab';
                    $(`#${tabId}`).tab('show');
                });
            },
            
            // File upload handler
            images_upload_handler: function (blobInfo, success, failure) {
                const xhr = new XMLHttpRequest();
                xhr.withCredentials = false;
                xhr.open('POST', '{{ route("admin.news.upload-image", ["locale" => app()->getLocale()]) }}');
                xhr.setRequestHeader('X-CSRF-TOKEN', '{{ csrf_token() }}');
                xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
                
                xhr.onload = function() {
                    if (xhr.status !== 200) {
                        failure('HTTP Error: ' + xhr.status);
                        return;
                    }
                    
                    let json;
                    try {
                        json = JSON.parse(xhr.responseText);
                    } catch (e) {
                        failure('Invalid JSON response');
                        return;
                    }
                    
                    if (!json || typeof json.location !== 'string') {
                        failure('Invalid response format');
                        return;
                    }
                    
                    success(json.location);
                };
                
                xhr.onerror = function() {
                    failure('Image upload failed');
                };
                
                const formData = new FormData();
                formData.append('file', blobInfo.blob(), blobInfo.filename());
                xhr.send(formData);
            }
        });
    } else {
        console.error('TinyMCE is not available. Make sure it is properly installed and loaded.');
    }
}

// Handle tab changes
$('#languageTabs a').on('shown.bs.tab', function (e) {
    // TinyMCE should handle tab switching automatically
    setTimeout(() => {
        if (typeof tinymce !== 'undefined') {
            tinymce.triggerSave();
        }
    }, 50);
});

// Handle form submission - save TinyMCE content
$('#newsForm').on('submit', function() {
    if (typeof tinymce !== 'undefined') {
        tinymce.triggerSave();
    }
});
</script>
<!-- Ensure Bootstrap JavaScript is loaded -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

@endsection