ladill-qr-plus/resources/views/qr/account/team.blade.php

<x-user-layout>
    <x-slot name="title">Team</x-slot>
    <div class="mx-auto max-w-3xl">
        <h1 class="text-xl font-semibold tracking-tight text-slate-900">Team</h1>
        <p class="mt-0.5 text-sm text-slate-500">Invite people to help manage this account’s QR codes.</p>

        @if($canManage)
            <div class="mt-6 rounded-2xl border border-slate-200 bg-white p-5">
                <h2 class="text-sm font-semibold text-slate-900">Invite a teammate</h2>
                <form method="POST" action="{{ route('account.team.store') }}" class="mt-4 flex flex-col gap-3 sm:flex-row sm:items-end">
                    @csrf
                    <div class="flex-1">
                        <label class="block text-[11px] font-medium text-slate-500">Email</label>
                        <input type="email" name="email" required placeholder="teammate@example.com"
                               class="mt-1 w-full rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-indigo-100">
                        @error('email')<p class="mt-1 text-xs text-rose-600">{{ $message }}</p>@enderror
                    </div>
                    <div>
                        <label class="block text-[11px] font-medium text-slate-500">Role</label>
                        <select name="role" class="mt-1 rounded-lg border border-slate-200 bg-slate-50 px-3 py-2 text-sm focus:border-indigo-300 focus:bg-white focus:outline-none">
                            <option value="member">Member</option>
                            <option value="admin">Admin</option>
                        </select>
                    </div>
                    <button class="rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white hover:bg-indigo-700">Send invite</button>
                </form>
                <p class="mt-2 text-[11px] text-slate-400">Admins can manage QR codes and the team. Members can manage QR codes. Invitees join by signing in with that email.</p>
            </div>
        @endif

        <div class="mt-6 rounded-2xl border border-slate-200 bg-white">
            <div class="border-b border-slate-100 px-5 py-3.5"><h2 class="text-sm font-semibold text-slate-900">Members</h2></div>
            <ul class="divide-y divide-slate-50">
                <li class="flex items-center justify-between px-5 py-3.5">
                    <div class="flex items-center gap-3">
                        <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-900 text-xs font-semibold text-white">{{ strtoupper(substr($account->name ?? $account->email, 0, 1)) }}</span>
                        <div>
                            <p class="text-sm font-medium text-slate-900">
                                {{ $account->name ?? $account->email }}
                                @if($isOwner)<span class="text-xs font-normal text-slate-400">(you)</span>@endif
                            </p>
                            <p class="text-xs text-slate-400">{{ $account->email }}</p>
                        </div>
                    </div>
                    <span class="rounded-full bg-indigo-50 px-2.5 py-1 text-[11px] font-medium text-indigo-700">Owner</span>
                </li>

                @forelse($members as $member)
                    <li class="flex items-center justify-between px-5 py-3.5">
                        <div class="flex items-center gap-3">
                            <span class="inline-flex h-9 w-9 items-center justify-center rounded-full bg-slate-100 text-xs font-semibold text-slate-600">{{ strtoupper(substr($member->email, 0, 1)) }}</span>
                            <div>
                                <p class="text-sm font-medium text-slate-900">{{ $member->member->name ?? $member->email }}</p>
                                <p class="text-xs text-slate-400">{{ $member->email }}</p>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            @if($member->status === 'invited')
                                <span class="rounded-full bg-amber-50 px-2.5 py-1 text-[11px] font-medium text-amber-700">Invited</span>
                            @endif
                            @if($canManage)
                                <form method="POST" action="{{ route('account.team.role', $member) }}">
                                    @csrf @method('PATCH')
                                    <select name="role" onchange="this.form.submit()" class="rounded-lg border border-slate-200 bg-white px-2 py-1 text-xs focus:outline-none">
                                        <option value="member" @selected($member->role === 'member')>Member</option>
                                        <option value="admin" @selected($member->role === 'admin')>Admin</option>
                                    </select>
                                </form>
                                <form method="POST" action="{{ route('account.team.destroy', $member) }}" onsubmit="return confirm('Remove {{ $member->email }}?')">
                                    @csrf @method('DELETE')
                                    <button class="text-xs font-medium text-rose-600 hover:underline">Remove</button>
                                </form>
                            @else
                                <span class="rounded-full bg-slate-100 px-2.5 py-1 text-[11px] font-medium capitalize text-slate-600">{{ $member->role }}</span>
                            @endif
                        </div>
                    </li>
                @empty
                    <li class="px-5 py-8 text-center text-sm text-slate-400">No teammates yet.</li>
                @endforelse
            </ul>
        </div>
    </div>
</x-user-layout>