@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.holiday-events.create') }}"
                class="px-5 py-2 bg-amber-500 text-white rounded-lg font-bold hover:bg-amber-600 transition text-sm shadow-sm">
                ➕ 创建活动
            </a>
        </div>

        {{-- 成功/错误提示 --}}
        @if (session('success'))
            <div class="bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded-lg text-sm">
                ✅ {{ session('success') }}
            </div>
        @endif
        @if (session('error'))
            <div class="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg text-sm">
                ❌ {{ session('error') }}
            </div>
        @endif

        {{-- 活动列表 --}}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="bg-gray-50 text-gray-600 text-left border-b text-xs font-bold">
                            <th class="p-3 w-10">ID</th>
                            <th class="p-3">活动名称</th>
                            <th class="p-3 w-24">奖池</th>
                            <th class="p-3 w-20">分配方式</th>
                            <th class="p-3 w-20">限额人数</th>
                            <th class="p-3 w-36">触发时间</th>
                            <th class="p-3 w-16">重复</th>
                            <th class="p-3 w-16">状态</th>
                            <th class="p-3 w-16">启用</th>
                            <th class="p-3 w-40 text-right">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($events as $event)
                            <tr class="border-b hover:bg-gray-50 {{ !$event->enabled ? 'opacity-50' : '' }}">
                                <td class="p-3 text-gray-400">{{ $event->id }}</td>
                                <td class="p-3">
                                    <div class="font-bold text-gray-800">{{ $event->name }}</div>
                                    @if ($event->description)
                                        <div class="text-xs text-gray-400 mt-0.5">{{ Str::limit($event->description, 40) }}
                                        </div>
                                    @endif
                                </td>
                                <td class="p-3 font-bold text-amber-600">
                                    💰 {{ number_format($event->total_amount) }}
                                </td>
                                <td class="p-3">
                                    @if ($event->distribute_type === 'random')
                                        <span
                                            class="px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 text-xs">随机</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full bg-blue-100 text-blue-700 text-xs">定额
                                            {{ number_format($event->fixed_amount) }}</span>
                                    @endif
                                </td>
                                <td class="p-3 text-gray-600">
                                    {{ $event->max_claimants === 0 ? '不限' : $event->max_claimants . ' 人' }}
                                </td>
                                <td class="p-3 text-gray-600 text-xs">
                                    {{ $event->send_at->format('m-d H:i') }}
                                </td>
                                <td class="p-3">
                                    @php
                                        $repeatLabels = [
                                            'once' => '一次',
                                            'daily' => '每天',
                                            'weekly' => '每周',
                                            'monthly' => '每月',
                                            'cron' => 'CRON',
                                        ];
                                    @endphp
                                    <span
                                        class="text-xs text-gray-500">{{ $repeatLabels[$event->repeat_type] ?? '-' }}</span>
                                </td>
                                <td class="p-3">
                                    @php
                                        $statusMap = [
                                            'pending' => ['待触发', 'bg-yellow-100 text-yellow-700'],
                                            'active' => ['领取中', 'bg-green-100 text-green-700'],
                                            'completed' => ['已结束', 'bg-gray-100 text-gray-500'],
                                            'cancelled' => ['已取消', 'bg-red-100 text-red-600'],
                                        ];
                                        [$label, $cls] = $statusMap[$event->status] ?? [
                                            '未知',
                                            'bg-gray-100 text-gray-500',
                                        ];
                                    @endphp
                                    <span
                                        class="px-2 py-0.5 rounded-full text-xs {{ $cls }}">{{ $label }}</span>
                                </td>
                                <td class="p-3">
                                    <button onclick="toggleHoliday({{ $event->id }}, this)"
                                        class="text-xs px-2 py-1 rounded {{ $event->enabled ? 'bg-green-100 text-green-700' : 'bg-gray-200 text-gray-500' }} cursor-pointer">
                                        {{ $event->enabled ? '启用' : '禁用' }}
                                    </button>
                                </td>
                                <td class="p-3 text-right space-x-2">
                                    {{-- 手动触发 --}}
                                    @if ($event->status === 'pending')
                                        <form action="{{ route('admin.holiday-events.trigger-now', $event) }}"
                                            method="POST" class="inline" onsubmit="return confirm('确定立即触发此活动吗？')">
                                            @csrf
                                            <button type="submit"
                                                class="text-xs px-3 py-1 bg-amber-500 text-white rounded-lg hover:bg-amber-600 font-bold">
                                                ▶ 立即触发
                                            </button>
                                        </form>
                                    @endif
                                    <a href="{{ route('admin.holiday-events.edit', $event) }}"
                                        class="text-xs px-3 py-1 bg-indigo-100 text-indigo-700 rounded-lg hover:bg-indigo-200 font-bold">编辑</a>
                                    <form action="{{ route('admin.holiday-events.destroy', $event) }}" method="POST"
                                        class="inline" onsubmit="return confirm('确定删除此活动吗？')">
                                        @csrf
                                        @method('DELETE')
                                        <button type="submit"
                                            class="text-xs px-3 py-1 bg-red-100 text-red-600 rounded-lg hover:bg-red-200 font-bold">删除</button>
                                    </form>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="10" class="p-10 text-center text-gray-400">
                                    暂无节日福利活动，<a href="{{ route('admin.holiday-events.create') }}"
                                        class="text-amber-500 font-bold">立即创建一个</a>？
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
            @if ($events->hasPages())
                <div class="p-4 border-t">{{ $events->links() }}</div>
            @endif
        </div>
    </div>

    <script>
        /**
         * 切换节日活动启用/禁用状态
         */
        function toggleHoliday(id, btn) {
            fetch(`/admin/holiday-events/${id}/toggle`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}',
                        'Accept': 'application/json',
                    },
                })
                .then(r => r.json())
                .then(data => {
                    if (data.ok) {
                        btn.textContent = data.enabled ? '启用' : '禁用';
                        btn.className = data.enabled ?
                            'text-xs px-2 py-1 rounded bg-green-100 text-green-700 cursor-pointer' :
                            'text-xs px-2 py-1 rounded bg-gray-200 text-gray-500 cursor-pointer';
                        btn.closest('tr').classList.toggle('opacity-50', !data.enabled);
                    }
                });
        }
    </script>
@endsection