You've already forked Atomcms-edit
Complete Hubbly theme conversion: all pages rewritten with CSS variable theming
- Converted all views from Dusk components (x-content.content-card, x-form.*) to inline Hubbly style - All pages use consistent card pattern: rounded-lg, gradient headers, color-mix borders - Added Hubbly-style homepage with 2-column layout, login card, swiper news carousel - Rewrote navigation with Alpine.js dropdowns, CSS variable colors, Hubbly assets - Updated profile page with Hubbly cards, fixed data bugs (friend/guild relationships) - Rewrote register page to match Hubbly layout: banner header, avatar preview with Frank GIF, 2-column form, avatar carousel selector, border-4 inputs - Rewrote login, settings, help center, radio, applications, utility pages - All colors use CSS variables controlled by Filament theme editor - Added Hubbly assets: banner, Frank GIF, navigation icons, online badge - Removed all dependencies on x-content.* and x-form.* components
This commit is contained in:
root
@@ -6,50 +6,67 @@
|
||||
@push('title', auth()->user() ? auth()->user()->username : __('Help Center'))
|
||||
|
||||
<div class="col-span-12 flex flex-col lg:flex-row gap-4">
|
||||
<div class="flex flex-col gap-4 w-full lg:w-3/5">
|
||||
@foreach($categories->where('small_box', false) as $category)
|
||||
<x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ str_replace(':hotel', $hotelName, $category->name) }}
|
||||
</x-slot:title>
|
||||
<div class="flex flex-col gap-4 w-full lg:w-3/5">
|
||||
@foreach($categories->where('small_box', false) as $category)
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ str_replace(':hotel', $hotelName, $category->name) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
<img class="px-2" style="float: right !important;"
|
||||
src="{{ asset('/assets/images/help-center/' . $category->image_url) }}" alt="">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-sm" style="color: var(--color-text);">
|
||||
<img class="px-2" style="float: right !important;" src="{{ asset('/assets/images/help-center/' . $category->image_url) }}" alt="">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
|
||||
<button
|
||||
style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
|
||||
class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</x-content.content-card>
|
||||
@endforeach
|
||||
</div>
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 inline-block">
|
||||
<button style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);" class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-4 w-full lg:w-2/5">
|
||||
@foreach($categories->where('small_box', true) as $category)
|
||||
<x-content.content-card icon="duo-chat-icon" classes="border border-[var(--color-text-muted)]">
|
||||
<x-slot:title>
|
||||
{{ str_replace(':hotel', $hotelName, $category->name) }}
|
||||
</x-slot:title>
|
||||
<div class="flex flex-col gap-4 w-full lg:w-2/5">
|
||||
@foreach($categories->where('small_box', true) as $category)
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9 5.25h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ str_replace(':hotel', $hotelName, $category->name) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="px-2 text-sm text-[var(--color-text)]">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
<div class="p-4">
|
||||
<div class="text-sm" style="color: var(--color-text);">
|
||||
{!! str_replace(':hotel', $hotelName, $category->content) !!}
|
||||
</div>
|
||||
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 ml-2">
|
||||
<button
|
||||
style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);"
|
||||
class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</x-content.content-card>
|
||||
@endforeach
|
||||
</div>
|
||||
<a data-turbolinks="false" href="{{ $category->button_url ?? '#' }}" class="mt-4 inline-block">
|
||||
<button style="background-color: {{ $category->button_color }}; border: {{ $category->button_border_color }} solid 2px; color: var(--button-text-color);" class="px-2 py-1 font-semibold rounded transition hover:scale-105">
|
||||
{{ str_replace(':hotel', $hotelName, $category->button_text) }}
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,78 +1,102 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
{{ __('Create a ticket') }}
|
||||
</x-slot:title>
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v6m3-3H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Create a ticket') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please describe your request below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please describe your request below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('help-center.ticket.store') }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('help-center.ticket.store') }}" method="POST">
|
||||
@csrf
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text); @error('category_id') border-color: #ef4444 !important; @enderror">
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full @error('category_id') border-red-600 ring-red-500 @enderror">
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-semibold mb-1" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</label>
|
||||
|
||||
<div class="mt-4 no-tailwind">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Title') }}
|
||||
</x-form.label>
|
||||
<input name="title" type="text" value="{{ old('title') }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
</div>
|
||||
|
||||
<x-form.input name="title" type="text"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"/>
|
||||
<div class="mt-4">
|
||||
<x-form.wysiwyg-editor />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Submit ticket') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.wysiwyg-editor/>
|
||||
|
||||
<x-form.secondary-button type="submit" classes="mt-4">
|
||||
{{ __('Submit ticket') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-[var(--color-background)] p-2">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,83 +1,107 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
@push('title', 'Edit ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
{{ __('Edit your ticket') }}
|
||||
</x-slot:title>
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Edit your ticket') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please describe your request below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please describe your request below') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<form action="{{ route('help-center.ticket.update', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<form action="{{ route('help-center.ticket.update', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text); @error('category_id') border-color: #ef4444 !important; @enderror">
|
||||
<option value="{{ $ticket->category_id }}" selected>
|
||||
{{ $ticket->category->name }}
|
||||
</option>
|
||||
|
||||
<select name="category_id" id="category_id"
|
||||
class="focus:ring-0 border-4 border-[var(--color-text-muted)] rounded bg-[var(--color-surface)] border-[var(--color-text-muted)] text-[var(--color-text)] focus:border-[var(--color-primary)] w-full @error('category_id') border-red-600 ring-red-500 @enderror">
|
||||
<option value="{{ $ticket->category_id }}" selected>
|
||||
{{ $ticket->category->name }}
|
||||
</option>
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
|
||||
@foreach($categories as $category)
|
||||
<option value="{{ $category->id }}">
|
||||
{{ $category->name }}
|
||||
</option>
|
||||
@endforeach
|
||||
</select>
|
||||
<div class="mt-4">
|
||||
<label class="block text-sm font-semibold mb-1" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</label>
|
||||
|
||||
<div class="mt-4 no-tailwind">
|
||||
<x-form.label for="password_confirmation">
|
||||
{{ __('Title') }}
|
||||
</x-form.label>
|
||||
<input name="title" type="text" value="{{ $ticket->title }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"
|
||||
class="focus:ring-0 border rounded-lg w-full text-sm px-3 py-2.5"
|
||||
style="background-color: var(--color-background); border-color: color-mix(in srgb, var(--color-text-muted) 20%, transparent); color: var(--color-text);">
|
||||
</div>
|
||||
|
||||
<x-form.input name="title" type="text" value="{{ $ticket->title }}"
|
||||
placeholder="{{ __('Enter a title for your ticket') }}"/>
|
||||
<div class="mt-4">
|
||||
<x-form.wysiwyg-editor :content="$ticket->content" />
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Update ticket') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-form.wysiwyg-editor :content="$ticket->content"/>
|
||||
|
||||
<x-form.secondary-button type="submit" classes="mt-4">
|
||||
{{ __('Update ticket') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-[var(--color-background)] p-2">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,83 +1,99 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border col-span-12">
|
||||
<x-slot:title>
|
||||
{{ __('All tickets') }}
|
||||
</x-slot:title>
|
||||
<div class="col-span-12">
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.5 6v.75M16.5 12v.75M16.5 18v.75M12 3v15M9 3v.75M6 3v.75M3 12h18M3 6h18M3 18h18" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('All tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Manage all support tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="overflow-hidden overflow-x-auto rounded border" style="border-color: var(--color-text-muted);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: var(--color-text-muted);">
|
||||
<thead style="background-color: var(--color-surface);">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Title') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Author') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Status') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium">
|
||||
{{ __('Actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<div class="p-4">
|
||||
<div class="overflow-hidden overflow-x-auto rounded-lg border" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<table class="min-w-full text-sm divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<thead style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<tr>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Title') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Author') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Status') }}
|
||||
</th>
|
||||
<th class="whitespace-nowrap px-4 py-2 text-left font-medium" style="color: var(--color-text);">
|
||||
{{ __('Actions') }}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody class="divide-y" style="border-color: var(--color-text-muted); color: var(--color-text);">
|
||||
@forelse ($tickets as $ticket)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium">
|
||||
{{ Str::limit($ticket->title, 80) }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->user->username }}</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->open ? 'Open' : 'Closed' }}
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium flex gap-x-3">
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
<tbody class="divide-y" style="border-color: color-mix(in srgb, var(--color-text-muted) 15%, transparent); color: var(--color-text);">
|
||||
@forelse ($tickets as $ticket)
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium">
|
||||
{{ Str::limit($ticket->title, 80) }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
{{ $ticket->user->username }}
|
||||
</td>
|
||||
<td class="px-4 py-2">
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" style="background-color: {{ $ticket->open ? 'color-mix(in srgb, #22c55e 15%, transparent)' : 'color-mix(in srgb, #ef4444 15%, transparent)' }}; color: {{ $ticket->open ? '#22c55e' : '#ef4444' }};">
|
||||
{{ $ticket->open ? 'Open' : 'Closed' }}
|
||||
</span>
|
||||
</td>
|
||||
<td class="whitespace-nowrap px-4 py-2 font-medium flex gap-x-3">
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}" style="color: var(--link-color);">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@if(hasPermission('delete_website_tickets'))
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
@if(hasPermission('delete_website_tickets'))
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center"
|
||||
colspan="3">
|
||||
{{ __('No tickets available') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
<button type="submit" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</td>
|
||||
</tr>
|
||||
@empty
|
||||
<tr>
|
||||
<td class="whitespace-nowrap px-4 py-2 text-center" colspan="4">
|
||||
{{ __('No tickets available') }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforelse
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
{{ $tickets->links() }}
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</x-app-layout>
|
||||
|
||||
@@ -1,185 +1,219 @@
|
||||
<x-app-layout>
|
||||
@push('title', 'Create a ticket')
|
||||
@push('title', $ticket->title)
|
||||
|
||||
<x-content.content-card icon="chat-icon" classes="border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9">
|
||||
<x-slot:title>
|
||||
<div class="flex gap-x-2">
|
||||
{{ $ticket->title }} [{{ $ticket->category->name }}]
|
||||
<div class="col-span-12 lg:col-span-9">
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex items-center gap-x-2">
|
||||
<p class="text-white font-bold text-sm">{{ $ticket->title }}</p>
|
||||
<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" style="background-color: color-mix(in srgb, rgba(255,255,255,0.2) 100%, transparent); color: rgba(255,255,255,0.9);">
|
||||
[{{ $ticket->category->name }}]
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if($ticket->canManageTicket())
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-5 h-5">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
<div class="p-4">
|
||||
<div class="flex flex-wrap gap-3 mb-6">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
{{ __('Close') }}
|
||||
</button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Re-open') }}
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
@if($ticket->canManageTicket())
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.edit', $ticket) }}">
|
||||
<button type="button"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); color: var(--color-text); border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);">
|
||||
{{ __('Edit') }}
|
||||
</button>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: #ef4444; color: white;">
|
||||
{{ __('Delete') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<article class="prose-xl text-sm" style="color: var(--color-text); width: 100%;">
|
||||
{!! $ticket->content !!}
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-lg overflow-hidden mt-4" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H8.25m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0H12m4.125 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 01-2.555-.337A5.972 5.972 0 015.41 20.97a5.969 5.969 0 01-.474-.065 4.48 4.48 0 00.978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Comments') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Please submit your reply below') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<x-form.wysiwyg-editor />
|
||||
|
||||
<div class="mt-2">
|
||||
<button type="submit"
|
||||
class="px-4 py-2 rounded-lg text-sm font-semibold transition ease-in-out duration-150"
|
||||
style="background-color: var(--color-primary); color: var(--button-text-color);">
|
||||
{{ __('Submit reply') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-4 mt-4">
|
||||
@forelse($ticket->replies as $reply)
|
||||
@if($reply->user_id === auth()->user()->id)
|
||||
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<img class="w-8 h-8 rounded-full" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 text-sm" style="color: var(--color-text);">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full rounded-lg overflow-hidden" style="background-color: color-mix(in srgb, var(--color-background) 100%, transparent); border: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between relative overflow-hidden" style="border-bottom: 1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent);">
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="text-xs" style="color: var(--color-text-muted);">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit" class="hover:opacity-75" style="color: #ef4444;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-x-2">
|
||||
<small class="font-semibold text-sm" style="color: var(--color-text);">{{ $reply->user->username }}</small>
|
||||
<img class="w-8 h-8 rounded-full scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4 text-sm" style="color: var(--color-text);">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('There is currently no replies') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</x-slot:title>
|
||||
|
||||
<div class="w-full flex gap-x-3">
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<x-form.secondary-button>
|
||||
Close
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@else
|
||||
<form action="{{ route('help-center.ticket.toggle-status', $ticket) }}" method="POST" class="w-full">
|
||||
@method('PUT')
|
||||
@csrf
|
||||
|
||||
<x-form.primary-button>
|
||||
Re-open
|
||||
</x-form.primary-button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<form action="{{ route('help-center.ticket.destroy', $ticket) }}" method="POST" class="w-full">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<x-form.danger-button>
|
||||
Delete
|
||||
</x-form.danger-button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<article class="prose-xl mt-8" style="width: 100%;">
|
||||
{!! $ticket->content !!}
|
||||
</article>
|
||||
</x-content.content-card>
|
||||
|
||||
<div class="col-span-12 lg:col-span-3">
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)]">
|
||||
<x-slot:title>
|
||||
{{ __('Open tickets') }}
|
||||
</x-slot:title>
|
||||
<div class="rounded-lg overflow-hidden" style="background-color: var(--color-surface); border: 1px solid color-mix(in srgb, var(--color-text-muted) 15%, transparent);">
|
||||
<div class="relative w-full h-12" style="background: linear-gradient(140deg, var(--color-primary) 0%, color-mix(in srgb, var(--color-primary) 80%, black) 100%);">
|
||||
<div class="flex items-center h-full px-4 gap-3">
|
||||
<div class="w-8 h-8 rounded-full flex items-center justify-center text-lg shadow-lg" style="background-color: color-mix(in srgb, var(--color-primary) 30%, transparent);">
|
||||
<svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-white font-bold text-sm">{{ __('Open tickets') }}</p>
|
||||
<p class="text-xs" style="color: rgba(255,255,255,0.8)">{{ __('Your current open tickets') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Your current open tickets') }}
|
||||
</x-slot:under-title>
|
||||
<div class="p-4">
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded-lg p-2" style="background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface));">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4" style="color: var(--color-text-muted);">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<div class="flex flex-col gap-2">
|
||||
@forelse($openTickets as $ticket)
|
||||
<div class="w-full rounded bg-gray-200 p-2 dark:bg-gray-700">
|
||||
<div class="flex items-center gap-x-1">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M11.25 4.5l7.5 7.5-7.5 7.5m-6-15l7.5 7.5-7.5 7.5"/>
|
||||
</svg>
|
||||
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="hover:text-[var(--color-primary)]">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
<a data-turbolinks="false" href="{{ route('help-center.ticket.show', $ticket) }}" class="text-sm hover:underline" style="color: var(--color-text);">
|
||||
{{ Str::limit($ticket->title, 20) }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p class="text-sm" style="color: var(--color-text-muted);">
|
||||
{{ __('You currently have no open tickets.') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@empty
|
||||
<p>
|
||||
You currently have no open tickets.
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</div>
|
||||
|
||||
<x-content.content-card icon="duo-chat-icon"
|
||||
classes="border border-[var(--color-text-muted)] text-[var(--color-text)] border border-[var(--color-text-muted)] text-[var(--color-text)] col-span-12 lg:col-span-9 -mt-4">
|
||||
<x-slot:title>
|
||||
{{ __('Comments') }}
|
||||
</x-slot:title>
|
||||
|
||||
<x-slot:under-title>
|
||||
{{ __('Please submit your reply below') }}
|
||||
</x-slot:under-title>
|
||||
|
||||
@if($ticket->isOpen())
|
||||
<form action="{{ route('help-center.ticket.reply.store', $ticket) }}" method="POST">
|
||||
@csrf
|
||||
|
||||
<x-form.wysiwyg-editor />
|
||||
|
||||
<x-form.secondary-button classes="mt-2">
|
||||
{{ __('Submit reply') }}
|
||||
</x-form.secondary-button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
<div class="flex flex-col gap-y-4 mt-4">
|
||||
@forelse($ticket->replies as $reply)
|
||||
@if($reply->user_id === auth()->user()->id)
|
||||
<div class="w-full rounded bg-[var(--color-background)]">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
|
||||
<div class="flex">
|
||||
<small class="ml-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
|
||||
<div class="absolute left-2 -bottom-10 flex gap-x-2">
|
||||
<img src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-x-2">
|
||||
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
|
||||
@if($reply->user_id === Auth::id() || hasPermission('delete_website_ticket_replies'))
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
<div class="w-full rounded bg-[var(--color-background)]">
|
||||
<div class="h-[50px] px-4 flex items-center justify-between border-b border-[var(--color-text-muted)] relative overflow-hidden">
|
||||
<div class="flex gap-x-2">
|
||||
<form action="{{ route('help-center.ticket.reply.destroy', $reply) }}" method="POST">
|
||||
@method('DELETE')
|
||||
@csrf
|
||||
|
||||
<button type="submit">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<small class="text-[var(--color-text-muted)]">{{ $reply->created_at->diffForHumans() }}</small>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex">
|
||||
<small class="mr-14 text-[var(--color-text-muted)]">{{ $reply->user->username }}</small>
|
||||
<div class="absolute right-2 -bottom-10 flex gap-x-2">
|
||||
<img class="scale-x-[-1]" src="{{ setting('avatar_imager') }}/{{ $reply->user->look }}" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-4">
|
||||
{!! $reply->content !!}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
@empty
|
||||
<p>
|
||||
{{ __('There is currently no replies') }}
|
||||
</p>
|
||||
@endforelse
|
||||
</div>
|
||||
</x-content.content-card>
|
||||
</x-app-layout>
|
||||
|
||||
Reference in New Issue
Block a user