@extends('admin.layouts.app')

@section('title', 'Thêm bài viết mới')
@section('page-title', 'Thêm bài viết mới')

@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.store') }}" enctype="multipart/form-data" class="space-y-6">
            @csrf

            <!-- 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') }}"
                            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') }}"
                            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') == 'Đánh giá' ? 'selected' : '' }}>Đánh giá</option>
                            <option value="Văn hóa" {{ old('category') == 'Văn hóa' ? 'selected' : '' }}>Văn hóa</option>
                            <option value="Phương pháp" {{ old('category') == 'Phương pháp' ? 'selected' : '' }}>Phương pháp
                            </option>
                            <option value="Thế hệ" {{ old('category') == 'Thế hệ' ? 'selected' : '' }}>Thế hệ</option>
                            <option value="Chiến lược" {{ old('category') == 'Chiến lược' ? 'selected' : '' }}>Chiến lược
                            </option>
                            <option value="Khởi nghiệp" {{ old('category') == 'Khởi nghiệp' ? 'selected' : '' }}>Khởi
                                nghiệp</option>
                            <option value="Công nghệ" {{ old('category') == 'Công nghệ' ? 'selected' : '' }}>Công nghệ
                            </option>
                            <option value="Làm việc" {{ old('category') == 'Làm việc' ? 'selected' : '' }}>Làm việc
                            </option>
                            <option value="Câu chuyện" {{ old('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') }}</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" name="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') }}</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>

                        <!-- 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</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') == 'draft' ? 'selected' : '' }}>Bản nháp</option>
                            <option value="published" {{ old('status') == 'published' ? 'selected' : '' }}>Đã xuất bản
                            </option>
                            <option value="archived" {{ old('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') }}"
                        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') }}"
                            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') }}</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>

        <!-- Action Buttons - Bottom -->
        <div class="flex justify-end space-x-4 mt-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-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>Lưu 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