ladill-care/resources/views/care/admin/members/create.blade.php

<x-app-layout title="Add member">
    <x-settings.page title="Invite team member" description="They get access only to Ladill Care (plus Mail if they already have a Ladill mailbox).">
        <div class="mb-4 flex flex-wrap items-center gap-2 text-sm">
            <a href="{{ route('care.settings') }}" class="text-slate-500 hover:text-slate-800">Settings</a>
            <span class="text-slate-300">/</span>
            <a href="{{ route('care.members.index') }}" class="text-slate-500 hover:text-slate-800">Team</a>
            <span class="text-slate-300">/</span>
            <span class="font-medium text-slate-900">Invite</span>
        </div>

        <x-settings.card title="Invitation">
            <form method="POST" action="{{ route('care.members.store') }}" class="space-y-4" x-data="{ role: '{{ old('role', 'doctor') }}' }">
                @csrf

                @if (! empty($mailboxOptions))
                    <div>
                        <label class="block text-sm font-medium text-slate-700">From a Ladill mailbox</label>
                        <select x-on:change="if ($event.target.value) { $refs.email.value = $event.target.value }"
                                class="mt-1 w-full rounded-lg border-slate-300 text-sm">
                            <option value="">Choose a mailbox…</option>
                            @foreach ($mailboxOptions as $address)
                                <option value="{{ $address }}">{{ $address }}</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-slate-500">Or type any email below.</p>
                    </div>
                @endif

                <div>
                    <label class="block text-sm font-medium text-slate-700">Email address</label>
                    <input type="email" name="email" value="{{ old('email') }}" required x-ref="email"
                           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 Care organization.</p>
                    @error('email')
                        <p class="mt-1 text-sm text-red-600">{{ $message }}</p>
                    @enderror
                </div>

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

                <div>
                    <label class="block text-sm font-medium text-slate-700">
                        <span x-text="role === 'doctor' ? 'Home branch' : 'Branch (optional)'"></span>
                    </label>
                    <select name="branch_id" class="mt-1 w-full rounded-lg border-slate-300 text-sm"
                            :required="role === 'doctor'">
                        <option value="" x-text="role === 'doctor' ? 'Select a branch…' : 'No branch lock'"></option>
                        @foreach ($branches as $branch)
                            <option value="{{ $branch->id }}" @selected(old('branch_id') == $branch->id)>{{ $branch->name }}</option>
                        @endforeach
                    </select>
                    <p class="mt-1 text-xs text-slate-500" x-show="role === 'doctor'" x-cloak>
                        Required for doctors. Add more sites later under Practitioners (telemedicine).
                    </p>
                </div>

                <div class="rounded-xl border border-slate-100 bg-slate-50 p-4" x-show="role === 'doctor'" x-cloak>
                    <label class="flex items-start gap-2 text-sm">
                        <input type="checkbox" name="create_practitioner" value="1" class="mt-0.5" @checked(old('create_practitioner', true))>
                        <span>
                            <span class="font-medium text-slate-800">Also add as practitioner</span>
                            <span class="mt-0.5 block text-xs text-slate-500">So they appear on appointments and the clinical queue.</span>
                        </span>
                    </label>
                    <div class="mt-3 space-y-3">
                        <div>
                            <label class="block text-xs font-medium text-slate-600">Display name</label>
                            <input type="text" name="practitioner_name" value="{{ old('practitioner_name') }}"
                                   class="mt-1 w-full rounded-lg border-slate-300 text-sm" placeholder="Dr. Ama Mensah">
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-slate-600">Specialty (optional)</label>
                            <input type="text" name="specialty" value="{{ old('specialty') }}"
                                   class="mt-1 w-full rounded-lg border-slate-300 text-sm" placeholder="General practice">
                        </div>
                    </div>
                </div>

                <div class="flex justify-end gap-3">
                    <a href="{{ route('care.members.index') }}" class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-medium text-slate-700 hover:bg-slate-50">Cancel</a>
                    <button type="submit" class="btn-primary">Send invitation</button>
                </div>
            </form>
        </x-settings.card>
    </x-settings.page>
</x-app-layout>