@extends('layouts.email')
@section('title', 'Team — Ladill Email')
@section('content')
<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 mailboxes & domains.</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 mailboxes and the team. Members can manage mailboxes. 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 }} <span class="text-xs font-normal text-slate-400">(you)</span></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>
                            <x-confirm-dialog
                                :name="'remove-member-'.$member->id"
                                title="Remove team member?"
                                :message="'Remove '.$member->email.' from this team?'"
                                :action="route('account.team.destroy', $member)"
                                method="DELETE"
                                confirm-label="Remove"
                            >
                                <x-slot:trigger>
                                    <button type="button" class="text-xs font-medium text-rose-600 hover:underline">Remove</button>
                                </x-slot:trigger>
                            </x-confirm-dialog>
                        @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>
@endsection