@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.update', $post->id) }}" method="POST" enctype="multipart/form-data">
    @csrf
    @method('PUT')
    <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', $post->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', $post->slug) }}" readonly>
                        <small class="text-muted">اسلاگ قابل تغییر نیست</small>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">خلاصه</label>
                        <textarea name="excerpt" class="form-control" rows="3">{{ old('excerpt', $post->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', $post->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;">
                            {!! $post->content_html !!}
                        </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', $post->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', $post->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', $post->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', $post->canonical_url) }}">
                    </div>

                    <div class="mb-3">
                        <div class="form-check">
                            <input type="checkbox" name="noindex" class="form-check-input" value="1" {{ old('noindex', $post->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', $post->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', $post->status) == 'draft' ? 'selected' : '' }}>پیش‌نویس</option>
                            <option value="published" {{ old('status', $post->status) == 'published' ? 'selected' : '' }}>منتشر شده</option>
                            <option value="scheduled" {{ old('status', $post->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', $post->published_at ? $post->published_at->format('Y-m-d\TH:i') : 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', $post->author_id) == $author->id ? 'selected' : '' }}>{{ $author->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div class="mb-3">
                        <label class="form-label">تصویر شاخص</label>
                        @if($post->featured_image)
                            <div class="mb-2">
                                <img src="{{ asset('storage/' . $post->featured_image) }}" class="img-thumbnail" style="max-width: 200px;">
                            </div>
                        @endif
                        <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', $post->categories->pluck('id')->toArray())) ? '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', $post->tags->pluck('id')->toArray())) ? '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>
// Define functions globally so they're available when buttons are clicked
let markdownInput, preview;

// Insert image function
window.insertImage = function() {
    if (!markdownInput) {
        markdownInput = document.getElementById('content_markdown');
    }
    if (!markdownInput) {
        alert('خطا: فیلد محتوا یافت نشد!');
        return;
    }
    
    const alt = prompt('متن alt تصویر را وارد کنید (اختیاری):', '');
    if (alt === null) return; // User cancelled
    
    const url = prompt('آدرس تصویر را وارد کنید:', '');
    if (!url) return; // User cancelled or empty
    
    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 }));
    }
};

// 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; // User cancelled
    
    const url = prompt('آدرس ویدیو (YouTube, Vimeo یا فایل ویدیو) را وارد کنید:', '');
    if (!url) return false; // User cancelled or empty
    
    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) {
            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 => {
            // Check if response is ok
            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();
};

document.addEventListener('DOMContentLoaded', function() {
    markdownInput = document.getElementById('content_markdown');
    preview = document.getElementById('preview');
    
    if (!markdownInput) {
        console.error('Markdown input not found!');
        return;
    }
    
    // Real-time preview
    markdownInput.addEventListener('input', function() {
        if (!preview) return;
        
        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 => {
            if (!response.ok) {
                throw new Error('خطا در دریافت پیش‌نمایش');
            }
            return response.json();
        })
        .then(data => {
            if (preview) {
                preview.innerHTML = data.html || 'پیش‌نمایش در دسترس نیست';
            }
        })
        .catch(error => {
            console.error('Preview error:', error);
            if (preview) {
                preview.innerHTML = '<p class="text-danger">خطا در بارگذاری پیش‌نمایش</p>';
            }
        });
    });
    
    // Character counters
    document.querySelectorAll('input[name="title"], textarea[name="excerpt"], input[name="meta_title"], textarea[name="meta_description"]').forEach(input => {
        const counterId = input.name.replace(/_/g, '-') + '-length';
        const counter = document.getElementById(counterId);
        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';
                }
            });
            // Trigger initial count
            input.dispatchEvent(new Event('input', { bubbles: true }));
        }
    });
});
</script>
@endsection