# Complaint Form Fixes Summary

## Issue Description
The patient records were not appearing in the complaint form, and several AJAX endpoints were pointing to incorrect URLs.

## Root Causes Identified

### 1. Incorrect AJAX Endpoint URLs
The JavaScript was calling non-existent API endpoints:
- `/api/departments/` - Does not exist
- `/complaints/ajax/get-staff-by-department/` - Wrong endpoint name
- `/api/patients/` - Does not exist

### 2. Incorrect API Response Parsing
JavaScript was expecting data in `results` property, but backend returns different formats:
- Departments: returns `data.departments`
- Patients: returns `data.patients`
- Staff: returns `data.staff`

### 3. Missing Classification Section
The form was missing the Classification section (Category, Subcategory, Source) required by the model.

## Fixes Applied

### File: `templates/complaints/complaint_form.html`

#### 1. Fixed AJAX Endpoint URLs

**Before:**
```javascript
fetch(`/api/departments/?hospital=${hospitalId}`)
fetch(`/complaints/ajax/get-staff-by-department/?department_id=${departmentId}`)
fetch(`/api/patients/?search=${encodeURIComponent(searchTerm)}`)
```

**After:**
```javascript
fetch(`/complaints/ajax/departments/?hospital=${hospitalId}`)
fetch(`/complaints/ajax/physicians/?department_id=${departmentId}`)
fetch(`/complaints/ajax/search-patients/?q=${encodeURIComponent(searchTerm)}`)
```

#### 2. Fixed Data Response Parsing

**Before:**
```javascript
data.results.forEach(dept => { ... })
data.results.forEach(patient => { ... })
```

**After:**
```javascript
data.departments.forEach(dept => { ... })
data.patients.forEach(patient => { ... })
data.staff.forEach(staff => { ... })
```

#### 3. Added Patient Search Input
Added a text input and search button for searching patients by MRN or name:
- Search input field with placeholder
- Search button with icon
- Patient select dropdown populated on search
- Minimum 2 characters required for search

#### 4. Added Classification Section
Added missing form fields:
- Category dropdown (required)
- Subcategory dropdown (optional)
- Source dropdown (required) with options: Email, Phone, Walk-in, Online, Social Media, Third Party, Other

#### 5. Improved User Experience
- Added patient search on Enter key
- Added patient search on button click
- Validation for minimum 2 characters for patient search
- Better error messages for loading failures

## URL Configuration

All endpoints are correctly configured in `apps/complaints/urls.py`:
- `/complaints/ajax/departments/` → `get_departments_by_hospital`
- `/complaints/ajax/physicians/` → `get_staff_by_department`
- `/complaints/ajax/search-patients/` → `search_patients`
- `/complaints/public/api/load-categories/` → `api_load_categories`

## Backend View Responses

### `search_patients` (ui_views.py)
Returns: `{'patients': [...]}`
```python
results = [
    {
        'id': str(p.id),
        'mrn': p.mrn,
        'name': p.get_full_name(),
        'phone': p.phone,
        'email': p.email,
    }
    for p in patients
]
return JsonResponse({'patients': results})
```

### `get_staff_by_department` (ui_views.py)
Returns: `{'staff': [...]}`

### `get_departments_by_hospital` (ui_views.py)
Returns: `{'departments': [...]}`

## Testing Instructions

1. Navigate to the complaint form: `/complaints/new/`
2. **Test Hospital Selection**: Select a hospital - departments and categories should load
3. **Test Department Selection**: Select a department - staff should load
4. **Test Category Selection**: Select a category - subcategories should load
5. **Test Patient Search**: 
   - Enter at least 2 characters in search field
   - Click search button or press Enter
   - Patient dropdown should populate with matching results
   - Select a patient from the dropdown

## Expected Behavior

✅ Hospitals load from template context
✅ Departments load via AJAX when hospital is selected
✅ Staff/Physicians load via AJAX when department is selected
✅ Categories load via AJAX when hospital is selected
✅ Subcategories load via AJAX when category is selected
✅ Patients search via AJAX when search button is clicked
✅ All dropdowns populate correctly with data
✅ Form can be submitted with all required fields filled

## Related Files

- `apps/complaints/urls.py` - URL patterns
- `apps/complaints/ui_views.py` - AJAX endpoint views
- `apps/complaints/models.py` - Complaint model definition
- `config/urls.py` - Main URL configuration

## Notes

- Patient search requires minimum 2 characters
- Patient dropdown populates on focus with initial results if empty
- All AJAX requests use the correct endpoint URLs
- Data is properly parsed from backend response format
- Classification section is complete and functional