new ataxchments preview code now with proper code

Modules/Helpdesk/Resources/views/livewire/ticket-show.blade.php

@@ -43,10 +43,10 @@
                 </div>
 
                 <div class="flex flex-wrap gap-2">
-                    <a href="{{ route('helpdesk.tickets.index') }}" wire:navigate
+                    <a href="{{ route('helpdesk.index') }}" wire:navigate
                        class="inline-flex items-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-bold text-white shadow-sm hover:bg-blue-700">
-                        <i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i>
-                        Back
+                        <i class="fa-solid fa-list-check mr-2" aria-hidden="true"></i>
+                        Dashboard
                     </a>
                     @can('update', $ticket)
                         <a href="{{ route('helpdesk.tickets.edit', $ticket) }}" wire:navigate
@@ -864,8 +864,52 @@
                 document.addEventListener('DOMContentLoaded', function () {
                     document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
                     updateCommentToggleButtons();
+                    initialiseHelpdeskSidebarCards();
                 });
 
+
+
+                function initialiseHelpdeskSidebarCards() {
+                    const sidebar = document.querySelector('[data-helpdesk-sidebar-cards]');
+
+                    if (!sidebar || sidebar.dataset.helpdeskSidebarInitialised === 'true') {
+                        return;
+                    }
+
+                    sidebar.dataset.helpdeskSidebarInitialised = 'true';
+
+                    Array.from(sidebar.children).forEach((card) => {
+                        if (!(card instanceof HTMLElement) || card.tagName.toLowerCase() === 'details') {
+                            return;
+                        }
+
+                        const header = card.firstElementChild;
+
+                        if (!(header instanceof HTMLElement)) {
+                            return;
+                        }
+
+                        const details = document.createElement('details');
+                        details.className = card.className;
+                        details.dataset.helpdeskSidebarCard = 'true';
+
+                        const summary = document.createElement('summary');
+                        summary.className = 'cursor-pointer list-none marker:hidden';
+                        summary.appendChild(header);
+
+                        const body = document.createElement('div');
+                        body.className = 'pt-4';
+
+                        while (card.firstChild) {
+                            body.appendChild(card.firstChild);
+                        }
+
+                        details.appendChild(summary);
+                        details.appendChild(body);
+                        card.replaceWith(details);
+                    });
+                }
+
                 function wrapSelection(textarea, before, after) {
                     const start = textarea.selectionStart || 0;
                     const end = textarea.selectionEnd || 0;
@@ -880,7 +924,7 @@
             </script>
         </div>
 
-        <aside class="space-y-4">
+        <aside class="space-y-4" data-helpdesk-sidebar-cards>
             <div
                 class="rounded-xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
                 <div class="-mx-4 -mt-4 mb-4 rounded-t-xl bg-blue-700 px-4 py-4 text-white">