@extends('layouts.admin')
@section('title', 'Customers')
@section('heading', 'Customers')
@section('subheading', $customers->total() . ' ' . Str::plural('customer', $customers->total()) . ($isFiltered ? ' matching your filters' : ''))

@section('header-actions')
    <a href="{{ route('customers.create') }}"
       class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-3.5 py-2 text-sm font-semibold text-white
              shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-700 hover:shadow-md">
        <x-icon name="plus-user" class="size-4" />
        <span class="hidden sm:inline">New Customer</span>
    </a>
@endsection

@section('content')
    @php
        // Share-of-total lines for the cards. Derived from the counts already
        // fetched - no extra queries, and no figure that is not in the data.
        $share = fn (int $n) => $stats['total'] > 0 ? round($n / $stats['total'] * 100) . '% of customers' : 'No customers yet';
    @endphp

    {{-- lg:h-full is what removes the dead space: the page becomes exactly the
         height of the viewport and the grid takes whatever the cards and filters
         leave, so the table fills the screen and scrolls inside itself instead of
         ending halfway down. Below lg the page scrolls normally. --}}
    <div x-data="customersPage()" class="flex flex-col gap-3 lg:h-full">

        {{-- ── Statistics ──────────────────────────────────────────── --}}
        <div class="grid shrink-0 grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7">
            <x-stat-card dense label="Total Customers" :value="number_format($stats['total'])" icon="users"
                         :hint="$stats['total'] === 1 ? 'The only one so far' : 'All time'" />
            <x-stat-card dense label="Active" :value="number_format($stats['active'])" icon="check-circle" tone="ok"
                         :hint="$share($stats['active'])" />
            <x-stat-card dense label="Expiring Soon" :value="number_format($stats['expiring'])" icon="clock" tone="warn"
                         :hint="$stats['expiring'] === 0 ? 'Nothing due' : 'Within ' . config('licensing.expiring_soon_days', 30) . ' days'" />
            <x-stat-card dense label="Expired" :value="number_format($stats['expired'])" icon="x-circle" tone="bad"
                         :hint="$stats['expired'] === 0 ? 'None expired' : $share($stats['expired'])" />
            <x-stat-card dense label="Suspended" :value="number_format($stats['suspended'])" icon="pause" tone="warn"
                         :hint="$stats['suspended'] === 0 ? 'None suspended' : $share($stats['suspended'])" />
            <x-stat-card dense label="Domains" :value="number_format($stats['domains'])" icon="globe" tone="info"
                         :hint="number_format($stats['licenses']) . ' ' . Str::plural('licence', $stats['licenses'])" />
            <x-stat-card dense label="Revenue" :value="'Rs ' . number_format($stats['revenue'])" icon="currency" tone="ok"
                         hint="Recognised at activation" />
        </div>

        {{-- ── Filters ─────────────────────────────────────────────── --}}
        <form method="GET" action="{{ route('customers.index') }}" x-ref="filterForm" class="surface shrink-0 p-2.5">
            <div class="flex flex-wrap items-center gap-2">
                <label class="relative min-w-0 flex-1 sm:max-w-xs">
                    <span class="sr-only">Search customers</span>
                    <x-icon name="search" class="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-slate-400" />
                    <input type="search" name="q" value="{{ $filters['q'] }}"
                           placeholder="Company, contact, email, domain…"
                           class="w-full rounded-xl border border-slate-200 bg-white py-1.5 pl-9 pr-3 text-sm
                                  transition placeholder:text-slate-400 focus:border-brand-400 focus:outline-none
                                  dark:border-slate-700 dark:bg-slate-900 dark:text-white">
                </label>

                <select name="status" @change="$refs.filterForm.submit()" class="filter-select !py-1.5">
                    <option value="">All statuses</option>
                    @foreach (\App\Services\CustomerQuery::STATUSES as $value => $label)
                        <option value="{{ $value }}" @selected($filters['status'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>

                <select name="package" @change="$refs.filterForm.submit()" class="filter-select !py-1.5">
                    <option value="">All packages</option>
                    @foreach ($packages as $package)
                        <option value="{{ $package->id }}" @selected((string) $filters['package'] === (string) $package->id)>
                            {{ $package->name }}
                        </option>
                    @endforeach
                </select>

                <select name="sort" @change="$refs.filterForm.submit()" class="filter-select !py-1.5">
                    @foreach (\App\Services\CustomerQuery::SORTS as $value => $label)
                        <option value="{{ $value }}" @selected($filters['sort'] === $value)>{{ $label }}</option>
                    @endforeach
                </select>

                <button type="button" @click="advanced = !advanced"
                        class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 px-2.5 py-1.5 text-sm
                               font-medium text-slate-600 transition hover:bg-slate-50
                               dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                    <x-icon name="filter" class="size-4" />
                    <span class="hidden sm:inline">Dates</span>
                    <x-icon name="chevron-down" class="size-3.5 transition-transform" ::class="advanced && 'rotate-180'" />
                </button>

                <button type="submit"
                        class="rounded-xl bg-slate-900 px-3 py-1.5 text-sm font-semibold text-white transition
                               hover:bg-slate-700 dark:bg-white dark:text-slate-900 dark:hover:bg-slate-200">
                    Apply
                </button>

                @if ($isFiltered)
                    <a href="{{ route('customers.index', ['reset' => 1]) }}"
                       class="inline-flex items-center gap-1 rounded-xl px-2.5 py-1.5 text-sm font-medium
                              text-slate-500 transition hover:bg-slate-100 hover:text-slate-700
                              dark:text-slate-400 dark:hover:bg-slate-800">
                        <x-icon name="x" class="size-4" /> Reset
                    </a>
                @endif

                <div class="ml-auto">
                    <x-dropdown width="w-44">
                        <x-slot:trigger>
                            <button type="button"
                                    class="inline-flex items-center gap-1.5 rounded-xl border border-slate-200 px-2.5 py-1.5
                                           text-sm font-medium text-slate-600 transition hover:bg-slate-50
                                           dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                                <x-icon name="download" class="size-4" /> Export
                            </button>
                        </x-slot:trigger>

                        {{-- Exports carry the current filters, so what downloads is
                             what is on screen. --}}
                        <x-dropdown-item icon="file-text" :href="route('customers.export', array_merge($filters, ['format' => 'csv']))">CSV</x-dropdown-item>
                        <x-dropdown-item icon="chart"     :href="route('customers.export', array_merge($filters, ['format' => 'xlsx']))">Excel</x-dropdown-item>
                        <x-dropdown-item icon="file-text" :href="route('customers.export', array_merge($filters, ['format' => 'pdf']))">PDF</x-dropdown-item>
                    </x-dropdown>
                </div>
            </div>

            <div x-show="advanced" x-cloak x-transition
                 class="mt-2.5 grid grid-cols-1 gap-2.5 border-t border-slate-200 pt-2.5 sm:grid-cols-2 lg:grid-cols-5 dark:border-slate-700">
                <label class="block">
                    <span class="filter-label">Domain</span>
                    <input type="text" name="domain" value="{{ $filters['domain'] }}" placeholder="example.com" class="filter-input !py-1.5">
                </label>
                <label class="block">
                    <span class="filter-label">Created from</span>
                    <input type="date" name="created_from" value="{{ $filters['created_from'] }}" class="filter-input !py-1.5">
                </label>
                <label class="block">
                    <span class="filter-label">Created to</span>
                    <input type="date" name="created_to" value="{{ $filters['created_to'] }}" class="filter-input !py-1.5">
                </label>
                <label class="block">
                    <span class="filter-label">Expiry from</span>
                    <input type="date" name="expiry_from" value="{{ $filters['expiry_from'] }}" class="filter-input !py-1.5">
                </label>
                <label class="block">
                    <span class="filter-label">Expiry to</span>
                    <input type="date" name="expiry_to" value="{{ $filters['expiry_to'] }}" class="filter-input !py-1.5">
                </label>
            </div>

            <input type="hidden" name="per_page" :value="perPage">
        </form>

        {{-- ── Bulk action bar ─────────────────────────────────────── --}}
        <form method="POST" action="{{ route('customers.bulk') }}" x-ref="bulkForm" x-show="selected.length" x-cloak
              @submit="if (! confirm(confirmText())) $event.preventDefault()" class="shrink-0">
            @csrf
            <input type="hidden" name="action" x-model="bulkAction">
            <template x-for="id in selected" :key="id">
                <input type="hidden" name="ids[]" :value="id">
            </template>

            <div class="flex flex-wrap items-center gap-3 rounded-2xl border border-brand-200 bg-brand-50 px-3 py-2
                        dark:border-brand-500/30 dark:bg-brand-500/10">
                <span class="text-sm font-semibold text-brand-800 dark:text-brand-300">
                    <span x-text="selected.length"></span> selected
                </span>

                <div class="ml-auto flex flex-wrap items-center gap-2">
                    <button type="button" @click="run('activate')" class="bulk-btn"><x-icon name="play" class="size-4" /> Activate</button>
                    <button type="button" @click="run('suspend')" class="bulk-btn"><x-icon name="pause" class="size-4" /> Suspend</button>
                    <a :href="exportSelectedUrl()" class="bulk-btn"><x-icon name="download" class="size-4" /> Export</a>
                    <button type="button" @click="run('delete')"
                            class="bulk-btn !border-red-200 !text-red-600 hover:!bg-red-50
                                   dark:!border-red-500/30 dark:!text-red-400 dark:hover:!bg-red-500/10">
                        <x-icon name="trash" class="size-4" /> Delete
                    </button>
                    <button type="button" @click="selected = []" class="px-2 text-sm text-slate-500 hover:underline">Clear</button>
                </div>
            </div>
        </form>

        {{-- ── Grid ────────────────────────────────────────────────── --}}
        {{-- min-h-0 lets this flex child shrink so its own scroller engages
             instead of pushing the page taller. --}}
        <div class="surface flex min-h-0 flex-col overflow-hidden lg:flex-1">
            @if ($customers->isEmpty())
                <div class="flex flex-1 flex-col items-center justify-center px-6 py-12">
                    <x-empty-state icon="users"
                                   :title="$isFiltered ? 'No customers match these filters' : 'No customers found'"
                                   :message="$isFiltered
                                        ? 'Nothing here fits the current search. Widen it, or reset the filters to see everyone.'
                                        : 'Customers appear here once you add one. Each can then hold licences, domains and packages.'" />

                    <div class="mt-5 flex justify-center gap-3">
                        @if ($isFiltered)
                            <a href="{{ route('customers.index', ['reset' => 1]) }}"
                               class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600
                                      transition hover:bg-slate-50 dark:border-slate-700 dark:text-slate-300 dark:hover:bg-slate-800">
                                Reset filters
                            </a>
                        @endif
                        <a href="{{ route('customers.create') }}"
                           class="inline-flex items-center gap-2 rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold
                                  text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-brand-700">
                            <x-icon name="plus-user" class="size-4" /> Add Customer
                        </a>
                    </div>
                </div>
            @else
                <div class="scroll-slim min-h-0 flex-1 overflow-auto">
                    <table class="w-full min-w-[1180px] text-sm">
                        <thead class="sticky top-0 z-10 bg-slate-50/95 backdrop-blur dark:bg-slate-800/95">
                            <tr class="text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                <th class="w-10 px-4 py-2.5">
                                    <input type="checkbox" @change="toggleAll($event)" :checked="allSelected()"
                                           aria-label="Select all on this page" class="checkbox">
                                </th>
                                <th class="px-4 py-2.5">Company</th>
                                <th class="px-4 py-2.5">Contact</th>
                                <th class="px-4 py-2.5">Email</th>
                                <th class="px-4 py-2.5">Package</th>
                                <th class="px-4 py-2.5">Status</th>
                                <th class="px-4 py-2.5">Expiry</th>
                                <th class="px-4 py-2.5">Last Verification</th>
                                <th class="px-4 py-2.5 text-right">Revenue</th>
                                <th class="px-4 py-2.5">Created</th>
                                <th class="w-12 px-4 py-2.5"></th>
                            </tr>
                        </thead>

                        <tbody class="divide-y divide-slate-100 dark:divide-slate-700/60">
                            @foreach ($customers as $customer)
                                @include('customers.partials.row', ['customer' => $customer])
                            @endforeach
                        </tbody>
                    </table>
                </div>

                {{-- ── Pagination ──────────────────────────────────── --}}
                <div class="flex shrink-0 flex-wrap items-center justify-between gap-3 border-t border-slate-200 px-4 py-2.5 dark:border-slate-700/60">
                    <div class="flex items-center gap-2 text-xs text-slate-500 dark:text-slate-400">
                        <span>Rows</span>
                        <select @change="setPerPage($event.target.value)" class="filter-select !px-2 !py-1 !text-xs">
                            @foreach (\App\Services\CustomerQuery::PAGE_SIZES as $size)
                                <option value="{{ $size }}" @selected($filters['per_page'] === $size)>{{ $size }}</option>
                            @endforeach
                        </select>
                        <span class="hidden sm:inline">
                            {{ $customers->firstItem() }}–{{ $customers->lastItem() }} of
                            <span class="font-semibold text-slate-700 dark:text-slate-200">{{ number_format($customers->total()) }}</span>
                        </span>
                    </div>

                    <div class="flex items-center gap-1">
                        <a href="{{ $customers->previousPageUrl() ?: '#' }}"
                           @class(['page-btn', 'pointer-events-none opacity-40' => ! $customers->previousPageUrl()])
                           aria-label="Previous page"><x-icon name="chevron-left" class="size-4" /></a>

                        {{-- A window around the current page rather than every page:
                             a hundred numbered links is not navigation. --}}
                        @php
                            $last    = $customers->lastPage();
                            $current = $customers->currentPage();
                            $from    = max(1, min($current - 2, $last - 4));
                            $to      = min($last, max($current + 2, 5));
                        @endphp

                        @if ($from > 1)
                            <a href="{{ $customers->url(1) }}" class="page-btn">1</a>
                            @if ($from > 2)<span class="px-1 text-xs text-slate-400">…</span>@endif
                        @endif

                        @for ($p = $from; $p <= $to; $p++)
                            <a href="{{ $customers->url($p) }}"
                               @class([
                                   'page-btn text-xs font-semibold',
                                   '!border-brand-500 !bg-brand-600 !text-white' => $p === $current,
                               ])>{{ $p }}</a>
                        @endfor

                        @if ($to < $last)
                            @if ($to < $last - 1)<span class="px-1 text-xs text-slate-400">…</span>@endif
                            <a href="{{ $customers->url($last) }}" class="page-btn text-xs font-semibold">{{ $last }}</a>
                        @endif

                        <a href="{{ $customers->nextPageUrl() ?: '#' }}"
                           @class(['page-btn', 'pointer-events-none opacity-40' => ! $customers->nextPageUrl()])
                           aria-label="Next page"><x-icon name="chevron-right" class="size-4" /></a>
                    </div>
                </div>
            @endif
        </div>

        {{-- ── Profile drawer ──────────────────────────────────────── --}}
        <div x-show="drawer" x-cloak @click="closeDrawer()"
             x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
             x-transition:leave="transition ease-in duration-150" x-transition:leave-end="opacity-0"
             class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm"></div>

        <aside x-show="drawer" x-cloak
               x-transition:enter="transition ease-out duration-200"
               x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
               x-transition:leave="transition ease-in duration-150"
               x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
               class="fixed inset-y-0 right-0 z-50 flex w-full max-w-xl flex-col bg-white shadow-2xl dark:bg-slate-900"
               role="dialog" aria-modal="true" aria-label="Customer profile">

            <div class="flex h-16 shrink-0 items-center justify-between border-b border-slate-200 px-5 dark:border-slate-700">
                <h2 class="text-sm font-semibold text-slate-900 dark:text-white" x-text="drawerTitle || 'Customer'"></h2>
                <button @click="closeDrawer()" aria-label="Close"
                        class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                               dark:hover:bg-slate-800 dark:hover:text-white">
                    <x-icon name="x" class="size-5" />
                </button>
            </div>

            <div class="scroll-slim min-h-0 flex-1 overflow-y-auto p-5">
                {{-- Skeleton while the profile is fetched, so the panel never
                     opens onto a blank rectangle. --}}
                <div x-show="drawerLoading" class="space-y-3">
                    <div class="flex items-center gap-4">
                        <div class="size-14 animate-pulse rounded-2xl bg-slate-200 dark:bg-slate-800"></div>
                        <div class="flex-1 space-y-2">
                            <div class="h-4 w-1/2 animate-pulse rounded bg-slate-200 dark:bg-slate-800"></div>
                            <div class="h-3 w-1/3 animate-pulse rounded bg-slate-100 dark:bg-slate-800/60"></div>
                        </div>
                    </div>
                    @for ($i = 0; $i < 5; $i++)
                        <div class="h-16 animate-pulse rounded-xl bg-slate-100 dark:bg-slate-800/60"></div>
                    @endfor
                </div>

                <div x-show="! drawerLoading" x-html="drawerHtml"></div>
            </div>
        </aside>
    </div>
@endsection