From 5394a4d5143de756b54e2f604899f686378ed178 Mon Sep 17 00:00:00 2001
From: Mark Gregory <mark.gregory@mpba.co.uk>
Date: Tue, 16 Jun 2026 17:15:26 +0100
Subject: [PATCH] fixed tags

---
 .../views/livewire/ticket-create.blade.php    | 55 ++++++++++++++-----
 .../views/livewire/ticket-edit.blade.php      | 54 +++++++++++++-----
 2 files changed, 82 insertions(+), 27 deletions(-)

diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
index 41723f2a..fe2bf50e 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-create.blade.php
@@ -144,22 +144,51 @@
                 </div>
 
 
-                <div class="xl:col-span-2">
-                    <label class="block text-sm font-semibold text-zinc-200" for="tag_ids">Tags</label>
+                <div class="lg:col-span-3 xl:col-span-6">
+                    <fieldset class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
+                        <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                            <legend class="text-sm font-semibold text-zinc-200">
+                                Tags
+                            </legend>
 
-                    <select id="tag_ids" wire:model.defer="tag_ids" data-helpdesk-select2 multiple class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                        @foreach ($tags as $tag)
-                            <option value="{{ $tag->id }}" @selected(in_array((string) $tag->id, array_map('strval', $tag_ids ?? []), true))>{{ $tag->name }}</option>
-                        @endforeach
-                    </select>
+                            <span class="text-xs text-zinc-500">
+                Optional · select all that apply
+            </span>
+                        </div>
 
-                    @error('tag_ids')
-                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                            @forelse ($tags as $tag)
+                                <label
+                                    for="tag_{{ $tag->id }}"
+                                    class="flex cursor-pointer items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-200 transition hover:border-blue-500 hover:bg-zinc-800"
+                                >
+                                    <input
+                                        id="tag_{{ $tag->id }}"
+                                        type="checkbox"
+                                        wire:model.defer="tag_ids"
+                                        value="{{ $tag->id }}"
+                                        class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500"
+                                    >
 
-                    @error('tag_ids.*')
-                        <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                                    <span class="truncate">
+                        {{ $tag->name }}
+                    </span>
+                                </label>
+                            @empty
+                                <div class="rounded-xl border border-dashed border-zinc-700 bg-zinc-900 px-4 py-3 text-sm text-zinc-400">
+                                    No tags are available.
+                                </div>
+                            @endforelse
+                        </div>
+
+                        @error('tag_ids')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+
+                        @error('tag_ids.*')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+                    </fieldset>
                 </div>
 
                 <div class="xl:col-span-2">
diff --git a/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php b/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
index abce5fe3..80e6e737 100644
--- a/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
+++ b/Modules/Helpdesk/Resources/views/livewire/ticket-edit.blade.php
@@ -190,26 +190,52 @@
                     <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
                     @enderror
                 </div>
+                <div class="lg:col-span-3 xl:col-span-6">
+                    <fieldset class="rounded-2xl border border-zinc-700 bg-zinc-950/70 p-4">
+                        <div class="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between">
+                            <legend class="text-sm font-semibold text-zinc-200">
+                                Tags
+                            </legend>
 
+                            <span class="text-xs text-zinc-500">
+                Optional · select all that apply
+            </span>
+                        </div>
 
-                <div class="xl:col-span-2">
-                    <label class="block text-sm font-semibold text-zinc-200" for="tag_ids">Tags</label>
+                        <div class="mt-4 grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                            @forelse ($tags as $tag)
+                                <label
+                                    for="tag_{{ $tag->id }}"
+                                    class="flex cursor-pointer items-center gap-3 rounded-xl border border-zinc-700 bg-zinc-900 px-4 py-3 text-sm font-medium text-zinc-200 transition hover:border-blue-500 hover:bg-zinc-800"
+                                >
+                                    <input
+                                        id="tag_{{ $tag->id }}"
+                                        type="checkbox"
+                                        wire:model.defer="tag_ids"
+                                        value="{{ $tag->id }}"
+                                        class="h-4 w-4 rounded border-zinc-600 bg-zinc-950 text-blue-600 focus:ring-blue-500"
+                                    >
 
-                    <select id="tag_ids" wire:model.defer="tag_ids" data-helpdesk-select2 multiple class="mt-2 block w-full rounded-xl border-zinc-700 bg-zinc-950 text-zinc-100 shadow-sm focus:border-blue-500 focus:ring-blue-500">
-                        @foreach ($tags as $tag)
-                            <option value="{{ $tag->id }}">{{ $tag->name }}</option>
-                        @endforeach
-                    </select>
+                                    <span class="truncate">
+                        {{ $tag->name }}
+                    </span>
+                                </label>
+                            @empty
+                                <div class="rounded-xl border border-dashed border-zinc-700 bg-zinc-900 px-4 py-3 text-sm text-zinc-400">
+                                    No tags are available.
+                                </div>
+                            @endforelse
+                        </div>
 
-                    @error('tag_ids')
-                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                        @error('tag_ids')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
 
-                    @error('tag_ids.*')
-                    <p class="mt-2 text-sm text-red-500">{{ $message }}</p>
-                    @enderror
+                        @error('tag_ids.*')
+                        <p class="mt-3 text-sm text-red-500">{{ $message }}</p>
+                        @enderror
+                    </fieldset>
                 </div>
-
                 <div class="xl:col-span-2">
                     <label class="block text-sm font-semibold text-zinc-200" for="due_at">Due date</label>