# Complaint Resolution Fix Summary

## Problem
The complaint resolution form was failing with a 404 error because it was trying to call a non-existent API endpoint `/complaints/api/complaints/{id}/resolve/`.

## Root Cause
The JavaScript `submitResolution()` function in `templates/complaints/complaint_detail.html` was attempting to POST to a `/resolve/` endpoint that doesn't exist in the URL configuration.

**Evidence:**
- Template was calling: `/complaints/api/complaints/{{ complaint.id }}/resolve/`
- URL configuration (`apps/complaints/urls.py`) only had: `/complaints/api/complaints/{id}/change_status/`
- The `ComplaintViewSet` has a `change_status` action but NO `resolve` action

## Solution
Updated the `submitResolution()` function to use the existing `change_status` endpoint instead of the non-existent `resolve` endpoint.

### Changes Made to `templates/complaints/complaint_detail.html`

```javascript
// BEFORE (broken):
function submitResolution(event) {
    event.preventDefault();
    
    const form = document.getElementById('resolutionForm');
    const formData = new FormData(form);
    const data = {
        resolution_category: formData.get('resolution_category'),
        resolution: formData.get('resolution'),
        send_notification: document.getElementById('sendResolutionNotification').checked
    };
    
    // ...
    
    fetch(`/complaints/api/complaints/{{ complaint.id }}/resolve/`, {
        method: 'POST',
        // ...
    })
    .then(response => response.json())
    .then(result => {
        if (result.success) {
            alert('Complaint resolved successfully!');
            // ...
        }
    })
}

// AFTER (fixed):
function submitResolution(event) {
    event.preventDefault();
    
    const form = document.getElementById('resolutionForm');
    const formData = new FormData(form);
    const data = {
        status: 'resolved',
        resolution_category: formData.get('resolution_category'),
        resolution: formData.get('resolution'),
        note: 'Complaint resolved with resolution details'
    };
    
    // ...
    
    fetch(`/complaints/api/complaints/{{ complaint.id }}/change_status/`, {
        method: 'POST',
        // ...
    })
    .then(response => response.json())
    .then(result => {
        if (result.message) {
            alert('Complaint resolved successfully!');
            location.reload();
        }
    })
}
```

### Key Changes:
1. **Endpoint URL**: Changed from `/resolve/` to `/change_status/`
2. **Request Data**: Added `status: 'resolved'` field
3. **Note Field**: Replaced `send_notification` with `note` field
4. **Response Handling**: Changed from checking `result.success` to `result.message`

## Why This Works
The existing `change_status` action in `ComplaintViewSet` already supports:
- Setting `status` to 'resolved'
- Setting `resolution` and `resolution_category` fields
- Creating timeline entries
- Triggering resolution satisfaction survey

The backend code was already properly handling resolution through the `change_status` endpoint, so the frontend just needed to be updated to use it correctly.

## Testing
To verify the fix works:
1. Navigate to a complaint detail page
2. Go to the "Resolution" tab
3. Fill in resolution category and details
4. Click "Resolve Complaint"
5. The form should successfully submit and the complaint should be marked as resolved

## Files Modified
- `templates/complaints/complaint_detail.html` - Updated `submitResolution()` JavaScript function

## Notes
- The `send_notification` checkbox in the form is no longer used in the data payload
- The `change_status` endpoint handles notification logic internally
- Resolution survey triggering is still handled by the backend when status changes to 'closed'