{% extends "base.html" %}

{% block content %}
<div class="container mx-auto px-4">
    <h1 class="text-3xl font-bold mb-4">添加卡密</h1>
    <form id="cardForm" action="{{ url_for('admin.add_card') }}" method="POST" class="bg-white shadow-md rounded-lg p-6">
        <div class="mb-4">
            <label for="usable_count" class="block text-gray-700 font-bold mb-2">可用次数</label>
            <input type="number" name="usable_count" id="usable_count" class="w-full px-3 py-2 border rounded-lg" required>
        </div>
        <div class="mb-4">
            <label for="points" class="block text-gray-700 font-bold mb-2">积分</label>
            <input type="number" name="points" id="points" class="w-full px-3 py-2 border rounded-lg" required>
        </div>
        <button type="button" id="generate_code" class="w-full bg-blue-500 text-white py-2 px-4 rounded-lg hover:bg-blue-600 transition duration-300 fluent-button">生成卡密</button>
    </form>
</div>

<script>
document.getElementById('generate_code').addEventListener('click', function() {
    const length = 12;
    const charset = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let generatedCode = '';
    for (let i = 0; i < length; i++) {
        const randomIndex = Math.floor(Math.random() * charset.length);
        generatedCode += charset[randomIndex];
    }
    
    // 将生成的卡密存储在隐藏字段中以便提交
    const hiddenInput = document.createElement('input');
    hiddenInput.type = 'hidden';
    hiddenInput.name = 'generated_code';
    hiddenInput.value = generatedCode;
    document.querySelector('form').appendChild(hiddenInput);
    
    // 提交表单
    document.getElementById('cardForm').submit();
});
</script>
{% endblock %}