204 lines
14 KiB
PHP
204 lines
14 KiB
PHP
@section('title'){{ __('Support Ticket') }}@endsection
|
|
<span>
|
|
<div class="flex h-full w-full flex-1 flex-col gap-4 rounded-xl">
|
|
<div class="grid auto-rows-min gap-4 md:grid-cols-2">
|
|
|
|
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
|
|
<flux:icon.clock />
|
|
</span>
|
|
<div>
|
|
<p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $open }}</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Opened Tickets</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="flex items-center gap-4 rounded-lg border border-gray-100 bg-white p-6 dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<span class="rounded-full bg-[#F04743]/20 p-3 text-[#F04743] dark:bg-[#F04743]/20 dark:text-[#F04743]">
|
|
<flux:icon.circle-x />
|
|
</span>
|
|
<div>
|
|
<p class="text-2xl font-medium text-gray-900 dark:text-white">{{ $closed }}</p>
|
|
<p class="text-sm text-gray-500 dark:text-gray-400">Closed Tickets</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<div x-data="{ show: false, id: 0 }">
|
|
<div class="flex-1 overflow-hidden rounded-xl border border-neutral-200 dark:border-neutral-700 dark:bg-white/[0.03]">
|
|
<div x-show="!show" class="list">
|
|
<div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
|
|
<h3 class="text-md font-semibold text-gray-900 dark:text-white pl-1">Tickets</h3>
|
|
<flux:modal.trigger name="create-ticket">
|
|
<flux:button class="cursor-pointer">Create Ticket</flux:button>
|
|
</flux:modal.trigger>
|
|
</div>
|
|
</div>
|
|
<div x-show="show">
|
|
<div class="flex justify-between items-center p-2 dark:bg-zinc-900 bg-gray-300">
|
|
<nav class="flex items-center cursor-pointer py-3" x-on:click="show = false">
|
|
<flux:icon.chevron-left variant="mini"/>
|
|
<flux:text>{{ __('Get back to Tickets') }}</flux:text>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
@if(count($tickets) > 0)
|
|
<div class="ticketbox">
|
|
<div x-show="!show" class="list">
|
|
<!-- Tickets Table -->
|
|
<div class="overflow-x-auto shadow-md sm:rounded-lg">
|
|
<table class="min-w-full table-auto text-sm text-left text-gray-500 dark:text-gray-400">
|
|
<thead class="text-xs text-gray-700 uppercase bg-gray-200 dark:bg-zinc-800 dark:text-gray-400">
|
|
<tr>
|
|
<th scope="col" class="px-6 py-3">ID</th>
|
|
<th scope="col" class="px-6 py-3">Subject</th>
|
|
<th scope="col" class="px-6 py-3">Status</th>
|
|
<th scope="col" class="px-6 py-3">Created Date</th>
|
|
<th scope="col" class="px-6 py-3"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
|
|
@foreach(collect($tickets)->reverse() as $index => $ticket)
|
|
<tr class="border-b dark:border-gray-700 border-gray-200">
|
|
<td class="px-6 py-4">#{{ $ticket->ticket_id }}</td>
|
|
<td class="px-6 py-4 truncate">{{ $ticket->subject }}</td>
|
|
<td class="px-6 py-4">
|
|
@if($ticket->status == "open")
|
|
<flux:badge size="sm" color="green">Open</flux:badge>
|
|
@elseif($ticket->status == "pending")
|
|
<flux:badge size="sm" color="yellow">In-Progress</flux:badge>
|
|
@else
|
|
<flux:badge size="sm" color="red">Closed</flux:badge>
|
|
@endif
|
|
|
|
</td>
|
|
<td class="px-6 py-4">{{ $ticket->created_at->diffForHumans() }}</td>
|
|
<td class="px-6 py-4">
|
|
<button class="cursor-pointer px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none"
|
|
x-on:click="show = true; id = {{ $index }};" data-id="{{ $index }}"
|
|
>
|
|
Show
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div x-show="show" class="message">
|
|
@foreach(collect($tickets)->reverse() as $index => $ticket)
|
|
<div x-show="id === {{ $index }}" id="ticket-{{ $index }}">
|
|
<div class="overflow-x-auto shadow-md sm:rounded-lg p-4">
|
|
<div class="flex flex-col lg:flex-row gap-6">
|
|
<!-- Left Column (Messages & Reply Form) -->
|
|
<div class="w-full lg:w-2/3 space-y-4">
|
|
<!-- Customer Message -->
|
|
<div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->name }}</span>
|
|
<span class="text-sm text-gray-500">{{ $ticket->created_at->format('F d, Y • h:i A') }}</span>
|
|
</div>
|
|
<p class="text-gray-700 dark:text-gray-300">Subject: {{ $ticket->subject }}<br/>Message: {{ $ticket->message }}</p>
|
|
</div>
|
|
|
|
@if(count($ticket->responses) > 0)
|
|
@foreach($ticket->responses as $response)
|
|
<div class="bg-white dark:bg-zinc-800 border-l-4 shadow rounded p-4">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<span class="font-semibold text-gray-800 dark:text-gray-200">{{ auth()->user()->id === $response->user_id ? auth()->user()->name : 'Support Team' }}</span>
|
|
<span class="text-sm text-gray-500">{{ $response->created_at->format('F d, Y • h:i A') }}</span>
|
|
</div>
|
|
<p class="text-gray-700 dark:text-gray-300">{{ $response->response }}</p>
|
|
</div>
|
|
@endforeach
|
|
@endif
|
|
|
|
@if($ticket->status !== "closed")
|
|
<!-- Reply Form -->
|
|
<div class="bg-white dark:bg-zinc-800 p-4 shadow rounded">
|
|
<textarea wire:model="response" class="w-full p-3 rounded border border-gray-300 dark:border-zinc-600 bg-white dark:bg-zinc-900 text-gray-800 dark:text-white focus:outline-none focus:ring focus:ring-blue-500" rows="4" placeholder="Type your response..."></textarea>
|
|
@error('response')
|
|
<div class="my-2 app-primary">
|
|
{{ $message }}
|
|
</div>
|
|
@enderror
|
|
<!-- Success/Error Message -->
|
|
@if (session()->has('success'))
|
|
<div class="my-2" style="color: #00AB55">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
@if (session()->has('error'))
|
|
<div class="my-2 app-primary">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
<flux:button variant="outline" wire:click="reply('{{ $ticket->id }}')">Send Reply</flux:button>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<!-- Right Column (Ticket Details) -->
|
|
<div class="w-full lg:w-1/3">
|
|
<div class="bg-white dark:bg-zinc-800 shadow rounded-lg p-4 space-y-2">
|
|
<h2 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-2">Ticket Details</h2>
|
|
<div class="text-gray-700 dark:text-gray-300">
|
|
<p><strong>Ticket ID:</strong> #{{ $ticket->ticket_id }}</p>
|
|
<p><strong>Created At:</strong> {{ $ticket->created_at->format('F d, Y • h:i A') }}</p>
|
|
<p><strong>Last Response:</strong> {{ $ticket->last_response_at ? $ticket->last_response_at->format('F d, Y • h:i A') : 'No responses yet' }}</p>
|
|
<span class="flex flex-row gap-2"><p><strong>Status:</strong></p>
|
|
@if($ticket->status == "open")
|
|
<flux:badge size="sm" color="green">Open</flux:badge>
|
|
@elseif($ticket->status == "pending")
|
|
<flux:badge size="sm" color="yellow">In-Progress</flux:badge>
|
|
@else
|
|
<flux:badge size="sm" color="red">Closed</flux:badge>
|
|
@endif
|
|
</span>
|
|
@if($ticket->status !== "closed")
|
|
<flux:button class="mt-2 cursor-pointer inbox-btn" wire:click="close('{{ $ticket->id }}')">Close Ticket</flux:button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@else
|
|
<div class="flex justify-center items-center" style="min-height: 400px;">
|
|
<p class="text-gray-500 dark:text-gray-400">No Tickets</p>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<flux:modal name="create-ticket" class="md:w-96">
|
|
<div class="space-y-6">
|
|
<div>
|
|
<flux:heading size="lg">Create ticket</flux:heading>
|
|
@if (session()->has('success'))
|
|
<flux:text class="mt-2" style="color: #00AB55">{{ session('success') }}</flux:text>
|
|
@endif
|
|
@if (session()->has('error'))
|
|
<flux:text class="mt-2 app-primary" >{{ session('error') }}</flux:text>
|
|
@endif
|
|
</div>
|
|
<flux:input label="Subject" placeholder="Enter subject" wire:model="subject"/>
|
|
<flux:textarea
|
|
label="Message"
|
|
placeholder="Enter the issue you are facing or just give us feedback what we can improve"
|
|
wire:model="message"
|
|
/>
|
|
<div class="flex">
|
|
<flux:spacer />
|
|
<flux:button class="cursor-pointer" type="submit" variant="primary" wire:click="store">Create</flux:button>
|
|
</div>
|
|
</div>
|
|
</flux:modal>
|
|
</span>
|