@extends('layouts.app')
@section('title', 'Contacts')
@section('page-title', 'Contacts')
@section('content')
<div class="card">
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover mb-0">
                <thead class="table-light">
                    <tr><th>Name</th><th>Phone</th><th>Push Name</th><th>Type</th><th>Added</th></tr>
                </thead>
                <tbody>
                    @forelse($contacts as $contact)
                    <tr>
                        <td class="fw-semibold">{{ $contact->name ?? '-' }}</td>
                        <td>{{ $contact->phone }}</td>
                        <td>{{ $contact->push_name ?? '-' }}</td>
                        <td><span class="badge bg-{{ $contact->is_group ? 'info' : 'light text-dark' }}">{{ $contact->is_group ? 'Group' : 'Contact' }}</span></td>
                        <td class="small text-muted">{{ $contact->created_at->diffForHumans() }}</td>
                    </tr>
                    @empty
                    <tr><td colspan="5" class="text-center text-muted py-4">No contacts yet. Contacts will appear here after syncing with your device.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
<div class="mt-3">{{ $contacts->links() }}</div>
@endsection