# Global Livewire Notification System

## Overview
A global notification system that displays toast notifications in the top-right corner of the screen. Notifications automatically disappear after a specified duration.

## Features
- Appears in the top-right corner
- Auto-dismisses after configurable duration (default: 5 seconds)
- Supports 4 types: success, error, warning, info
- Smooth fade-in/fade-out animations
- Can be triggered from Livewire components, controllers, or JavaScript

## Usage

### From Livewire Components
```php
// In any Livewire component
$this->dispatchBrowserEvent('showNotification', [
    'message' => 'Operation successful!',
    'type' => 'success', // success, error, warning, info
    'duration' => 3000 // milliseconds
]);
```

Or using the listener directly:
```php
// Trigger the notification event
Livewire::emit('showNotification', 'Item saved successfully!', 'success', 5000);
```

### From Controllers
```php
// Using the helper function
show_notification('Record updated successfully!', 'success', 5000);

return redirect()->back();
```

### From JavaScript/Blade Views
```javascript
// Using the global helper function
showNotification('Action completed!', 'info', 4000);
```

Or in Blade templates:
```blade
<script>
    showNotification('Welcome back!', 'success');
</script>
```

## Notification Types
- **success**: Green checkmark icon - for successful operations
- **error**: Red X icon - for errors and failures
- **warning**: Yellow warning icon - for warnings and cautions
- **info**: Blue info icon - for informational messages

## Customization

### Change Default Duration
The default duration is 5000ms (5 seconds). You can customize this when triggering the notification.

### Styling
The notification uses Tailwind CSS classes. You can modify the styles in:
`resources/views/livewire/global-notification.blade.php`

## Example Scenarios

### Form Submission Success
```php
public function save()
{
    // Save logic here
    
    show_notification('Settings saved successfully!', 'success');
    return redirect()->back();
}
```

### Error Handling
```php
try {
    // Some operation
} catch (\Exception $e) {
    show_notification('An error occurred: ' . $e->getMessage(), 'error');
    return redirect()->back();
}
```

### JavaScript Trigger
```javascript
// After an AJAX call
fetch('/api/some-endpoint')
    .then(response => response.json())
    .then(data => {
        showNotification('Data loaded successfully!', 'success');
    })
    .catch(error => {
        showNotification('Failed to load data', 'error');
    });
```

## Files Modified/Created
- `app/Livewire/GlobalNotification.php` - Livewire component
- `resources/views/livewire/global-notification.blade.php` - Component view
- `resources/views/layouts/app.blade.php` - Added component to layout
- `app/Helpers/helpers.php` - Added helper function
- `resources/js/app.js` - Added JavaScript helper