<x-app-layout title="Add member">
    <div class="mx-auto max-w-lg">
        <h1 class="text-xl font-semibold text-slate-900">Invite team member</h1>

        <form method="POST" action="{{ route('meet.members.store') }}" class="mt-6 space-y-4 rounded-2xl border border-slate-200 bg-white p-6">
            @csrf

            <div>
                <label class="block text-sm font-medium text-slate-700">Email address</label>
                <input type="email" name="email" value="{{ old('email') }}" required
                       class="mt-1 w-full rounded-lg border-slate-300 text-sm"
                       placeholder="colleague@company.com">
                <p class="mt-1 text-xs text-slate-500">They will receive an email to accept and join your Meet organization.</p>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Role</label>
                <select name="role" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    @foreach ($roles as $value => $label)
                        <option value="{{ $value }}" @selected(old('role') === $value)>{{ $label }}</option>
                    @endforeach
                </select>
            </div>

            <div>
                <label class="block text-sm font-medium text-slate-700">Branch (optional)</label>
                <select name="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                    <option value="">All branches</option>
                    @foreach ($branches as $branch)
                        <option value="{{ $branch->id }}" @selected(old('branch_id') == $branch->id)>{{ $branch->name }}</option>
                    @endforeach
                </select>
            </div>

            <button type="submit" class="btn-primary">Send invitation</button>
        </form>
    </div>
</x-app-layout>
