Implement file attachment functionality in ticket creation with upload preview and removal options

app/Livewire/Tickets/Create.php

@@ -8,19 +8,37 @@ use App\Models\Ticket;
 use Illuminate\Support\Facades\Auth;
 use Illuminate\Support\Facades\RateLimiter;
 use Illuminate\Support\Facades\Storage;
+use Livewire\WithFileUploads;
 
 #[DisabledIf('tickets_disabled')]
 class Create extends Component
 {
-    public string $message;
+    use WithFileUploads;
 
-    public string $subject;
+    public string $message = '';
 
-    public string $department;
+    public string $subject = '';
+
+    public string $department = '';
 
     public ?int $service = null;
 
-    public string $priority;
+    public string $priority = '';
+
+    public array $attachments = [];
+
+    public function updatedAttachments()
+    {
+        $this->validate([
+            'attachments.*' => 'image|max:5120', // 5MB max per image
+        ]);
+    }
+
+    public function removeAttachment($index)
+    {
+        unset($this->attachments[$index]);
+        $this->attachments = array_values($this->attachments);
+    }
 
     public function create()
     {
@@ -31,6 +49,7 @@ class Create extends Component
             'subject' => 'required|string',
             'message' => 'required|string',
             'priority' => 'required|in:low,medium,high',
+            'attachments.*' => 'image|max:5120',
         ]);
 
         if (RateLimiter::tooManyAttempts('create-ticket', 1)) {
@@ -41,6 +60,19 @@ class Create extends Component
 
         RateLimiter::increment('create-ticket', 30);
 
+        // Handle attachments
+        $attachmentData = [];
+        if (!empty($this->attachments)) {
+            foreach ($this->attachments as $attachment) {
+                $path = $attachment->store('ticket-attachments', 'public');
+                $attachmentData[] = [
+                    'path' => $path,
+                    'name' => $attachment->getClientOriginalName(),
+                    'url' => Storage::url($path),
+                ];
+            }
+        }
+
         $ticket = Ticket::create([
             'user_id' => Auth::id(),
             'department' => $this->department,
@@ -52,11 +84,13 @@ class Create extends Component
         $ticket->messages()->create([
             'user_id' => Auth::id(),
             'message' => $this->message,
+            'attachments' => !empty($attachmentData) ? $attachmentData : null,
         ]);
 
         $this->notify('Message sent successfully');
 
         $this->message = '';
+        $this->attachments = [];
         $this->dispatch('saved');
 
         $this->redirect(route('tickets.show', $ticket), true);

themes/lucentui/views/tickets/create.blade.php

@@ -50,6 +50,57 @@
                 </div>
                 <x-easymde-editor wire:model="message" target-id="editor" />
             </div>
+
+            <!-- File Upload Section -->
+            <div class="col-span-1 md:col-span-2">
+                <label class="block text-sm font-medium text-color-base mb-2">
+                    <x-ri-attachment-2 class="inline size-4 mr-1" />
+                    {{ __('ticket.attachments') ?? 'Attachments' }}
+                </label>
+                
+                <div class="flex items-center justify-center w-full">
+                    <label for="attachments" class="flex flex-col items-center justify-center w-full h-32 border-2 border-neutral border-dashed rounded-lg cursor-pointer bg-background/50 hover:bg-background/80 transition-colors">
+                        <div class="flex flex-col items-center justify-center pt-5 pb-6">
+                            <x-ri-upload-cloud-2-line class="size-8 mb-2 text-neutral-400" />
+                            <p class="mb-2 text-sm text-neutral-400">
+                                <span class="font-semibold">{{ __('ticket.click_to_upload') ?? 'Click to upload' }}</span> {{ __('ticket.or_drag_drop') ?? 'or drag and drop' }}
+                            </p>
+                            <p class="text-xs text-neutral-500">{{ __('ticket.image_formats') ?? 'PNG, JPG, GIF up to 5MB' }}</p>
+                        </div>
+                        <input id="attachments" type="file" class="hidden" wire:model="attachments" multiple accept="image/*" />
+                    </label>
+                </div>
+
+                <!-- Upload Progress -->
+                <div wire:loading wire:target="attachments" class="mt-2">
+                    <div class="flex items-center gap-2 text-sm text-primary">
+                        <x-ri-loader-4-line class="size-4 animate-spin" />
+                        {{ __('ticket.uploading') ?? 'Uploading...' }}
+                    </div>
+                </div>
+
+                <!-- Preview Uploaded Files -->
+                @if(count($attachments) > 0)
+                    <div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
+                        @foreach($attachments as $index => $attachment)
+                            <div class="relative group">
+                                <div class="aspect-square rounded-lg overflow-hidden border border-neutral bg-background">
+                                    <img src="{{ $attachment->temporaryUrl() }}" alt="Preview" class="w-full h-full object-cover">
+                                </div>
+                                <button type="button" wire:click="removeAttachment({{ $index }})" 
+                                    class="absolute -top-2 -right-2 bg-error text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-error/80">
+                                    <x-ri-close-line class="size-4" />
+                                </button>
+                                <p class="mt-1 text-xs text-neutral-400 truncate">{{ $attachment->getClientOriginalName() }}</p>
+                            </div>
+                        @endforeach
+                    </div>
+                @endif
+
+                @error('attachments.*')
+                    <p class="mt-2 text-sm text-error">{{ $message }}</p>
+                @enderror
+            </div>
         </div>
 
         <div class="flex justify-end mt-6">