# ContactForm Client Dropdown Fix

## Problem
The client dropdown in ContactForm was showing "Aucun client trouvé" even when the API returned results. The component was trying to iterate over `client` in the template but reference it as `contact` which didn't exist.

## Issues Found

### 1. Variable Name Mismatch (Line 51, 57)
```vue
<!-- WRONG -->
<button v-for="client in props.searchResults" @mousedown="selectContact(contact)">
  <strong>{{ contact.name }}</strong>
</button>

<!-- FIXED -->
<button v-for="client in props.searchResults" @mousedown="selectClient(client)">
  <strong>{{ client.name }}</strong>
</button>
```

**Why it failed**: The loop variable was `client` but the template tried to access `contact`, which was undefined, causing nothing to render.

### 2. Missing Method
The component was calling `selectClient()` but only had `selectContact()` method defined.

### 3. Event Emission Mismatch
The component was emitting `searchClient` in the code but the parent might be listening for `searchContact`.

## Changes Made

### 1. Fixed Template Variable References
- Changed `@mousedown="selectContact(contact)"` → `@mousedown="selectClient(client)"`
- Changed `{{ contact.name }}` → `{{ client.name }}`
- Added client email display in dropdown

### 2. Added `selectClient()` Method
```javascript
const selectClient = (client) => {
  selectedContact.value = client;
  
  // Split name into first/last if needed
  if (client.name) {
    const nameParts = client.name.split(' ');
    if (nameParts.length > 1) {
      form.value.first_name = nameParts[0];
      form.value.last_name = nameParts.slice(1).join(' ');
    } else {
      form.value.first_name = client.name;
    }
  }
  
  form.value.email = client.email || "";
  form.value.phone = client.phone || "";
  form.value.mobile = client.mobile || "";
  
  searchQuery.value = "";
  showDropdown.value = false;
  
  emit("clientSelected", client.id);
};
```

### 3. Updated Emits Declaration
Added `searchClient` and `clientSelected` to the emits array:
```javascript
const emit = defineEmits([
  "createContact", 
  "searchClient",      // For searching clients
  "clientSelected",    // When a client is selected
  "contactSelected"    // When a contact is selected
]);
```

## How It Works Now

1. User types in search input → emits `searchClient` event
2. Parent component makes API call to `/api/clients/searchBy?name=...`
3. Results are passed back via `searchResults` prop
4. Dropdown shows clients with name and email
5. User clicks a client → `selectClient()` is called
6. Form is pre-filled with client data (name split into first/last, email, phone)
7. Parent receives `clientSelected` event with client ID

## Testing

To verify the fix works:

1. Start typing a client name in the search field
2. The dropdown should now display the matching clients
3. Click on a client
4. The form should pre-fill with the client's information
5. The contact can then be created and linked to that client

## File Modified
- `src/components/molecules/form/ContactForm.vue`