{% extends "layout.html" %}

{% block title %}道具管理{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">道具模板管理</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <button class="btn btn-primary" onclick="openAddModal()">
            <i class="fas fa-plus"></i> 添加新道具
        </button>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-hover">
        <thead>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>稀有度</th>
                <th>消耗品</th>
                <th>价格</th>
                <th class="text-end">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for item in items %}
            <tr>
                <td>{{ item.item_id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ '★' * item.rarity }}</td>
                <td>{{ '是' if item.is_consumable else '否' }}</td>
                <td>{{ item.cost }}</td>
                <td class="text-end">
                    <button class="btn btn-sm btn-outline-primary"
                            onclick="openEditModal(this.dataset)"
                            data-item-id="{{ item.item_id }}"
                            data-name="{{ item.name }}"
                            data-description="{{ item.description or '' }}"
                            data-effect-description="{{ item.effect_description or '' }}"
                            data-rarity="{{ item.rarity }}"
                            data-cost="{{ item.cost }}"
                            data-is-consumable="{{ 1 if item.is_consumable else 0 }}">
                        <i class="fas fa-edit"></i> 编辑
                    </button>
                    <form action="{{ url_for('admin_bp.delete_item', item_id=item.item_id) }}" method="POST" class="d-inline" onsubmit="return confirm('确定要删除吗？');">
                        <button type="submit" class="btn btn-sm btn-outline-danger">
                            <i class="fas fa-trash"></i> 删除
                        </button>
                    </form>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- Modal for Add/Edit Item -->
<div class="modal fade" id="itemModal" tabindex="-1" aria-labelledby="itemModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="itemModalLabel">添加/编辑道具</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="itemForm" method="POST">
                <div class="modal-body">
                    <input type="hidden" name="item_id" id="itemId">
                    
                    <div class="mb-3">
                        <label for="itemName" class="form-label">名称</label>
                        <input type="text" class="form-control" id="itemName" name="name" required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="itemDescription" class="form-label">描述</label>
                        <textarea class="form-control" id="itemDescription" name="description"></textarea>
                    </div>

                    <div class="mb-3">
                        <label for="itemEffectDescription" class="form-label">效果描述</label>
                        <textarea class="form-control" id="itemEffectDescription" name="effect_description"></textarea>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="itemRarity" class="form-label">稀有度 (1-10)</label>
                                <input type="number" class="form-control" id="itemRarity" name="rarity" min="1" max="10" value="1" required>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="mb-3">
                                <label for="itemCost" class="form-label">价格</label>
                                <input type="number" class="form-control" id="itemCost" name="cost" value="0">
                            </div>
                        </div>
                    </div>
                    
                    <div class="form-check mb-3">
                        <input class="form-check-input" type="checkbox" id="isConsumable" name="is_consumable">
                        <label class="form-check-label" for="isConsumable">
                            是否是消耗品？
                        </label>
                    </div>
                    
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    const itemModal = new bootstrap.Modal(document.getElementById('itemModal'));
    const itemForm = document.getElementById('itemForm');
    const modalLabel = document.getElementById('itemModalLabel');
    const itemIdInput = document.getElementById('itemId');
    
    function openAddModal() {
        itemForm.action = "{{ url_for('admin_bp.add_item') }}";
        modalLabel.textContent = '添加新道具';
        itemForm.reset();
        itemIdInput.value = '';
        document.getElementById('isConsumable').checked = false; // 确保默认不勾选
        itemModal.show();
    }

    function openEditModal(data) {
        const itemId = Number(data.item_id || data.itemId);
        const name = data.name || '';
        const description = data.description || '';
        const effectDescription = data.effect_description || data.effectDescription || '';
        const rarity = Number(data.rarity || 1);
        const cost = Number(data.cost || 0);
        const isConsumable = (data.isConsumable === '1' || data.isConsumable === 'true' || data.isConsumable === 'on');

        itemForm.action = `/admin/items/edit/${itemId}`;
        modalLabel.textContent = '编辑道具';
        itemIdInput.value = itemId;
        document.getElementById('itemName').value = name;
        document.getElementById('itemDescription').value = description;
        document.getElementById('itemEffectDescription').value = effectDescription;
        document.getElementById('itemRarity').value = rarity;
        document.getElementById('itemCost').value = cost;
        document.getElementById('isConsumable').checked = isConsumable;
        itemModal.show();
    }
</script>
{% endblock %}