@php($editing = $contact->exists)
<x-layouts.app :title="$editing ? ($contact->contact_name ?: ($contact->company ?: 'Contact #'.$contact->contact_id)) : 'Add contact'"
               :subtitle="$editing ? 'Contact #'.$contact->contact_id.($contact->mobile ? ' · '.$contact->mobile : '') : 'Create a new contact.'"
               :breadcrumbs="['CRM' => null, 'Contacts' => route('contacts.index'), ($editing ? '#'.$contact->contact_id : 'New') => null]">
    <x-slot:actions>
        <a href="{{ route('contacts.index') }}" class="btn btn-secondary"><x-heroicon-m-arrow-left class="h-4 w-4" /> Back to list</a>
    </x-slot:actions>

    <form method="POST" action="{{ $editing ? route('contacts.update', $contact->contact_id) : route('contacts.store') }}" class="grid gap-6 xl:grid-cols-3">
        @csrf
        @if ($editing) @method('PUT') @endif

        <div class="space-y-6 xl:col-span-2">
            @foreach ($sections as $title => $fields)
                <x-card :title="$title">
                    <div class="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($fields as $col => $def)
                            @include('crm.loan-data.partials.field', ['model' => $contact, 'col' => $col, 'def' => $def])
                        @endforeach
                    </div>
                </x-card>
            @endforeach
        </div>

        <div class="space-y-6">
            @if ($editing)
                <x-card title="Status">
                    @php([$dndLabel, $dndTone] = \App\Services\Crm\ContactFields::dndStatus($contact->DndStatus))
                    @php([$msgLabel, $msgTone] = \App\Services\Crm\ContactFields::messageStatus($contact->MessageStatusId))
                    <dl class="space-y-3 text-sm">
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">DND</dt><dd><span class="badge {{ $dndTone }}">{{ $dndLabel }}</span>@if ($contact->DndCheckDate)<span class="ml-1 text-xs text-ink-400">{{ $contact->DndCheckDate }}</span>@endif</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Last SMS</dt><dd>@if ($msgTone)<span class="badge {{ $msgTone }}">{{ $msgLabel }}</span>@else — @endif</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Zoho id</dt><dd class="font-mono text-xs">{{ $contact->zoho_id ?: '—' }}</dd></div>
                        <div class="flex justify-between gap-3"><dt class="text-ink-500">Created</dt><dd>{{ $contact->created_date ?: '—' }}</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('contacts.index') }}" class="btn btn-secondary">Cancel</a>
            </div>

            @if ($editing)
                <div x-data="{ tab: 'open' }">
                    <x-card :padded="false">
                        <div class="flex gap-1 border-b border-ink-100 p-2 dark:border-ink-800">
                            @foreach (['open' => 'Open activities ('.$open->count().')', 'closed' => 'Closed ('.$closed->count().')', 'doctor' => 'Doctor tasks ('.$doctorTasks->count().')'] as $k => $label)
                                <button type="button" @click="tab = '{{ $k }}'" class="rounded-lg px-3 py-1.5 text-xs font-medium transition"
                                        :class="tab === '{{ $k }}' ? 'bg-brand-50 text-brand-800 dark:bg-brand-500/10 dark:text-brand-300' : 'text-ink-500 hover:text-ink-900 dark:hover:text-white'">{{ $label }}</button>
                            @endforeach
                        </div>
                        @foreach (['open' => $open, 'closed' => $closed, 'doctor' => $doctorTasks] as $k => $list)
                            <div x-show="tab === '{{ $k }}'" @if ($k !== 'open') x-cloak @endif>
                                @forelse ($list as $a)
                                    @php($tone = match (strtolower((string) $a->status)) { 'completed' => 'badge-green', 'in progress' => 'badge-amber', 'not started' => 'badge-blue', default => 'badge-gray' })
                                    <div class="border-b border-ink-100 px-5 py-3 last:border-0 dark:border-ink-800">
                                        <div class="flex items-center justify-between gap-2">
                                            @if ($k !== 'doctor' && Route::has('activities.show'))
                                                <a href="{{ route('activities.show', $a->id) }}" class="truncate text-sm font-medium text-brand-700 hover:underline dark:text-brand-400">{{ $a->subject ?: 'Task #'.$a->id }}</a>
                                            @else
                                                <span class="truncate text-sm font-medium">{{ $a->subject ?: 'Task #'.$a->id }}</span>
                                            @endif
                                            <span class="badge {{ $tone }}">{{ $a->status ?: '—' }}</span>
                                        </div>
                                        <div class="mt-1 flex flex-wrap gap-x-3 gap-y-0.5 text-xs text-ink-500">
                                            <span>{{ $a->user_name ?: '—' }}</span>
                                            @if ($a->task_for)<span>{{ $a->task_for }}</span>@endif
                                            @if ($a->due_date)<span>Due {{ date('d-m-Y', strtotime($a->due_date)) }}</span>@endif
                                            @if (! empty($a->field_manager))<span>FM {{ $a->field_manager }}</span>@endif
                                            @if (! empty($a->inq_status))<span>{{ $a->inq_status }}</span>@endif
                                        </div>
                                        @if ($a->final_remark_ins_loan)<div class="mt-1 text-xs text-ink-700 dark:text-ink-300">{{ $a->final_remark_ins_loan }}</div>@endif
                                    </div>
                                @empty
                                    <p class="px-5 py-8 text-center text-sm text-ink-500">Nothing here.</p>
                                @endforelse
                            </div>
                        @endforeach
                    </x-card>
                </div>
            @endif
        </div>
    </form>
</x-layouts.app>