@extends('layouts.app')
@section('title', $contact->displayName())

@section('content')
<div class="grid gap-6 lg:grid-cols-3">
    <div class="space-y-6 lg:col-span-1">
        <div class="card-pad">
            <div class="flex items-start justify-between">
                <div>
                    <h2 class="text-lg font-semibold text-slate-900 dark:text-white">{{ $contact->displayName() }}</h2>
                    <p class="text-sm text-slate-500">{{ $contact->email }}</p>
                </div>
                <x-status-badge :status="$contact->status"/>
            </div>

            @if ($suppression)
                <div class="mt-4 rounded-lg bg-rose-50 p-3 text-sm text-rose-800 dark:bg-rose-950/50 dark:text-rose-300">
                    Globally suppressed since {{ $suppression->suppressed_at->format('d M Y') }}
                    ({{ str_replace('_', ' ', $suppression->reason) }}). This contact will never receive campaigns.
                </div>
            @endif

            <dl class="mt-4 space-y-2 text-sm">
                @foreach ([
                    'Company' => $contact->company, 'Job title' => $contact->job_title,
                    'Website' => $contact->website, 'Phone' => $contact->phone,
                    'Country' => $contact->country, 'City' => $contact->city,
                    'Industry' => $contact->industry, 'Source' => $contact->source,
                ] as $label => $value)
                    @if (filled($value))
                        <div class="flex justify-between gap-4">
                            <dt class="text-slate-500">{{ $label }}</dt>
                            <dd class="text-right font-medium">{{ $value }}</dd>
                        </div>
                    @endif
                @endforeach
                <div class="flex justify-between gap-4">
                    <dt class="text-slate-500">Added</dt>
                    <dd class="font-medium">{{ $contact->created_at->format('d M Y H:i') }}</dd>
                </div>
                <div class="flex justify-between gap-4">
                    <dt class="text-slate-500">Updated</dt>
                    <dd class="font-medium">{{ $contact->updated_at->format('d M Y H:i') }}</dd>
                </div>
                @if ($contact->import)
                    <div class="flex justify-between gap-4">
                        <dt class="text-slate-500">Import batch</dt>
                        <dd><a href="{{ route('imports.show', $contact->import) }}" class="font-medium text-brand-600 hover:underline">#{{ $contact->import->id }} {{ $contact->import->original_filename }}</a></dd>
                    </div>
                @endif
            </dl>

            @if ($contact->notes)
                <p class="mt-4 rounded-lg bg-slate-50 p-3 text-sm text-slate-600 dark:bg-slate-800/60 dark:text-slate-300">{{ $contact->notes }}</p>
            @endif

            <div class="mt-5 flex flex-wrap gap-2">
                @can('manage contacts')
                    <a href="{{ route('contacts.edit', $contact) }}" class="btn-secondary">Edit</a>
                    <x-confirm-form :action="route('contacts.destroy', $contact)" method="DELETE"
                                    message="Delete this contact? Campaign history will keep the email address for reporting.">
                        Delete
                    </x-confirm-form>
                @endcan
            </div>
        </div>

        <div class="card-pad">
            <h3 class="text-sm font-semibold text-slate-900 dark:text-white">Lists</h3>
            <div class="mt-3 flex flex-wrap gap-2">
                @forelse ($contact->lists as $list)
                    <a href="{{ route('lists.show', $list) }}" class="badge-blue">{{ $list->name }}</a>
                @empty
                    <p class="text-sm text-slate-500">Not a member of any list.</p>
                @endforelse
            </div>
        </div>
    </div>

    <div class="lg:col-span-2">
        <div class="card">
            <h3 class="border-b border-slate-200 px-5 py-4 text-base font-semibold text-slate-900 dark:border-slate-800 dark:text-white">Activity history</h3>
            <ul class="divide-y divide-slate-200 dark:divide-slate-800">
                @forelse ($events as $event)
                    <li class="flex items-center gap-4 px-5 py-3 text-sm">
                        <x-status-badge :status="$event->type" class="shrink-0"/>
                        <div class="min-w-0 flex-1">
                            <p class="truncate">
                                {{ ucfirst(str_replace('_', ' ', $event->type)) }}
                                @if ($event->campaign) — <a href="{{ route('campaigns.show', $event->campaign) }}" class="text-brand-600 hover:underline">{{ $event->campaign->name }}</a>@endif
                            </p>
                            @if ($event->url)
                                <p class="truncate text-xs text-slate-500">{{ $event->url }}</p>
                            @endif
                        </div>
                        <time class="shrink-0 text-xs text-slate-500">{{ $event->occurred_at->format('d M Y H:i') }}</time>
                    </li>
                @empty
                    <li class="px-5 py-10 text-center text-sm text-slate-500">No campaign activity recorded for this contact.</li>
                @endforelse
            </ul>
        </div>
    </div>
</div>
@endsection