@php
    $contacts = $patient->contacts->sortByDesc('is_primary');
    $canManage = auth()->user()->can('patients.edit');

    $flags = [
        'is_primary' => ['label' => 'Primary', 'color' => 'blue'],
        'is_next_of_kin' => ['label' => 'Next of kin', 'color' => 'indigo'],
        'is_emergency_contact' => ['label' => 'Emergency', 'color' => 'rose'],
        'is_guarantor' => ['label' => 'Guarantor', 'color' => 'teal'],
    ];
@endphp

<div class="space-y-4">
    @if ($contacts->isEmpty())
        <x-card flush>
            <x-empty-state icon="users"
                           title="No contacts recorded"
                           message="Next of kin, guarantors and emergency contacts. A guarantor matters at billing time — the person the hospital calls when a bill is not settled.">
                @if ($canManage)
                    <x-slot:actions>
                        <button type="button" class="hms-btn hms-btn-primary hms-btn-sm"
                                x-on:click="$dispatch('open-modal', 'contact-add')">
                            <x-icon name="plus" size="sm" /> Add contact
                        </button>
                    </x-slot:actions>
                @endif
            </x-empty-state>
        </x-card>
    @else
        <div class="flex flex-wrap items-center justify-between gap-2">
            <p class="text-sm text-slate-500">{{ $contacts->count() }} contact{{ $contacts->count() === 1 ? '' : 's' }} on file.</p>

            @if ($canManage)
                <button type="button" class="hms-btn hms-btn-primary hms-btn-sm"
                        x-on:click="$dispatch('open-modal', 'contact-add')">
                    <x-icon name="plus" size="sm" /> Add contact
                </button>
            @endif
        </div>

        <div class="grid gap-4 lg:grid-cols-2">
            @foreach ($contacts as $contact)
                <x-card>
                    <x-slot:header>
                        <div class="flex items-start justify-between gap-3">
                            <div>
                                <h3 class="text-sm font-semibold text-slate-800">{{ $contact->name }}</h3>
                                <p class="text-xs text-slate-500">{{ $contact->relationship_label }}</p>
                            </div>

                            <div class="flex flex-wrap items-center justify-end gap-1.5">
                                @foreach ($flags as $column => $flag)
                                    @if ($contact->{$column})
                                        <x-status-badge :label="$flag['label']" :color="$flag['color']" size="sm" />
                                    @endif
                                @endforeach
                            </div>
                        </div>
                    </x-slot:header>

                    <dl class="grid grid-cols-2 gap-x-4 gap-y-3 text-sm">
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">Phone</dt>
                            <dd class="text-slate-800">
                                {{ $contact->phone ?: '—' }}
                                @if ($contact->alt_phone)
                                    <span class="block text-xs text-slate-500">{{ $contact->alt_phone }}</span>
                                @endif
                            </dd>
                        </div>
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">Email</dt>
                            <dd class="truncate text-slate-800">{{ $contact->email ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">National ID</dt>
                            <dd class="font-mono text-slate-800">{{ $contact->national_id ?: '—' }}</dd>
                        </div>
                        <div>
                            <dt class="text-xs uppercase tracking-wide text-slate-400">Address</dt>
                            <dd class="text-slate-800">{{ $contact->address ?: '—' }}</dd>
                        </div>
                    </dl>

                    @if ($contact->notes)
                        <p class="mt-3 rounded-lg bg-slate-50 px-3 py-2 text-xs text-slate-600">{{ $contact->notes }}</p>
                    @endif

                    @if ($canManage)
                        <x-slot:footer>
                            <div class="flex flex-wrap items-center gap-2">
                                <button type="button" class="hms-btn hms-btn-ghost hms-btn-sm"
                                        x-on:click="$dispatch('open-modal', 'contact-edit-{{ $contact->id }}')">
                                    <x-icon name="edit" size="sm" /> Edit
                                </button>

                                <form method="POST" action="{{ route('patients.contacts.destroy', [$patient, $contact]) }}"
                                      onsubmit="return confirm('Remove {{ $contact->name }} from this record?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="hms-btn hms-btn-ghost hms-btn-sm text-red-600 hover:bg-red-50">
                                        <x-icon name="trash" size="sm" /> Remove
                                    </button>
                                </form>
                            </div>
                        </x-slot:footer>
                    @endif
                </x-card>
            @endforeach
        </div>
    @endif

    @if ($canManage)
        {{-- -------------------------------------------------------- add contact --}}
        <x-modal name="contact-add" maxWidth="lg">
            <form method="POST" action="{{ route('patients.contacts.store', $patient) }}">
                @csrf

                <div class="space-y-4 p-6">
                    <h2 class="text-base font-semibold text-slate-800">Add contact</h2>

                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-form.input name="name" label="Full name" required :value="old('name')" />
                        <x-form.select name="relationship" label="Relationship" required
                                       :options="$relationships" :value="old('relationship')" />

                        <x-form.input name="phone" label="Phone" :value="old('phone')" />
                        <x-form.input name="alt_phone" label="Alternative phone" :value="old('alt_phone')" />

                        <x-form.input name="email" label="Email" type="email" :value="old('email')" />
                        <x-form.input name="national_id" label="National ID" :value="old('national_id')" />

                        <div class="sm:col-span-2">
                            <x-form.input name="address" label="Address" :value="old('address')" />
                        </div>

                        <div class="sm:col-span-2">
                            <x-form.textarea name="notes" label="Notes" rows="2" :value="old('notes')" />
                        </div>

                        <div class="space-y-3 sm:col-span-2">
                            <x-form.checkbox name="is_next_of_kin" value="1" label="Next of kin"
                                             hint="Only one next of kin is kept per patient; setting this clears the others."
                                             :checked="old('is_next_of_kin')" />
                            <x-form.checkbox name="is_emergency_contact" value="1" label="Emergency contact"
                                             :checked="old('is_emergency_contact')" />
                            <x-form.checkbox name="is_guarantor" value="1" label="Guarantor"
                                             hint="Liable for the bill when the payer does not settle it."
                                             :checked="old('is_guarantor')" />
                            <x-form.checkbox name="is_primary" value="1" label="Primary contact"
                                             hint="Only one primary contact is kept per patient."
                                             :checked="old('is_primary', $contacts->isEmpty())" />
                        </div>
                    </div>
                </div>

                <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-4">
                    <button type="button" class="hms-btn hms-btn-secondary" x-on:click="$dispatch('close-modal', 'contact-add')">Cancel</button>
                    <button type="submit" class="hms-btn hms-btn-primary">Save contact</button>
                </div>
            </form>
        </x-modal>

        @foreach ($contacts as $contact)
            <x-modal name="contact-edit-{{ $contact->id }}" maxWidth="lg">
                <form method="POST" action="{{ route('patients.contacts.update', [$patient, $contact]) }}">
                    @csrf
                    @method('PUT')

                    <div class="space-y-4 p-6">
                        <h2 class="text-base font-semibold text-slate-800">Edit {{ $contact->name }}</h2>

                        <div class="grid gap-4 sm:grid-cols-2">
                            <x-form.input name="name" label="Full name" required :value="$contact->name"
                                          :id="'contact-name-'.$contact->id" />
                            <x-form.select name="relationship" label="Relationship" required
                                           :options="$relationships" :value="$contact->relationship"
                                           :id="'contact-relationship-'.$contact->id" />

                            <x-form.input name="phone" label="Phone" :value="$contact->phone"
                                          :id="'contact-phone-'.$contact->id" />
                            <x-form.input name="alt_phone" label="Alternative phone" :value="$contact->alt_phone"
                                          :id="'contact-alt-phone-'.$contact->id" />

                            <x-form.input name="email" label="Email" type="email" :value="$contact->email"
                                          :id="'contact-email-'.$contact->id" />
                            <x-form.input name="national_id" label="National ID" :value="$contact->national_id"
                                          :id="'contact-national-id-'.$contact->id" />

                            <div class="sm:col-span-2">
                                <x-form.input name="address" label="Address" :value="$contact->address"
                                              :id="'contact-address-'.$contact->id" />
                            </div>

                            <div class="sm:col-span-2">
                                <x-form.textarea name="notes" label="Notes" rows="2" :value="$contact->notes"
                                                 :id="'contact-notes-'.$contact->id" />
                            </div>

                            <div class="space-y-3 sm:col-span-2">
                                <x-form.checkbox name="is_next_of_kin" value="1" label="Next of kin"
                                                 :checked="$contact->is_next_of_kin"
                                                 :id="'contact-nok-'.$contact->id" />
                                <x-form.checkbox name="is_emergency_contact" value="1" label="Emergency contact"
                                                 :checked="$contact->is_emergency_contact"
                                                 :id="'contact-emergency-'.$contact->id" />
                                <x-form.checkbox name="is_guarantor" value="1" label="Guarantor"
                                                 :checked="$contact->is_guarantor"
                                                 :id="'contact-guarantor-'.$contact->id" />
                                <x-form.checkbox name="is_primary" value="1" label="Primary contact"
                                                 :checked="$contact->is_primary"
                                                 :id="'contact-primary-'.$contact->id" />
                            </div>
                        </div>
                    </div>

                    <div class="flex items-center justify-end gap-2 border-t border-slate-200 bg-slate-50 px-6 py-4">
                        <button type="button" class="hms-btn hms-btn-secondary" x-on:click="$dispatch('close-modal', 'contact-edit-{{ $contact->id }}')">Cancel</button>
                        <button type="submit" class="hms-btn hms-btn-primary">Save changes</button>
                    </div>
                </form>
            </x-modal>
        @endforeach
    @endif
</div>