@extends('layouts.admin')

@section('title', '添加博客')

@section('page-title', '添加博客')

@section('content')
<div class="form-container">
    <form action="{{ route('admin.blog.store') }}" method="POST">
        @csrf

        <div class="form-group">
            <label for="title">博客标题 <span style="color: #ef4444;">*</span></label>
            <input type="text" id="title" name="title" value="{{ old('title') }}" required>
        </div>

        <div class="form-group">
            <label for="title_en">英文标题</label>
            <input type="text" id="title_en" name="title_en" value="{{ old('title_en') }}">
        </div>

        <div class="form-group">
            <label for="slug">URL 别名（留空自动生成）</label>
            <input type="text" id="slug" name="slug" value="{{ old('slug') }}" placeholder="自动生成或手动输入">
        </div>

        <div class="form-group">
            <label for="category">博客分类</label>
            <input type="text" id="category" name="category" value="{{ old('category') }}" placeholder="例如：行业动态、技术资讯、公司新闻">
        </div>

        <div class="form-group">
            <label for="summary">博客摘要</label>
            <textarea id="summary" name="summary" rows="3" placeholder="简短描述博客内容（可选，留空自动从内容提取）">{{ old('summary') }}</textarea>
        </div>

        <div class="form-group">
            <label for="content">博客内容</label>
            <textarea id="content" name="content" rows="15" placeholder="博客详细内容，支持 HTML 标签">{{ old('content') }}</textarea>
        </div>

        <div class="form-group">
            <label for="cover_image">封面图片</label>
            <div class="cover-image-uploader">
                <!-- 图片预览区 -->
                <div id="coverPreview" class="cover-preview-area">
                    <div id="coverPlaceholder" class="cover-placeholder">
                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                            <circle cx="8.5" cy="8.5" r="1.5"></circle>
                            <polyline points="21 15 16 10 5 21"></polyline>
                        </svg>
                        <p>暂无封面图片</p>
                    </div>
                    <img id="coverImg" src="" alt="封面预览" class="cover-preview-img" style="display: none;">
                </div>

                <!-- 上传按钮组 -->
                <div class="cover-actions">
                    <button type="button" class="btn btn-upload" onclick="document.getElementById('coverFile').click()">
                        <span>📷</span> 上传图片
                    </button>
                    <button type="button" class="btn btn-remove" onclick="removeCoverImage()" style="display: none;" id="removeCoverBtn">
                        <span>🗑️</span> 移除图片
                    </button>
                </div>

                <!-- URL输入 -->
                <div class="url-input-group">
                    <label>或直接输入图片URL：</label>
                    <input type="text" id="cover_image" name="cover_image" value="{{ old('cover_image') }}" placeholder="https://example.com/image.jpg" oninput="updateCoverUrl(this.value)">
                </div>

                <!-- 隐藏的文件输入框 -->
                <input type="file" id="coverFile" accept="image/jpeg,image/png,image/jpg,image/gif,image/webp" style="display: none;" onchange="uploadCoverImage(event)">
            </div>
        </div>

        <div class="form-group">
            <label for="author">作者</label>
            <input type="text" id="author" name="author" value="{{ old('author') }}" placeholder="作者姓名">
        </div>

        <div class="form-group">
            <label for="source">来源</label>
            <input type="text" id="source" name="source" value="{{ old('source') }}" placeholder="例如：新华社、科技日报">
        </div>

        <div class="form-group">
            <label for="source_url">来源链接</label>
            <input type="url" id="source_url" name="source_url" value="{{ old('source_url') }}" placeholder="https://example.com/news/123">
        </div>

        <div class="form-group">
            <label for="published_at">发布时间</label>
            <input type="datetime-local" id="published_at" name="published_at" value="{{ old('published_at') }}">
            <p style="color: #6b7280; font-size: 0.875rem; margin-top: 0.5rem;">留空则使用当前时间</p>
        </div>

        <div class="form-group">
            <label for="sort_order">排序权重</label>
            <input type="number" id="sort_order" name="sort_order" value="{{ old('sort_order', 0) }}" min="0" placeholder="数字越大越靠前">
        </div>

        <div class="form-group">
            <label for="view_count">初始浏览次数</label>
            <input type="number" id="view_count" name="view_count" value="{{ old('view_count', 0) }}" min="0">
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="is_published" {{ old('is_published') ? 'checked' : '' }}>
                立即发布
            </label>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" name="is_featured" {{ old('is_featured') ? 'checked' : '' }}>
                设为推荐博客
            </label>
        </div>

        <div style="display: flex; gap: 1rem; margin-top: 2rem;">
            <button type="submit" class="btn btn-primary">保存博客</button>
            <a href="{{ route('admin.blog.index') }}" class="btn btn-secondary" style="background: #e5e7eb; color: #374151; border: none;">取消</a>
        </div>
    </form>
</div>
@endsection

@push('scripts')
<script src="{{ asset('js/tinymce/tinymce.min.js') }}" referrerpolicy="origin"></script>
<script>
    tinymce.init({
        selector: '#content',
        height: 500,
        language: 'zh_CN',
        language_url: '{{ asset("js/tinymce/langs/zh_CN.js") }}',
        plugins: [
            'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
            'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
            'insertdatetime', 'media', 'table', 'help', 'wordcount', 'paste'
        ],
        toolbar: 'undo redo | formatselect | bold italic underline strikethrough | ' +
            'alignleft aligncenter alignright alignjustify | ' +
            'bullist numlist outdent indent | link image | table | ' +
            'removeformat code fullscreen preview | help',
        menubar: true,
        promotion: false,
        branding: false,

        // 图片上传配置
        images_upload_url: '{{ route("admin.upload") }}',
        images_upload_credentials: true,
        automatic_uploads: true,
        file_picker_types: 'image',
        relative_urls: false,
        remove_script_host: false,

        // 粘贴图片配置
        paste_data_images: true,
        paste_as_text: false,
        paste_merge_formats: true,
        paste_auto_cleanup_on_paste: true,

        // 自定义图片上传处理（带进度）
        images_upload_handler: function (blobInfo, success, failure, progress) {
            var formData = new FormData();
            formData.append('file', blobInfo.blob(), blobInfo.filename());

            var xhr = new XMLHttpRequest();

            xhr.open('POST', '{{ route("admin.upload") }}', true);
            xhr.setRequestHeader('X-CSRF-TOKEN', document.querySelector('meta[name="csrf-token"]').getAttribute('content'));
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');

            // 上传进度
            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    progress(e.loaded / e.total);
                }
            };

            xhr.onload = function() {
                if (xhr.status === 200) {
                    var response = JSON.parse(xhr.responseText);
                    if (response.success) {
                        success(response.url);
                    } else {
                        failure(response.message || '上传失败');
                    }
                } else {
                    failure('上传失败：服务器错误');
                }
            };

            xhr.onerror = function() {
                failure('上传失败：网络错误');
            };

            xhr.send(formData);
        },

        setup: function(editor) {
            // 自动保存
            editor.on('change', function() {
                editor.save();
            });

            // 粘贴图片提示
            editor.on('paste', function(e) {
                var items = (e.clipboardData || e.originalEvent.clipboardData).items;
                var hasImage = false;

                for (var i = 0; i < items.length; i++) {
                    if (items[i].type.indexOf('image') !== -1) {
                        hasImage = true;
                        break;
                    }
                }

                if (hasImage) {
                    console.log('检测到图片，准备上传...');
                }
            });
        }
    });
</script>

<style>
    /* 封面图片上传样式 */
    .cover-image-uploader {
        margin-top: 0.5rem;
    }

    .cover-preview-area {
        width: 100%;
        height: 240px;
        border: 2px dashed #d1d5db;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        background: #f9fafb;
        transition: all 0.3s ease;
        margin-bottom: 1rem;
    }

    .cover-preview-area:hover {
        border-color: #667eea;
        background: #f0f4ff;
    }

    .cover-preview-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cover-placeholder {
        text-align: center;
        color: #9ca3af;
    }

    .cover-placeholder svg {
        margin-bottom: 0.5rem;
        opacity: 0.5;
    }

    .cover-placeholder p {
        margin: 0;
        font-size: 0.95rem;
    }

    .cover-actions {
        display: flex;
        gap: 0.75rem;
        margin-bottom: 1rem;
        flex-wrap: wrap;
    }

    .btn {
        padding: 0.625rem 1.25rem;
        border-radius: 8px;
        font-weight: 500;
        font-size: 0.9rem;
        cursor: pointer;
        border: none;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .btn-upload {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }

    .btn-upload:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    }

    .btn-remove {
        background: #fee2e2;
        color: #991b1b;
    }

    .btn-remove:hover {
        background: #fecaca;
    }

    .url-input-group {
        background: #f9fafb;
        padding: 1rem;
        border-radius: 8px;
    }

    .url-input-group label {
        display: block;
        margin-bottom: 0.5rem;
        font-size: 0.85rem;
        color: #6b7280;
    }

    .url-input-group input {
        width: 100%;
        padding: 0.625rem;
        border: 1px solid #d1d5db;
        border-radius: 6px;
        font-size: 0.9rem;
        transition: border-color 0.3s ease;
    }

    .url-input-group input:focus {
        outline: none;
        border-color: #667eea;
        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    }

    /* 上传加载动画 */
    @keyframes spin {
        to { transform: rotate(360deg); }
    }
    .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        border: 2px solid rgba(255,255,255,0.3);
        border-top-color: white;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
    }
</style>

<script>
    // 上传封面图片
    function uploadCoverImage(event) {
        const file = event.target.files[0];
        if (!file) return;

        // 验证文件类型
        const validTypes = ['image/jpeg', 'image/png', 'image/jpg', 'image/gif', 'image/webp'];
        if (!validTypes.includes(file.type)) {
            alert('请选择有效的图片文件 (JPEG, PNG, GIF, WebP)');
            event.target.value = '';
            return;
        }

        // 验证文件大小 (5MB)
        if (file.size > 5 * 1024 * 1024) {
            alert('图片大小不能超过 5MB');
            event.target.value = '';
            return;
        }

        // 创建 FormData
        const formData = new FormData();
        formData.append('file', file);

        // 上传前显示加载状态
        const uploadBtn = document.querySelector('.btn-upload');
        const originalText = uploadBtn.innerHTML;
        uploadBtn.innerHTML = '<span class="spinner"></span> 上传中...';
        uploadBtn.disabled = true;

        fetch('{{ route("admin.upload") }}', {
            method: 'POST',
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // 更新隐藏输入框的值
                document.getElementById('cover_image').value = data.url;

                // 更新预览
                const placeholder = document.getElementById('coverPlaceholder');
                const previewImg = document.getElementById('coverImg');

                // 隐藏占位符，显示预览
                if (placeholder) placeholder.style.display = 'none';
                if (previewImg) {
                    previewImg.src = data.url;
                    previewImg.style.display = 'block';
                }

                // 显示移除按钮
                const removeBtn = document.getElementById('removeCoverBtn');
                if (removeBtn) {
                    removeBtn.style.display = 'flex';
                }

                alert('图片上传成功！');
            } else {
                alert('上传失败：' + (data.message || '未知错误'));
            }
        })
        .catch(error => {
            console.error('Upload error:', error);
            alert('上传失败，请重试');
        })
        .finally(() => {
            // 恢复按钮状态
            uploadBtn.innerHTML = originalText;
            uploadBtn.disabled = false;
            // 清空文件输入框
            event.target.value = '';
        });
    }

    // 移除封面图片
    function removeCoverImage() {
        if (!confirm('确定要移除封面图片吗？')) return;

        // 清空输入框
        document.getElementById('cover_image').value = '';

        // 显示占位符
        const placeholder = document.getElementById('coverPlaceholder');
        if (placeholder) placeholder.style.display = 'block';

        // 隐藏预览
        const previewImg = document.getElementById('coverImg');
        if (previewImg) {
            previewImg.src = '';
            previewImg.style.display = 'none';
        }

        // 隐藏移除按钮
        const removeBtn = document.getElementById('removeCoverBtn');
        if (removeBtn) {
            removeBtn.style.display = 'none';
        }
    }

    // 通过URL更新封面
    function updateCoverUrl(url) {
        const placeholder = document.getElementById('coverPlaceholder');
        const previewImg = document.getElementById('coverImg');
        const removeBtn = document.getElementById('removeCoverBtn');

        if (url) {
            // 隐藏占位符，显示预览
            if (placeholder) placeholder.style.display = 'none';
            if (previewImg) {
                previewImg.src = url;
                previewImg.style.display = 'block';
                previewImg.onerror = function() {
                    // 图片加载失败时不提示，允许手动输入
                };
            }
            if (removeBtn) removeBtn.style.display = 'flex';
        } else {
            // 清空状态
            if (placeholder) placeholder.style.display = 'block';
            if (previewImg) {
                previewImg.src = '';
                previewImg.style.display = 'none';
            }
            if (removeBtn) removeBtn.style.display = 'none';
        }
    }
</script>
@endpush