{{--
    文件功能：娱乐游戏大厅弹窗组件

    点击工具栏「娱乐」按钮后弹出，展示所有已开启的游戏：
    - 百家乐：当前场次状态 + 倒计时 + 直接参与按钮
    - 老虎机：今日限额余量 + 直接打开按钮
    - 神秘箱子：已投放数量 + 直接打开按钮
    - 赛马竞猜：当前场次状态 + 参与按钮
    - 神秘占卜：今日占卜次数 + 直接打开按钮
    - 钓鱼：状态 + 打开按钮

    JS 逻辑已迁移到 resources/js/chat-room/game-hall.js。

    @author ChatRoom Laravel
    @version 1.0.0
--}}

@php
    $gameEnabled = [
        'baccarat' => \App\Models\GameConfig::isEnabled('baccarat'),
        'slot_machine' => \App\Models\GameConfig::isEnabled('slot_machine'),
        'mystery_box' => \App\Models\GameConfig::isEnabled('mystery_box'),
        'horse_racing' => \App\Models\GameConfig::isEnabled('horse_racing'),
        'fortune_telling' => \App\Models\GameConfig::isEnabled('fortune_telling'),
        'fishing' => \App\Models\GameConfig::isEnabled('fishing'),
        'lottery' => \App\Models\GameConfig::isEnabled('lottery'),
        'gomoku' => \App\Models\GameConfig::isEnabled('gomoku'),
    ];
@endphp

{{-- ═══════════ 游戏大厅弹窗遮罩 ═══════════ --}}
<div id="game-hall-modal"
    data-game-enabled='@json($gameEnabled)'
    data-game-enabled-url="{{ url('/games/enabled') }}"
    style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
           z-index:9998; justify-content:center; align-items:center;">
    <div id="game-hall-inner"
        style="width:680px; max-width:96vw; max-height:88vh; border-radius:8px; overflow:hidden;
               box-shadow:0 8px 32px rgba(0,0,0,.3); display:flex; flex-direction:column;
               background:#fff; font-family:'Microsoft YaHei',SimSun,sans-serif;">

        {{-- ─── 标题栏（与商店弹窗同风格）─── --}}
        <div
            style="background:linear-gradient(135deg,#336699,#5a8fc0); color:#fff;
                   padding:10px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0;">
            <div style="font-size:14px; font-weight:bold; flex:1;">🎮 娱乐大厅</div>
            <div
                style="font-size:12px; color:#d0e8ff; display:flex; align-items:center; gap:3px;
                        background:rgba(0,0,0,.2); padding:2px 8px; border-radius:10px;">
                💰 <strong id="game-hall-jjb" style="color:#ffe082; font-size:13px;">--</strong> 金币
            </div>
            <span data-game-hall-close
                style="cursor:pointer; font-size:18px; opacity:.8; line-height:1; transition:opacity .15s;"
                onmouseover="this.style.opacity=1" onmouseout="this.style.opacity=.8">&times;</span>
        </div>

        {{-- ─── 游戏卡片网格 ─── --}}
        <div style="flex:1; overflow-y:auto; background:#f6faff; padding:12px;">

            {{-- 加载状态 --}}
            <div id="game-hall-loading" style="text-align:center; color:#336699; padding:40px 0; font-size:13px;">
                <div style="font-size:28px; margin-bottom:8px;">⏳</div>
                加载游戏状态中…
            </div>

            {{-- 游戏卡片容器 --}}
            <div id="game-hall-cards" style="display:none; grid-template-columns:1fr 1fr; gap:10px;">
            </div>

            {{-- 全部未开启提示 --}}
            <div id="game-hall-empty"
                style="display:none; text-align:center; color:#336699; padding:40px 0; font-size:13px;">
                <div style="font-size:28px; margin-bottom:8px;">🔒</div>
                暂无开启的游戏，请联系管理员
            </div>
        </div>

        {{-- ─── 底部 ─── --}}
        <div
            style="background:#fff; border-top:1px solid #d0e4f5; padding:8px 16px;
                    display:flex; justify-content:center; flex-shrink:0;">
            <button type="button" data-game-hall-close
                style="padding:5px 24px; background:#f0f6ff; border:1px solid #b0d0ee; border-radius:4px;
                       font-size:12px; color:#336699; cursor:pointer; transition:all .15s;"
                onmouseover="this.style.background='#ddeeff'" onmouseout="this.style.background='#f0f6ff'">关闭</button>
        </div>
    </div>
</div>