@php
    $badge = ['lead' => 'bg-amber-100 text-amber-700', 'prospect' => 'bg-blue-100 text-blue-700', 'client' => 'bg-green-100 text-green-700', 'inactive' => 'bg-gray-100 text-gray-600'];
    $sortLink = function ($key, $label) use ($sort, $dir) {
        $nd = ($sort === $key && $dir === 'asc') ? 'desc' : 'asc';
        $url = request()->fullUrlWithQuery(['sort' => $key, 'dir' => $nd]);
        $arrow = $sort === $key ? ($dir === 'asc' ? ' ↑' : ' ↓') : '';
        return '<a href="'.$url.'" class="hover:text-primary">'.$label.$arrow.'</a>';
    };
@endphp
<x-app-layout title="Contacts">
    <x-page-header title="Contacts" subtitle="Leads, prospects and clients">
        @if(auth()->user()?->hasPermission('crm.contacts.create'))
            <a href="{{ route('crm.contacts.create') }}" class="bg-primary text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-primary-700">+ New Contact</a>
        @endif
    </x-page-header>

    <x-card class="mb-4" padding="p-4">
        <form method="GET" class="flex flex-wrap gap-3 items-center">
            <input name="q" value="{{ request('q') }}" placeholder="Search name, email, company..."
                   class="flex-1 min-w-[220px] rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
            <select name="type" class="rounded-lg border-gray-200 text-sm focus:ring-primary focus:border-primary">
                <option value="">All types</option>
                @foreach(['lead','prospect','client','inactive'] as $t)
                    <option value="{{ $t }}" @selected(request('type')===$t)>{{ ucfirst($t) }}</option>
                @endforeach
            </select>
            <button class="bg-gray-800 text-white px-4 py-2 rounded-lg text-sm">Filter</button>
        </form>
    </x-card>

    <x-card padding="p-0">
        <table class="w-full text-sm">
            <thead class="text-left text-gray-500 border-b border-gray-100">
                <tr>
                    <th class="px-6 py-3">{!! $sortLink('display', 'Name') !!}</th>
                    <th class="px-6 py-3">{!! $sortLink('email', 'Email') !!}</th>
                    <th class="px-6 py-3">Phone</th>
                    <th class="px-6 py-3">{!! $sortLink('type', 'Type') !!}</th>
                    <th class="px-6 py-3">{!! $sortLink('created', 'Added') !!}</th>
                    <th class="px-6 py-3"></th>
                </tr>
            </thead>
            <tbody>
                @forelse($contacts as $contact)
                    <tr class="border-b border-gray-50 hover:bg-gray-50">
                        <td class="px-6 py-3 font-medium">
                            <a href="{{ route('crm.contacts.show', $contact) }}" class="hover:text-primary">{{ $contact->display_name }}</a>
                        </td>
                        <td class="px-6 py-3 text-gray-600">{{ $contact->email ?: '—' }}</td>
                        <td class="px-6 py-3 text-gray-600">{{ $contact->phone ?: '—' }}</td>
                        <td class="px-6 py-3"><span class="px-2 py-0.5 rounded-full text-xs {{ $badge[$contact->type] ?? '' }}">{{ ucfirst($contact->type) }}</span></td>
                        <td class="px-6 py-3 text-gray-500">{{ $contact->created_at->format('Y-m-d') }}</td>
                        <td class="px-6 py-3 text-right">
                            @if(auth()->user()?->hasPermission('crm.contacts.edit'))
                                <a href="{{ route('crm.contacts.edit', $contact) }}" class="text-primary hover:underline">Edit</a>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-6 py-10 text-center text-gray-400">No contacts found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </x-card>

    <div class="mt-4">{{ $contacts->links() }}</div>
</x-app-layout>