@extends('admin.layouts.app')

@section('title', 'Sửa bài viết')
@section('page-title', 'Sửa bài viết')

@section('content')
<div class="max-w-4xl mx-auto">
    <!-- Back Button - Top -->
    <div class="mb-6">
        <a href="{{ route('admin.articles.index') }}"
            class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
            <i class="fas fa-arrow-left mr-2"></i>Quay lại
        </a>
    </div>

    <form id="article-form" method="POST" action="{{ route('admin.articles.update', $article) }}" enctype="multipart/form-data" class="space-y-6">
        @csrf
        @method('PUT')

        <!-- Success/Error Messages -->
        @if(session('success'))
            <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded-lg">
                <i class="fas fa-check-circle mr-2"></i>{{ session('success') }}
            </div>
        @endif

        @if($errors->any())
            <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded-lg">
                <i class="fas fa-exclamation-circle mr-2"></i>
                <ul class="list-disc list-inside">
                    @foreach($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif

        <!-- Basic Information -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Thông tin cơ bản</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="md:col-span-2">
                    <label for="title" class="block text-sm font-medium text-gray-700 mb-2">
                        Tiêu đề bài viết <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="title" name="title" value="{{ old('title', $article->title) }}"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Nhập tiêu đề bài viết..." required>
                </div>

                <div>
                    <label for="slug" class="block text-sm font-medium text-gray-700 mb-2">
                        Slug <span class="text-red-500">*</span>
                    </label>
                    <input type="text" id="slug" name="slug" value="{{ old('slug', $article->slug) }}"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        placeholder="slug-bai-viet" required>
                    <p class="text-xs text-gray-500 mt-1">URL thân thiện, không dấu, cách nhau bằng dấu gạch ngang</p>
                </div>

                <div>
                    <label for="category" class="block text-sm font-medium text-gray-700 mb-2">
                        Danh mục
                    </label>
                    <select id="category" name="category"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Chọn danh mục</option>
                        <option value="Đánh giá" {{ old('category', $article->category) == 'Đánh giá' ? 'selected' : '' }}>Đánh giá</option>
                        <option value="Văn hóa" {{ old('category', $article->category) == 'Văn hóa' ? 'selected' : '' }}>Văn hóa</option>
                        <option value="Phương pháp" {{ old('category', $article->category) == 'Phương pháp' ? 'selected' : '' }}>Phương pháp</option>
                        <option value="Thế hệ" {{ old('category', $article->category) == 'Thế hệ' ? 'selected' : '' }}>Thế hệ</option>
                        <option value="Chiến lược" {{ old('category', $article->category) == 'Chiến lược' ? 'selected' : '' }}>Chiến lược</option>
                        <option value="Khởi nghiệp" {{ old('category', $article->category) == 'Khởi nghiệp' ? 'selected' : '' }}>Khởi nghiệp</option>
                        <option value="Công nghệ" {{ old('category', $article->category) == 'Công nghệ' ? 'selected' : '' }}>Công nghệ</option>
                        <option value="Làm việc" {{ old('category', $article->category) == 'Làm việc' ? 'selected' : '' }}>Làm việc</option>
                        <option value="Câu chuyện" {{ old('category', $article->category) == 'Câu chuyện' ? 'selected' : '' }}>Câu chuyện</option>
                    </select>
                </div>
            </div>

            <div class="mt-6">
                <label for="excerpt" class="block text-sm font-medium text-gray-700 mb-2">
                    Tóm tắt bài viết
                </label>
                <textarea id="excerpt" name="excerpt" rows="3"
                    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Nhập tóm tắt ngắn gọn về bài viết...">{{ old('excerpt', $article->excerpt) }}</textarea>
                <p class="text-xs text-gray-500 mt-1">Mô tả ngắn gọn về nội dung bài viết (không bắt buộc)</p>
            </div>
        </div>

        <!-- Content -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Nội dung bài viết</h3>

            <div>
                <label for="content" class="block text-sm font-medium text-gray-700 mb-2">
                    Nội dung <span class="text-red-500">*</span>
                </label>
                <textarea name="content" id="content" rows="15"
                    class="w-full border ckeditor border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="Nhập nội dung bài viết..." required>{{ old('content', $article->content) }}</textarea>
            </div>
        </div>

        <!-- Media & Settings -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Hình ảnh & Cài đặt</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <label for="featured_image" class="block text-sm font-medium text-gray-700 mb-2">
                        Hình ảnh đại diện
                    </label>

                    <!-- Current Image -->
                    @if($article->featured_image)
                    <div class="mb-4">
                        <p class="text-sm text-gray-600 mb-2">Ảnh hiện tại:</p>
                        <div class="max-w-xs">
                            <img src="{{ asset('storage/' . $article->featured_image) }}" 
                                 alt="Current image" 
                                 class="w-full h-auto rounded-lg shadow-md">
                        </div>
                    </div>
                    @endif

                    <!-- Upload Area -->
                    <div id="upload-area"
                        class="border-2 border-dashed border-gray-300 rounded-lg p-6 text-center hover:border-blue-400 transition-colors cursor-pointer">
                        <div id="upload-placeholder">
                            <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
                            <p class="text-sm text-gray-600 mb-2">Kéo thả ảnh vào đây hoặc</p>
                            <p class="text-sm text-blue-600">Nhấp để chọn ảnh mới</p>
                        </div>

                        <!-- Image Preview -->
                        <div id="image-preview" class="hidden">
                            <div class="relative inline-block">
                                <img id="preview-img" src="" alt="Preview"
                                    class="max-w-full max-h-48 rounded-lg shadow-md">
                                <button type="button" onclick="removeImage()"
                                    class="absolute -top-2 -right-2 bg-red-500 text-white rounded-full w-6 h-6 flex items-center justify-center hover:bg-red-600 transition-colors">
                                    <i class="fas fa-times text-xs"></i>
                                </button>
                            </div>
                            <p class="text-sm text-gray-600 mt-2" id="image-name"></p>
                        </div>
                    </div>

                    <input type="file" id="featured_image" name="featured_image" accept="image/*" class="hidden" onchange="handleFileSelect(this)">
                    <p class="text-xs text-gray-500 mt-2">Chọn hình ảnh đại diện cho bài viết (JPG, PNG, GIF, tối đa 10MB)</p>
                </div>

                <div>
                    <label for="status" class="block text-sm font-medium text-gray-700 mb-2">
                        Trạng thái <span class="text-red-500">*</span>
                    </label>
                    <select id="status" name="status"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        required>
                        <option value="draft" {{ old('status', $article->status) == 'draft' ? 'selected' : '' }}>Bản nháp</option>
                        <option value="published" {{ old('status', $article->status) == 'published' ? 'selected' : '' }}>Đã xuất bản</option>
                        <option value="archived" {{ old('status', $article->status) == 'archived' ? 'selected' : '' }}>Đã lưu trữ</option>
                    </select>
                </div>
            </div>

            <div class="mt-6">
                <label for="tags" class="block text-sm font-medium text-gray-700 mb-2">
                    Tags (từ khóa)
                </label>
                <input type="text" id="tags" name="tags" value="{{ old('tags', is_array($article->tags) ? implode(', ', $article->tags) : '') }}"
                    class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                    placeholder="công nghệ, startup, apero, mobile apps">
                <p class="text-xs text-gray-500 mt-1">Nhập các từ khóa cách nhau bằng dấu phẩy</p>
            </div>
        </div>

        <!-- SEO Settings -->
        <div class="bg-white rounded-lg shadow p-6">
            <h3 class="text-lg font-medium text-gray-900 mb-4">Cài đặt SEO</h3>

            <div class="space-y-4">
                <div>
                    <label for="meta_title" class="block text-sm font-medium text-gray-700 mb-2">
                        Meta Title
                    </label>
                    <input type="text" id="meta_title" name="meta_title" value="{{ old('meta_title', $article->meta_title) }}"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Tiêu đề SEO (tối đa 60 ký tự)">
                    <p class="text-xs text-gray-500 mt-1">Tiêu đề hiển thị trên kết quả tìm kiếm</p>
                </div>

                <div>
                    <label for="meta_description" class="block text-sm font-medium text-gray-700 mb-2">
                        Meta Description
                    </label>
                    <textarea id="meta_description" name="meta_description" rows="3"
                        class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                        placeholder="Mô tả SEO (tối đa 160 ký tự)">{{ old('meta_description', $article->meta_description) }}</textarea>
                    <p class="text-xs text-gray-500 mt-1">Mô tả hiển thị trên kết quả tìm kiếm</p>
                </div>
            </div>
        </div>

        <!-- Author Information -->

        <!-- Action Buttons - Bottom -->
        <div class="flex justify-end space-x-4 mt-6">
            <a href="{{ route('admin.articles.show', $article) }}"
                class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                <i class="fas fa-eye mr-2"></i>Xem bài viết
            </a>
            <a href="{{ route('admin.articles.index') }}"
                class="px-6 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors">
                <i class="fas fa-times mr-2"></i>Hủy bỏ
            </a>
            <button type="submit"
                class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
                <i class="fas fa-save mr-2"></i>Cập nhật bài viết
            </button>
        </div>

    </form>
</div>

<script src="{{ asset('backend/ckeditor/ckeditor.js') }}"></script>
<!-- CDN chính thức của jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<script>
    $(document).ready(function() {
        // ckeditor('content')
        // Các input thông thường
        // $('#title_seo, #keyword_seo, #description_seo, #slug').on('input', function() {
        //     clearTimeout(seoTimeout);
        //     seoTimeout = setTimeout(runSeoAnalysis, 500);
        // });

        // CKEditor ready
        CKEDITOR.on('instanceReady', function(evt) {
            evt.editor.on('change', function() {
                // clearTimeout(seoTimeout);
                //seoTimeout = setTimeout(runSeoAnalysis, 500);
            });

            // Nếu là trang chỉnh sửa thì gọi luôn
            @if (isset($post))
                setTimeout(runSeoAnalysis, 500);
            @endif
        });
    });

    // Image Upload Handler - Simple version
    function initImageUpload() {
        const uploadArea = document.getElementById('upload-area');
        const fileInput = document.getElementById('featured_image');
        const uploadPlaceholder = document.getElementById('upload-placeholder');
        const imagePreview = document.getElementById('image-preview');
        const previewImg = document.getElementById('preview-img');
        const imageName = document.getElementById('image-name');
        const removeBtn = document.getElementById('remove-image');

        // Click to select file
        if (uploadArea && fileInput) {
            console.log('Upload area and file input found');
            uploadArea.addEventListener('click', function(e) {
                console.log('Upload area clicked');
                e.preventDefault();
                fileInput.click();
            });
        } else {
            console.log('Upload area or file input not found');
            console.log('uploadArea:', uploadArea);
            console.log('fileInput:', fileInput);
        }

        // File input change
        if (fileInput) {
            fileInput.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    // Validate file type
                    if (!file.type.startsWith('image/')) {
                        alert('Vui lòng chọn file ảnh hợp lệ!');
                        return;
                    }

                    // Validate file size (10MB)
                    if (file.size > 10 * 1024 * 1024) {
                        alert('Kích thước file không được vượt quá 10MB!');
                        return;
                    }

                    // Show preview
                    showImagePreview(file);
                }
            });
        }

        // Drag and drop
        if (uploadArea) {
            uploadArea.addEventListener('dragover', function(e) {
                e.preventDefault();
                uploadArea.classList.add('border-blue-400', 'bg-blue-50');
            });

            uploadArea.addEventListener('dragleave', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('border-blue-400', 'bg-blue-50');
            });

            uploadArea.addEventListener('drop', function(e) {
                e.preventDefault();
                uploadArea.classList.remove('border-blue-400', 'bg-blue-50');

                const files = e.dataTransfer.files;
                if (files.length > 0) {
                    const file = files[0];

                    // Validate file type
                    if (!file.type.startsWith('image/')) {
                        alert('Vui lòng chọn file ảnh hợp lệ!');
                        return;
                    }

                    // Validate file size
                    if (file.size > 10 * 1024 * 1024) {
                        alert('Kích thước file không được vượt quá 10MB!');
                        return;
                    }

                    // Set file to input
                    if (fileInput) {
                        fileInput.files = files;
                        showImagePreview(file);
                    }
                }
            });
        }

        // Remove image
        if (removeBtn) {
            removeBtn.addEventListener('click', function(e) {
                e.stopPropagation();
                removeImage();
            });
        }

        function showImagePreview(file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                if (previewImg) previewImg.src = e.target.result;
                if (imageName) imageName.textContent = file.name;
                if (uploadPlaceholder) uploadPlaceholder.classList.add('hidden');
                if (imagePreview) imagePreview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        }

        // removed duplicate removeImage; using global removeImage defined below
    }

    // Initialize when page loads
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initImageUpload);
    } else {
        initImageUpload();
    }

    // Simple file select handler
    function handleFileSelect(input) {
        const file = input.files[0];
        if (file) {
            console.log('File selected:', file.name);

            // Validate file type
            if (!file.type.startsWith('image/')) {
                alert('Vui lòng chọn file ảnh hợp lệ!');
                return;
            }

            // Validate file size (10MB)
            if (file.size > 10 * 1024 * 1024) {
                alert('Kích thước file không được vượt quá 10MB!');
                return;
            }

            // Show preview
            const reader = new FileReader();
            reader.onload = function(e) {
                const previewImg = document.getElementById('preview-img');
                const imageName = document.getElementById('image-name');
                const uploadPlaceholder = document.getElementById('upload-placeholder');
                const imagePreview = document.getElementById('image-preview');

                if (previewImg) previewImg.src = e.target.result;
                if (imageName) imageName.textContent = file.name;
                if (uploadPlaceholder) uploadPlaceholder.classList.add('hidden');
                if (imagePreview) imagePreview.classList.remove('hidden');
            };
            reader.readAsDataURL(file);
        }
    }

    // Remove image function
    function removeImage() {
        const fileInput = document.getElementById('featured_image');
        const previewImg = document.getElementById('preview-img');
        const imageName = document.getElementById('image-name');
        const uploadPlaceholder = document.getElementById('upload-placeholder');
        const imagePreview = document.getElementById('image-preview');

        if (fileInput) fileInput.value = '';
        if (previewImg) previewImg.src = '';
        if (imageName) imageName.textContent = '';
        if (uploadPlaceholder) uploadPlaceholder.classList.remove('hidden');
        if (imagePreview) imagePreview.classList.add('hidden');
    }

    // Auto-generate slug from title
    function initSlugGenerator() {
        const titleInput = document.getElementById('title');
        const slugInput = document.getElementById('slug');

        if (titleInput && slugInput) {
            titleInput.addEventListener('input', function() {
                const title = this.value;
                const slug = title
                    .toLowerCase()
                    .normalize('NFD')
                    .replace(/[\u0300-\u036f]/g, '') // Remove diacritics
                    .replace(/[^a-z0-9\s-]/g, '') // Remove special characters
                    .replace(/\s+/g, '-') // Replace spaces with hyphens
                    .replace(/-+/g, '-') // Replace multiple hyphens with single
                    .replace(/^-+|-+$/g, ''); // Remove leading/trailing hyphens

                slugInput.value = slug;
            });
        }
    }

    // Initialize slug generator
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSlugGenerator);
    } else {
        initSlugGenerator();
    }

    // Character counter for meta fields
    function initCharacterCounters() {
        const metaTitleInput = document.getElementById('meta_title');
        const metaDescInput = document.getElementById('meta_description');

        if (metaTitleInput) {
            metaTitleInput.addEventListener('input', function() {
                const length = this.value.length;
                const maxLength = 60;
                const color = length > maxLength ? 'text-red-500' : 'text-gray-500';

                let counter = document.getElementById('meta-title-counter');
                if (!counter) {
                    counter = document.createElement('span');
                    counter.id = 'meta-title-counter';
                    counter.className = 'text-xs ' + color;
                    this.parentNode.appendChild(counter);
                }
                counter.textContent = `${length}/${maxLength}`;
                counter.className = 'text-xs ' + color;
            });
        }

        if (metaDescInput) {
            metaDescInput.addEventListener('input', function() {
                const length = this.value.length;
                const maxLength = 160;
                const color = length > maxLength ? 'text-red-500' : 'text-gray-500';

                let counter = document.getElementById('meta-description-counter');
                if (!counter) {
                    counter = document.createElement('span');
                    counter.id = 'meta-description-counter';
                    counter.className = 'text-xs ' + color;
                    this.parentNode.appendChild(counter);
                }
                counter.textContent = `${length}/${maxLength}`;
                counter.className = 'text-xs ' + color;
            });
        }
    }

    // Initialize character counters
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initCharacterCounters);
    } else {
        initCharacterCounters();
    }
</script>
@endsection