{% extends "base.html" %}

{% block title %}创建产品 - 软件授权管理系统{% endblock %}

{% block page_title %}创建产品{% endblock %}

{% block page_actions %}
<a href="{{ url_for('web.products') }}" class="btn btn-outline-secondary">
    <i class="fas fa-arrow-left me-2"></i>
    返回列表
</a>
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-lg-8">
        <div class="card shadow">
            <div class="card-body">
                <form id="product-form">
                    <div class="mb-3">
                        <label for="product_name" class="form-label">产品名称 *</label>
                        <input type="text" class="form-control" id="product_name" name="product_name" required>
                        <div class="form-text">产品的显示名称，建议使用简洁明了的名称</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="product_id" class="form-label">产品ID</label>
                        <input type="text" class="form-control" id="product_id" name="product_id">
                        <div class="form-text">产品的唯一标识符，如果不填写将自动生成</div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">产品描述</label>
                        <textarea class="form-control" id="description" name="description" rows="3"></textarea>
                    </div>
                    
                    <div class="mb-3">
                        <label for="image" class="form-label">产品图片</label>
                        <input type="file" class="form-control" id="image" name="image" accept="image/*">
                        <div class="form-text">支持 JPG、PNG、GIF 格式，建议尺寸 800x600</div>
                    </div>
                    
                    <div class="mb-3">
                        <label class="form-label">状态</label>
                        <div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="status_enabled" value="1" checked>
                                <label class="form-check-label" for="status_enabled">启用</label>
                            </div>
                            <div class="form-check form-check-inline">
                                <input class="form-check-input" type="radio" name="status" id="status_disabled" value="0">
                                <label class="form-check-label" for="status_disabled">禁用</label>
                            </div>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" id="submit-btn">
                        <i class="fas fa-save me-2"></i>
                        <span id="submit-text">创建产品</span>
                    </button>
                    <a href="{{ url_for('web.products') }}" class="btn btn-secondary">取消</a>
                </form>
            </div>
        </div>
    </div>
    
    <div class="col-lg-4">
        <div class="card shadow">
            <div class="card-header">
                <h6 class="mb-0">创建说明</h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>产品名称是必填项，建议使用简洁明了的名称</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>产品ID如果不填写将自动生成唯一标识符</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-info-circle text-primary me-2"></i>
                        <small>产品创建后可以添加版本信息和生成卡密</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', function() {
    initEventListeners();
});

// 初始化事件监听器
function initEventListeners() {
    // 表单提交
    document.getElementById('product-form').addEventListener('submit', function(e) {
        e.preventDefault();
        createProduct();
    });
}

// 创建产品
function createProduct() {
    const submitBtn = document.getElementById('submit-btn');
    const submitText = document.getElementById('submit-text');
    
    // 获取表单数据
    const formData = new FormData();
    const productData = {
        product_name: document.getElementById('product_name').value.trim(),
        product_id: document.getElementById('product_id').value.trim(),
        description: document.getElementById('description').value.trim(),
        status: parseInt(document.querySelector('input[name="status"]:checked').value)
    };
    
    // 添加产品数据到FormData
    formData.append('data', JSON.stringify(productData));
    
    // 添加图片文件到FormData
    const imageFile = document.getElementById('image').files[0];
    if (imageFile) {
        formData.append('image', imageFile);
    }
    
    // 基础验证
    if (!productData.product_name) {
        showNotification('请输入产品名称', 'warning');
        return;
    }
    
    // 显示加载状态
    submitBtn.disabled = true;
    submitText.textContent = '创建中...';
    
    // 发送请求
    apiRequest('/api/v1/products', {
        method: 'POST',
        body: formData
    })
    .then(data => {
        if (data.success) {
            showNotification('产品创建成功', 'success');
            // 延迟跳转到产品列表
            setTimeout(() => {
                window.location.href = '/products';
            }, 1500);
        } else {
            showNotification(data.message || '创建失败', 'error');
        }
    })
    .catch(error => {
        console.error('Failed to create product:', error);
        // apiRequest 已经处理了 401 等错误，这里只处理其他错误
        if (error.message !== 'SESSION_EXPIRED') {
            showNotification('网络错误，请稍后重试', 'error');
        }
    })
    .finally(() => {
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitText.textContent = '创建产品';
    });
}
</script>
{% endblock %}