chatroom/resources/views/admin/game-history/mystery-box.blade.php

@extends('admin.layouts.app')

@section('title', '神秘箱子历史记录')

@section('content')
    <div class="space-y-6">

        {{-- 页头 --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex justify-between items-center">
            <div>
                <h2 class="text-lg font-bold text-gray-800">📦 神秘箱子历史记录</h2>
                <p class="text-xs text-gray-500 mt-1">查询所有投放过的神秘箱子记录，含领取情况。</p>
            </div>
            <a href="{{ route('admin.game-configs.index') }}"
                class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-bold hover:bg-gray-200 transition">
                ⚙️ 游戏配置
            </a>
        </div>

        {{-- 统计卡片 --}}
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="text-2xl font-bold text-indigo-600">{{ number_format($summary['total_dropped']) }}</div>
                <div class="text-xs text-gray-500 mt-1">历史总投放数</div>
            </div>
            <div class="bg-emerald-50 rounded-xl shadow-sm border border-emerald-100 p-5">
                <div class="text-2xl font-bold text-emerald-600">{{ number_format($summary['total_claimed']) }}</div>
                <div class="text-xs text-emerald-500 mt-1">已被领取</div>
            </div>
            <div class="bg-gray-50 rounded-xl shadow-sm border border-gray-200 p-5">
                <div class="text-2xl font-bold text-gray-500">{{ number_format($summary['total_expired']) }}</div>
                <div class="text-xs text-gray-400 mt-1">已过期/未领取</div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="text-sm font-bold text-gray-700 mb-2">类型分布</div>
                <div class="space-y-1">
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-500">📦 普通箱</span>
                        <span class="font-bold">{{ $summary['type_dist']['normal'] ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-500">💎 稀有箱</span>
                        <span class="font-bold text-purple-600">{{ $summary['type_dist']['rare'] ?? 0 }}</span>
                    </div>
                    <div class="flex justify-between text-xs">
                        <span class="text-gray-500">☠️ 黑化箱</span>
                        <span class="font-bold text-red-600">{{ $summary['type_dist']['trap'] ?? 0 }}</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- 筛选条件 --}}
        <form method="GET"
            class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 flex flex-wrap items-end gap-4">
            <div>
                <label class="block text-xs font-bold text-gray-600 mb-1">箱子类型</label>
                <select name="box_type"
                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-indigo-400 min-w-[130px]">
                    <option value="">全部类型</option>
                    <option value="normal" {{ request('box_type') === 'normal' ? 'selected' : '' }}>📦 普通箱</option>
                    <option value="rare" {{ request('box_type') === 'rare' ? 'selected' : '' }}>💎 稀有箱</option>
                    <option value="trap" {{ request('box_type') === 'trap' ? 'selected' : '' }}>☠️ 黑化箱</option>
                </select>
            </div>
            <div>
                <label class="block text-xs font-bold text-gray-600 mb-1">状态</label>
                <select name="status"
                    class="border border-gray-300 rounded-lg px-3 py-2 text-sm focus:border-indigo-400 min-w-[120px]">
                    <option value="">全部状态</option>
                    <option value="open" {{ request('status') === 'open' ? 'selected' : '' }}>等待领取</option>
                    <option value="claimed" {{ request('status') === 'claimed' ? 'selected' : '' }}>已领取</option>
                    <option value="expired" {{ request('status') === 'expired' ? 'selected' : '' }}>已过期</option>
                </select>
            </div>
            <div class="flex gap-2">
                <button type="submit"
                    class="px-5 py-2 bg-indigo-600 text-white rounded-lg font-bold hover:bg-indigo-700 transition text-sm">
                    🔍 筛选
                </button>
                <a href="{{ route('admin.game-history.mystery-box') }}"
                    class="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg font-bold hover:bg-gray-200 transition text-sm">
                    重置
                </a>
            </div>
        </form>

        {{-- 箱子列表 --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <table class="w-full text-sm">
                <thead class="bg-gray-50 border-b border-gray-100">
                    <tr>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">投放时间</th>
                        <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">类型</th>
                        <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">奖励范围</th>
                        <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">暗号</th>
                        <th class="px-4 py-3 text-center text-xs font-bold text-gray-500 uppercase">状态</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">领取者</th>
                        <th class="px-4 py-3 text-right text-xs font-bold text-gray-500 uppercase">实际奖励</th>
                        <th class="px-4 py-3 text-left text-xs font-bold text-gray-500 uppercase">领取时间</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($boxes as $box)
                        @php
                            $typeInfo = match ($box->box_type) {
                                'normal' => ['label' => '📦 普通箱', 'color' => 'bg-emerald-100 text-emerald-700'],
                                'rare' => ['label' => '💎 稀有箱', 'color' => 'bg-purple-100 text-purple-700'],
                                'trap' => ['label' => '☠️ 黑化箱', 'color' => 'bg-red-100 text-red-700'],
                                default => ['label' => '📦 未知', 'color' => 'bg-gray-100 text-gray-600'],
                            };
                            $statusInfo = match ($box->status) {
                                'open' => ['label' => '等待领取', 'color' => 'bg-blue-100 text-blue-700'],
                                'claimed' => ['label' => '✅ 已领取', 'color' => 'bg-emerald-100 text-emerald-700'],
                                'expired' => ['label' => '⏰ 已过期', 'color' => 'bg-gray-100 text-gray-500'],
                                default => ['label' => $box->status, 'color' => 'bg-gray-100 text-gray-500'],
                            };
                            $claim = $box->claim;
                        @endphp
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-xs text-gray-400">
                                {{ $box->created_at->format('m-d H:i:s') }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                <span class="px-2 py-0.5 rounded-full text-xs font-bold {{ $typeInfo['color'] }}">
                                    {{ $typeInfo['label'] }}
                                </span>
                            </td>
                            <td class="px-4 py-3 text-center text-xs text-gray-600 font-mono">
                                {{ number_format($box->reward_min) }} ~ {{ number_format($box->reward_max) }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                <code class="bg-gray-100 px-2 py-0.5 rounded text-xs text-indigo-700 font-bold">
                                    {{ $box->passcode ?? '—' }}
                                </code>
                            </td>
                            <td class="px-4 py-3 text-center">
                                <span class="px-2 py-0.5 rounded-full text-xs font-bold {{ $statusInfo['color'] }}">
                                    {{ $statusInfo['label'] }}
                                </span>
                            </td>
                            <td class="px-4 py-3 font-medium text-gray-700 text-sm">
                                {{ $claim?->user?->username ?? '—' }}
                            </td>
                            <td class="px-4 py-3 text-right font-mono text-xs">
                                @if ($claim)
                                    <span
                                        class="{{ $claim->reward_amount > 0 ? 'text-emerald-600 font-bold' : 'text-red-500 font-bold' }}">
                                        {{ $claim->reward_amount > 0 ? '+' : '' }}{{ number_format($claim->reward_amount) }}
                                    </span>
                                @else
                                    <span class="text-gray-400">—</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-xs text-gray-400">
                                {{ $claim?->created_at?->format('m-d H:i:s') ?? '—' }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-10 text-center text-gray-400 text-sm">暂无记录</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

            @if ($boxes->hasPages())
                <div class="px-4 py-3 border-t border-gray-100">
                    {{ $boxes->links() }}
                </div>
            @endif
        </div>
    </div>
@endsection