@extends('layouts.admin')

@section('title', __('blog.create_blog_post'))

@section('content')
<div class="container-fluid" dir="{{ $text_direction }}">
    <!-- Page Header -->
    <div class="d-flex justify-content-between align-items-center mb-4">
        <div>
            <h1 class="h3 mb-0 text-gray-800">{{ __('blog.create_blog_post') }}</h1>
            <p class="mb-0 text-muted">{{ __('blog.add_new_blog_post') }}</p>
        </div>
        <div>
            <a href="{{ route('admin.blog.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> {{ __('blog.back_to_posts') }}
            </a>
        </div>
    </div>

    <form action="{{ route('admin.blog.store', ['locale' => app()->getLocale()]) }}" method="POST" enctype="multipart/form-data" id="blogForm">
        @csrf

        <!-- Basic Information -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.basic_information') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title_en">{{ __('blog.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') }}" required>
                            @error('title_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="title_ar">{{ __('blog.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') }}" required dir="rtl">
                            @error('title_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Slug -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="slug_en">{{ __('blog.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="{{ __('blog.auto_generated_from_title') }}">
                            @error('slug_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Slug -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="slug_ar">{{ __('blog.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="{{ __('blog.auto_generated_from_title') }}" dir="rtl">
                            @error('slug_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- Category -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="category_id">{{ __('blog.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="">{{ __('blog.select_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>

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

                <div class="row">
                    <!-- Status -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="status">{{ __('general.active') }} <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') == 'draft' ? 'selected' : '' }}>{{ __('blog.draft') }}</option>
                                <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>{{ __('blog.published') }}</option>
                                <option value="archived" {{ old('status') == 'archived' ? 'selected' : '' }}>{{ __('blog.archived') }}</option>
                            </select>
                            @error('status')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Published At -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label for="published_at">{{ __('blog.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') }}">
                            @error('published_at')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Featured -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('blog.featured_post') }}</label>
                            <div class="form-check">
                                <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">
                                    {{ __('blog.mark_as_featured') }}
                                </label>
                            </div>
                        </div>
                    </div>

                    <!-- Pinned -->
                    <div class="col-md-3">
                        <div class="form-group">
                            <label class="form-check-label">{{ __('blog.pinned_post') }}</label>
                            <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">
                                    {{ __('blog.pin_to_top') }}
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Content -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.content') }}</h6>
            </div>
            <div class="card-body">
                <!-- English Content -->
                <div class="form-group">
                    <label for="content_en">{{ __('blog.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" required>{{ old('content_en') }}</textarea>
                    @error('content_en')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Arabic Content -->
                <div class="form-group">
                    <label for="content_ar">{{ __('blog.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" required dir="rtl">{{ old('content_ar') }}</textarea>
                    @error('content_ar')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>
            </div>
        </div>

        <!-- Summary -->
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">{{ __('blog.summary_excerpt') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="summary_en">{{ __('blog.summary_english') }}</label>
                            <textarea class="form-control @error('summary_en') is-invalid @enderror" id="summary_en" name="summary_en" rows="4" placeholder="{{ __('blog.brief_summary') }}">{{ old('summary_en') }}</textarea>
                            @error('summary_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Summary -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="summary_ar">{{ __('blog.summary_arabic') }}</label>
                            <textarea class="form-control @error('summary_ar') is-invalid @enderror" id="summary_ar" name="summary_ar" rows="4" placeholder="{{ __('blog.brief_summary') }}" dir="rtl">{{ old('summary_ar') }}</textarea>
                            @error('summary_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </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">{{ __('blog.media') }}</h6>
            </div>
            <div class="card-body">
                <!-- Featured Image -->
                <div class="form-group">
                    <label for="featured_image">{{ __('blog.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">{{ __('blog.recommended_size') }}</small>
                    @error('featured_image')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Gallery Images -->
                <div class="form-group">
                    <label for="gallery_images">{{ __('blog.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">{{ __('blog.select_multiple_images') }}</small>
                    @error('gallery_images')
                        <div class="invalid-feedback d-block">{{ $message }}</div>
                    @enderror
                </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">{{ __('blog.seo_settings') }}</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <!-- English Meta Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_title_en">{{ __('blog.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">
                            <small class="form-text text-muted">{{ __('blog.characters_max') }}</small>
                            @error('meta_title_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Title -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_title_ar">{{ __('blog.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" dir="rtl">
                            <small class="form-text text-muted">{{ __('blog.characters_max') }}</small>
                            @error('meta_title_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <div class="row">
                    <!-- English Meta Description -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_description_en">{{ __('blog.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">{{ old('meta_description_en') }}</textarea>
                            <small class="form-text text-muted">{{ __('blog.characters_max_desc') }}</small>
                            @error('meta_description_en')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>

                    <!-- Arabic Meta Description -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="meta_description_ar">{{ __('blog.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" dir="rtl">{{ old('meta_description_ar') }}</textarea>
                            <small class="form-text text-muted">{{ __('blog.characters_max_desc') }}</small>
                            @error('meta_description_ar')
                                <div class="invalid-feedback">{{ $message }}</div>
                            @enderror
                        </div>
                    </div>
                </div>

                <!-- Tags -->
                <div class="form-group">
                    <label for="tags">{{ __('blog.tags') }}</label>
                    <input type="text" class="form-control @error('tags') is-invalid @enderror" id="tags" name="tags" value="{{ old('tags') }}" placeholder="{{ __('blog.enter_tags') }}">
                    <small class="form-text text-muted">{{ __('blog.separate_tags') }}</small>
                    @error('tags')
                        <div class="invalid-feedback">{{ $message }}</div>
                    @enderror
                </div>

                <!-- Comments -->
                <div class="form-group">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="allow_comments" name="allow_comments" value="1" {{ old('allow_comments', true) ? 'checked' : '' }}>
                        <label class="form-check-label" for="allow_comments">
                            {{ __('blog.allow_comments_on_this_post') }}
                        </label>
                    </div>
                </div>
            </div>
        </div>

        <!-- Submit Buttons -->
        <div class="card shadow mb-4">
            <div class="card-body">
                <div class="d-flex justify-content-between">
                    <a href="{{ route('admin.blog.list', ['locale' => app()->getLocale()]) }}" class="btn btn-secondary">{{ __('blog.cancel') }}</a>
                    <div>
                        <button type="button" class="btn btn-outline-primary" id="saveDraft">{{ __('blog.save_as_draft') }}</button>
                        <button type="submit" class="btn btn-primary">{{ __('blog.create_post') }}</button>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
@endsection

@push('styles')
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
@endpush

@push('scripts')
<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js"></script>
<script>
$(document).ready(function() {
    // Initialize TinyMCE for English content
    tinymce.init({
        selector: '#content_en',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.blog.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Initialize TinyMCE for Arabic content
    tinymce.init({
        selector: '#content_ar',
        height: 400,
        menubar: false,
        plugins: 'lists link image code',
        toolbar: 'bold italic underline | bullist numlist | link image | code',
        directionality: 'rtl',
        language: 'ar',
        images_upload_handler: function(blobInfo, success, failure) {
            let formData = new FormData();
            formData.append('image', blobInfo.blob(), blobInfo.filename());

            $.ajax({
                url: '{{ route("admin.blog.upload-image", ["locale" => app()->getLocale()]) }}',
                method: 'POST',
                data: formData,
                processData: false,
                contentType: false,
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                success: function(response) {
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure('Upload failed');
                    }
                },
                error: function() {
                    failure('Upload failed');
                }
            });
        }
    });

    // Auto-generate slugs
    $('#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()));
        }
    });

    // Auto-generate meta titles
    $('#title_en').on('input', function() {
        if (!$('#meta_title_en').val()) {
            $('#meta_title_en').val($(this).val().substring(0, 60));
        }
    });

    $('#title_ar').on('input', function() {
        if (!$('#meta_title_ar').val()) {
            $('#meta_title_ar').val($(this).val().substring(0, 60));
        }
    });

    // Auto-generate meta descriptions
    $('#summary_en').on('input', function() {
        if (!$('#meta_description_en').val()) {
            $('#meta_description_en').val($(this).val().substring(0, 160));
        }
    });

    $('#summary_ar').on('input', function() {
        if (!$('#meta_description_ar').val()) {
            $('#meta_description_ar').val($(this).val().substring(0, 160));
        }
    });

    // Save as draft
    $('#saveDraft').on('click', function() {
        $('#status').val('draft');
        $('#blogForm').submit();
    });

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