@extends('admin.layout')

@section('title', '新建用户')
@section('page-title', '新建用户')

@section('content')
<div class="card" style="max-width: 760px;">
    <div class="card-body">
        <form method="POST" action="{{ route('admin.users.store') }}">
            @csrf

            <div class="form-group">
                <label class="form-label">姓名</label>
                <input type="text" name="name" value="{{ old('name') }}" class="input" required>
            </div>

            <div class="form-group">
                <label class="form-label">邮箱（登录账号）</label>
                <input type="email" name="email" value="{{ old('email') }}" class="input" required>
            </div>

            <div class="form-group">
                <label class="form-label">初始密码</label>
                <input type="password" name="password" class="input" required autocomplete="new-password">
                <p class="role-hint">至少 8 位。创建后可在用户编辑页随时重置。</p>
            </div>

            <div class="form-group">
                <label class="form-label">角色</label>
                <select name="role" id="role-select" class="input">
                    @foreach ($roles as $key => $cfg)
                        <option value="{{ $key }}"
                                {{ old('role', 'staff') === $key ? 'selected' : '' }}
                                @if ($key === 'super_admin' && ! auth()->user()->isSuperAdmin()) disabled @endif>
                            {{ $cfg['label'] }}
                        </option>
                    @endforeach
                </select>
                <p class="role-hint">
                    @if (! auth()->user()->isSuperAdmin())
                        只能创建权限低于自身的角色；超级管理员角色仅限超级管理员创建。
                    @endif
                </p>
            </div>

            {{-- 内部员工：细粒度勾选 --}}
            <div id="perm-section" class="perm-group" @if (old('role', 'staff') !== 'staff') style="display:none;" @endif>
                <div class="perm-group-title">内部员工权限分配</div>
                <p class="role-hint">勾选该员工可执行的权限点，未勾选则无对应后台访问权。</p>
                @foreach ($groups as $gKey => $gLabel)
                    <div class="perm-group" style="margin-bottom: var(--space-3);">
                        <div class="perm-group-title">{{ $gLabel }}</div>
                        <div class="perm-list">
                            @foreach ($permissions as $permKey => $permCfg)
                                @if ($permCfg['group'] === $gKey)
                                    <label class="perm-item">
                                        <input type="checkbox" name="permissions[]" value="{{ $permKey }}"
                                               {{ in_array($permKey, old('permissions', []), true) ? 'checked' : '' }}>
                                        {{ $permCfg['label'] }}
                                    </label>
                                @endif
                            @endforeach
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row-actions" style="margin-top: var(--space-5);">
                <button type="submit" class="btn btn-primary">创建用户</button>
                <a href="{{ route('admin.users.index') }}" class="btn">返回</a>
            </div>
        </form>
    </div>
</div>

<script>
    (function () {
        var sel = document.getElementById('role-select');
        var sec = document.getElementById('perm-section');
        function sync() {
            sec.style.display = (sel.value === 'staff') ? '' : 'none';
        }
        sel.addEventListener('change', sync);
        sync();
    })();
</script>
@endsection