<x-layouts.admin title="Customers">
    <x-admin.page-header title="Customers" subtitle="{{ $customers->total() }} registered" />

    <form method="GET" class="mb-4">
        <div class="relative max-w-sm">
            <i class="fa-solid fa-magnifying-glass absolute left-3 top-1/2 -translate-y-1/2 text-xs text-ink/30"></i>
            <x-admin.input type="search" name="search" value="{{ request('search') }}" placeholder="Search by name or email" class="pl-9" />
        </div>
    </form>

    <x-admin.card :padded="false">
        @if ($customers->isEmpty())
            <x-admin.empty-state icon="fa-solid fa-users" title="No customers yet" subtitle="Customers appear here once they register on the storefront." />
        @else
            <div class="overflow-x-auto">
                <table class="data-table">
                    <thead>
                        <tr>
                            <th>Customer</th>
                            <th>Phone</th>
                            <th>Orders</th>
                            <th>Joined</th>
                            <th class="text-right">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($customers as $customer)
                            <tr>
                                <td>
                                    <div class="flex items-center gap-3">
                                        <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-champagne/15 text-xs font-semibold text-champagne-light">
                                            {{ Str::of($customer->name)->substr(0, 1)->upper() }}
                                        </div>
                                        <div>
                                            <p class="font-medium text-ink">{{ $customer->name }}</p>
                                            <p class="text-xs text-ink/40">{{ $customer->email }}</p>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-ink/60">{{ $customer->phone ?? '—' }}</td>
                                <td class="tabular-nums text-ink/60">{{ $customer->orders_count }}</td>
                                <td class="text-ink/50">{{ $customer->created_at->format('d M Y') }}</td>
                                <td class="text-right">
                                    <a href="{{ route('admin.customers.show', $customer) }}" class="text-ink/50 hover:text-ink" title="View">
                                        <i class="fa-solid fa-eye"></i>
                                    </a>
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>

            <div class="border-t border-black/5 px-5 py-4">
                {{ $customers->links() }}
            </div>
        @endif
    </x-admin.card>
</x-layouts.admin>
