{% extends "base.html" %}

{% block content %}
<div class="container mt-4">
    <h2>游戏管理</h2>
    <a href="{{ url_for('games.add_game') }}" class="btn btn-primary mb-3">添加新游戏</a>

    <table class="table table-striped">
        <thead>
            <tr>
                <th>游戏名称</th>
                <th>库存数量</th>
                <th>类型</th>
                <th>人数范围</th>
                <th>时长(分钟)</th>
                <th>价格倍率</th>
                <th>可用</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            {% for game in games %}
            <tr>
                <td>{{ game.game_name }}</td>
                <td>{{ game.quantity }}</td>
                <td>{{ '剧本杀' if game.game_type == 0 else '桌游' }}</td>
                <td>{{ game.min_players }}-{{ game.max_players }}人</td>
                <td>{{ game.duration }}</td>
                <td>{{ "%.2f"|format(game.price) }}</td>
                <td>{{ '是' if game.is_available else '否' }}</td>
                <td>
                    <a href="{{ url_for('games.edit_game', game_id=game.game_id) }}"
                       class="btn btn-sm btn-warning">编辑</a>
                    <form action="{{ url_for('games.delete_game', game_id=game.game_id) }}"
                          method="POST" class="d-inline">
                        <button type="submit" class="btn btn-sm btn-danger"
                                onclick="return confirm('确认删除？')">删除</button>
                    </form>
                    <a href="#" class="btn btn-sm btn-success set-photo-btn" data-game-id="{{ game.game_id }}">设置封面</a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>

<!-- 模态框 -->
<div class="modal fade" id="setPhotoModal" tabindex="-1" aria-labelledby="setPhotoModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- 表单提交到 manage_photos 路由 -->
      <form id="setPhotoForm" method="post" action="">
        <div class="modal-header">
          <h5 class="modal-title" id="setPhotoModalLabel">设置游戏封面</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div class="form-group">
            <label for="photoUrlInput">图片网址：</label>
            <input type="text" class="form-control" id="photoUrlInput" name="photo_url" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">确认</button>
        </div>
      </form>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<script>
$(document).ready(function(){
  // 点击“设置封面”按钮时
  $('.set-photo-btn').click(function(e){
    e.preventDefault();
    var gameId = $(this).data('game-id');
    // 设置表单提交的 action 为当前游戏对应的 URL
    $('#setPhotoForm').attr('action', '/games/photos/' + gameId);
    // 弹出模态框
    $('#setPhotoModal').modal('show');
  });
});
</script>
{% endblock %}