@extends('admin.layouts.master')
@section('title', 'ایجاد پست جدید')

@section('content')
<div class="row">
    <div class="col-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
            <h4 class="mb-sm-0 font-size-18">ایجاد پست جدید</h4>
            <a href="{{ route('admin.blog.posts.index') }}" class="btn btn-secondary">بازگشت</a>
        </div>
    </div>
</div>

@if(session('error'))
    <div class="alert alert-danger">{{ session('error') }}</div>
@endif

<form action="{{ route('admin.blog.posts.store') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <div class="row">
        <div class="col-xl-8">
            <div class="card">
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">عنوان <span class="text-danger">*</span></label>
                        <input type="text" name="title" class="form-control" value="{{ old('title') }}" required>
                        <small id="title-length" class="text-muted">0 کاراکتر</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">اسلاگ</label>
                        <input type="text" name="slug" class="form-control" value="{{ old('slug') }}" placeholder="خودکار تولید می‌شود">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">خلاصه</label>
                        <textarea name="excerpt" class="form-control" rows="3">{{ old('excerpt') }}</textarea>
                        <small id="excerpt-length" class="text-muted">0 کاراکتر</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">محتوای Markdown <span class="text-danger">*</span></label>
                        <div class="d-flex mb-2" style="gap: 0.5rem;">
                            <button type="button" class="btn btn-sm btn-primary" onclick="insertImage(); return false;">
                                <i class="bx bx-image"></i> افزودن تصویر
                            </button>
                            <button type="button" class="btn btn-sm btn-primary" onclick="insertVideo(); return false;">
                                <i class="bx bx-video"></i> افزودن ویدیو
                            </button>
                            <button type="button" class="btn btn-sm btn-secondary" onclick="uploadMedia(); return false;">
                                <i class="bx bx-upload"></i> آپلود فایل
                            </button>
                        </div>
                        <textarea name="content_markdown" id="content_markdown" class="form-control" rows="15" required>{{ old('content_markdown') }}</textarea>
                        <small class="text-muted">
                            از Markdown استفاده کنید. برای تصویر: ![متن alt](آدرس تصویر) | برای ویدیو: ![توضیحات](آدرس ویدیو)
                        </small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">پیش‌نمایش</label>
                        <div id="preview" class="border p-3" style="min-height: 200px; background: #f8f9fa;">
                            پیش‌نمایش اینجا نمایش داده می‌شود...
                        </div>
                    </div>
                </div>
            </div>

            <div class="card mt-3">
                <div class="card-header">
                    <h5 class="mb-0">تنظیمات SEO</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">Meta Title</label>
                        <input type="text" name="meta_title" class="form-control" value="{{ old('meta_title') }}" maxlength="255">
                        <small id="meta-title-length" class="text-muted">0/255 کاراکتر</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Description</label>
                        <textarea name="meta_description" class="form-control" rows="3" maxlength="500">{{ old('meta_description') }}</textarea>
                        <small id="meta-desc-length" class="text-muted">0/500 کاراکتر (حداکثر 160 توصیه می‌شود)</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Meta Keywords</label>
                        <input type="text" name="meta_keywords" class="form-control" value="{{ old('meta_keywords') }}" placeholder="کلمه کلیدی 1, کلمه کلیدی 2">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">Canonical URL</label>
                        <input type="url" name="canonical_url" class="form-control" value="{{ old('canonical_url') }}">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="noindex" class="form-check-input" value="1" {{ old('noindex') ? 'checked' : '' }}>
                            <label class="form-check-label">Noindex</label>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" name="nofollow" class="form-check-input" value="1" {{ old('nofollow') ? 'checked' : '' }}>
                            <label class="form-check-label">Nofollow</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col-xl-4">
            <div class="card">
                <div class="card-header">
                    <h5 class="mb-0">تنظیمات انتشار</h5>
                </div>
                <div class="card-body">
                    <div class="mb-3">
                        <label class="form-label">وضعیت <span class="text-danger">*</span></label>
                        <select name="status" class="form-select" required>
                            <option value="draft" {{ old('status') == 'draft' ? 'selected' : '' }}>پیش‌نویس</option>
                            <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>منتشر شده</option>
                            <option value="scheduled" {{ old('status') == 'scheduled' ? 'selected' : '' }}>زمان‌بندی شده</option>
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">تاریخ انتشار</label>
                        <input type="datetime-local" name="published_at" class="form-control" value="{{ old('published_at', now()->format('Y-m-d\TH:i')) }}">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">نویسنده <span class="text-danger">*</span></label>
                        <select name="author_id" class="form-select" required>
                            @foreach($authors as $author)
                                <option value="{{ $author->id }}" {{ old('author_id', auth()->id()) == $author->id ? 'selected' : '' }}>{{ $author->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">تصویر شاخص</label>
                        <input type="file" name="featured_image" class="form-control" accept="image/*">
                    </div>

                    <div class="mb-3">
                        <label class="form-label">دسته‌بندی‌ها</label>
                        <select name="categories[]" class="form-select" multiple>
                            @foreach($categories as $category)
                                <option value="{{ $category->id }}" {{ in_array($category->id, old('categories', [])) ? 'selected' : '' }}>{{ $category->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">برچسب‌ها</label>
                        <select name="tags[]" class="form-select" multiple>
                            @foreach($tags as $tag)
                                <option value="{{ $tag->id }}" {{ in_array($tag->id, old('tags', [])) ? 'selected' : '' }}>{{ $tag->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <button type="submit" class="btn btn-primary w-100">ذخیره پست</button>
                </div>
            </div>
        </div>
    </div>
</form>
@endsection

@section('scripts')
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const markdownInput = document.getElementById('content_markdown');
    const preview = document.getElementById('preview');
    
    // Real-time preview
    markdownInput.addEventListener('input', function() {
        const markdown = this.value;
        fetch('{{ route("admin.blog.posts.preview-markdown") }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': '{{ csrf_token() }}'
            },
            body: JSON.stringify({ markdown: markdown })
        })
        .then(response => response.json())
        .then(data => {
            preview.innerHTML = data.html;
        });
    });
    
    // Insert image function
    window.insertImage = function(e) {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        if (!markdownInput) {
            markdownInput = document.getElementById('content_markdown');
        }
        if (!markdownInput) {
            alert('خطا: فیلد محتوا یافت نشد!');
            return false;
        }
        
        const alt = prompt('متن alt تصویر را وارد کنید (اختیاری):', '');
        if (alt === null) return false;
        
        const url = prompt('آدرس تصویر را وارد کنید:', '');
        if (!url) return false;
        
        const cursorPos = markdownInput.selectionStart || markdownInput.value.length;
        const textBefore = markdownInput.value.substring(0, cursorPos);
        const textAfter = markdownInput.value.substring(cursorPos);
        const imageMarkdown = `![${alt || ''}](${url})\n`;
        markdownInput.value = textBefore + imageMarkdown + textAfter;
        markdownInput.focus();
        const newPos = cursorPos + imageMarkdown.length;
        markdownInput.setSelectionRange(newPos, newPos);
        
        // Trigger input event to update preview
        if (markdownInput.dispatchEvent) {
            markdownInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
        
        return false;
    };
    
    // Insert video function
    window.insertVideo = function(e) {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        if (!markdownInput) {
            markdownInput = document.getElementById('content_markdown');
        }
        if (!markdownInput) {
            alert('خطا: فیلد محتوا یافت نشد!');
            return false;
        }
        
        const alt = prompt('توضیحات ویدیو را وارد کنید (اختیاری):', 'ویدیو');
        if (alt === null) return false;
        
        const url = prompt('آدرس ویدیو (YouTube, Vimeo یا فایل ویدیو) را وارد کنید:', '');
        if (!url) return false;
        
        const cursorPos = markdownInput.selectionStart || markdownInput.value.length;
        const textBefore = markdownInput.value.substring(0, cursorPos);
        const textAfter = markdownInput.value.substring(cursorPos);
        const videoMarkdown = `![${alt || 'ویدیو'}](${url})\n`;
        markdownInput.value = textBefore + videoMarkdown + textAfter;
        markdownInput.focus();
        const newPos = cursorPos + videoMarkdown.length;
        markdownInput.setSelectionRange(newPos, newPos);
        
        // Trigger input event to update preview
        if (markdownInput.dispatchEvent) {
            markdownInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
        
        return false;
    };
    
    // Upload media function
    window.uploadMedia = function(e) {
        if (e) {
            e.preventDefault();
            e.stopPropagation();
        }
        
        if (!markdownInput) {
            markdownInput = document.getElementById('content_markdown');
        }
        if (!markdownInput) {
            alert('خطا: فیلد محتوا یافت نشد!');
            return false;
        }
        
        const input = document.createElement('input');
        input.type = 'file';
        input.accept = 'image/*,video/*';
        input.style.display = 'none';
        document.body.appendChild(input);
        
        input.onchange = function(e) {
            const file = e.target.files[0];
            if (!file) {
                if (input.parentNode) {
                    document.body.removeChild(input);
                }
                return;
            }
            
            const formData = new FormData();
            formData.append('file', file);
            formData.append('_token', '{{ csrf_token() }}');
            
            // Show loading
            const loading = document.createElement('div');
            loading.className = 'alert alert-info';
            loading.textContent = 'در حال آپلود...';
            loading.style.marginTop = '10px';
            const parent = markdownInput.parentElement;
            parent.insertBefore(loading, markdownInput);
            
            fetch('{{ route("admin.blog.posts.upload-media") }}', {
                method: 'POST',
                headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(data => {
                        throw new Error(data.message || 'خطا در پاسخ سرور: ' + response.status);
                    });
                }
                return response.json();
            })
            .then(data => {
                loading.remove();
                if (input.parentNode) {
                    document.body.removeChild(input);
                }
                
                if (data.success) {
                    const isVideo = data.type === 'video' || file.type.startsWith('video/');
                    const cursorPos = markdownInput.selectionStart || markdownInput.value.length;
                    const textBefore = markdownInput.value.substring(0, cursorPos);
                    const textAfter = markdownInput.value.substring(cursorPos);
                    
                    // Extract filename without extension for alt text
                    const fileName = file.name.replace(/\.[^/.]+$/, '');
                    const altText = isVideo ? 'ویدیو' : fileName;
                    
                    // Use the path returned from server
                    const mediaPath = data.path || data.url;
                    const mediaMarkdown = `![${altText}](${mediaPath})\n`;
                    
                    markdownInput.value = textBefore + mediaMarkdown + textAfter;
                    markdownInput.focus();
                    const newPos = cursorPos + mediaMarkdown.length;
                    markdownInput.setSelectionRange(newPos, newPos);
                    
                    // Trigger input event to update preview
                    if (markdownInput.dispatchEvent) {
                        markdownInput.dispatchEvent(new Event('input', { bubbles: true }));
                    }
                    
                    // Show success message
                    const successMsg = document.createElement('div');
                    successMsg.className = 'alert alert-success';
                    successMsg.textContent = 'فایل با موفقیت آپلود شد!';
                    successMsg.style.marginTop = '10px';
                    const parent = markdownInput.parentElement;
                    parent.insertBefore(successMsg, markdownInput);
                    setTimeout(() => successMsg.remove(), 3000);
                } else {
                    alert('خطا در آپلود: ' + (data.message || 'خطای نامشخص'));
                }
            })
            .catch(error => {
                loading.remove();
                if (input.parentNode) {
                    document.body.removeChild(input);
                }
                console.error('Upload error:', error);
                alert('خطا در آپلود: ' + (error.message || 'خطای نامشخص'));
            });
        };
        input.click();
        
        return false;
    };
    
    // Character counters
    document.querySelectorAll('input[name="title"], textarea[name="excerpt"], input[name="meta_title"], textarea[name="meta_description"]').forEach(input => {
        const counter = document.getElementById(input.name.replace('_', '-') + '-length');
        if (counter) {
            input.addEventListener('input', function() {
                const length = this.value.length;
                const max = this.maxLength || Infinity;
                counter.textContent = length + (max !== Infinity ? '/' + max : '') + ' کاراکتر';
                
                // SEO warnings
                if (input.name === 'title' && (length < 30 || length > 60)) {
                    counter.className = 'text-warning';
                } else if (input.name === 'meta_description' && (length < 120 || length > 160)) {
                    counter.className = 'text-warning';
                } else {
                    counter.className = 'text-muted';
                }
            });
            input.dispatchEvent(new Event('input'));
        }
    });
});
</script>
@endsection