From c008fc67dc2d3e105245a1a8145a17281b4c6d0b Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 16 Jun 2026 17:45:26 +0100
Subject: [PATCH] fixe duploads

---
 .../views/livewire/ticket-create.blade.php    | 53 +++++++++++++++----
 .../views/livewire/ticket-edit.blade.php      | 51 +++++++++++++++++-
 2 files changed, 94 insertions(+), 10 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 1e13502e..a03c9258 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -55,7 +55,7 @@
                             <select
                                 id="company_id"
                                 data-helpdesk-select2
-                            data-placeholder="Select option"
+                                data-placeholder="Select option"
                                 data-wire-model="company_id"
                                 class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             >
@@ -269,17 +269,52 @@
                 </div>
 
                 <div class="lg:col-span-3 xl:col-span-6">
-                    <label class="block text-sm font-semibold text-zinc-200" for="attachments">Attachments</label>
+                    <div class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
+                        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                            <div>
+                                <label class="block text-sm font-semibold text-zinc-200" for="attachments">
+                                    Attachments
+                                </label>
 
-                    <input id="attachments" type="file" wire:model="attachments" multiple class="mt-2 block w-full rounded-xl border border-zinc-700 bg-zinc-950 px-3 py-2 text-sm text-zinc-100 shadow-sm">
+                                <p class="mt-1 text-sm text-zinc-500">
+                                    Add screenshots, documents, logs or supporting files to help resolve the ticket.
+                                </p>
+                            </div>
 
-                    @error('attachments')
-                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                            <label
+                                for="attachments"
+                                class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-950"
+                            >
+                                <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
+                                <span>Add attachments</span>
+                            </label>
+                        </div>
 
-                    @error('attachments.*')
-                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                        <input
+                            id="attachments"
+                            type="file"
+                            wire:model="attachments"
+                            multiple
+                            class="sr-only"
+                        >
+
+                        <div
+                            wire:loading.flex
+                            wire:target="attachments"
+                            class="mt-4 items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200"
+                        >
+                            <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
+                            Uploading attachments...
+                        </div>
+
+                        @error('attachments')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+
+                        @error('attachments.*')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+                    </div>
                 </div>
             </div>
 
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
index c8f48d26..c555af85 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
@@ -74,7 +74,7 @@
                             <select
                                 id="company_id"
                                 data-helpdesk-select2
-                            data-placeholder="Select option"
+                                data-placeholder="Select option"
                                 data-wire-model="company_id"
                                 class="block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                             >
@@ -334,6 +334,55 @@
                     <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                     @enderror
                 </div>
+
+                <div class="lg:col-span-3 xl:col-span-6">
+                    <div class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
+                        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
+                            <div>
+                                <label class="block text-sm font-semibold text-zinc-200" for="attachments">
+                                    Attachments
+                                </label>
+
+                                <p class="mt-1 text-sm text-zinc-500">
+                                    Add screenshots, documents, logs or supporting files to help resolve the ticket.
+                                </p>
+                            </div>
+
+                            <label
+                                for="attachments"
+                                class="inline-flex cursor-pointer items-center justify-center gap-2 rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-semibold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-950"
+                            >
+                                <i class="fa-solid fa-paperclip" aria-hidden="true"></i>
+                                <span>Add attachments</span>
+                            </label>
+                        </div>
+
+                        <input
+                            id="attachments"
+                            type="file"
+                            wire:model="attachments"
+                            multiple
+                            class="sr-only"
+                        >
+
+                        <div
+                            wire:loading.flex
+                            wire:target="attachments"
+                            class="mt-4 items-center gap-2 rounded-xl border border-blue-500/30 bg-blue-500/10 px-4 py-3 text-sm font-medium text-blue-200"
+                        >
+                            <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
+                            Uploading attachments...
+                        </div>
+
+                        @error('attachments')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+
+                        @error('attachments.*')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+                    </div>
+                </div>
             </div>
 
             <div class="flex items-center justify-end gap-3 border-t border-zinc-700 bg-zinc-900 px-6 py-4">