<div>
    <div class="flex justify-between items-center mb-6">
        <h2 class="text-2xl font-bold">لیست مشتریان</h2>
        <a href="/customers/create" class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
            مشتری جدید
        </a>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border p-6">
        <input type="text" wire:model.live="search" placeholder="جستجو..." class="w-full border p-3 rounded-xl mb-4">

        <table class="w-full">
            <thead>
                <tr class="border-b">
                    <th class="text-right py-3 px-4">نام</th>
                    <th class="text-right py-3 px-4">تلفن</th>
                    <th class="text-right py-3 px-4">شهر</th>
                    <th class="text-right py-3 px-4">وضعیت</th>
                </tr>
            </thead>
            <tbody>
                @forelse($customers as $customer)
                    <tr class="border-b hover:bg-gray-50">
                        <td class="py-4 px-4">{{ $customer->first_name }} {{ $customer->last_name }}</td>
                        <td class="py-4 px-4">{{ $customer->phone }}</td>
                        <td class="py-4 px-4">{{ $customer->city ?? '-' }}</td>
                        <td class="py-4 px-4">
                            <span class="px-3 py-1 text-xs rounded-full bg-green-100 text-green-700">
                                {{ $customer->status }}
                            </span>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="py-8 text-center text-gray-500">مشتری‌ای یافت نشد.</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>