@php
    $ids = collect($rows->items())->pluck('contact_id')->unique()->values()->all();
@endphp
<x-layouts.app title="DR contacts" subtitle="Doctor and clinic contacts — allocate them to callers as calling tasks."
               :breadcrumbs="['Doctor' => null, 'Contacts' => null]">
    <x-slot:actions>
        @if ($canManage)
            <button type="button" class="btn btn-secondary" x-data @click="$dispatch('open-modal', 'import-contacts')"><x-heroicon-m-arrow-up-tray class="h-4 w-4" /> Import</button>
            <a href="{{ route('doctor.contacts.export', request()->query()) }}" class="btn btn-secondary"><x-heroicon-m-arrow-down-tray class="h-4 w-4" /> Export</a>
        @endif
        <a href="{{ route('doctor.contacts.create') }}" class="btn btn-brand"><x-heroicon-m-plus class="h-4 w-4" /> New contact</a>
    </x-slot:actions>

    <div class="mb-4 flex flex-wrap gap-2">
        @foreach (\App\Http\Controllers\Doctor\ContactController::VIEWS as $key => $label)
            <a href="{{ route('doctor.contacts.index', array_merge(request()->except(['view', 'page']), ['view' => $key])) }}"
               @class(['rounded-full px-3.5 py-1.5 text-xs font-medium ring-1 transition',
                       'bg-ink-900 text-white ring-ink-900 dark:bg-brand-500 dark:text-ink-950 dark:ring-brand-500' => $view === $key,
                       'bg-white text-ink-600 ring-ink-200 hover:bg-ink-50 dark:bg-ink-900 dark:text-ink-300 dark:ring-ink-700' => $view !== $key])>{{ $label }}</a>
        @endforeach
    </div>

    <x-card :padded="false" x-data="bulkSelect">
        <div class="space-y-3 border-b border-ink-100 p-4 dark:border-ink-800">
            <x-filter-bar placeholder="Search name, company, mobile, keyword, location, street…">
                <input type="hidden" name="view" value="{{ $view }}">
                <x-select name="location" :options="$locations" :value="request('location')" placeholder="All locations" class="w-52" />
            </x-filter-bar>

            @if ($canManage)
                <div x-cloak x-show="selected.length" x-transition class="flex flex-wrap items-center justify-between gap-3 rounded-xl bg-brand-50 px-4 py-2 text-sm dark:bg-brand-500/10">
                    <span class="font-medium text-brand-800 dark:text-brand-300"><span x-text="selected.length"></span> contact(s) selected</span>
                    <div class="flex gap-2">
                        <button type="button" class="btn btn-primary btn-sm" @click="$dispatch('open-modal', 'assign-contacts')"><x-heroicon-m-user-plus class="h-4 w-4" /> Assign</button>
                        <form method="POST" action="{{ route('doctor.contacts.destroy') }}" x-data="confirmSubmit('Delete the selected contacts and their doctor tasks permanently?')" @submit="submit">
                            @csrf @method('DELETE')
                            <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                            <button class="btn btn-danger btn-sm"><x-heroicon-m-trash class="h-4 w-4" /> Delete</button>
                        </form>
                    </div>
                </div>
            @endif
        </div>

        @if ($rows->isEmpty())
            <x-empty-state title="No contacts found" message="Try another view, location or search." icon="heroicon-o-identification" />
        @else
            <div class="table-wrap">
                <table class="table table-compact">
                    <thead>
                        <tr>
                            @if ($canManage)
                                <th class="w-8"><input type="checkbox" class="form-checkbox" @click="toggleAll(@js($ids))" :checked="all" aria-label="Select all"></th>
                            @endif
                            <th><x-sort-link column="status" label="Status" /></th>
                            <th><x-sort-link column="company" label="Company / contact" /></th>
                            <th><x-sort-link column="mobile" label="Mobile" /></th>
                            <th><x-sort-link column="subject" label="Task" /></th>
                            <th>Msg / DND</th>
                            <th><x-sort-link column="keyword" label="Keyword" /></th>
                            <th>Product</th>
                            <th>Number type</th>
                            <th><x-sort-link column="location" label="Location" /></th>
                            <th>Assigned to</th>
                            <th class="text-right">Edit</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-ink-100 dark:divide-ink-800">
                        @foreach ($rows as $r)
                            @php
                                $msg = match ((string) $r->MessageStatusId) { '1' => ['New', 'badge-blue'], '2' => ['Sent', 'badge-green'], '4' => ['Failed', 'badge-red'], '6' => ['Deleted', 'badge-gray'], '-1' => ['Cancelled', 'badge-gray'], default => null };
                                $dnd = match ((string) $r->DndStatus) { '1' => ['DND', 'badge-red'], '2' => ['Non-DND', 'badge-green'], '-1' => ['DND n/a', 'badge-gray'], default => null };
                            @endphp
                            <tr>
                                @if ($canManage)
                                    <td><input type="checkbox" class="form-checkbox" value="{{ $r->contact_id }}" x-model.number="selected" aria-label="Select contact {{ $r->contact_id }}"></td>
                                @endif
                                <td>
                                    @if ($r->task_id)
                                        <span class="badge {{ \App\Models\DrActivity::statusBadge($r->status) }}">{{ $r->status ?: '—' }}</span>
                                    @else
                                        <span class="badge badge-gray">Not allocated</span>
                                    @endif
                                    @if ($r->data_allocation_date)<div class="mt-0.5 text-[11px] text-ink-400">{{ $r->data_allocation_date }}</div>@endif
                                </td>
                                <td class="max-w-[260px]">
                                    <a href="{{ route('doctor.contacts.edit', $r->contact_id) }}" class="block truncate font-medium text-ink-900 hover:text-brand-700 dark:text-white" title="{{ $r->company }}">{{ $r->company ?: $r->contact_name ?: '—' }}</a>
                                    @if ($r->contact_name && $r->contact_name !== $r->company)<div class="truncate text-xs text-ink-500">{{ $r->contact_name }}</div>@endif
                                    @if ($r->dr_data)<span class="badge {{ $r->dr_data === 'LIVE' ? 'badge-green' : 'badge-red' }} mt-0.5">{{ $r->dr_data }}</span>@endif
                                </td>
                                <td class="tabular-nums">{{ $r->mobile ?: '—' }}</td>
                                <td>
                                    @if ($r->task_id)
                                        <a href="{{ route('doctor.activities.edit', $r->task_id) }}" class="text-brand-700 hover:underline dark:text-brand-400">{{ $r->subject ?: 'Task #'.$r->task_id }}</a>
                                        @if ($r->final_remark_ins_loan)<div class="text-[11px] text-ink-400">{{ $r->final_remark_ins_loan }}</div>@endif
                                    @else
                                        <span class="text-xs text-ink-400">No task</span>
                                    @endif
                                </td>
                                <td>
                                    <div class="flex gap-1">
                                        @if ($msg)<span class="badge {{ $msg[1] }}">{{ $msg[0] }}</span>@endif
                                        @if ($dnd)<span class="badge {{ $dnd[1] }}">{{ $dnd[0] }}</span>@endif
                                        @if (! $msg && ! $dnd)<span class="text-ink-400">—</span>@endif
                                    </div>
                                </td>
                                <td class="max-w-[180px] truncate" title="{{ $r->keyword }}">{{ $r->keyword ?: '—' }}</td>
                                <td>{{ $r->product ?: '—' }}</td>
                                <td>{{ $r->number_type ?: '—' }}</td>
                                <td>
                                    <div>{{ $r->location ?: '—' }}</div>
                                    @if ($r->other_street)<div class="max-w-[220px] truncate text-[11px] text-ink-400" title="{{ $r->other_street }}">{{ $r->other_street }}</div>@endif
                                </td>
                                <td class="text-ink-500">{{ $r->assigned_user ?: ($r->assigned_user_id ? 'User #'.$r->assigned_user_id : '—') }}</td>
                                <td class="text-right"><a href="{{ route('doctor.contacts.edit', $r->contact_id) }}" class="btn-icon" title="Edit contact"><x-heroicon-o-pencil-square class="h-4 w-4" /></a></td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <x-pagination-bar :paginator="$rows" />
        @endif

        @if ($canManage)
            <x-modal name="assign-contacts" title="Assign contacts to a caller" maxWidth="lg">
                <form method="POST" action="{{ route('doctor.contacts.assign') }}" id="assign-form" class="space-y-4">
                    @csrf
                    <template x-for="id in selected" :key="id"><input type="hidden" name="ids[]" :value="id"></template>
                    <p class="text-sm text-ink-500">Creating a “Not Started” task for <strong x-text="selected.length"></strong> contact(s). Contacts that already have a doctor task are skipped.</p>
                    <x-select name="user_id" label="Caller" :options="$assignees" placeholder="Choose a caller…" :enhance="true" required />
                    <div class="grid gap-4 sm:grid-cols-2">
                        <x-input name="due_date" type="date" label="Due date" :value="today()->toDateString()" min="{{ today()->toDateString() }}" required />
                        <x-select name="owner" label="Owner" :options="\App\Http\Controllers\Doctor\ContactController::OWNERS" value="TELECALLER" required />
                    </div>
                    <x-select name="task_for" label="Task for" :options="$taskFor" :value="$taskFor[0] ?? 'DR CALLING'" required />
                    @unless ($isProductManager)
                        <x-select name="ins_bank_name" label="Ins / bank name" :options="$banks" placeholder="— None —" />
                    @endunless
                </form>
                <x-slot:footer>
                    <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'assign-contacts')">Cancel</button>
                    <button form="assign-form" class="btn btn-brand"><x-heroicon-m-user-plus class="h-4 w-4" /> Assign</button>
                </x-slot:footer>
            </x-modal>
        @endif
    </x-card>

    @if ($canManage)
        <x-modal name="import-contacts" title="Import doctor contacts" maxWidth="md">
            <form method="POST" action="{{ route('doctor.contacts.import') }}" enctype="multipart/form-data" id="import-form" class="space-y-4">
                @csrf
                <p class="text-sm text-ink-500">Upload a CSV with a header row. Columns: <code class="text-xs">{{ implode(', ', \App\Http\Requests\Doctor\ContactRequest::IMPORT_COLUMNS) }}</code>. Rows whose mobile already exists are skipped.</p>
                <input type="file" name="file" accept=".csv,text/csv" required class="form-input">
                <a href="{{ route('doctor.contacts.sample') }}" class="inline-flex items-center gap-1 text-sm text-brand-700 hover:underline dark:text-brand-400"><x-heroicon-m-document-arrow-down class="h-4 w-4" /> Download sample file</a>
            </form>
            <x-slot:footer>
                <button type="button" class="btn btn-secondary" @click="$dispatch('close-modal', 'import-contacts')">Cancel</button>
                <button form="import-form" class="btn btn-brand">Import</button>
            </x-slot:footer>
        </x-modal>
    @endif
</x-layouts.app>