@extends('admin.layouts.app')
@section('title', 'Customers')

@section('content')
<div class="space-y-5">
    <form method="GET" class="bg-white rounded-xl border border-slate-200 p-4 flex gap-3 items-end">
        <div>
            <label class="block text-xs font-medium text-slate-500 mb-1">Search</label>
            <input type="text" name="search" value="{{ request('search') }}"
                placeholder="Phone, email or name..."
                class="px-3 py-2 border border-slate-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 w-64">
        </div>
        <button type="submit" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700">Search</button>
        <a href="{{ route('admin.customers.index') }}" class="px-4 py-2 bg-slate-100 text-slate-600 text-sm font-medium rounded-lg hover:bg-slate-200">Reset</a>
    </form>

    <div class="bg-white rounded-xl border border-slate-200 overflow-hidden">
        <table class="w-full text-sm">
            <thead class="bg-slate-50 border-b border-slate-200">
                <tr class="text-left text-xs text-slate-500 font-medium">
                    <th class="px-5 py-3">Customer</th>
                    <th class="px-5 py-3">Phone</th>
                    <th class="px-5 py-3">Email</th>
                    <th class="px-5 py-3">Orders</th>
                    <th class="px-5 py-3">Joined</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse($customers as $customer)
                <tr class="hover:bg-slate-50">
                    <td class="px-5 py-3.5">
                        <div class="flex items-center gap-3">
                            <div class="w-8 h-8 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center text-xs font-bold flex-shrink-0">
                                {{ strtoupper(substr($customer->first_name ?? $customer->phone, 0, 1)) }}
                            </div>
                            <div>
                                <div class="font-medium text-slate-700">{{ $customer->first_name }} {{ $customer->last_name }}</div>
                                @if($customer->is_guest)<span class="text-xs text-slate-400">Guest</span>@endif
                            </div>
                        </div>
                    </td>
                    <td class="px-5 py-3.5 text-slate-600">{{ $customer->phone }}</td>
                    <td class="px-5 py-3.5 text-slate-500 text-xs">{{ $customer->email ?? '—' }}</td>
                    <td class="px-5 py-3.5"><span class="px-2 py-0.5 bg-indigo-50 text-indigo-700 rounded-full text-xs font-medium">{{ $customer->orders_count }}</span></td>
                    <td class="px-5 py-3.5 text-slate-400 text-xs">{{ $customer->created_at->format('d M Y') }}</td>
                </tr>
                @empty
                <tr><td colspan="5" class="px-5 py-12 text-center text-slate-400">No customers found</td></tr>
                @endforelse
            </tbody>
        </table>
        @if($customers->hasPages())
        <div class="px-5 py-4 border-t border-slate-100">{{ $customers->links() }}</div>
        @endif
    </div>
</div>
@endsection