@extends('layouts.app')

@section('content')
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-3xl font-bold">Customers</h1>
        <a href="{{ route('customers.create') }}" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">+ New Customer</a>
    </div>

    <div class="bg-white rounded shadow overflow-hidden">
        <table class="w-full text-left">
            <thead class="bg-gray-200">
                <tr>
                    <th class="p-4">Name</th>
                    <th class="p-4">Email</th>
                    <th class="p-4">Status</th>
                </tr>
            </thead>
            <tbody>
                @forelse($customers as $customer)
                <tr class="border-b hover:bg-gray-50">
                    <td class="p-4">{{ $customer->name }}</td>
                    <td class="p-4">{{ $customer->email }}</td>
                    <td class="p-4">
                        <span class="px-2 py-1 text-xs rounded 
                            @if($customer->status == 'active') bg-green-200 text-green-800
                            @elseif($customer->status == 'lead') bg-yellow-200 text-yellow-800
                            @else bg-gray-200 text-gray-800 @endif">
                            {{ ucfirst($customer->status) }}
                        </span>
                    </td>
                </tr>
                @empty
                <tr><td colspan="3" class="p-4 text-center">No customers found.</td></tr>
                @endforelse
            </tbody>
        </table>
    </div>
    <div class="mt-4">{{ $customers->links() }}</div>
@endsection