@php
    // Computed once per row from the already-loaded relations, so a wide grid
    // does not turn into a query per column.
    $status   = $customer->licenseStatus();
    $expiry   = $customer->expiresAt();
    $lastSeen = $customer->lastVerificationAt();
    $current  = $customer->currentLicense();
    $domain   = $customer->domains->first()?->domain;
    $revenue  = $customer->revenue();
@endphp

{{-- data-id is what "select all on this page" reads, so selection stays scoped
     to the rows actually shown rather than to every id ever loaded. --}}
<tr data-id="{{ $customer->id }}"
    class="group transition-colors duration-150 hover:bg-brand-50/40 dark:hover:bg-brand-500/5">

    <td class="px-4 py-2.5">
        <input type="checkbox" class="checkbox" :checked="selected.includes({{ $customer->id }})"
               @change="toggle({{ $customer->id }})"
               aria-label="Select {{ $customer->company_name }}">
    </td>

    {{-- Company: identity in one cell — logo, name, and the domain it runs on. --}}
    <td class="px-4 py-2.5">
        <button type="button" @click="openDrawer({{ $customer->id }}, @js($customer->company_name))"
                class="flex min-w-0 items-center gap-3 text-left">
            <x-avatar :initials="$customer->initials()" :seed="$customer->company_name"
                      class="transition-transform duration-150 group-hover:scale-105" />
            <span class="min-w-0">
                <span class="block truncate font-semibold text-slate-900 group-hover:text-brand-600
                             dark:text-white dark:group-hover:text-brand-400">
                    {{ $customer->company_name }}
                </span>
                <span class="block truncate text-xs text-slate-500 dark:text-slate-400">
                    {{ $domain ?: 'No domain yet' }}
                    @if ($customer->domains_count > 1)
                        <span class="text-slate-400">+{{ $customer->domains_count - 1 }}</span>
                    @endif
                </span>
            </span>
        </button>
    </td>

    {{-- Contact: a person, with their own initials so the eye separates them
         from the company in the cell to the left. --}}
    <td class="px-4 py-2.5">
        <span class="flex min-w-0 items-center gap-2.5">
            <span class="grid size-7 shrink-0 place-items-center rounded-full bg-slate-100 text-[10px]
                         font-bold text-slate-500 dark:bg-slate-700 dark:text-slate-300" aria-hidden="true">
                {{ Str::of($customer->name)->explode(' ')->filter()->take(2)->map(fn ($p) => mb_strtoupper(mb_substr($p, 0, 1)))->implode('') }}
            </span>
            <span class="min-w-0">
                <span class="block truncate text-slate-700 dark:text-slate-200">{{ $customer->name }}</span>
                <span class="block truncate text-xs text-slate-500 dark:text-slate-400">{{ $customer->mobile ?: '—' }}</span>
            </span>
        </span>
    </td>

    <td class="px-4 py-2.5">
        <a href="mailto:{{ $customer->email }}"
           class="block max-w-[200px] truncate text-slate-600 transition hover:text-brand-600 hover:underline
                  dark:text-slate-300 dark:hover:text-brand-400">
            {{ $customer->email }}
        </a>
    </td>

    <td class="px-4 py-2.5"><x-package-badge :name="$customer->currentPackageName()" /></td>

    <td class="px-4 py-2.5"><x-badge :status="$status" /></td>

    <td class="px-4 py-2.5 whitespace-nowrap">
        @if ($expiry)
            <span class="block text-slate-700 dark:text-slate-200">{{ $expiry->format('d M Y') }}</span>
            <span @class([
                'block text-xs',
                'text-amber-600 dark:text-amber-400' => $status === 'expiring',
                'text-red-600 dark:text-red-400'     => $status === 'expired',
                'text-slate-500 dark:text-slate-400' => ! in_array($status, ['expiring', 'expired']),
            ])>{{ $expiry->diffForHumans(short: true) }}</span>
        @else
            <span class="text-slate-400 dark:text-slate-500">—</span>
        @endif
    </td>

    <td class="px-4 py-2.5 whitespace-nowrap">
        @if ($lastSeen)
            <span class="inline-flex items-center gap-1.5 text-slate-600 dark:text-slate-300">
                <span class="size-1.5 rounded-full bg-emerald-500"></span>
                {{ $lastSeen->diffForHumans(short: true) }}
            </span>
        @else
            <span class="inline-flex items-center gap-1.5 text-slate-400 dark:text-slate-500">
                <span class="size-1.5 rounded-full bg-slate-300 dark:bg-slate-600"></span> Never
            </span>
        @endif
    </td>

    {{-- Revenue reads as money earned, so it carries the positive colour. Zero
         stays neutral: nothing has been earned, and green would overstate it. --}}
    <td class="px-4 py-2.5 whitespace-nowrap text-right font-semibold tabular-nums">
        @if ($revenue > 0)
            <span class="text-emerald-600 dark:text-emerald-400">Rs {{ number_format($revenue) }}</span>
        @else
            <span class="text-slate-400 dark:text-slate-500">Rs 0</span>
        @endif
    </td>

    <td class="px-4 py-2.5 whitespace-nowrap text-slate-600 dark:text-slate-300">
        {{ $customer->created_at?->format('d M Y') }}
    </td>

    <td class="px-4 py-2.5 text-right">
        <x-dropdown>
            <x-slot:trigger>
                <button type="button" aria-label="Actions for {{ $customer->company_name }}"
                        class="rounded-lg p-1.5 text-slate-400 opacity-60 transition hover:bg-slate-100
                               hover:text-slate-700 group-hover:opacity-100
                               dark:hover:bg-slate-700 dark:hover:text-white">
                    <x-icon name="more" class="size-5" />
                </button>
            </x-slot:trigger>

            <x-dropdown-item icon="eye" @click="openDrawer({{ $customer->id }}, @js($customer->company_name))">
                View profile
            </x-dropdown-item>
            <x-dropdown-item icon="edit" :href="route('customers.edit', $customer)">Edit</x-dropdown-item>

            <div class="my-1 border-t border-slate-100 dark:border-slate-700"></div>

            {{-- Domains and licences are filtered to this customer rather than
                 dropping the user on an unfiltered list to find them again. --}}
            <x-dropdown-item icon="globe" :href="route('domains.index', ['q' => $customer->company_name])">
                Domains
            </x-dropdown-item>
            <x-dropdown-item icon="key" :href="route('licenses.index', ['q' => $customer->company_name])">
                Licences
            </x-dropdown-item>

            @if ($current)
                <div class="my-1 border-t border-slate-100 dark:border-slate-700"></div>

                {{-- Each licence action is its own form: they are POSTs that change
                     state on a live installation, so none of them can be a link. --}}
                <form method="POST" action="{{ route('licenses.renew', $current) }}"
                      onsubmit="return confirm('Renew the licence for {{ $customer->company_name }}?')">
                    @csrf
                    <x-dropdown-item icon="refresh">Renew</x-dropdown-item>
                </form>

                @if ($current->status === \App\Models\License::STATUS_ACTIVE)
                    <form method="POST" action="{{ route('licenses.suspend', $current) }}"
                          onsubmit="return confirm('Suspend {{ $customer->company_name }}? Their installation stops validating.')">
                        @csrf
                        <x-dropdown-item icon="pause">Suspend</x-dropdown-item>
                    </form>
                @elseif ($current->status === \App\Models\License::STATUS_SUSPENDED)
                    <form method="POST" action="{{ route('licenses.reactivate', $current) }}">
                        @csrf
                        <x-dropdown-item icon="play">Activate</x-dropdown-item>
                    </form>
                @else
                    <x-dropdown-item icon="play" disabled>Activate</x-dropdown-item>
                @endif
            @else
                <div class="my-1 border-t border-slate-100 dark:border-slate-700"></div>
                <x-dropdown-item icon="refresh" disabled>Renew</x-dropdown-item>
                <x-dropdown-item icon="pause" disabled>Suspend</x-dropdown-item>
            @endif

            <div class="my-1 border-t border-slate-100 dark:border-slate-700"></div>

            <form method="POST" action="{{ route('customers.destroy', $customer) }}"
                  onsubmit="return confirm('Delete {{ $customer->company_name }}?')">
                @csrf @method('DELETE')
                <x-dropdown-item icon="trash" danger>Delete</x-dropdown-item>
            </form>
        </x-dropdown>
    </td>
</tr>