<div class="space-y-5">
    <div class="rounded-[1.45rem] border border-ink-100 bg-white shadow-sm">
        <div class="border-b border-ink-100 p-4 md:px-5">
            <div class="flex flex-col gap-3 md:flex-row md:items-center">
                <div class="relative min-w-0 flex-1">
                    <svg class="absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-ink-400" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" /></svg>
                    <input type="search" wire:model.live.debounce.300ms="search" placeholder="Buscar cliente..."
                        class="w-full rounded-2xl border border-ink-100 bg-ink-50 py-3 pl-10 pr-4 text-sm text-ink-900 transition placeholder:text-ink-400 focus:border-violet-300 focus:bg-white focus:outline-none focus:ring-2 focus:ring-violet-500/20 md:rounded-xl md:py-2.5">
                </div>
                <div class="grid grid-cols-2 gap-2 md:flex md:items-center">
                    <select wire:model.live="filter" class="w-full rounded-2xl border border-ink-100 bg-white px-3 py-3 text-sm font-semibold text-ink-700 focus:border-violet-300 focus:outline-none focus:ring-2 focus:ring-violet-500/20 md:w-auto md:rounded-xl md:py-2.5">
                        <option value="">Todos</option>
                        <option value="frequent">Frecuentes</option>
                        <option value="inactive">Inactivos</option>
                    </select>
                    <a href="{{ route('tenant.customers.create') }}" class="btn btn-primary btn-md justify-center md:w-auto">
                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" /></svg>
                        Añadir
                    </a>
                </div>
            </div>
        </div>

        <div class="divide-y divide-ink-100 md:hidden">
            @forelse ($customers as $c)
                <a href="{{ route('tenant.customers.edit', $c) }}" class="block p-4 active:bg-ink-50">
                    <div class="flex items-start gap-3">
                        <div class="flex h-12 w-12 shrink-0 items-center justify-center rounded-2xl bg-violet-50 text-base font-black text-violet-700">
                            {{ strtoupper(substr($c->first_name ?: $c->fullName(), 0, 1)) }}
                        </div>
                        <div class="min-w-0 flex-1">
                            <div class="flex items-start justify-between gap-3">
                                <div class="min-w-0">
                                    <h3 class="truncate text-base font-black leading-tight text-ink-900">{{ $c->fullName() }}</h3>
                                    <p class="mt-1 truncate text-xs text-ink-500">{{ $c->email ?? 'Sin correo' }}</p>
                                </div>
                                <span class="mt-1 text-lg leading-none text-ink-300">→</span>
                            </div>
                            <div class="mt-3 grid grid-cols-3 gap-2 text-center">
                                <div class="rounded-2xl bg-ink-50 px-2 py-2">
                                    <p class="text-xs font-black text-ink-900">{{ $c->total_bookings }}</p>
                                    <p class="mt-0.5 text-[10px] font-bold uppercase tracking-wide text-ink-400">Reservas</p>
                                </div>
                                <div class="rounded-2xl bg-emerald-50 px-2 py-2">
                                    <p class="truncate text-xs font-black text-emerald-700">$ {{ number_format($c->total_spent, 0, ',', '.') }}</p>
                                    <p class="mt-0.5 text-[10px] font-bold uppercase tracking-wide text-emerald-500">Gastado</p>
                                </div>
                                <div class="rounded-2xl bg-violet-50 px-2 py-2">
                                    <p class="truncate text-xs font-black text-violet-700">{{ $c->last_booking_at?->diffForHumans() ?? '—' }}</p>
                                    <p class="mt-0.5 text-[10px] font-bold uppercase tracking-wide text-violet-500">Visita</p>
                                </div>
                            </div>
                            <p class="mt-3 truncate text-xs text-ink-400">{{ $c->phone ?: 'Sin teléfono' }}</p>
                        </div>
                    </div>
                </a>
            @empty
                <div class="p-8 text-center">
                    <p class="text-sm font-black text-ink-800">No hay clientes</p>
                    <p class="mt-1 text-xs text-ink-400">Cuando creen una reserva aparecerán aquí.</p>
                    <a href="{{ route('tenant.customers.create') }}" class="btn btn-primary btn-sm mt-4">Añadir cliente</a>
                </div>
            @endforelse
        </div>

        <div class="hidden overflow-x-auto md:block">
            <table class="w-full">
                <thead>
                    <tr class="border-b border-ink-100 bg-ink-50/70">
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Cliente</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Teléfono</th>
                        <th class="px-5 py-3.5 text-center text-xs font-semibold uppercase tracking-wider text-ink-500">Reservas</th>
                        <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-ink-500">Total gastado</th>
                        <th class="px-5 py-3.5 text-left text-xs font-semibold uppercase tracking-wider text-ink-500">Última visita</th>
                        <th class="px-5 py-3.5 text-right text-xs font-semibold uppercase tracking-wider text-ink-500">Acciones</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-ink-100">
                    @forelse ($customers as $c)
                        <tr class="cursor-pointer transition-colors hover:bg-violet-50/30" onclick="window.location='{{ route('tenant.customers.edit', $c) }}'">
                            <td class="px-5 py-4">
                                <p class="font-semibold text-ink-900">{{ $c->fullName() }}</p>
                                <p class="mt-0.5 text-xs text-ink-500">{{ $c->email ?? '—' }}</p>
                            </td>
                            <td class="px-5 py-4 text-ink-600">{{ $c->phone ?: '—' }}</td>
                            <td class="px-5 py-4 text-center text-ink-700">{{ $c->total_bookings }}</td>
                            <td class="px-5 py-4 text-right font-mono font-bold text-ink-900">$ {{ number_format($c->total_spent, 0, ',', '.') }}</td>
                            <td class="px-5 py-4 text-xs text-ink-500">{{ $c->last_booking_at?->diffForHumans() ?? '—' }}</td>
                            <td class="px-5 py-4 text-right">
                                <a href="{{ route('tenant.customers.edit', $c) }}" class="text-sm font-bold text-violet-600 hover:text-violet-700">Ver →</a>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-5 py-16"><x-empty-state title="No hay clientes" /></td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if ($customers->hasPages())
            <div class="border-t border-ink-100 bg-ink-50/40 px-4 py-3.5 md:px-5">{{ $customers->links() }}</div>
        @endif
    </div>
</div>
