112 lines
7.9 KiB
PHP
112 lines
7.9 KiB
PHP
<div class="container mx-auto px-4 py-8 sm:px-6 lg:px-8">
|
|
<h1 class="text-3xl lg:text-4xl font-extrabold text-color-base mt-4 mb-8">
|
|
{{ __('ticket.create_ticket') }}
|
|
</h1>
|
|
|
|
<div class="bg-background-secondary/70 border border-neutral/50 p-6 rounded-xl shadow-lg">
|
|
<h2 class="text-2xl font-bold text-color-base mb-6">{{ __('ticket.ticket_details') }}</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
|
|
<x-form.input wire:model="subject" label="{{ __('ticket.subject') }}" name="subject" required />
|
|
|
|
@if (count($departments) > 0)
|
|
<x-form.select wire:model="department" label="{{ __('ticket.department') }}" name="department" required>
|
|
<option value="">{{ __('ticket.select_department') }}</option>
|
|
@foreach ($departments as $departmentOption)
|
|
<option value="{{ $departmentOption }}">{{ $departmentOption }}</option>
|
|
@endforeach
|
|
</x-form.select>
|
|
@endif
|
|
|
|
<x-form.select wire:model="priority" label="{{ __('ticket.priority') }}" name="priority" required>
|
|
<option value="">{{ __('ticket.select_priority') }}</option>
|
|
<option value="low">{{ __('ticket.low') }}</option>
|
|
<option value="medium">{{ __('ticket.medium') }}</option>
|
|
<option value="high">{{ __('ticket.high') }}</option>
|
|
</x-form.select>
|
|
|
|
<x-form.select wire:model="service" label="{{ __('ticket.service') }}" name="service" required>
|
|
<option value="">{{ __('ticket.select_service') }}</option>
|
|
|
|
@foreach ($services as $product)
|
|
<option value="{{ $product->id }}">{{ $product->product->name }} ({{ ucfirst($product->status) }})
|
|
@if ($product->expires_at)
|
|
- {{ $product->expires_at->format('Y-m-d') }}
|
|
@endif
|
|
</option>
|
|
@endforeach
|
|
|
|
</x-form.select>
|
|
|
|
<div class="col-span-1 md:col-span-2"><p class="text-xs"><b>Disclaimer:</b> Please include as much information as possible. Our support team may take longer to respond if insufficient information is provided. This includes <b>hostnames</b>, IP addresses, error messages, and any troubleshooting steps already taken. Failure to do so may result in delays or closure of your ticket without resolution. This especially important when submitting a ticket on an account that has more than one product ordered as to ensure the right product is investigated by our support team.</p></div><div class="col-span-1 md:col-span-2"><hr/></div><div class="col-span-1 md:col-span-2"><div class="flex items-center bg-blue-500 text-white text-sm font-bold px-4 py-4 rounded-xl shadow-lg " role="alert">
|
|
<svg class="fill-current w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M12.432 0c1.34 0 2.01.912 2.01 1.957 0 1.305-1.164 2.512-2.679 2.512-1.269 0-2.009-.75-1.974-1.99C9.789 1.436 10.67 0 12.432 0zM8.309 20c-1.058 0-1.833-.652-1.093-3.524l1.214-5.092c.211-.814.246-1.141 0-1.141-.317 0-1.689.562-2.502 1.117l-.528-.88c2.572-2.186 5.531-3.467 6.801-3.467 1.057 0 1.233 1.273.705 3.23l-1.391 5.352c-.246.945-.141 1.271.106 1.271.317 0 1.357-.392 2.379-1.207l.6.814C12.098 19.02 9.365 20 8.309 20z"/></svg>
|
|
<p>All account information must be accurate and verifiable in accordance with our <a href="https://virtnet.bond/tos" target="_blank">Terms of Service ↗</a>. Account details are reviewed with every support ticket submission to ensure compliance and service integrity. Providing false, inaccurate, or misleading information constitutes a violation of our Terms of Service and may result in immediate review, suspension, or termination of the account and all associated services without prior notice.</p>
|
|
</div><div><hr/></div></div><div class="col-span-1 md:col-span-2">
|
|
|
|
<label for="editor" class="block text-sm font-medium text-color-muted mb-2">Message</label>
|
|
<div wire:ignore>
|
|
<textarea id="editor" wire:model="message" placeholder="Your Message Here." class="form-input h-40"></textarea>
|
|
</div>
|
|
<x-easymde-editor wire:model="message" target-id="editor" />
|
|
</div>
|
|
|
|
<!-- File Upload Section -->
|
|
<div class="col-span-1 md:col-span-2">
|
|
<label class="block text-sm font-medium text-color-base mb-2">
|
|
<x-ri-attachment-2 class="inline size-4 mr-1" />
|
|
{{ __('ticket.attachments') ?? 'Attachments' }}
|
|
</label>
|
|
|
|
<div class="flex items-center justify-center w-full">
|
|
<label for="attachments" class="flex flex-col items-center justify-center w-full h-32 border-2 border-neutral border-dashed rounded-lg cursor-pointer bg-background/50 hover:bg-background/80 transition-colors">
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<x-ri-upload-cloud-2-line class="size-8 mb-2 text-neutral-400" />
|
|
<p class="mb-2 text-sm text-neutral-400">
|
|
<span class="font-semibold">{{ __('ticket.click_to_upload') ?? 'Click to upload' }}</span> {{ __('ticket.or_drag_drop') ?? 'or drag and drop' }}
|
|
</p>
|
|
<p class="text-xs text-neutral-500">{{ __('ticket.image_formats') ?? 'PNG, JPG, GIF up to 5MB' }}</p>
|
|
</div>
|
|
<input id="attachments" type="file" class="hidden" wire:model="attachments" multiple accept="image/*" />
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Upload Progress -->
|
|
<div wire:loading wire:target="attachments" class="mt-2">
|
|
<div class="flex items-center gap-2 text-sm text-primary">
|
|
<x-ri-loader-4-line class="size-4 animate-spin" />
|
|
{{ __('ticket.uploading') ?? 'Uploading...' }}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Preview Uploaded Files -->
|
|
@if(count($attachments) > 0)
|
|
<div class="mt-4 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
|
|
@foreach($attachments as $index => $attachment)
|
|
<div class="relative group">
|
|
<div class="aspect-square rounded-lg overflow-hidden border border-neutral bg-background">
|
|
<img src="{{ $attachment->temporaryUrl() }}" alt="Preview" class="w-full h-full object-cover">
|
|
</div>
|
|
<button type="button" wire:click="removeAttachment({{ $index }})"
|
|
class="absolute -top-2 -right-2 bg-error text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition-opacity shadow-lg hover:bg-error/80">
|
|
<x-ri-close-line class="size-4" />
|
|
</button>
|
|
<p class="mt-1 text-xs text-neutral-400 truncate">{{ $attachment->getClientOriginalName() }}</p>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
|
|
@error('attachments.*')
|
|
<p class="mt-2 text-sm text-error">{{ $message }}</p>
|
|
@enderror
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end mt-6">
|
|
<x-button.primary class="py-3 text-base font-bold transition-all transform rounded-lg shadow-lg hover:bg-primary focus:outline-none focus:ring-4 focus:ring-primary-500 hover:-translate-y-0.5" wire:click="create">
|
|
{{ __('ticket.create_ticket') }}
|
|
</x-button.primary>
|
|
</div>
|
|
</div>
|
|
</div> |