@extends('admin.layouts.app')

@section('title', '用户检索与管理')

@section('content')

    <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-6" x-data="{ showEditModal: false, editingUser: {} }">
        <div class="p-6 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
            <form action="{{ route('admin.users.index') }}" method="GET" class="flex gap-2">
                <input type="text" name="username" value="{{ request('username') }}" placeholder="搜索用户名..."
                    class="px-3 py-1.5 border border-gray-300 rounded shadow-sm focus:ring-indigo-500 focus:border-indigo-500 text-sm">
                <button type="submit"
                    class="bg-indigo-600 text-white px-4 py-1.5 rounded hover:bg-indigo-700 font-bold shadow-sm transition">搜索</button>
                <a href="{{ route('admin.users.index') }}"
                    class="px-4 py-1.5 bg-white border border-gray-300 rounded text-gray-700 hover:bg-gray-50">重置</a>
            </form>
        </div>

        <!-- 用户表格 -->
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse">
                <thead>
                    <tr
                        class="bg-gray-50 border-b border-gray-100 text-xs text-gray-500 uppercase font-bold tracking-wider">
                        <th class="p-4">ID</th>
                        <th class="p-4">注册名</th>
                        <th class="p-4">性别</th>
                        <th class="p-4">等级</th>
                        <th class="p-4">个性签名</th>
                        <th class="p-4">注册时间</th>
                        <th class="p-4 text-right">管理操作</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    @foreach ($users as $user)
                        <tr class="hover:bg-gray-50 transition">
                            <td class="p-4 font-mono text-xs text-gray-500">{{ $user->id }}</td>
                            <td class="p-4">
                                <div class="flex items-center space-x-3">
                                    <img src="/images/headface/{{ $user->headface ?? '01.gif' }}"
                                        class="w-8 h-8 rounded border object-cover">
                                    <span class="font-bold text-gray-800">{{ $user->username }}</span>
                                </div>
                            </td>
                            <td class="p-4 text-sm">{{ $user->sex }}</td>
                            <td class="p-4">
                                <span
                                    class="px-2 py-0.5 rounded-full text-xs {{ $user->user_level >= 15 ? 'bg-red-100 text-red-700 font-bold' : 'bg-gray-100 text-gray-600' }}">
                                    LV.{{ $user->user_level }}
                                </span>
                            </td>
                            <td class="p-4 text-sm text-gray-500 truncate max-w-[200px]" title="{{ $user->sign }}">
                                {{ $user->sign ?: '-' }}</td>
                            <td class="p-4 text-sm font-mono text-gray-500">{{ $user->created_at->format('Y/m/d H:i') }}
                            </td>
                            <td class="p-4 text-right space-x-2 relative" x-data>
                                <button
                                    @click="editingUser = { id: {{ $user->id }}, username: '{{ addslashes($user->username) }}', user_level: {{ $user->user_level }}, sex: '{{ $user->sex }}', requestUrl: '{{ route('admin.users.update', $user->id) }}' }; showEditModal = true"
                                    class="text-xs bg-indigo-50 text-indigo-600 font-bold px-3 py-1.5 rounded hover:bg-indigo-600 hover:text-white transition cursor-pointer">
                                    详细 / 修改
                                </button>

                                <form action="{{ route('admin.users.destroy', $user->id) }}" method="POST" class="inline"
                                    onsubmit="return confirm('危险：确定彻底物理清除用户 [{{ $user->username }}] 吗？数据不可恢复！')">
                                    @csrf @method('DELETE')
                                    <button type="submit"
                                        class="text-xs bg-red-50 text-red-600 font-bold px-3 py-1.5 rounded hover:bg-red-600 hover:text-white transition cursor-pointer">
                                        强杀
                                    </button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <!-- 分页链接 -->
        @if ($users->hasPages())
            <div class="p-4 border-t border-gray-100">
                {{ $users->links() }}
            </div>
        @endif

        <!-- 弹出的修改框 -->
        <div x-show="showEditModal" style="display: none;"
            class="fixed inset-0 z-50 bg-black/60 flex items-center justify-center p-4">
            <div @click.away="showEditModal = false"
                class="bg-white rounded-xl shadow-2xl w-full max-w-md transform transition-all" x-transition>
                <div
                    class="bg-indigo-900 border-b border-indigo-800 px-6 py-4 flex justify-between items-center rounded-t-xl text-white">
                    <h3 class="font-bold text-lg">全量修改：<span x-text="editingUser.username" class="text-indigo-300"></span>
                    </h3>
                    <button @click="showEditModal = false" class="text-gray-400 hover:text-white">&times;</button>
                </div>

                <div class="p-6">
                    <!-- 依靠 Alpine 绑定的 AJAX 或者 Form 提交 -->
                    <form :action="editingUser.requestUrl" method="POST" id="adminUserUpdateForm">
                        @csrf @method('PUT')

                        <div class="mb-4">
                            <label class="block text-sm font-bold text-gray-700 mb-2">安全等级 (0-99)</label>
                            <input type="number" name="user_level" x-model="editingUser.user_level" required
                                class="w-full border-gray-300 rounded shadow-sm focus:ring-indigo-500">
                        </div>

                        <div class="mb-4">
                            <label class="block text-sm font-bold text-gray-700 mb-2">性别</label>
                            <select name="sex" x-model="editingUser.sex"
                                class="w-full border-gray-300 rounded shadow-sm focus:ring-indigo-500">
                                <option value="男">男</option>
                                <option value="女">女</option>
                                <option value="保密">保密</option>
                            </select>
                        </div>

                        <div class="mb-6">
                            <label
                                class="block text-sm font-bold pl-1 text-red-600 border-l-4 border-red-500 bg-red-50 p-2 mb-2">强制重算密码
                                (留空则不修改)</label>
                            <input type="text" name="password" placeholder="强行输入新密码覆盖"
                                class="w-full border-red-300 rounded shadow-sm focus:border-red-500 focus:ring-red-500 placeholder-red-300">
                        </div>

                        <div class="flex justify-end space-x-3 pt-4 border-t border-gray-100">
                            <button type="button" @click="showEditModal = false"
                                class="px-4 py-2 border rounded font-medium text-gray-600 hover:bg-gray-50">取消</button>
                            <button type="submit"
                                class="px-4 py-2 bg-indigo-600 text-white rounded font-bold hover:bg-indigo-700 shadow-sm">提交强制改写</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

@endsection