@extends('layouts.app')
@section('title', 'Customers')
@section('heading', 'Customers')
@section('content')
<form method="GET" class="flex flex-wrap items-end gap-3" role="search">
    <div class="w-full max-w-md"><label for="q" class="mb-1 block text-xs font-medium text-muted">Search name, phone, email, ID number or KRA PIN</label>
        <input id="q" name="q" value="{{ $q }}" class="field" autocomplete="off"></div>
    <button class="btn-primary">Search</button>
    @can('customers.create')<a href="{{ route('customers.create') }}" class="btn-quiet">Add customer</a>@endcan
</form>
<div class="mt-4 overflow-x-auto rounded-lg border border-line bg-panel">
    <table class="min-w-full text-left text-sm">
        <caption class="sr-only">Customers</caption>
        <thead class="border-b border-line bg-ground text-xs text-muted"><tr><th scope="col" class="px-3 py-2 font-medium">Name</th><th scope="col" class="px-3 py-2 font-medium">Phone</th><th scope="col" class="px-3 py-2 font-medium">Email</th><th scope="col" class="px-3 py-2 text-right font-medium">Leads</th><th scope="col" class="px-3 py-2 text-right font-medium">Test drives</th></tr></thead>
        <tbody class="divide-y divide-line">
        @forelse ($customers as $c)
            <tr class="hover:bg-ground/60"><td class="px-3 py-2 font-medium"><a class="underline decoration-line underline-offset-2" href="{{ route('customers.show', $c) }}">{{ $c->name }}</a>@if ($c->company_name)<span class="block text-xs text-muted">{{ $c->company_name }}</span>@endif</td>
                <td class="px-3 py-2">{{ $c->display_phone }}</td><td class="px-3 py-2">{{ $c->email }}</td><td class="px-3 py-2 text-right">{{ $c->leads_count }}</td><td class="px-3 py-2 text-right">{{ $c->test_drives_count }}</td></tr>
        @empty
            <tr><td colspan="5" class="px-3 py-10 text-center text-muted">No customers found.</td></tr>
        @endforelse
        </tbody>
    </table>
</div>
<div class="mt-3">{{ $customers->links() }}</div>
@endsection