@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_issues']) }}</div>
                <div class="text-xs text-gray-500 mt-1">历史总期数</div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="text-2xl font-bold text-emerald-600">{{ number_format($summary['drawn_count']) }}</div>
                <div class="text-xs text-gray-500 mt-1">已开奖期数</div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="text-2xl font-bold text-amber-600">{{ number_format($summary['total_tickets']) }}</div>
                <div class="text-xs text-gray-500 mt-1">历史售出彩票</div>
            </div>
            <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5">
                <div class="text-2xl font-bold text-rose-600">{{ number_format($summary['total_pool']) }}</div>
                <div class="text-xs text-gray-500 mt-1">历史开奖总奖池</div>
            </div>
        </div>

        {{-- 期数列表 --}}
        <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-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-right 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-right text-xs font-bold text-gray-500 uppercase">操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse ($issues as $issue)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="px-4 py-3 text-gray-600 text-xs font-mono font-bold">第 {{ $issue->issue_no }} 期</td>
                            <td class="px-4 py-3 text-xs text-gray-600">
                                {{ $issue->draw_at ? $issue->draw_at->format('m-d H:i') : '—' }}
                            </td>
                            <td class="px-4 py-3 text-center">
                                @if ($issue->status === 'settled')
                                    <span
                                        class="px-2 py-0.5 rounded-full text-xs font-bold bg-emerald-100 text-emerald-700">已开奖</span>
                                @else
                                    <span
                                        class="px-2 py-0.5 rounded-full text-xs font-bold bg-amber-100 text-amber-700">销售中</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-center font-mono">
                                @if ($issue->status === 'settled')
                                    <div class="flex items-center justify-center gap-1">
                                        <span
                                            class="text-xs bg-red-100 text-red-600 px-1 rounded">{{ str_pad($issue->red1, 2, '0', STR_PAD_LEFT) }}</span>
                                        <span
                                            class="text-xs bg-red-100 text-red-600 px-1 rounded">{{ str_pad($issue->red2, 2, '0', STR_PAD_LEFT) }}</span>
                                        <span
                                            class="text-xs bg-red-100 text-red-600 px-1 rounded">{{ str_pad($issue->red3, 2, '0', STR_PAD_LEFT) }}</span>
                                        <span
                                            class="text-xs bg-blue-100 text-blue-600 px-1 rounded">{{ str_pad($issue->blue, 2, '0', STR_PAD_LEFT) }}</span>
                                    </div>
                                @else
                                    <span class="text-xs text-gray-400">等待开奖</span>
                                @endif
                            </td>
                            <td class="px-4 py-3 text-right font-mono text-xs text-indigo-600 font-bold">
                                {{ number_format($issue->total_tickets) }}
                            </td>
                            <td class="px-4 py-3 text-right font-mono text-xs text-amber-600 font-bold">
                                {{ number_format($issue->pool_amount) }}
                            </td>
                            <td class="px-4 py-3 text-right">
                                <a href="{{ route('admin.game-history.lottery.issue', $issue->id) }}"
                                    class="px-3 py-1 bg-indigo-50 text-indigo-700 rounded text-xs font-bold hover:bg-indigo-100 transition">
                                    购买明细
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="px-4 py-10 text-center text-gray-400 text-sm">暂无记录</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>

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