1064 lines
63 KiB
PHP
1064 lines
63 KiB
PHP
@php
|
|
$currentUser = auth()->user();
|
|
$currentCompany = $currentUser?->company;
|
|
$canSeeInternalNotes = (bool) ($currentCompany?->is_system_company ?? false)
|
|
|| \Illuminate\Support\Str::lower((string) ($currentCompany?->slug ?? '')) === 'mpba-limited'
|
|
|| \Illuminate\Support\Str::contains(\Illuminate\Support\Str::lower((string) ($currentCompany?->name ?? '')), 'mpba');
|
|
$visibleCommentCount = $ticket->comments->count();
|
|
@endphp
|
|
|
|
<style>
|
|
.hd-helpdesk-surface {
|
|
--hd-panel: rgba(24, 24, 27, 0.96);
|
|
--hd-panel-soft: rgba(16, 23, 42, 0.92);
|
|
--hd-border: rgba(113, 113, 122, 0.50);
|
|
--hd-border-soft: rgba(59, 130, 246, 0.30);
|
|
--hd-text: #f8fafc;
|
|
--hd-muted: #cbd5e1;
|
|
--hd-blue: #2563eb;
|
|
--hd-green: #16a34a;
|
|
--hd-red: #dc2626;
|
|
}
|
|
|
|
.hd-helpdesk-surface,
|
|
.hd-helpdesk-surface * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.hd-helpdesk-surface article,
|
|
.hd-helpdesk-surface details,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] {
|
|
overflow: hidden;
|
|
border: 1px solid var(--hd-border) !important;
|
|
border-radius: 24px !important;
|
|
background: var(--hd-panel) !important;
|
|
box-shadow: 0 20px 55px rgba(0, 0, 0, 0.22) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:first-child,
|
|
.hd-helpdesk-surface details > summary,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child {
|
|
min-height: 116px;
|
|
padding: 24px 30px !important;
|
|
background: linear-gradient(135deg, #020617 0%, #0f1e3d 58%, #101827 100%) !important;
|
|
color: var(--hd-text) !important;
|
|
border-bottom: 1px solid rgba(148, 163, 184, 0.18);
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:first-child > div,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child > div,
|
|
.hd-helpdesk-surface details > summary > div:first-child {
|
|
align-items: center !important;
|
|
gap: 16px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:first-child span.inline-flex,
|
|
.hd-helpdesk-surface details > summary span.inline-flex,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child span.inline-flex {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:first-child span.inline-flex[class*="h-14"],
|
|
.hd-helpdesk-surface details > summary span.inline-flex[class*="h-14"],
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child span.inline-flex[class*="h-14"] {
|
|
width: 44px !important;
|
|
height: 44px !important;
|
|
border-radius: 14px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:first-child i,
|
|
.hd-helpdesk-surface details > summary i,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child i {
|
|
font-size: 16px !important;
|
|
line-height: 1 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article h2,
|
|
.hd-helpdesk-surface details h2,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] h2 {
|
|
margin: 0 !important;
|
|
font-size: clamp(1.35rem, 1.1rem + 0.8vw, 2rem) !important;
|
|
line-height: 1.2 !important;
|
|
letter-spacing: -0.025em !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article p,
|
|
.hd-helpdesk-surface details p,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] p {
|
|
margin-top: 6px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface article > div:nth-child(2),
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:nth-child(2),
|
|
.hd-helpdesk-surface details > div {
|
|
padding: 28px 30px !important;
|
|
}
|
|
|
|
.hd-ticket-body-card {
|
|
min-height: 210px !important;
|
|
padding: 28px 32px !important;
|
|
border-radius: 20px !important;
|
|
border: 1px solid rgba(113, 113, 122, 0.55) !important;
|
|
background: rgba(3, 7, 18, 0.45) !important;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
|
|
}
|
|
|
|
.hd-ticket-body-card .prose,
|
|
.hd-ticket-body-card div {
|
|
font-size: 1.05rem !important;
|
|
line-height: 1.85 !important;
|
|
color: var(--hd-text) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] .space-y-7 {
|
|
display: grid !important;
|
|
gap: 22px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] label {
|
|
display: block !important;
|
|
margin-bottom: 8px !important;
|
|
font-size: 0.9rem !important;
|
|
font-weight: 800 !important;
|
|
color: var(--hd-muted) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[type="text"],
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[name="subject"],
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] select,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] [contenteditable="true"] {
|
|
width: 100% !important;
|
|
border: 1px solid rgba(113, 113, 122, 0.70) !important;
|
|
border-radius: 16px !important;
|
|
background: rgba(3, 7, 18, 0.60) !important;
|
|
color: var(--hd-text) !important;
|
|
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] input[name="subject"],
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] select {
|
|
min-height: 52px !important;
|
|
padding: 12px 16px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] [contenteditable="true"] {
|
|
min-height: 190px !important;
|
|
padding: 18px 20px !important;
|
|
line-height: 1.7 !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-html-toolbar] {
|
|
display: flex !important;
|
|
flex-wrap: wrap !important;
|
|
gap: 8px !important;
|
|
margin-bottom: 10px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-html-toolbar] button {
|
|
min-height: 34px !important;
|
|
border-radius: 10px !important;
|
|
border: 1px solid rgba(203, 213, 225, 0.70) !important;
|
|
padding: 6px 10px !important;
|
|
background: rgba(15, 23, 42, 0.80) !important;
|
|
color: var(--hd-text) !important;
|
|
font-size: 0.8rem !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-attachment-shell] {
|
|
border-radius: 18px !important;
|
|
border: 1px solid rgba(59, 130, 246, 0.28) !important;
|
|
padding: 18px !important;
|
|
background: linear-gradient(135deg, rgba(15, 23, 42, 0.74), rgba(24, 24, 27, 0.92)) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-attachment-picker-row] {
|
|
display: flex !important;
|
|
min-height: 74px !important;
|
|
align-items: center !important;
|
|
justify-content: space-between !important;
|
|
gap: 18px !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-file-button] {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 10px !important;
|
|
min-width: 168px !important;
|
|
height: 48px !important;
|
|
padding: 0 22px !important;
|
|
border: 1px solid rgba(134, 239, 172, 0.70) !important;
|
|
border-radius: 14px !important;
|
|
background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 14px 28px rgba(22, 163, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
|
|
font-size: 0.92rem !important;
|
|
font-weight: 900 !important;
|
|
line-height: 1 !important;
|
|
text-align: center !important;
|
|
white-space: nowrap !important;
|
|
cursor: pointer !important;
|
|
transition: transform 150ms ease, box-shadow 150ms ease, background 150ms ease !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-file-button]:hover {
|
|
transform: translateY(-1px) !important;
|
|
background: linear-gradient(135deg, #166534 0%, #15803d 55%, #16a34a 100%) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 16px 32px rgba(22, 163, 74, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-file-button] i,
|
|
.hd-helpdesk-surface [data-helpdesk-file-button] span {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
line-height: 1 !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
vertical-align: middle !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface [data-helpdesk-file-button] i {
|
|
width: 22px !important;
|
|
height: 22px !important;
|
|
border-radius: 8px !important;
|
|
background: rgba(255, 255, 255, 0.18) !important;
|
|
color: #ffffff !important;
|
|
font-size: 0.8rem !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-attachment-action {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 12px !important;
|
|
width: 210px !important;
|
|
min-width: 210px !important;
|
|
height: 58px !important;
|
|
min-height: 58px !important;
|
|
padding: 0 22px !important;
|
|
border: 1px solid rgba(134, 239, 172, 0.65) !important;
|
|
border-radius: 18px !important;
|
|
background: linear-gradient(135deg, #15803d 0%, #16a34a 55%, #22c55e 100%) !important;
|
|
color: #ffffff !important;
|
|
box-shadow: 0 16px 34px rgba(22, 163, 74, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.20) !important;
|
|
font-size: 1rem !important;
|
|
font-weight: 900 !important;
|
|
line-height: 1 !important;
|
|
text-align: center !important;
|
|
white-space: nowrap !important;
|
|
cursor: pointer !important;
|
|
appearance: none !important;
|
|
-webkit-appearance: none !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-attachment-action:hover {
|
|
transform: translateY(-1px) !important;
|
|
background: linear-gradient(135deg, #166534 0%, #15803d 55%, #16a34a 100%) !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-attachment-action-upload {
|
|
border-color: rgba(45, 212, 191, 0.60) !important;
|
|
background: linear-gradient(135deg, #047857 0%, #059669 55%, #0d9488 100%) !important;
|
|
box-shadow: 0 16px 34px rgba(5, 150, 105, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-attachment-action-upload:hover {
|
|
background: linear-gradient(135deg, #065f46 0%, #047857 55%, #0f766e 100%) !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-attachment-action i {
|
|
display: inline-flex !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
width: 24px !important;
|
|
height: 24px !important;
|
|
border-radius: 9px !important;
|
|
background: rgba(255, 255, 255, 0.18) !important;
|
|
color: #ffffff !important;
|
|
font-size: 0.9rem !important;
|
|
}
|
|
|
|
.hd-helpdesk-surface .hd-select {
|
|
appearance: auto !important;
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.hd-helpdesk-surface article > div:first-child,
|
|
.hd-helpdesk-surface details > summary,
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:first-child,
|
|
.hd-helpdesk-surface article > div:nth-child(2),
|
|
.hd-helpdesk-surface form[data-helpdesk-comment-form] > div:nth-child(2),
|
|
.hd-helpdesk-surface details > div {
|
|
padding: 20px !important;
|
|
}
|
|
|
|
.hd-ticket-body-card {
|
|
min-height: 150px !important;
|
|
padding: 20px !important;
|
|
}
|
|
}
|
|
</style>
|
|
<div class="hd-helpdesk-surface space-y-6" dusk="helpdesk-ticket-show">
|
|
<div class="overflow-hidden rounded-3xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="bg-gradient-to-br from-slate-950 via-slate-900 to-blue-950 px-6 py-7 text-white">
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<div class="mb-2 flex flex-wrap items-center gap-2">
|
|
<span class="font-mono text-xs text-blue-100">{{ $ticket->reference }}</span>
|
|
<flux:badge color="{{ $ticket->status->color }}">{{ $ticket->status->name }}</flux:badge>
|
|
<flux:badge color="{{ $ticket->priority->color }}">{{ $ticket->priority->name }}</flux:badge>
|
|
</div>
|
|
<h1 class="text-3xl font-semibold tracking-tight">{{ $ticket->subject }}</h1>
|
|
<p class="mt-2 text-sm text-blue-100/90">Raised by {{ $ticket->owner?->name ?? 'Unknown user' }} · Assigned to {{ $ticket->agent?->name ?? 'Unassigned' }}</p>
|
|
</div>
|
|
<div class="flex flex-wrap gap-2">
|
|
<a href="{{ route('helpdesk.tickets.index') }}" wire:navigate class="inline-flex items-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-blue-700">
|
|
<i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i> Back
|
|
</a>
|
|
@can('update', $ticket)
|
|
<a href="{{ route('helpdesk.tickets.edit', $ticket) }}" wire:navigate class="inline-flex items-center rounded-xl bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-emerald-700">
|
|
<i class="fa-solid fa-pen-to-square mr-2" aria-hidden="true"></i> Edit
|
|
</a>
|
|
@endcan
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid gap-6 lg:grid-cols-3">
|
|
<div class="space-y-6 lg:col-span-2">
|
|
<article class="overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-8 text-white sm:px-10">
|
|
<div class="flex flex-col gap-6 xl:flex-row xl:items-center xl:justify-between">
|
|
<div class="flex min-w-0 items-start gap-5">
|
|
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-lg shadow-black/20">
|
|
<i class="fa-solid fa-file-lines text-xl" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Ticket document</p>
|
|
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Request details</h2>
|
|
<p class="max-w-4xl text-base font-medium leading-7 text-blue-50/90">Original request content recorded against this helpdesk ticket.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="inline-flex w-fit shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold text-blue-50 ring-1 ring-white/20 shadow-sm">
|
|
<i class="fa-solid fa-hashtag" aria-hidden="true"></i>
|
|
{{ $ticket->reference }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-7 sm:p-10">
|
|
<div class="hd-ticket-body-card min-h-[18rem] rounded-[1.75rem] border border-zinc-200 bg-zinc-50/80 px-8 py-9 text-zinc-900 shadow-inner dark:border-zinc-700 dark:bg-zinc-950/80 dark:text-zinc-100 sm:min-h-[24rem] sm:px-10 sm:py-10">
|
|
<div class="prose max-w-none text-lg leading-9 dark:prose-invert sm:text-xl sm:leading-10">
|
|
{!! $ticket->body !!}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
|
|
<details open class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-supporting-files-card>
|
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
|
|
<div class="flex min-w-0 items-start gap-5">
|
|
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
|
|
<i class="fa-solid fa-paperclip text-xl" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Attachments</p>
|
|
<h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Supporting files</h2>
|
|
<p class="text-base font-medium leading-7 text-blue-50/85">Pin screenshots, logs and supporting documents directly to this ticket.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<span class="inline-flex shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold ring-1 ring-white/20 shadow-sm">
|
|
<i class="fa-solid fa-paperclip text-sm" aria-hidden="true"></i>
|
|
{{ $ticket->attachments->count() }} file{{ $ticket->attachments->count() === 1 ? '' : 's' }}
|
|
<i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
|
|
</span>
|
|
</summary>
|
|
|
|
<div class="space-y-5 p-6">
|
|
@can('update', $ticket)
|
|
<form method="POST" action="{{ route('helpdesk.tickets.attachments.store', $ticket) }}" enctype="multipart/form-data" class="rounded-2xl border border-blue-500/25 bg-slate-950/70 p-5 shadow-sm" data-helpdesk-ticket-attachment-form>
|
|
@csrf
|
|
<div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div class="min-w-0">
|
|
<p class="text-sm font-black uppercase tracking-[0.22em] text-blue-200">Add files</p>
|
|
<p class="mt-1 text-sm font-semibold text-slate-200" data-helpdesk-file-label>No files selected</p>
|
|
</div>
|
|
<div class="flex flex-col gap-3 sm:flex-row sm:items-center">
|
|
<label data-helpdesk-file-button class="hd-attachment-action">
|
|
<i class="fa-solid fa-paperclip" aria-hidden="true"></i>
|
|
<span>Choose files</span>
|
|
<input name="attachments[]" type="file" multiple class="sr-only" data-helpdesk-file-input>
|
|
</label>
|
|
<button type="submit" class="hd-attachment-action hd-attachment-action-upload">
|
|
<i class="fa-solid fa-upload" aria-hidden="true"></i>
|
|
<span>Upload</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@error('attachments')
|
|
<p class="mt-3 text-sm font-semibold text-red-300">{{ $message }}</p>
|
|
@enderror
|
|
@error('attachments.*')
|
|
<p class="mt-3 text-sm font-semibold text-red-300">{{ $message }}</p>
|
|
@enderror
|
|
</form>
|
|
@endcan
|
|
|
|
@if ($ticket->attachments->isEmpty())
|
|
<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-sm font-semibold text-zinc-500 dark:border-zinc-700">No supporting files have been attached yet.</div>
|
|
@else
|
|
<div class="grid gap-3 sm:grid-cols-2">
|
|
@foreach ($ticket->attachments as $attachment)
|
|
<a href="{{ route('helpdesk.attachments.download', $attachment->id) }}" target="_blank" class="group flex items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 text-sm transition hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800">
|
|
<span class="min-w-0">
|
|
<span class="block truncate font-bold text-zinc-900 dark:text-zinc-100">{{ $attachment->original_name ?? $attachment->original_filename ?? $attachment->filename ?? $attachment->file_name ?? basename($attachment->path ?? $attachment->file_path ?? '') }}</span>
|
|
<span class="block text-xs text-zinc-500">{{ Number::fileSize($attachment->size ?? $attachment->size_bytes ?? 0) }}</span>
|
|
</span>
|
|
<span class="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-zinc-100 text-zinc-700 transition group-hover:bg-blue-600 group-hover:text-white dark:bg-zinc-800 dark:text-zinc-200">
|
|
<i class="fa-solid fa-download" aria-hidden="true"></i>
|
|
</span>
|
|
</a>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</details>
|
|
|
|
<section class="space-y-4">
|
|
<details class="overflow-hidden rounded-2xl border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-conversation-section>
|
|
<summary class="flex cursor-pointer list-none items-center justify-between gap-5 bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-7 text-white marker:hidden sm:px-9">
|
|
<div class="flex min-w-0 items-start gap-5">
|
|
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/25 text-white ring-1 ring-white/20 shadow-lg shadow-black/20">
|
|
<i class="fa-solid fa-comments text-xl" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Conversation</p>
|
|
<h2 class="text-2xl font-extrabold tracking-tight sm:text-3xl">Document responses</h2>
|
|
<p class="text-base font-medium leading-7 text-blue-50/85">Lotus Notes-style document responses and replies.</p>
|
|
</div>
|
|
</div>
|
|
<span class="inline-flex shrink-0 items-center gap-3 rounded-2xl bg-white/15 px-5 py-3 text-base font-extrabold ring-1 ring-white/20 shadow-sm">
|
|
{{ $visibleCommentCount }} item{{ $visibleCommentCount === 1 ? '' : 's' }}
|
|
<i class="fa-solid fa-chevron-right transition group-open:rotate-90" aria-hidden="true"></i>
|
|
</span>
|
|
</summary>
|
|
|
|
<div class="space-y-4 p-5">
|
|
<div class="grid gap-3 md:grid-cols-[1fr_auto]">
|
|
<label class="sr-only" for="helpdesk-comment-search">Search comments</label>
|
|
<input id="helpdesk-comment-search" type="search" placeholder="Search comments by subject, author, text or technical reference..." class="block w-full rounded-xl border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900 shadow-sm focus:border-red-500 focus:ring-red-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-search>
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<button type="button" class="inline-flex items-center justify-center rounded-xl bg-red-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-red-700" data-helpdesk-expand-comments>
|
|
<i class="fa-solid fa-up-right-and-down-left-from-center mr-2" aria-hidden="true"></i>
|
|
Expand all
|
|
</button>
|
|
<button type="button" class="hidden items-center justify-center rounded-xl bg-blue-600 px-4 py-2 text-sm font-bold text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus:ring-blue-400 dark:focus:ring-offset-zinc-900" data-helpdesk-collapse-comments>
|
|
<i class="fa-solid fa-down-left-and-up-right-to-center mr-2" aria-hidden="true"></i>
|
|
Collapse all
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
@if ($ticket->comments->isNotEmpty())
|
|
@include('helpdesk::partials.comment-thread', ['comments' => $ticket->comments, 'level' => 0, 'ticket' => $ticket, 'canSeeInternalNotes' => $canSeeInternalNotes])
|
|
@else
|
|
<div class="rounded-2xl border border-dashed border-zinc-300 p-8 text-center text-zinc-500 dark:border-zinc-700">No responses yet.</div>
|
|
@endif
|
|
</div>
|
|
</details>
|
|
</section>
|
|
|
|
<form method="POST" action="{{ route('helpdesk.tickets.comments.store', $ticket) }}" enctype="multipart/form-data" class="overflow-hidden rounded-[2rem] border border-zinc-200 bg-white shadow-sm dark:border-zinc-700 dark:bg-zinc-900" data-helpdesk-comment-form>
|
|
@csrf
|
|
<div class="bg-gradient-to-r from-slate-950 via-blue-950 to-slate-900 px-7 py-8 text-white sm:px-10">
|
|
<div class="flex min-w-0 items-start gap-5">
|
|
<span class="inline-flex h-14 w-14 shrink-0 items-center justify-center rounded-2xl bg-blue-500/20 text-white ring-1 ring-white/25 shadow-lg shadow-black/20">
|
|
<i class="fa-solid fa-square-plus text-xl" aria-hidden="true"></i>
|
|
</span>
|
|
<div class="min-w-0 space-y-2">
|
|
<p class="text-xs font-black uppercase tracking-[0.22em] text-blue-200">Response document</p>
|
|
<h2 class="text-2xl font-extrabold tracking-tight text-white sm:text-3xl">Add reply</h2>
|
|
<p class="max-w-4xl text-base font-medium leading-7 text-blue-50/90">Create a response, internal MPBA note or threaded document reply.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="space-y-7 p-7 sm:p-10">
|
|
@if (session('ticket-comment-added'))
|
|
<div class="mb-4 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
|
|
{{ session('ticket-comment-added') }}
|
|
</div>
|
|
@endif
|
|
@if ($errors->any())
|
|
<div class="mb-4 rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm font-bold text-red-800 dark:border-red-800 dark:bg-red-950 dark:text-red-100">
|
|
{{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
@php
|
|
$cannedResponseBodies = $cannedResponses->mapWithKeys(function ($response) use ($ticket, $currentUser) {
|
|
$body = (string) $response->body;
|
|
|
|
$body = strtr($body, [
|
|
'{{ ticket.reference }}' => e((string) ($ticket->reference ?? '')),
|
|
'{{ ticket.subject }}' => e((string) ($ticket->subject ?? '')),
|
|
'{{ ticket.status }}' => e((string) ($ticket->status?->name ?? '')),
|
|
'{{ ticket.priority }}' => e((string) ($ticket->priority?->name ?? '')),
|
|
'{{ ticket.category }}' => e((string) ($ticket->category?->name ?? '')),
|
|
'{{ ticket.project }}' => e((string) ($ticket->project?->title ?? '')),
|
|
'{{ ticket.team }}' => e((string) ($ticket->team?->name ?? '')),
|
|
'{{ requester.name }}' => e((string) ($ticket->owner?->name ?? $ticket->user?->name ?? '')),
|
|
'{{ agent.name }}' => e((string) ($ticket->agent?->name ?? $currentUser?->name ?? '')),
|
|
'{{ actor.name }}' => e((string) ($currentUser?->name ?? '')),
|
|
'{{ ticket.url }}' => e(route('helpdesk.tickets.show', ['ticket' => $ticket->getKey()])),
|
|
]);
|
|
|
|
$body = html_entity_decode($body, ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
|
$body = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $body) ?: '';
|
|
$body = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $body) ?: '';
|
|
$body = preg_replace('/javascript\s*:/i', '', $body) ?: '';
|
|
$body = strip_tags($body, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
|
|
|
|
return [(string) $response->id => trim($body)];
|
|
})->all();
|
|
@endphp
|
|
|
|
@php
|
|
$cannedResponseNames = $cannedResponses->mapWithKeys(fn ($response) => [(string) $response->id => (string) $response->name])->all();
|
|
@endphp
|
|
<script type="application/json" id="helpdesk-canned-response-bodies">@json($cannedResponseBodies)</script>
|
|
<script type="application/json" id="helpdesk-canned-response-names">@json($cannedResponseNames)</script>
|
|
|
|
@if ($cannedResponses->isNotEmpty())
|
|
<div class="grid gap-4 md:grid-cols-[1fr_auto]">
|
|
<div>
|
|
<label for="ticket-canned-response" class="mb-3 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Canned response</label>
|
|
<select id="ticket-canned-response" name="canned_response_id" class="hd-select block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-canned-response-select>
|
|
<option value="">Choose a saved response...</option>
|
|
@foreach ($cannedResponses as $response)
|
|
<option value="{{ $response->id }}">{{ $response->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button type="button" dusk="insert-canned-response" class="inline-flex min-h-14 items-center justify-center rounded-2xl bg-blue-600 px-6 py-4 text-base font-bold text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70" data-insert-canned-response>
|
|
<i class="fa-solid fa-copy mr-2" aria-hidden="true"></i>
|
|
Insert response
|
|
</button>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
@php
|
|
$oldCommentBody = html_entity_decode((string) old('commentBody'), ENT_QUOTES | ENT_HTML5, 'UTF-8');
|
|
$oldCommentBody = preg_replace('/<\s*(script|style)[^>]*>.*?<\s*\/\s*\1\s*>/is', '', $oldCommentBody) ?: '';
|
|
$oldCommentBody = preg_replace('/\s+on[a-z]+\s*=\s*("[^"]*"|\'[^\']*\'|[^\s>]+)/i', '', $oldCommentBody) ?: '';
|
|
$oldCommentBody = preg_replace('/javascript\s*:/i', '', $oldCommentBody) ?: '';
|
|
$oldCommentBody = strip_tags($oldCommentBody, '<p><br><strong><b><em><i><u><ul><ol><li><blockquote><pre><code><a>');
|
|
@endphp
|
|
|
|
<div>
|
|
<label for="ticket-comment-subject" class="mb-2 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Subject</label>
|
|
<input id="ticket-comment-subject" name="subject" value="{{ old('subject') }}" placeholder="Response subject" class="block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-helpdesk-comment-subject>
|
|
</div>
|
|
|
|
<div>
|
|
<label for="ticket-comment-body-editor" class="mb-3 block text-sm font-bold text-zinc-700 dark:text-zinc-200">Comment</label>
|
|
<div class="mb-2 flex flex-wrap gap-2" data-helpdesk-html-toolbar="ticket-comment-body-editor">
|
|
<button type="button" data-helpdesk-command="bold" class="rounded-lg border px-2 py-1 text-xs font-black">B</button>
|
|
<button type="button" data-helpdesk-command="italic" class="rounded-lg border px-2 py-1 text-xs italic">I</button>
|
|
<button type="button" data-helpdesk-command="underline" class="rounded-lg border px-2 py-1 text-xs underline">U</button>
|
|
<button type="button" data-helpdesk-command="insertUnorderedList" class="rounded-lg border px-2 py-1 text-xs">List</button>
|
|
<button type="button" data-helpdesk-block="blockquote" class="rounded-lg border px-2 py-1 text-xs">Quote</button>
|
|
<button type="button" data-helpdesk-block="code" class="rounded-lg border px-2 py-1 text-xs">Code</button>
|
|
</div>
|
|
<div id="ticket-comment-body-editor" dusk="ticket-comment-editor" contenteditable="true" role="textbox" aria-multiline="true" data-helpdesk-rich-editor data-helpdesk-sync-target="ticket-comment-body" class="block min-h-[20rem] w-full rounded-[1.5rem] border border-zinc-300 bg-white p-6 text-base leading-8 text-zinc-900 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100 prose max-w-none dark:prose-invert">{!! $oldCommentBody !!}</div>
|
|
<textarea id="ticket-comment-body" name="commentBody" required class="sr-only" tabindex="-1" aria-hidden="true">{{ $oldCommentBody }}</textarea>
|
|
</div>
|
|
|
|
@can('update', $ticket)
|
|
@if ($canSeeInternalNotes)
|
|
<label class="mt-4 flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200">
|
|
<input type="checkbox" name="internal" value="1" @checked(old('internal')) class="rounded border-zinc-300">
|
|
MPBA internal note only
|
|
</label>
|
|
@endif
|
|
@endcan
|
|
|
|
|
|
<div class="mt-6 flex justify-end">
|
|
<button dusk="post-comment" type="submit" class="inline-flex items-center justify-center rounded-xl bg-emerald-600 px-5 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
|
|
<i class="fa-solid fa-comments mr-2" aria-hidden="true"></i>
|
|
Post reply
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
|
|
<script>
|
|
document.addEventListener('click', function (event) {
|
|
const insertButton = event.target.closest('[data-insert-canned-response]');
|
|
|
|
if (insertButton) {
|
|
const form = insertButton.closest('[data-helpdesk-comment-form]');
|
|
const select = form?.querySelector('[data-canned-response-select]');
|
|
const editor = form?.querySelector('[data-helpdesk-rich-editor]');
|
|
const textarea = form?.querySelector('textarea[name="commentBody"]');
|
|
const selected = select?.selectedOptions?.[0];
|
|
const subjectInput = form?.querySelector('[data-helpdesk-comment-subject]');
|
|
const selectedId = String(selected?.value || '');
|
|
const cannedResponses = getCannedResponseBodies();
|
|
const cannedResponseNames = getCannedResponseNames();
|
|
const body = normaliseCannedHtml(cannedResponses[selectedId] || selected?.dataset?.body || '');
|
|
|
|
if (subjectInput && selectedId !== '' && subjectInput.value.trim() === '') {
|
|
subjectInput.value = cannedResponseNames[selectedId] || selected?.textContent?.trim() || 'Response';
|
|
subjectInput.dispatchEvent(new Event('input', { bubbles: true }));
|
|
}
|
|
|
|
if (editor && textarea && body.trim() !== '') {
|
|
insertHtmlAtEnd(editor, body);
|
|
syncRichEditor(editor);
|
|
editor.focus();
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
const toolbarButton = event.target.closest('[data-helpdesk-command], [data-helpdesk-block], [data-helpdesk-tag], [data-helpdesk-wrap]');
|
|
|
|
if (toolbarButton) {
|
|
const toolbar = toolbarButton.closest('[data-helpdesk-html-toolbar]');
|
|
const editor = document.getElementById(toolbar?.dataset?.helpdeskHtmlToolbar || '');
|
|
|
|
if (editor?.matches('[contenteditable="true"]')) {
|
|
applyRichEditorCommand(editor, toolbarButton);
|
|
} else if (editor) {
|
|
const tag = toolbarButton.dataset.helpdeskTag;
|
|
const before = toolbarButton.dataset.helpdeskWrap || (tag === 'ul' ? '<ul><li>' : `<${tag}>`);
|
|
const after = toolbarButton.dataset.helpdeskWrapEnd || (tag === 'ul' ? '</li></ul>' : `</${tag}>`);
|
|
wrapSelection(editor, before, after);
|
|
}
|
|
|
|
return;
|
|
}
|
|
|
|
const expandButton = event.target.closest('[data-helpdesk-expand-comments]');
|
|
|
|
if (expandButton) {
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
card.open = true;
|
|
});
|
|
updateCommentToggleButtons();
|
|
return;
|
|
}
|
|
|
|
const collapseButton = event.target.closest('[data-helpdesk-collapse-comments]');
|
|
|
|
if (collapseButton) {
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
card.open = false;
|
|
});
|
|
updateCommentToggleButtons();
|
|
return;
|
|
}
|
|
|
|
const replyButton = event.target.closest('[data-helpdesk-reply-toggle]');
|
|
|
|
if (! replyButton) {
|
|
return;
|
|
}
|
|
|
|
const target = document.getElementById(replyButton.dataset.helpdeskReplyToggle || '');
|
|
|
|
if (! target) {
|
|
return;
|
|
}
|
|
|
|
target.classList.toggle('hidden');
|
|
|
|
if (! target.classList.contains('hidden')) {
|
|
target.querySelector('textarea')?.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('submit', function (event) {
|
|
const form = event.target.closest('[data-helpdesk-comment-form]');
|
|
|
|
if (! form) {
|
|
return;
|
|
}
|
|
|
|
form.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => {
|
|
syncRichEditor(editor);
|
|
});
|
|
});
|
|
|
|
document.addEventListener('input', function (event) {
|
|
const richEditor = event.target.closest('[data-helpdesk-rich-editor]');
|
|
|
|
if (richEditor) {
|
|
syncRichEditor(richEditor);
|
|
}
|
|
|
|
const search = event.target.closest('[data-helpdesk-comment-search]');
|
|
|
|
if (search) {
|
|
const term = search.value.toLowerCase().trim();
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
const match = term === '' || (card.dataset.helpdeskCommentText || '').includes(term);
|
|
card.classList.toggle('hidden', ! match);
|
|
if (match) {
|
|
card.open = true;
|
|
}
|
|
});
|
|
}
|
|
|
|
const fileInput = event.target.closest('[data-helpdesk-file-input]');
|
|
|
|
if (fileInput) {
|
|
const panel = fileInput.closest('[data-helpdesk-ticket-attachment-form], [data-helpdesk-comment-form], details, form');
|
|
const label = panel?.querySelector('[data-helpdesk-file-label]');
|
|
const count = fileInput.files?.length || 0;
|
|
const names = Array.from(fileInput.files || []).map((file) => file.name);
|
|
|
|
if (label) {
|
|
label.textContent = count === 0
|
|
? 'No files selected'
|
|
: `${count} file${count === 1 ? '' : 's'} selected${names.length ? ': ' + names.join(', ') : ''}`;
|
|
}
|
|
}
|
|
});
|
|
|
|
function updateCommentToggleButtons() {
|
|
const commentCards = Array.from(document.querySelectorAll('[data-helpdesk-comment-card]'));
|
|
const expandButton = document.querySelector('[data-helpdesk-expand-comments]');
|
|
const collapseButton = document.querySelector('[data-helpdesk-collapse-comments]');
|
|
|
|
if (! expandButton || ! collapseButton) {
|
|
return;
|
|
}
|
|
|
|
const hasExpandableComments = commentCards.some((card) => ! card.open);
|
|
const hasExpandedComments = commentCards.some((card) => card.open);
|
|
|
|
expandButton.classList.toggle('hidden', ! hasExpandableComments);
|
|
expandButton.classList.toggle('inline-flex', hasExpandableComments);
|
|
collapseButton.classList.toggle('hidden', ! hasExpandedComments || hasExpandableComments);
|
|
collapseButton.classList.toggle('inline-flex', hasExpandedComments && ! hasExpandableComments);
|
|
}
|
|
|
|
function getCannedResponseBodies() {
|
|
const source = document.getElementById('helpdesk-canned-response-bodies');
|
|
|
|
if (! source) {
|
|
return {};
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(source.textContent || '{}') || {};
|
|
} catch (error) {
|
|
console.error('Unable to read canned response bodies.', error);
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function getCannedResponseNames() {
|
|
const source = document.getElementById('helpdesk-canned-response-names');
|
|
|
|
if (! source) {
|
|
return {};
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(source.textContent || '{}') || {};
|
|
} catch (error) {
|
|
console.error('Unable to read canned response names.', error);
|
|
return {};
|
|
}
|
|
}
|
|
|
|
function insertHtmlAtEnd(editor, html) {
|
|
const current = editor.innerHTML.trim();
|
|
const cleaned = html.trim();
|
|
|
|
if (current === '' || current === '<br>') {
|
|
editor.innerHTML = cleaned;
|
|
return;
|
|
}
|
|
|
|
editor.innerHTML = current + '<p><br></p>' + cleaned;
|
|
}
|
|
|
|
function decodeHtmlEntities(value) {
|
|
const textarea = document.createElement('textarea');
|
|
textarea.innerHTML = value;
|
|
return textarea.value;
|
|
}
|
|
|
|
function normaliseCannedHtml(value) {
|
|
let decoded = decodeHtmlEntities(value || '');
|
|
|
|
for (let i = 0; i < 5; i += 1) {
|
|
if (! decoded.includes('<') && ! decoded.includes('>') && ! decoded.includes('&lt;')) {
|
|
break;
|
|
}
|
|
|
|
const next = decodeHtmlEntities(decoded);
|
|
|
|
if (next === decoded) {
|
|
break;
|
|
}
|
|
|
|
decoded = next;
|
|
}
|
|
|
|
decoded = decoded.trim();
|
|
|
|
if (decoded === '') {
|
|
return '';
|
|
}
|
|
|
|
if (/<[a-z][\s\S]*>/i.test(decoded)) {
|
|
return decoded;
|
|
}
|
|
|
|
return decoded
|
|
.split(/\n{2,}/)
|
|
.map((paragraph) => paragraph.trim())
|
|
.filter((paragraph) => paragraph !== '')
|
|
.map((paragraph) => '<p>' + escapeHtml(paragraph).replace(/\n/g, '<br>') + '</p>')
|
|
.join('');
|
|
}
|
|
|
|
function syncRichEditor(editor) {
|
|
const target = document.getElementById(editor.dataset.helpdeskSyncTarget || '');
|
|
|
|
if (! target) {
|
|
return;
|
|
}
|
|
|
|
target.value = editor.innerHTML.trim();
|
|
target.dispatchEvent(new Event('input', { bubbles: true }));
|
|
target.dispatchEvent(new Event('change', { bubbles: true }));
|
|
}
|
|
|
|
function applyRichEditorCommand(editor, button) {
|
|
editor.focus();
|
|
|
|
const command = button.dataset.helpdeskCommand;
|
|
|
|
if (command) {
|
|
document.execCommand(command, false, null);
|
|
syncRichEditor(editor);
|
|
return;
|
|
}
|
|
|
|
const block = button.dataset.helpdeskBlock;
|
|
|
|
if (block === 'blockquote') {
|
|
document.execCommand('formatBlock', false, 'blockquote');
|
|
syncRichEditor(editor);
|
|
return;
|
|
}
|
|
|
|
if (block === 'code') {
|
|
const selection = window.getSelection();
|
|
const selected = selection && selection.toString() !== '' ? selection.toString() : 'code';
|
|
document.execCommand('insertHTML', false, '<code>' + escapeHtml(selected) + '</code>');
|
|
syncRichEditor(editor);
|
|
}
|
|
}
|
|
|
|
function escapeHtml(value) {
|
|
const span = document.createElement('span');
|
|
span.textContent = value;
|
|
return span.innerHTML;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
document.querySelectorAll('[data-helpdesk-rich-editor]').forEach((editor) => syncRichEditor(editor));
|
|
updateCommentToggleButtons();
|
|
});
|
|
|
|
function wrapSelection(textarea, before, after) {
|
|
const start = textarea.selectionStart || 0;
|
|
const end = textarea.selectionEnd || 0;
|
|
const selected = textarea.value.substring(start, end) || 'text';
|
|
textarea.value = textarea.value.substring(0, start) + before + selected + after + textarea.value.substring(end);
|
|
textarea.focus();
|
|
textarea.setSelectionRange(start + before.length, start + before.length + selected.length);
|
|
textarea.dispatchEvent(new Event('input', { bubbles: true }));
|
|
}
|
|
</script>
|
|
</div>
|
|
|
|
<aside class="space-y-6">
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 border-b border-blue-200 pb-3 dark:border-blue-900/70">
|
|
<h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
|
|
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-blue-600 text-white shadow-sm"><i class="fa-solid fa-file-lines" aria-hidden="true"></i></span>
|
|
Ticket details
|
|
</h2>
|
|
</div>
|
|
<dl class="space-y-3 text-sm">
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Category</dt><dd>{{ $ticket->category?->name ?? 'None' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Project</dt><dd>{{ $ticket->project?->title ?? 'None' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Product/service</dt><dd>{{ $ticket->product?->name ?? 'None' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Team</dt><dd>{{ $ticket->team?->name ?? 'None' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Created</dt><dd>{{ $ticket->created_at->format('d M Y H:i') }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Due</dt><dd>{{ $ticket->due_at?->format('d M Y') ?? 'No due date' }}</dd></div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 border-b border-red-200 pb-3 dark:border-red-900/70">
|
|
<h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
|
|
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-red-600 text-white shadow-sm"><i class="fa-solid fa-clock" aria-hidden="true"></i></span>
|
|
SLA metrics
|
|
</h2>
|
|
</div>
|
|
<div class="grid gap-3 text-sm">
|
|
<div class="rounded-xl border {{ $ticket->sla_first_response_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-emerald-200 bg-emerald-50 text-emerald-900 dark:border-emerald-900 dark:bg-emerald-950 dark:text-emerald-100' }} p-3">
|
|
<div class="text-xs font-semibold uppercase tracking-wide">First response</div>
|
|
<div class="mt-1">{{ $ticket->first_response_at?->format('d M Y H:i') ?? 'Awaiting response' }}</div>
|
|
<div class="mt-1 text-xs opacity-75">Due {{ $ticket->sla_first_response_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
|
|
</div>
|
|
<div class="rounded-xl border {{ $ticket->sla_resolution_breached ? 'border-red-300 bg-red-50 text-red-900 dark:border-red-900 dark:bg-red-950 dark:text-red-100' : 'border-blue-200 bg-blue-50 text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100' }} p-3">
|
|
<div class="text-xs font-semibold uppercase tracking-wide">Resolution</div>
|
|
<div class="mt-1">{{ $ticket->completed_at?->format('d M Y H:i') ?? 'Open' }}</div>
|
|
<div class="mt-1 text-xs opacity-75">Due {{ $ticket->sla_resolution_due_at?->format('d M Y H:i') ?? 'Not set' }}</div>
|
|
</div>
|
|
<div class="grid grid-cols-2 gap-2 text-center">
|
|
<div class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><div class="text-xl font-semibold">{{ $ticket->public_replies_count }}</div><div class="text-xs text-zinc-500">Public replies</div></div>
|
|
<div class="rounded-xl border border-zinc-200 p-3 dark:border-zinc-700"><div class="text-xl font-semibold">{{ $ticket->time_spent_minutes }}</div><div class="text-xs text-zinc-500">Minutes logged</div></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 border-b border-emerald-200 pb-3 dark:border-emerald-900/70">
|
|
<h2 class="flex items-center gap-3 text-base font-extrabold text-zinc-900 dark:text-white">
|
|
<span class="inline-flex h-9 w-9 items-center justify-center rounded-xl bg-emerald-600 text-white shadow-sm"><i class="fa-solid fa-user" aria-hidden="true"></i></span>
|
|
Requester profile
|
|
</h2>
|
|
</div>
|
|
<dl class="space-y-3 text-sm">
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Name</dt><dd>{{ $ticket->owner?->name ?? 'Unknown' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Email</dt><dd class="truncate">{{ $ticket->owner?->email ?? 'None' }}</dd></div>
|
|
<div class="flex justify-between gap-4"><dt class="text-zinc-500">Company</dt><dd>{{ $ticket->owner?->company?->name ?? 'Current company' }}</dd></div>
|
|
</dl>
|
|
@if ($ticket->tags->isNotEmpty())
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
@foreach ($ticket->tags as $tag)
|
|
<span class="rounded-full px-2 py-1 text-xs font-semibold text-white" style="background-color: {{ \Modules\Helpdesk\Support\Color::css($tag->color) }}">{{ $tag->name }}</span>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
@if ($ticket->checklistItems->isNotEmpty())
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
@php($completedChecks = $ticket->checklistItems->where('is_completed', true)->count())
|
|
<div class="mb-4 flex items-center justify-between gap-3">
|
|
<h2 class="text-base font-semibold text-zinc-900 dark:text-white">Checklist</h2>
|
|
<flux:badge color="blue">{{ $completedChecks }}/{{ $ticket->checklistItems->count() }}</flux:badge>
|
|
</div>
|
|
<div class="space-y-2">
|
|
@foreach ($ticket->checklistItems as $item)
|
|
<label class="flex items-start gap-3 rounded-xl border border-zinc-200 p-3 text-sm dark:border-zinc-700">
|
|
<input type="checkbox" wire:click="toggleChecklistItem({{ $item->id }})" @checked($item->is_completed) class="mt-1 rounded border-zinc-300">
|
|
<span class="{{ $item->is_completed ? 'text-zinc-500 line-through' : 'text-zinc-800 dark:text-zinc-100' }}">{{ $item->title }}</span>
|
|
</label>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<h2 class="mb-4 text-base font-semibold text-zinc-900 dark:text-white">Git commits</h2>
|
|
<div class="space-y-2">
|
|
@forelse ($ticket->gitCommits as $commit)
|
|
<a href="{{ $commit->url ?: '#' }}" target="_blank" class="block rounded-xl border border-zinc-100 p-3 dark:border-zinc-800">
|
|
<div class="font-mono text-xs text-zinc-500">{{ $commit->short_hash }} · {{ $commit->repository?->name }}</div>
|
|
<div class="mt-1 text-sm font-medium text-zinc-900 dark:text-zinc-100">{{ $commit->message }}</div>
|
|
</a>
|
|
@empty
|
|
<div class="rounded-xl border border-dashed border-zinc-300 p-4 text-center text-sm text-zinc-500 dark:border-zinc-700">No commits linked.</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
@can('update', $ticket)
|
|
<div class="rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
|
|
<div class="mb-5 rounded-2xl bg-gradient-to-r from-blue-700 via-indigo-700 to-violet-700 px-4 py-4 text-white shadow-sm">
|
|
<p class="text-xs font-black uppercase tracking-[0.24em] text-blue-100">Ticket controls</p>
|
|
<h2 class="mt-1 text-lg font-black tracking-tight">Assignment, status and priority</h2>
|
|
<p class="mt-1 text-sm font-semibold text-blue-100/90">Use the explicit update buttons below to save each change.</p>
|
|
</div>
|
|
|
|
@if (session('ticket-action-updated'))
|
|
<div class="mb-5 rounded-xl border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm font-bold text-emerald-800 dark:border-emerald-800 dark:bg-emerald-950 dark:text-emerald-100">
|
|
{{ session('ticket-action-updated') }}
|
|
</div>
|
|
@endif
|
|
|
|
<form method="POST" action="{{ route('helpdesk.tickets.agent.update', $ticket) }}" class="mb-5 space-y-3">
|
|
@csrf
|
|
<label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_agent_id">Assigned agent</label>
|
|
<select id="show_agent_id" name="agent_id" class="hd-select block w-full rounded-xl border border-zinc-300 bg-white p-2.5 text-sm font-semibold text-zinc-900 shadow-sm focus:border-emerald-500 focus:ring-emerald-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-agent">
|
|
<option value="" @selected($agent_id === null)>Unassigned</option>
|
|
@forelse ($agents as $agent)
|
|
<option value="{{ $agent->id }}" @selected((int) $agent_id === (int) $agent->id)>{{ $agent->name }} · {{ $agent->email }}</option>
|
|
@empty
|
|
<option value="" disabled>No users available for assignment</option>
|
|
@endforelse
|
|
</select>
|
|
@error('agent_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
|
<button type="submit" dusk="update-agent" class="inline-flex items-center justify-center rounded-lg bg-emerald-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-emerald-400/70">
|
|
<i class="fa-solid fa-user-check mr-2" aria-hidden="true"></i>
|
|
<span>Assign agent</span>
|
|
</button>
|
|
</form>
|
|
|
|
<form method="POST" action="{{ route('helpdesk.tickets.status.update', $ticket) }}" class="mb-5 space-y-3">
|
|
@csrf
|
|
<label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_status_id">Status</label>
|
|
<select id="show_status_id" name="status_id" class="hd-select block min-h-14 w-full rounded-2xl border border-zinc-300 bg-white px-5 py-4 text-base font-semibold text-zinc-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-status">
|
|
@foreach ($statuses as $status)
|
|
<option value="{{ $status->id }}" @selected((int) $status_id === (int) $status->id)>{{ $status->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('status_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
|
<button type="submit" dusk="update-status" class="inline-flex items-center justify-center rounded-lg bg-blue-600 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400/70">
|
|
<i class="fa-solid fa-circle-check mr-2" aria-hidden="true"></i>
|
|
<span>Update status</span>
|
|
</button>
|
|
</form>
|
|
|
|
<form method="POST" action="{{ route('helpdesk.tickets.priority.update', $ticket) }}" class="space-y-3">
|
|
@csrf
|
|
<label class="block text-sm font-bold text-zinc-700 dark:text-zinc-200" for="show_priority_id">Priority</label>
|
|
<select id="show_priority_id" name="priority_id" class="hd-select block w-full rounded-xl border border-zinc-300 bg-white p-2.5 text-sm font-semibold text-zinc-900 shadow-sm focus:border-amber-500 focus:ring-amber-500 dark:border-zinc-700 dark:bg-zinc-950 dark:text-zinc-100" data-dusk="ticket-show-priority">
|
|
@foreach ($priorities as $priority)
|
|
<option value="{{ $priority->id }}" @selected((int) $priority_id === (int) $priority->id)>{{ $priority->name }}</option>
|
|
@endforeach
|
|
</select>
|
|
@error('priority_id') <p class="text-sm font-bold text-red-600 dark:text-red-400">{{ $message }}</p> @enderror
|
|
<button type="submit" dusk="update-priority" class="inline-flex items-center justify-center rounded-lg bg-amber-500 px-3 py-2 text-xs font-black text-white shadow-sm transition hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-300/70">
|
|
<i class="fa-solid fa-flag mr-2" aria-hidden="true"></i>
|
|
<span>Update priority</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
@endcan
|
|
</aside>
|
|
</div>
|
|
</div>
|