{% extends "base.html" %}

{% block title %}创建套餐 - {{ config.SITE_NAME or '软件授权管理系统' }}{% endblock %}

{% block page_title %}创建套餐{% endblock %}

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

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="card shadow">
            <div class="card-body">
                <form id="package-form">
                    <input type="hidden" id="product_id" value="{{ product.product_id }}">
                    
                    <div class="mb-3">
                        <label for="name" class="form-label">套餐名称 *</label>
                        <input type="text" class="form-control" id="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="description" class="form-label">套餐描述</label>
                        <textarea class="form-control" id="description" rows="3"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="price" class="form-label">价格 *</label>
                                <input type="number" class="form-control" id="price" step="0.01" min="0" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="duration" class="form-label">时长(天) *</label>
                                <select class="form-select" id="duration" required>
                                    <option value="1">1天(天卡)</option>
                                    <option value="30">30天(月卡)</option>
                                    <option value="90">90天(季卡)</option>
                                    <option value="365">365天(年卡)</option>
                                    <option value="-1">永久</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="max_devices" class="form-label">最大设备数</label>
                                <input type="number" class="form-control" id="max_devices" min="1" value="1">
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="stock" class="form-label">库存(-1为无限)</label>
                                <input type="number" class="form-control" id="stock" min="-1" value="-1">
                            </div>
                        </div>
                    </div>
                    
                    <div class="mb-3">
                        <label for="sort_order" class="form-label">排序</label>
                        <input type="number" class="form-control" id="sort_order" min="0" value="0">
                    </div>
                    
                    <div class="mb-3">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="status" checked>
                            <label class="form-check-label" for="status">
                                启用
                            </label>
                        </div>
                    </div>
                    
                    <button type="submit" class="btn btn-primary" id="save-btn">
                        <i class="fas fa-save me-2"></i>
                        <span id="save-text">保存套餐</span>
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

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

// 保存套餐
function savePackage() {
    const saveBtn = document.getElementById('save-btn');
    const saveText = document.getElementById('save-text');
    
    // 显示加载状态
    saveBtn.disabled = true;
    saveText.textContent = '保存中...';
    
    // 收集表单数据
    const formData = {
        product_id: document.getElementById('product_id').value,
        name: document.getElementById('name').value,
        description: document.getElementById('description').value,
        price: parseFloat(document.getElementById('price').value),
        duration: parseInt(document.getElementById('duration').value),
        max_devices: parseInt(document.getElementById('max_devices').value),
        stock: parseInt(document.getElementById('stock').value),
        sort_order: parseInt(document.getElementById('sort_order').value),
        status: document.getElementById('status').checked ? 1 : 0
    };
    
    // 发送请求保存套餐
    apiRequest('/api/v1/packages', {
        method: 'POST',
        body: JSON.stringify(formData)
    })
    .then(data => {
        if (data.success) {
            showNotification('套餐创建成功', 'success');
            // 跳转到套餐列表页面
            setTimeout(() => {
                window.location.href = `/packages?product_id=${formData.product_id}`;
            }, 1000);
        } else {
            showNotification('保存失败: ' + data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showNotification('保存失败，请查看控制台了解详情', 'error');
    })
    .finally(() => {
        saveBtn.disabled = false;
        saveText.textContent = '保存套餐';
    });
}
</script>
{% endblock %}