@extends('layouts.admin')
@section('title', isset($user) ? '編輯帳號' : '新增帳號')
@section('content')
<div class="max-w-2xl">
    <div class="bg-white dark:bg-slate-900 rounded-xl shadow-lg border border-gray-100 dark:border-slate-800 p-6">
        <form action="{{ isset($user) ? route('admin.users.update', $user) : route('admin.users.store') }}" method="POST">
            @csrf @if(isset($user)) @method('PUT') @endif
            <div class="space-y-4">
                <div><label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">姓名 *</label>
                    <input type="text" name="name" value="{{ old('name', $user->name ?? '') }}" required class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500"></div>
                <div><label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Email（登入帳號）{{ isset($user) ? '' : ' *' }}</label>
                    @if(isset($user))
                        <input type="email" value="{{ $user->email }}" readonly disabled class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-100 dark:bg-slate-800/50 text-gray-500 dark:text-gray-400 cursor-not-allowed">
                        <input type="hidden" name="email" value="{{ $user->email }}">
                        <p class="mt-1 text-xs text-gray-400">登入帳號建立後不可修改</p>
                    @else
                        <input type="email" name="email" value="{{ old('email', '') }}" required class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                    @endif
                </div>
                <div x-data="{ show: false }">
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">密碼 {{ isset($user) ? '（留空不變更）' : '*' }}</label>
                    <div class="relative">
                        <input :type="show ? 'text' : 'password'" name="password" {{ isset($user) ? '' : 'required' }} minlength="8" class="w-full px-4 py-2.5 pr-12 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                        <button type="button" @click="show = !show" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 dark:hover:text-gray-200">
                            <svg x-show="!show" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                            <svg x-show="show" x-cloak class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"/></svg>
                        </button>
                    </div>
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">需 8 字元以上，包含大小寫字母、數字及特殊符號</p>
                </div>
                <div class="grid grid-cols-2 gap-4">
                    <div><label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">角色 *</label>
                        <select name="role_id" required class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            @foreach($roles as $r)<option value="{{ $r->id }}" {{ old('role_id', $user->role_id ?? '') == $r->id ? 'selected' : '' }}>{{ $r->name }}</option>@endforeach
                        </select></div>
                    <div><label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">學校</label>
                        <select name="school_id" class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                            <option value="">-- 不指定 --</option>
                            @foreach($schools as $s)<option value="{{ $s->id }}" {{ old('school_id', $user->school_id ?? '') == $s->id ? 'selected' : '' }}>{{ $s->name }}</option>@endforeach
                        </select></div>
                </div>

                <!-- 帳號到期日 -->
                <div>
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">帳號到期日（選填）</label>
                    <input type="date" name="account_expires_at" value="{{ old('account_expires_at', isset($user) && $user->account_expires_at ? $user->account_expires_at->format('Y-m-d') : '') }}"
                        class="w-full px-4 py-2.5 rounded-lg border-2 border-gray-200 dark:border-slate-700 bg-gray-50 dark:bg-slate-800 text-gray-900 dark:text-white focus:outline-none focus:border-blue-500">
                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">留空表示帳號永不到期</p>
                </div>

                <!-- 允許的考試類別 -->
                @php $userCategoryIds = old('category_ids', isset($user) ? $user->examCategories->pluck('id')->toArray() : []); @endphp
                <div x-data="{ showCategories: {{ !empty($userCategoryIds) ? 'true' : 'false' }} }">
                    <label class="block text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">允許的考試類別</label>
                    <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">不勾選 = 不限制（可看到所有考試）。勾選後，該使用者只能看到所選類別及其子類別的考試。</p>
                    <button type="button" @click="showCategories = !showCategories"
                        class="text-sm text-blue-600 dark:text-blue-400 hover:underline mb-2">
                        <span x-text="showCategories ? '收起類別列表' : '展開類別列表'"></span>
                        @if(!empty($userCategoryIds))
                            <span class="ml-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">已選 {{ count($userCategoryIds) }} 個</span>
                        @endif
                    </button>
                    <div x-show="showCategories" x-transition class="bg-gray-50 dark:bg-slate-800 rounded-lg p-4 space-y-3">
                        <div class="flex gap-3 mb-2">
                            <button type="button" onclick="document.querySelectorAll('input[name=\'category_ids[]\']').forEach(e=>e.checked=true)" class="text-xs text-blue-600 hover:underline">全選</button>
                            <button type="button" onclick="document.querySelectorAll('input[name=\'category_ids[]\']').forEach(e=>e.checked=false)" class="text-xs text-red-600 hover:underline">全不選</button>
                        </div>
                        @foreach($examCategories as $root)
                        <div class="border border-gray-200 dark:border-slate-700 rounded-lg p-3">
                            <label class="flex items-center gap-2 cursor-pointer font-semibold text-gray-800 dark:text-gray-200">
                                <input type="checkbox" name="category_ids[]" value="{{ $root->id }}"
                                    {{ in_array($root->id, $userCategoryIds) ? 'checked' : '' }}
                                    class="w-4 h-4 rounded text-blue-600">
                                {{ $root->name }}
                            </label>
                            @if($root->children->count() > 0)
                            <div class="ml-6 mt-2 grid grid-cols-2 sm:grid-cols-3 gap-1">
                                @foreach($root->children as $child)
                                <label class="flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 rounded px-2 py-1">
                                    <input type="checkbox" name="category_ids[]" value="{{ $child->id }}"
                                        {{ in_array($child->id, $userCategoryIds) ? 'checked' : '' }}
                                        class="w-4 h-4 rounded text-indigo-600">
                                    <span class="text-sm text-gray-700 dark:text-gray-300">{{ $child->name }}</span>
                                </label>
                                @if($child->children->count() > 0)
                                    @foreach($child->children as $grandchild)
                                    <label class="flex items-center gap-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-slate-700 rounded px-2 py-1 ml-4">
                                        <input type="checkbox" name="category_ids[]" value="{{ $grandchild->id }}"
                                            {{ in_array($grandchild->id, $userCategoryIds) ? 'checked' : '' }}
                                            class="w-4 h-4 rounded text-purple-600">
                                        <span class="text-xs text-gray-600 dark:text-gray-400">{{ $grandchild->name }}</span>
                                    </label>
                                    @endforeach
                                @endif
                                @endforeach
                            </div>
                            @endif
                        </div>
                        @endforeach
                    </div>
                </div>

                <!-- 安全選項 -->
                <div class="space-y-2 bg-gray-50 dark:bg-slate-800 rounded-lg p-4">
                    <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">安全選項</p>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="is_active" value="1" {{ old('is_active', $user->is_active ?? true) ? 'checked' : '' }} class="w-4 h-4 rounded text-blue-600">
                        <span class="text-sm text-gray-700 dark:text-gray-300">啟用帳號</span>
                    </label>
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="force_password_change" value="1" {{ old('force_password_change', isset($user) ? $user->force_password_change : true) ? 'checked' : '' }} class="w-4 h-4 rounded text-amber-600">
                        <span class="text-sm text-gray-700 dark:text-gray-300">下次登入強制變更密碼</span>
                    </label>
                    @if(isset($user) && $user->isLockedOut())
                    <label class="flex items-center gap-2 cursor-pointer">
                        <input type="checkbox" name="unlock_account" value="1" class="w-4 h-4 rounded text-green-600">
                        <span class="text-sm text-red-600 dark:text-red-400 font-medium">解除帳號鎖定（目前鎖定至 {{ $user->locked_until->format('Y-m-d H:i') }}）</span>
                    </label>
                    @endif
                </div>

                <!-- 安全資訊（僅編輯時顯示） -->
                @if(isset($user))
                <div class="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 space-y-2">
                    <p class="text-sm font-semibold text-blue-700 dark:text-blue-300 mb-2">安全資訊</p>
                    <div class="grid grid-cols-2 gap-2 text-xs">
                        <div class="text-gray-600 dark:text-gray-400">最後登入</div>
                        <div class="text-gray-900 dark:text-white font-medium">{{ $user->last_login_at ? $user->last_login_at->format('Y-m-d H:i') : '從未登入' }}</div>

                        <div class="text-gray-600 dark:text-gray-400">密碼變更日期</div>
                        <div class="text-gray-900 dark:text-white font-medium">{{ $user->password_changed_at ? $user->password_changed_at->format('Y-m-d H:i') : '未設定' }}</div>

                        <div class="text-gray-600 dark:text-gray-400">密碼天數</div>
                        <div class="font-medium {{ ($user->passwordAgeDays() ?? 0) >= 80 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' }}">
                            {{ $user->passwordAgeDays() !== null ? $user->passwordAgeDays() . ' 天' : '-' }}
                        </div>

                        <div class="text-gray-600 dark:text-gray-400">登入失敗次數</div>
                        <div class="font-medium {{ $user->failed_login_attempts > 0 ? 'text-red-600 dark:text-red-400' : 'text-gray-900 dark:text-white' }}">{{ $user->failed_login_attempts }}</div>

                        <div class="text-gray-600 dark:text-gray-400">帳號狀態</div>
                        <div class="font-medium">
                            @if($user->isLockedOut())
                                <span class="text-red-600 dark:text-red-400">鎖定中（至 {{ $user->locked_until->format('H:i') }}）</span>
                            @elseif(!$user->is_active)
                                <span class="text-red-600 dark:text-red-400">已停用</span>
                            @elseif($user->isAccountExpired())
                                <span class="text-red-600 dark:text-red-400">已到期</span>
                            @elseif($user->password_expired_disabled)
                                <span class="text-red-600 dark:text-red-400">密碼逾期停用</span>
                            @else
                                <span class="text-green-600 dark:text-green-400">正常</span>
                            @endif
                        </div>

                        <div class="text-gray-600 dark:text-gray-400">建立日期</div>
                        <div class="text-gray-900 dark:text-white font-medium">{{ $user->created_at->format('Y-m-d H:i') }}</div>
                    </div>
                </div>
                @endif
            </div>
            <div class="flex gap-3 mt-6">
                <button type="submit" class="px-6 py-2.5 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700">{{ isset($user) ? '更新' : '建立' }}</button>
                <a href="{{ route('admin.users.index') }}" class="px-6 py-2.5 bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-gray-300 rounded-lg font-medium">取消</a>
            </div>
        </form>
    </div>
</div>
@endsection