@forelse($customers as $customer)
    <tr class="group hover:bg-gray-50">
        <td class="px-6 py-4">
            <div class="flex items-center gap-3">
                @if($customer->image && file_exists(storage_path('app/public/' . $customer->image)))
                    <div class="h-10 w-10 shrink-0 rounded-full bg-cover bg-center" style="background-image: url('{{ asset('storage/' . $customer->image) }}');"></div>
                @else
                    <div class="h-10 w-10 shrink-0 rounded-full bg-gradient-to-br from-primary/20 to-primary/40 flex items-center justify-center text-primary font-bold">
                        {{ strtoupper(substr($customer->name, 0, 1)) }}
                    </div>
                @endif
                <div class="font-medium text-gray-900">{{ $customer->name }}</div>
            </div>
        </td>
        <td class="px-6 py-4">
            <div class="flex flex-col">
                <span class="text-gray-900">{{ $customer->email ?? 'N/A' }}</span>
                <span class="text-xs text-gray-500">{{ $customer->phone ?? 'N/A' }}</span>
            </div>
        </td>
        <td class="px-6 py-4 text-center">
            <span class="inline-flex items-center rounded-md bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-800">{{ $customer->invoices ? $customer->invoices->count() : 0 }}</span>
        </td>
        <td class="px-6 py-4 text-right">
            @php
                $balance = $customer->invoices ? $customer->invoices->sum('balance') : 0;
            @endphp
            <div class="font-medium {{ $balance > 0 ? 'text-red-600' : 'text-gray-900' }}">${{ number_format($balance ?? 0, 2) }}</div>
            @if($balance > 0)
                <div class="text-xs text-gray-400">Overdue</div>
            @endif
        </td>
        <td class="px-6 py-4 text-center">
            <span class="inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium {{ $customer->is_active ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' }}">
                {{ $customer->is_active ? 'Active' : 'Inactive' }}
            </span>
        </td>
        <td class="px-6 py-4 text-right">
            <div class="flex items-center justify-end gap-2 opacity-0 transition-opacity group-hover:opacity-100">
                <a href="{{ route('admin.customers.show', $customer) }}" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-primary" title="View Customer">
                    <span class="material-symbols-outlined text-[20px]">visibility</span>
                </a>
                <a href="{{ route('admin.customers.edit', $customer) }}" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-primary" title="Edit Customer">
                    <span class="material-symbols-outlined text-[20px]">edit</span>
                </a>
                <button type="button" onclick="openDeleteModal({{ $customer->id }}, '{{ addslashes($customer->name) }}')" class="rounded p-1 text-gray-500 hover:bg-gray-100 hover:text-red-600" title="Delete Customer">
                    <span class="material-symbols-outlined text-[20px]">delete</span>
                </button>
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="6" class="px-6 py-8 text-center text-gray-500">No customers found</td>
    </tr>
@endforelse