@php($settings = app(\App\Support\AppSettings::class)->all())

<x-layouts.app heading="Customers">
    <div class="mb-5 flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
        <form class="flex max-w-xl flex-1 gap-2">
            <input name="search" value="{{ request('search') }}" class="h-10 w-full rounded border border-zinc-300 bg-white px-3 text-sm outline-none focus:border-emerald-500" placeholder="Search name, phone, email">
            <button class="inline-flex h-10 items-center gap-2 rounded bg-zinc-900 px-4 text-sm font-semibold text-white">
                <i data-lucide="search" class="h-4 w-4"></i>
                Search
            </button>
        </form>
        <a href="{{ route('customers.create') }}" class="inline-flex h-10 items-center gap-2 rounded bg-emerald-600 px-4 text-sm font-semibold text-white hover:bg-emerald-700">
            <i data-lucide="user-plus" class="h-4 w-4"></i>
            Customer
        </a>
    </div>

    <div class="overflow-hidden rounded border border-zinc-200 bg-white shadow-sm">
        <table class="w-full text-left text-sm">
            <thead class="bg-zinc-50 text-xs uppercase text-zinc-500">
                <tr>
                    <th class="px-5 py-3">Customer</th>
                    <th class="px-5 py-3">Clinical Notes</th>
                    <th class="px-5 py-3 text-right">Purchases</th>
                    <th class="px-5 py-3 text-right">Loyalty</th>
                    <th class="px-5 py-3 text-right">Due</th>
                    <th class="px-5 py-3 text-right">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-zinc-100">
                @forelse ($customers as $customer)
                    <tr class="hover:bg-zinc-50">
                        <td class="px-5 py-4">
                            <p class="font-semibold">{{ $customer->name }}</p>
                            <p class="text-xs text-zinc-500">{{ $customer->phone }} {{ $customer->email ? '- '.$customer->email : '' }}</p>
                        </td>
                        <td class="px-5 py-4">
                            <p class="max-w-md truncate text-zinc-700">{{ $customer->allergies ?: 'No allergy notes' }}</p>
                            <p class="max-w-md truncate text-xs text-zinc-500">{{ $customer->notes }}</p>
                        </td>
                        <td class="px-5 py-4 text-right">{{ $customer->sales_count }}</td>
                        <td class="px-5 py-4 text-right">{{ $customer->loyalty_points }}</td>
                        <td class="px-5 py-4 text-right font-semibold">{{ $settings['currency'] }} {{ number_format($customer->current_due, 2) }}</td>
                        <td class="px-5 py-4">
                            <div class="flex justify-end gap-2">
                                <a href="{{ route('customers.edit', $customer) }}" class="rounded border border-zinc-300 p-2 text-zinc-700 hover:bg-zinc-100" title="Edit"><i data-lucide="pencil" class="h-4 w-4"></i></a>
                                <form method="POST" action="{{ route('customers.destroy', $customer) }}">
                                    @csrf @method('DELETE')
                                    <button class="rounded border border-zinc-300 p-2 text-zinc-700 hover:bg-zinc-100" title="Delete"><i data-lucide="trash-2" class="h-4 w-4"></i></button>
                                </form>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr><td colspan="6" class="px-5 py-10 text-center text-zinc-500">No customers found.</td></tr>
                @endforelse
            </tbody>
        </table>
        <div class="border-t border-zinc-200 px-5 py-4">{{ $customers->links() }}</div>
    </div>
</x-layouts.app>