# Cloud Services Form Usage Guide

## Overview

The Cloud Services form is a dynamic component that can be used for both creating new cloud service configurations and editing existing ones. It automatically adapts its behavior based on whether a configuration object is provided.

## Basic Usage

### Creating New Configurations

```php
// In your controller
public function create()
{
    $breadcrumbs = [
        ['title' => 'Cloud Storage', 'url' => '']
    ];

    return view('tenant.cloud-storage.create', compact(['breadcrumbs']));
}
```

```blade
{{-- In your view --}}
<livewire:cloud-services.form />
```

### Editing Existing Configurations

```php
// In your controller
public function edit($id)
{
    try {
        $configuration = $this->configService->getConfiguration($id);
        
        $breadcrumbs = [
            ['title' => 'Cloud Storage', 'url' => route('cloud-storage.index')],
            ['title' => 'Edit Configuration', 'url' => '']
        ];

        return view('tenant.cloud-storage.edit', compact(['breadcrumbs', 'configuration']));
    } catch (Exception $e) {
        return redirect()->route('cloud-storage.index')
            ->with('error', 'Configuration not found');
    }
}
```

```blade
{{-- In your view --}}
<livewire:cloud-services.form :configuration="$configuration" />
```

## Form Behavior

### Create Mode (No configuration provided)
- Shows "Configure Cloud Services" title
- Provider selector is enabled and required
- All fields are required
- Form submits to `POST /cloud-storage`
- Button shows "Save Configuration"

### Edit Mode (Configuration provided)
- Shows "Edit Cloud Service Configuration" title
- Provider selector is disabled (cannot change provider)
- Fields are pre-populated with existing values
- Client Secret and Service Account Key are optional (can keep existing values)
- Form submits to `PUT /cloud-storage/{id}`
- Button shows "Update Configuration"

## Supported Providers

### Microsoft 365
- **Client ID**: Application ID from Azure AD
- **Tenant ID**: Directory ID from Azure AD
- **Client Secret**: Secret generated in Azure AD

### Google Workspace
- **Organization Domain**: Primary domain of your organization
- **Service Account Key**: JSON file from Google Cloud Console

## Form Features

### Dynamic Field Display
- Fields show/hide based on selected provider
- Smooth transitions using Alpine.js
- Responsive design with Tailwind CSS

### Validation
- Real-time client-side validation
- Server-side validation with custom request classes
- Specific error messages for each field

### Security
- CSRF protection
- Encrypted storage of sensitive data
- File upload validation for JSON files

### User Experience
- Loading states during form submission
- Success/error message display
- Automatic redirect after successful submission
- Cancel button to return to index

## API Endpoints

### Create Configuration
```
POST /cloud-storage
```

### Update Configuration
```
PUT /cloud-storage/{id}
```

## Response Format

### Success Response
```json
{
    "message": "Microsoft 365 configured successfully",
    "config_id": 1
}
```

### Error Response
```json
{
    "error": "Invalid Client ID format"
}
```

## Configuration Storage

The form uses the `updateOrCreate` method to handle both creation and updates:

```php
CloudServiceConfiguration::updateOrCreate(
    ['provider' => CloudServiceProvider::MICROSOFT],
    [
        'credentials' => $credentials,
        'additional_config' => [
            'permissions' => $permissions,
            'setup_date' => now()->toISOString()
        ]
    ]
);
```

## Validation Rules

### Microsoft Configuration
- Client ID: Required, GUID format
- Tenant ID: Required, GUID format
- Client Secret: Required for new, optional for updates, min 32 chars

### Google Configuration
- Organization Domain: Required, valid domain format
- Service Account Key: Required for new, optional for updates, JSON file

## Error Handling

The form includes comprehensive error handling:
- Network errors
- Validation errors
- Configuration validation failures
- File upload errors

## Styling

The form uses Tailwind CSS classes and supports:
- Light and dark modes
- Responsive design
- Focus states
- Disabled states
- Loading animations