@extends('admin.layouts.app')

@section('title', '金币/积分流水查询')

@section('content')
    <!-- 筛选面板 -->
    <div class="bg-white p-5 rounded-xl border border-gray-100 shadow-sm mb-6">
        <form action="{{ route('admin.currency-logs.index') }}" method="GET" class="flex flex-wrap items-end gap-4">
            
            <!-- 用户名 -->
            <div class="flex-1 min-w-[140px]">
                <label for="username" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">用户名</label>
                <input type="text" name="username" id="username" value="{{ request('username') }}"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
                    placeholder="选填">
            </div>

            <!-- 货币类型 -->
            <div class="flex-1 min-w-[130px]">
                <label for="currency" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">货币类型</label>
                <select name="currency" id="currency"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
                    <option value="">全部</option>
                    <option value="gold" {{ request('currency') == 'gold' ? 'selected' : '' }}>💰 金币</option>
                    <option value="exp" {{ request('currency') == 'exp' ? 'selected' : '' }}>⭐ 经验</option>
                    <option value="charm" {{ request('currency') == 'charm' ? 'selected' : '' }}>💖 魅力</option>
                </select>
            </div>

            <!-- 变动方向 -->
            <div class="flex-1 min-w-[120px]">
                <label for="direction" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">变动方向</label>
                <select name="direction" id="direction"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
                    <option value="">全部</option>
                    <option value="in" {{ request('direction') == 'in' ? 'selected' : '' }}>➕ 增加</option>
                    <option value="out" {{ request('direction') == 'out' ? 'selected' : '' }}>➖ 扣除</option>
                </select>
            </div>

            <!-- 来源途径 -->
            <div class="flex-1 min-w-[140px]">
                <label for="source" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">来源途径</label>
                <select name="source" id="source"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
                    <option value="">全部来源</option>
                    @foreach ($allSources as $src)
                        <option value="{{ $src->value }}" {{ request('source') == $src->value ? 'selected' : '' }}>
                            {{ $src->label() }}
                        </option>
                    @endforeach
                </select>
            </div>

            <!-- 备注关键词 -->
            <div class="flex-1 min-w-[160px]">
                <label for="remark" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">备注/房间流水</label>
                <input type="text" name="remark" id="remark" value="{{ request('remark') }}"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2"
                    placeholder="包含(可搜房间名)">
            </div>
            
            <!-- 开始日期 -->
            <div class="flex-none w-36">
                <label for="date_start" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">开始日期</label>
                <input type="date" name="date_start" id="date_start" value="{{ request('date_start') }}"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
            </div>
            
            <!-- 结束日期 -->
            <div class="flex-none w-36">
                <label for="date_end" class="block text-xs font-semibold text-gray-500 uppercase tracking-wider mb-1.5">结束日期</label>
                <input type="date" name="date_end" id="date_end" value="{{ request('date_end') }}"
                    class="w-full border-gray-300 rounded-lg shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm px-3 py-2">
            </div>

            <!-- 按钮组 -->
            <div class="flex-none flex items-center space-x-2">
                <button type="submit"
                    class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-5 rounded-lg shadow-sm transition flex items-center gap-1.5 text-sm">
                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
                    查询
                </button>
                <a href="{{ route('admin.currency-logs.index') }}"
                    class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg shadow-sm transition text-sm">
                    重置
                </a>
            </div>
        </form>
    </div>

    <!-- 数据表格 -->
    <div class="bg-white rounded shadow overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wider border-b border-gray-200">
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">记录ID</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">用户</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">类型</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">变动数额</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">变后余额</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap">来源</th>
                        <th class="px-6 py-4 font-semibold whitespace-nowrap w-1/4">备注信息</th>
                        <th class="px-6 py-4 font-semibold text-right whitespace-nowrap">发生时间</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @forelse ($logs as $log)
                        <tr class="hover:bg-gray-50 transition cursor-default">
                            <td class="px-6 py-4 text-sm text-gray-500">
                                #{{ $log->id }}
                            </td>
                            <td class="px-6 py-4">
                                <div class="flex flex-col whitespace-nowrap">
                                    <span class="font-bold text-gray-800">{{ $log->username }}</span>
                                </div>
                            </td>
                            <td class="px-6 py-4">
                                @if($log->currency === 'gold')
                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                                        <span>💰</span><span>金币</span>
                                    </span>
                                @elseif($log->currency === 'exp')
                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">
                                        <span>⭐</span><span>经验</span>
                                    </span>
                                @elseif($log->currency === 'charm')
                                    <span class="inline-flex items-center gap-1 whitespace-nowrap px-2 py-0.5 rounded text-xs font-medium bg-pink-100 text-pink-800">
                                        <span>💖</span><span>魅力</span>
                                    </span>
                                @else
                                    <span class="text-gray-500">{{ $log->currency }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 font-bold text-lg">
                                @if ($log->amount > 0)
                                    <span class="text-emerald-500">+{{ $log->amount }}</span>
                                @elseif ($log->amount === 0)
                                    <span class="text-gray-500">0</span>
                                @else
                                    <span class="text-red-500">{{ $log->amount }}</span>
                                @endif
                            </td>
                            <td class="px-6 py-4 text-sm font-medium text-gray-700">
                                {{ $log->balance_after }}
                            </td>
                            <td class="px-6 py-4">
                                @php
                                    $sourceLabel = \App\Enums\CurrencySource::tryFrom($log->source)?->label() ?? $log->source;
                                @endphp
                                <span class="bg-slate-100 text-slate-700 py-1 px-2 rounded font-medium text-xs whitespace-nowrap">
                                    {{ $sourceLabel }}
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-600">
                                {{ $log->remark }}
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500 text-right whitespace-nowrap">
                                {{ $log->created_at->format('Y-m-d H:i:s') }}
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-6 py-8 text-center text-gray-500">
                                📭 暂无相关流水记录
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        @if ($logs->hasPages())
            <div class="px-6 py-4 border-t border-gray-200">
                {{ $logs->links() }}
            </div>
        @endif
    </div>
@endsection