{{--
| Customer profile, rendered server-side and injected into the drawer.
|
| Every section is driven by real records. Where a customer genuinely has
| nothing — no address, no notes, no verifications yet — the section says so
| plainly instead of being hidden, because a missing section reads as a bug and
| an invented one is worse.
--}}
@php
    $status  = $customer->licenseStatus();
    $revenue = $customer->revenue();
@endphp

<div class="space-y-5">

    {{-- ── Identity ────────────────────────────────────────────── --}}
    <div class="flex items-start gap-4">
        <x-avatar :initials="$customer->initials()" :seed="$customer->company_name" class="!size-14 !text-base !rounded-2xl" />
        <div class="min-w-0 flex-1">
            <h3 class="truncate text-base font-bold text-slate-900 dark:text-white">{{ $customer->company_name }}</h3>
            <p class="truncate text-sm text-slate-500 dark:text-slate-400">{{ $customer->name }}</p>
            <div class="mt-2"><x-badge :status="$status" /></div>
        </div>
    </div>

    {{-- ── At a glance ─────────────────────────────────────────── --}}
    <div class="grid grid-cols-3 gap-3">
        @foreach ([
            ['Licences', $customer->licenses->count()],
            ['Domains',  $customer->domains->count()],
            ['Revenue',  'Rs ' . number_format($revenue)],
        ] as [$label, $value])
            <div class="rounded-xl bg-slate-50 p-3 text-center dark:bg-slate-800/60">
                <p class="text-[10px] font-bold uppercase tracking-widest text-slate-500 dark:text-slate-400">{{ $label }}</p>
                <p class="mt-1 text-lg font-bold text-slate-900 dark:text-white">{{ $value }}</p>
            </div>
        @endforeach
    </div>

    {{-- ── Contact ─────────────────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Contact</h4>
        <dl class="space-y-2 rounded-xl border border-slate-200 p-3 dark:border-slate-700">
            <div class="flex items-center gap-2.5 text-sm">
                <x-icon name="mail" class="size-4 shrink-0 text-slate-400" />
                <a href="mailto:{{ $customer->email }}" class="truncate text-brand-600 hover:underline dark:text-brand-400">{{ $customer->email }}</a>
            </div>
            <div class="flex items-center gap-2.5 text-sm">
                <x-icon name="phone" class="size-4 shrink-0 text-slate-400" />
                <span class="truncate text-slate-700 dark:text-slate-200">{{ $customer->mobile ?: 'No phone number on file' }}</span>
            </div>
            <div class="flex items-start gap-2.5 text-sm">
                <x-icon name="map-pin" class="mt-0.5 size-4 shrink-0 text-slate-400" />
                <span class="text-slate-700 dark:text-slate-200">{{ $customer->address ?: 'No address on file' }}</span>
            </div>
        </dl>
    </section>

    {{-- ── Licences ────────────────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Licences</h4>
        @forelse ($customer->licenses as $license)
            <div class="mb-2 rounded-xl border border-slate-200 p-3 dark:border-slate-700">
                <div class="flex items-center justify-between gap-3">
                    <a href="{{ route('licenses.show', $license) }}"
                       class="truncate font-mono text-xs font-semibold text-brand-600 hover:underline dark:text-brand-400">
                        {{ $license->license_key }}
                    </a>
                    <x-badge :status="$license->effectiveStatus()" />
                </div>
                <div class="mt-2 grid grid-cols-2 gap-2 text-xs text-slate-500 dark:text-slate-400">
                    <span>Package: <span class="font-medium text-slate-700 dark:text-slate-200">{{ $license->package?->name ?? '—' }}</span></span>
                    <span>Expires: <span class="font-medium text-slate-700 dark:text-slate-200">{{ $license->expires_at?->format('d M Y') ?? '—' }}</span></span>
                    <span>Activated: <span class="font-medium text-slate-700 dark:text-slate-200">{{ $license->activated_at?->format('d M Y') ?? 'Not yet' }}</span></span>
                    <span>Value: <span class="font-medium text-slate-700 dark:text-slate-200">Rs {{ number_format((float) ($license->package->price ?? 0)) }}</span></span>
                </div>
            </div>
        @empty
            <p class="profile-empty">No licences issued to this customer yet.</p>
        @endforelse
    </section>

    {{-- ── Domains ─────────────────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Domains</h4>
        @forelse ($customer->domains as $domain)
            <div class="mb-2 flex items-center justify-between gap-3 rounded-xl border border-slate-200 p-3 dark:border-slate-700">
                <div class="min-w-0">
                    <p class="truncate text-sm font-medium text-slate-800 dark:text-slate-100">{{ $domain->domain }}</p>
                    <p class="text-xs text-slate-500 dark:text-slate-400">
                        {{ $domain->cms_version ? 'CMS v'.$domain->cms_version : 'Version not reported' }}
                    </p>
                </div>
                <span class="shrink-0 text-right text-xs text-slate-500 dark:text-slate-400">
                    {{ $domain->last_verification_at ? $domain->last_verification_at->diffForHumans() : 'Never verified' }}
                </span>
            </div>
        @empty
            <p class="profile-empty">No installation has activated against this customer yet.</p>
        @endforelse
    </section>

    {{-- ── Verification history ────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Verification history</h4>
        @forelse ($verifications as $log)
            <div class="flex items-center justify-between gap-3 border-b border-slate-100 py-2 text-xs last:border-0 dark:border-slate-700/60">
                <span class="flex items-center gap-2">
                    <span class="size-1.5 rounded-full {{ $log->event === \App\Models\LicenseLog::VERIFICATION ? 'bg-emerald-500' : 'bg-red-500' }}"></span>
                    <span class="truncate text-slate-700 dark:text-slate-200">{{ $log->domain ?: '—' }}</span>
                </span>
                <span class="shrink-0 text-slate-500 dark:text-slate-400">{{ $log->created_at?->diffForHumans() }}</span>
            </div>
        @empty
            <p class="profile-empty">No verification calls recorded yet.</p>
        @endforelse
    </section>

    {{-- ── Activity / audit ────────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Recent activity</h4>
        @forelse ($activity as $log)
            <div class="border-b border-slate-100 py-2 last:border-0 dark:border-slate-700/60">
                <div class="flex items-center justify-between gap-3 text-xs">
                    <span class="font-medium capitalize text-slate-700 dark:text-slate-200">{{ str_replace('_', ' ', $log->event) }}</span>
                    <span class="shrink-0 text-slate-500 dark:text-slate-400">{{ $log->created_at?->diffForHumans() }}</span>
                </div>
                @if ($log->message)
                    <p class="mt-0.5 text-xs text-slate-500 dark:text-slate-400">{{ $log->message }}</p>
                @endif
            </div>
        @empty
            <p class="profile-empty">Nothing has happened on this account yet.</p>
        @endforelse
    </section>

    {{-- ── Notes ───────────────────────────────────────────────── --}}
    <section>
        <h4 class="profile-heading">Notes</h4>
        @if ($customer->notes)
            <p class="whitespace-pre-line rounded-xl bg-amber-50 p-3 text-sm text-slate-700 dark:bg-amber-500/10 dark:text-slate-200">{{ $customer->notes }}</p>
        @else
            <p class="profile-empty">No notes recorded.</p>
        @endif
    </section>

    <div class="flex gap-2 border-t border-slate-200 pt-4 dark:border-slate-700">
        <a href="{{ route('customers.edit', $customer) }}"
           class="flex-1 rounded-xl bg-brand-600 px-4 py-2 text-center text-sm font-semibold text-white transition hover:bg-brand-700">
            Edit customer
        </a>
        <a href="{{ route('licenses.index', ['q' => $customer->company_name]) }}"
           class="flex-1 rounded-xl border border-slate-200 px-4 py-2 text-center text-sm font-semibold text-slate-700
                  transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-200 dark:hover:bg-slate-800">
            Licences
        </a>
    </div>

    <p class="text-center text-[11px] text-slate-400 dark:text-slate-500">
        Customer since {{ $customer->created_at?->format('d M Y') }}
    </p>
</div>