{{--
    文件功能：百家乐买单活动前台弹窗

    用于在娱乐大厅中查看当前买单活动、历史活动、
    以及当前用户在每次活动中的补偿领取状态。
--}}

<div id="baccarat-loss-cover-modal"
    data-blc-summary-url="{{ route('baccarat-loss-cover.summary') }}"
    data-blc-history-url="{{ route('baccarat-loss-cover.history') }}"
    data-blc-claim-url-template="{{ route('baccarat-loss-cover.claim', ['event' => '__EVENT__']) }}"
    style="display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:9997; justify-content:center; align-items:center;">
    <div
        style="width:720px; max-width:96vw; max-height:88vh; border-radius:8px; overflow:hidden; box-shadow:0 8px 32px rgba(0,0,0,.3); background:#fff; display:flex; flex-direction:column;">
        <div
            style="background:linear-gradient(135deg,#15803d,#22c55e); color:#fff; padding:12px 16px; display:flex; align-items:center; justify-content:space-between;">
            <div style="flex: 1;">
                <div style="font-size:15px; font-weight:bold;">🎁 你玩游戏我买单</div>
                <div style="font-size:11px; color:rgba(255,255,255,.82); margin-top:2px;">查看活动历史、个人记录与补偿领取状态</div>
            </div>
            {{-- 金币余额 --}}
            <div
                style="font-size:12px; color:#dcfce7; display:flex; align-items:center; gap:3px; margin-right: 12px;
                        background:rgba(0,0,0,.2); padding:2px 8px; border-radius:10px;">
                💰 <strong id="blc-modal-jjb" style="color:#ffe082; font-size:13px;">--</strong> 金币
            </div>
            <span data-blc-close
                style="cursor:pointer; font-size:18px; opacity:.85;">&times;</span>
        </div>

        <div style="display:flex; gap:8px; padding:10px 14px; background:#f0fdf4; border-bottom:1px solid #dcfce7;">
            <button type="button" id="blc-tab-overview"
                data-blc-tab="overview"
                style="padding:6px 14px; border:none; border-radius:999px; background:#15803d; color:#fff; font-size:12px; font-weight:bold; cursor:pointer;">
                当前活动
            </button>
            <button type="button" id="blc-tab-history"
                data-blc-tab="history"
                style="padding:6px 14px; border:none; border-radius:999px; background:#dcfce7; color:#166534; font-size:12px; font-weight:bold; cursor:pointer;">
                活动历史
            </button>
        </div>

        <div style="flex:1; overflow-y:auto; background:#f6fff8; padding:14px;">
            <div id="blc-overview-pane">
                <div id="blc-current-event"
                    style="background:#fff; border:1px solid #dcfce7; border-radius:10px; padding:18px; color:#166534; text-align:center;">
                    加载中…
                </div>
            </div>

            <div id="blc-history-pane" style="display:none;">
                <div id="blc-history-list"
                    style="display:flex; flex-direction:column; gap:10px; color:#166534;">
                    加载中…
                </div>
            </div>
        </div>

        <div style="padding:10px 16px; background:#fff; border-top:1px solid #dcfce7; text-align:center;">
            <button type="button" data-blc-close
                style="padding:8px 28px; border:none; border-radius:8px; background:#dcfce7; color:#166534; font-size:12px; font-weight:bold; cursor:pointer;">
                关闭
            </button>
        </div>
    </div>
</div>

{{-- 前台买单活动脚本已迁移到 resources/js/chat-room/baccarat-loss-cover.js --}}