@extends('layouts.app')
@section('content')
<div class="max-w-6xl mx-auto p-6">
    <h1 class="text-xl font-semibold mb-4">Customers</h1>
    @if(session('success'))<div class="p-3 mb-4 bg-green-100 text-green-800 rounded">{{ session('success') }}</div>@endif
    <form method="GET" class="mb-4 flex items-end gap-3">
        <div class="flex-1">
            <label class="block text-sm font-medium mb-1">Search</label>
            <input type="text" name="q" value="{{ $q }}" class="w-full border rounded p-2" placeholder="Name, CNIC, Phone">
        </div>
        <div>
            <button class="px-4 py-2 bg-gray-800 text-white rounded">Filter</button>
        </div>
        <div>
            <a href="{{ route('customers.create') }}" class="px-4 py-2 bg-green-600 text-white rounded">New Customer</a>
        </div>
    </form>
    <div class="bg-white rounded shadow overflow-hidden">
        <table class="min-w-full">
            <thead class="bg-gray-50">
                <tr>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">CNIC</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Name</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Phone</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">City</th>
                    <th class="px-4 py-2 text-left text-xs font-medium text-gray-500">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                @foreach($customers as $c)
                <tr>
                    <td class="px-4 py-2">{{ $c->cnic }}</td>
                    <td class="px-4 py-2">{{ $c->name }}</td>
                    <td class="px-4 py-2">{{ $c->phone }}</td>
                    <td class="px-4 py-2">{{ $c->city }}</td>
                    <td class="px-4 py-2 space-x-2">
                        <a href="{{ route('customers.edit', $c) }}" class="text-blue-600">Edit</a>
                        <form action="{{ route('customers.destroy', $c) }}" method="POST" class="inline" onsubmit="return confirm('Are you sure?')">
                            @csrf @method('DELETE')
                            <button class="text-red-600">Delete</button>
                        </form>
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
    <div class="mt-4">
        {{ $customers->links() }}
    </div>
</div>
@endsection