@extends('layouts.admin')

@section('title', '添加作品')

@section('page-title', '添加作品')

@section('content')
<div class="form-container">
    <form action="{{ route('admin.artworks.store') }}" method="POST">
        @csrf
        
        <div class="form-group">
            <label for="art_name">作品名称 *</label>
            <input type="text" id="art_name" name="art_name" required>
        </div>

        <div class="form-group">
            <label for="art_name_en">作品名称(英文)</label>
            <input type="text" id="art_name_en" name="art_name_en">
        </div>

        <div class="form-group">
            <label for="art_category">分类 *</label>
            <select id="art_category" name="art_category" required>
                <option value="">请选择分类</option>
                @foreach($categories as $category)
                <option value="{{ $category->id }}">{{ $category->category_name }}</option>
                @endforeach
            </select>
        </div>

        <div class="form-group">
            <label for="art_listimg">列表图片URL *</label>
            <input type="text" id="art_listimg" name="art_listimg" required placeholder="https://example.com/image.jpg">
            <div style="margin-top: 0.5rem;">
                <label style="display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <span class="btn btn-sm btn-primary" onclick="document.getElementById('listimg_upload').click()">
                        📤 上传图片
                    </span>
                    <input type="file" id="listimg_upload" accept="image/*" style="display: none;" onchange="uploadImage(this, 'art_listimg')">
                </label>
                <div id="listimg_preview" style="margin-top: 0.5rem; display: none;">
                    <img src="" alt="预览" style="max-width: 200px; border-radius: 4px;">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="art_img">大图URL</label>
            <input type="text" id="art_img" name="art_img" placeholder="https://example.com/image.jpg">
            <div style="margin-top: 0.5rem;">
                <label style="display: inline-flex; align-items: center; gap: 0.5rem; cursor: pointer;">
                    <span class="btn btn-sm btn-primary" onclick="document.getElementById('img_upload').click()">
                        📤 上传图片
                    </span>
                    <input type="file" id="img_upload" accept="image/*" style="display: none;" onchange="uploadImage(this, 'art_img')">
                </label>
                <div id="img_preview" style="margin-top: 0.5rem; display: none;">
                    <img src="" alt="预览" style="max-width: 200px; border-radius: 4px;">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label for="art_intro">简短描述 *</label>
            <textarea id="art_intro" name="art_intro" required></textarea>
        </div>

        <div class="form-group">
            <label for="art_intro_en">详细描述(英文)</label>
            <textarea id="art_intro_en" name="art_intro_en"></textarea>
        </div>

        <div class="form-group">
            <label for="art_time">作品时间</label>
            <input type="date" id="art_time" name="art_time">
        </div>

        <div class="form-group">
            <label for="art_client">客户名称</label>
            <input type="text" id="art_client" name="art_client">
        </div>

        <div class="form-group">
            <label for="art_sort">排序</label>
            <input type="number" id="art_sort" name="art_sort" value="0">
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" id="art_ifhot" name="art_ifhot" value="1">
                设为精选作品
            </label>
        </div>

        <button type="submit" class="btn btn-primary">保存作品</button>
        <a href="{{ route('admin.artworks.index') }}" class="btn">取消</a>
    </form>
</div>

<script>
function uploadImage(input, targetInputId) {
    const file = input.files[0];
    if (!file) return;

    // 防止重复上传
    if (input.dataset.uploading === 'true') {
        console.log('正在上传中，请稍候...');
        return;
    }

    const formData = new FormData();
    formData.append('image', file);

    // 获取上传按钮 - 通过更可靠的方式
    const uploadBtn = input.parentElement.querySelector('.btn');
    if (!uploadBtn) {
        console.error('找不到上传按钮');
        return;
    }

    const originalText = uploadBtn.textContent;
    
    // 设置上传状态
    input.dataset.uploading = 'true';
    uploadBtn.textContent = '上传中...';
    uploadBtn.disabled = true;
    uploadBtn.style.opacity = '0.6';

    console.log('开始上传文件:', file.name);

    fetch('{{ route('admin.upload') }}', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}',
            'Accept': 'application/json'
        },
        body: formData
    })
    .then(response => {
        console.log('服务器响应状态:', response.status);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
    })
    .then(data => {
        console.log('上传响应数据:', data);
        
        if (data.success || data.location) {
            // 设置图片URL到输入框
            const url = data.url || data.location;
            document.getElementById(targetInputId).value = url;
            
            // 显示预览
            const previewId = targetInputId.replace('art_', '') + '_preview';
            const preview = document.getElementById(previewId);
            if (preview) {
                preview.style.display = 'block';
                preview.querySelector('img').src = url;
            }
            
            alert('图片上传成功!');
        } else {
            const errorMsg = data.message || data.error || '未知错误';
            console.error('上传失败:', errorMsg);
            alert('图片上传失败: ' + errorMsg);
        }
    })
    .catch(error => {
        console.error('上传错误:', error);
        alert('图片上传失败: ' + error.message);
    })
    .finally(() => {
        // 恢复按钮状态
        input.dataset.uploading = 'false';
        uploadBtn.textContent = originalText;
        uploadBtn.disabled = false;
        uploadBtn.style.opacity = '1';
        
        // 清空文件输入框，允许重新选择同一文件
        input.value = '';
    });
}

// 防止页面刷新时的问题
document.addEventListener('DOMContentLoaded', function() {
    // 清除所有上传状态
    document.querySelectorAll('input[type="file"]').forEach(input => {
        input.dataset.uploading = 'false';
    });
});
</script>
@endsection