@php($editing = $contact->exists)
<x-layouts.app :title="$editing ? 'Edit doctor contact' : 'New doctor contact'" :subtitle="$editing ? ($contact->company ?: $contact->contact_name) : 'Add a doctor or clinic to the calling list.'"
               :breadcrumbs="['Doctor' => null, 'Contacts' => route('doctor.contacts.index'), ($editing ? '#'.$contact->contact_id : 'New') => null]">
    <form method="POST" action="{{ $editing ? route('doctor.contacts.update', $contact) : route('doctor.contacts.store') }}" class="grid gap-6 lg:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 lg:col-span-2">
            <x-card title="Company details">
                <div class="grid gap-5 sm:grid-cols-2">
                    <x-input name="company" label="Company / clinic name" :value="$contact->company" maxlength="500" class="sm:col-span-2" />
                    <x-input name="contact_name" label="Contact name" :value="$contact->contact_name" maxlength="255" />
                    <x-input name="mobile" label="Contact number" :value="$contact->mobile" required maxlength="30" inputmode="tel" />
                    <x-input name="number_type" label="Number type" :value="$contact->number_type" maxlength="100" />
                    <x-input name="keyword" label="Keyword" :value="$contact->keyword" maxlength="255" hint="e.g. Skin Clinic, Tattoo Removal Services" />
                    <x-select name="location" label="Location" :options="$locations" :value="$contact->location" placeholder="— None —" :enhance="true" />
                    <x-input name="product" label="Product" :value="$contact->product" maxlength="255" />
                    <x-input name="other_street" label="Street / address" :value="$contact->other_street" maxlength="1000" class="sm:col-span-2" />
                    <x-textarea name="notes" label="Notepad" :value="$contact->notes" rows="4" class="sm:col-span-2" maxlength="5000" />
                </div>
            </x-card>
        </div>

        <div class="space-y-6">
            @if ($editing)
                <x-card title="Doctor tasks" :padded="false">
                    @forelse ($tasks ?? [] as $t)
                        <a href="{{ route('doctor.activities.edit', $t->id) }}" class="flex items-center justify-between gap-3 border-b border-ink-100 px-5 py-3 text-sm last:border-0 hover:bg-ink-50 dark:border-ink-800 dark:hover:bg-ink-800/50">
                            <div class="min-w-0">
                                <div class="truncate font-medium text-ink-900 dark:text-white">{{ $t->subject ?: 'Task #'.$t->id }}</div>
                                <div class="truncate text-xs text-ink-500">{{ $t->assigned_user ?: '—' }} · {{ $t->final_remark_ins_loan ?: 'No remark' }}</div>
                            </div>
                            <span class="badge {{ \App\Models\DrActivity::statusBadge($t->status) }}">{{ $t->status }}</span>
                        </a>
                    @empty
                        <x-empty-state title="Not allocated" message="Assign this contact from the contact list." icon="heroicon-o-clipboard-document-list" />
                    @endforelse
                </x-card>
                <x-card title="Record">
                    <dl class="space-y-2 text-sm">
                        <div class="flex justify-between"><dt class="text-ink-500">Contact ID</dt><dd class="font-medium">{{ $contact->contact_id }}</dd></div>
                        <div class="flex justify-between"><dt class="text-ink-500">Allocated on</dt><dd class="font-medium">{{ $contact->data_allocation_date ?: '—' }}</dd></div>
                        <div class="flex justify-between"><dt class="text-ink-500">Data</dt><dd class="font-medium">{{ $contact->dr_data ?: '—' }}</dd></div>
                    </dl>
                </x-card>
            @endif

            <div class="flex gap-2">
                <button class="btn btn-brand flex-1"><x-heroicon-m-check class="h-4 w-4" /> {{ $editing ? 'Save changes' : 'Add contact' }}</button>
                <a href="{{ route('doctor.contacts.index') }}" class="btn btn-secondary">Cancel</a>
            </div>
        </div>
    </form>
</x-layouts.app>