@inject('slaService', 'App\Services\Helpdesk\SlaService')
@extends('admin/layouts/admin')
@section('title', __($ticket->subject, ['name' => $item->username]))
@section('styles')
    <link rel="stylesheet" href="{{ Vite::asset('resources/global/css/simplemde.min.css') }}">
@endsection
@section('scripts')
    <script src="{{ Vite::asset('resources/global/js/mdeditor.js') }}" type="module"></script>
@endsection
@section('content')
    <div class="container mx-auto">
        @include('shared/alerts')
        <div class="flex flex-col">
            <div class="-m-1.5 overflow-x-auto">
                <div class="p-1.5 min-w-full inline-block align-middle">
                    <div class="grid lg:grid-cols-12 md:grid-cols-4">
                        <div class="lg:col-span-8 col-span-4">
                            <div class="card">
                                <div class="card-heading">
                                    <div>
                                        <h2 class="text-xl font-semibold text-gray-800 dark:text-gray-200">
                                            <x-badge-state state="{{ $ticket->status }}"></x-badge-state>
                                            {{ $ticket->subject }}
                                        </h2>
                                        <p class="text-sm text-gray-600 dark:text-gray-400">
                                            {{ __('helpdesk.support.show.index_description') }}
                                        </p>
                                    </div>
                                </div>
                                <div>
                                    @foreach ($ticket->messages->groupBy(fn($msg) => $msg->created_at->translatedFormat('d M, Y')) as $date => $messages)
                                        <div class="ps-2 my-2 first:mt-0">
                                            <h3 class="text-xs font-medium uppercase text-gray-500 dark:text-neutral-400">
                                                {{ $date }}
                                            </h3>
                                        </div>

                                        @foreach ($messages as $i => $message)
                                            <div
                                                class="flex gap-x-3 relative group rounded-lg hover:bg-gray-100 dark:hover:bg-white/10">
                                                <div
                                                    class="relative last:after:hidden after:absolute after:top-10 after:bottom-0 after:start-5 after:w-px after:-translate-x-[0.5px] after:bg-gray-200 dark:after:bg-neutral-700">
                                                    <div class="relative z-10 size-10 flex justify-center items-center">
                                                        <span
                                                            class="flex shrink-0 justify-center items-center size-10 bg-white border border-gray-200 text-[10px] font-semibold uppercase text-gray-600 rounded-full dark:bg-neutral-800 dark:border-neutral-700 dark:text-neutral-400">
                                                            <i
                                                                class="bi bi-{{ $message->isStaff() ? 'person-badge' : 'person' }} text-lg"></i>
                                                        </span>
                                                    </div>
                                                </div>
                                                <div class="grow p-2 pb-2">
                                                    <div class="flex justify-between">
                                                        <h3
                                                            class="flex gap-x-1.5 font-semibold text-gray-800 dark:text-white">
                                                            {!! $message->replyText($i, 'admin') !!}
                                                            @if ($message->admin_id != null)
                                                                @if ($message->read_at)
                                                                    <i class="bi bi-eye"
                                                                        title="{{ $message->read_at->format('d/m/y H:i') }}"></i>
                                                                @else
                                                                    <i class="bi bi-eye-slash"></i>
                                                                @endif
                                                            @endif
                                                        </h3>

                                                        @if ($message->isStaff() && $message->canEdit())
                                                            <button class="btn btn-sm hs-collapse-toggle ml-2"
                                                                data-bs-toggle="collapse" aria-expanded="false"
                                                                data-hs-collapse="#edit-message-{{ $message->id }}"
                                                                title="{{ __('helpdesk.support.show.staff') }}">
                                                                <i class="bi bi-pen"></i>
                                                            </button>
                                                        @endif
                                                    </div>

                                                    <div class="break-words max-w-2xl">
                                                        <p class="mt-1 text-sm text-gray-600 dark:text-neutral-400">
                                                            {!! $message->formattedMessage() !!}
                                                        </p>
                                                    </div>

                                                    @if ($message->hasAttachments($ticket->attachments))
                                                        <div class="mt-2 space-y-1">
                                                            @foreach ($message->getAttachments($ticket->attachments) as $attachment)
                                                                <a href="{{ route('admin.helpdesk.tickets.download', ['ticket' => $ticket, 'attachment' => $attachment]) }}"
                                                                    class="block text-sm text-blue-600 hover:underline dark:text-blue-500 dark:hover:text-blue-400">
                                                                    <i class="bi bi-file-earmark"></i>
                                                                    {{ Str::limit($attachment->filename, 30) }}
                                                                </a>
                                                            @endforeach
                                                        </div>
                                                    @endif

                                                    <div
                                                        class="mt-2 flex items-center gap-x-2 text-xs text-gray-500 dark:text-neutral-400">
                                                        @if ($message->isStaff())
                                                            <span class="inline-flex items-center gap-x-1">
                                                                <i class="bi bi-person-circle"></i>
                                                                {{ $message->staffUsername() }}
                                                            </span>
                                                        @elseif($message->isCustomer())
                                                            <span class="inline-flex items-center gap-x-1.5">
                                                                <x-avatar :user="$message->customer" size="sm" class="!ring-0" />
                                                                {{ $message->customer->excerptFullName() }}
                                                            </span>
                                                        @endif

                                                        <span class="text-xs">·
                                                            {{ $message->edited_at ? __('helpdesk.support.show.edited_at', ['date' => $message->edited_at->format('H:i')]) : $message->created_at->format('H:i') }}</span>
                                                    </div>
                                                </div>
                                            </div>
                                            @if ($message->isStaff() && $message->canEdit())
                                                <div class="hs-collapse hidden" id="edit-message-{{ $message->id }}"
                                                    aria-labelledby="edit-message-{{ $message->id }}-heading">
                                                    <div class="card-body">
                                                        <form method="POST"
                                                            action="{{ route('admin.helpdesk.tickets.messages.update', ['ticket' => $ticket, 'message' => $message]) }}">
                                                            @csrf
                                                            <textarea class="editor" name="content">{{ $message->message }}</textarea>
                                                            <button
                                                                class="btn btn-primary mt-2">{{ __('global.save') }}</button>
                                                        </form>
                                                        <form method="POST"
                                                            action="{{ route('admin.helpdesk.tickets.messages.destroy', ['ticket' => $ticket, 'message' => $message]) }}">
                                                            @csrf
                                                            @method('DELETE')
                                                            <button
                                                                class="btn btn-danger mt-2">{{ __('global.delete') }}</button>
                                                        </form>
                                                    </div>
                                                </div>
                                            @endif
                                        @endforeach
                                    @endforeach
                                </div>

                                @if ($ticket->isOpen())
                                    <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mt-6">
                                        {{ __('helpdesk.support.show.replyinticket') }}
                                    </h3>
                                    <form method="POST"
                                        action="{{ route('admin.helpdesk.tickets.reply', ['ticket' => $ticket]) }}"
                                        enctype="multipart/form-data">
                                        @csrf

                                        <textarea class="editor" name="content">{{ old('content', auth('admin')->user()->getTicketSignature($ticket->customer)) }}</textarea>

                                        @if ($errors->has('content'))
                                            @foreach ($errors->get('content') as $error)
                                                <div class="text-red-500 text-sm mt-2">
                                                    {{ $error }}
                                                </div>
                                            @endforeach
                                        @endif

                                        <div class="col-span-2 mt-2">
                                            @include('admin/shared/file2', [
                                                'name' => 'attachments',
                                                'label' => __('helpdesk.attachments'),
                                                'help' => __('helpdesk.support.attachments_help', [
                                                    'size' => setting('helpdesk_attachments_max_size'),
                                                    'types' => formatted_extension_list(
                                                        setting('helpdesk_attachments_allowed_types')),
                                                ]),
                                            ])
                                        </div>
                                        <button
                                            class="btn btn-primary mt-2">{{ __('helpdesk.support.show.reply') }}</button>
                                        <button class="btn btn-secondary mt-2"
                                            name="close">{{ __('helpdesk.support.show.replyandclose') }}</button>

                                    </form>
                                @else
                                    <div class="alert text-yellow-800 bg-yellow-100 mt-2" role="alert">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                                            viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                                            stroke-linecap="round" stroke-linejoin="round">
                                            <path
                                                d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z">
                                            </path>
                                            <line x1="12" y1="9" x2="12" y2="13"></line>
                                            <line x1="12" y1="17" x2="12.01" y2="17"></line>
                                        </svg>
                                        {{ $ticket->close_reason ? __('helpdesk.support.show.closed2', ['reason' => $ticket->close_reason]) : __('helpdesk.support.show.closed3') }}
                                    </div>
                                @endif
                            </div>

                            @includeWhen(app('extension')->extensionIsEnabled('helpdesk_autoreply'),
                                'helpdesk_autoreply_admin::predefined_responses._ticket_panel',
                                ['ticket' => $ticket]
                            )
                        </div>

                        <div class="lg:col-span-4 col-span-4">
                            <div class="card ml-2">
                                <div class="flex -space-x-2 mb-2">
                                    @foreach ($ticket->attachedUsers() as $initials => $username)
                                        <div class="hs-tooltip inline-block">
                                            <span
                                                class="hs-tooltip-toggle relative inline-flex items-center justify-center h-[2.375rem] w-[2.375rem] rounded-full bg-gray-500 font-semibold text-white leading-none">
                                                {{ $initials }}
                                            </span>
                                            <span
                                                class="hs-tooltip-content hs-tooltip-shown:opacity-100 hs-tooltip-shown:visible opacity-0 inline-block absolute invisible z-20 py-1.5 px-2.5 bg-gray-900 text-xs text-white rounded-lg dark:bg-neutral-700"
                                                role="tooltip">
                                                {{ $username }}
                                            </span>
                                        </div>
                                    @endforeach
                                </div>
                                <ul class="max-w-lg flex flex-col">
                                    <li
                                        class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                        <i class="bi bi-buildings"></i>
                                        {{ $ticket->department->name }}
                                    </li>
                                    @if ($ticket->isValidRelated())
                                        <a href="{{ $ticket->related->relatedLink() }}"
                                            class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                            <i class="bi bi-box"></i>
                                            {{ $ticket->related->relatedName() }}
                                            <i class="bi bi-box-arrow-up-right"></i>
                                        </a>
                                    @endif
                                    <a href="{{ route('admin.customers.show', $ticket->customer) }}"
                                        class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                        <x-avatar :user="$ticket->customer" size="sm" class="!ring-0" />
                                        {{ $ticket->customer->excerptFullName() }}
                                        <i class="bi bi-box-arrow-up-right"></i>

                                    </a>
                                    <li
                                        class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                        <i class="bi bi-send-dash"></i>
                                        {{ __('helpdesk.priority') }} <x-badge-state
                                            state="{{ $ticket->priority }}"></x-badge-state>
                                    </li>
                                    <li
                                        class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                        <i class="bi bi-calendar-date"></i>
                                        {{ __('helpdesk.support.show.open_on', ['date' => $ticket->created_at->format('d/m H:i')]) }}
                                    </li>

                                    @if ($ticket->closed_at)
                                        <li
                                            class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                            <i class="bi bi-x-square"></i>
                                            {{ __('helpdesk.support.show.closed_on', ['date' => $ticket->closed_at->format('d/m H:i')]) }}
                                        </li>
                                    @endif
                                    @if ($ticket->assigned_to)
                                        <li
                                            class="inline-flex items-center gap-x-3.5 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                            <i class="bi bi-person-square"></i>
                                            {{ __('helpdesk.support.show.assigned_to') }}
                                            {{ $ticket->assignedTo->username }}
                                        </li>
                                    @endif

                                    @if ($ticket->first_response_due_at || $ticket->resolution_due_at)
                                        @php
                                            $slaStatus = $slaService->statusFor($ticket);
                                        @endphp
                                        @if ($ticket->first_response_due_at)
                                            <li class="inline-flex flex-col gap-y-1 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                                <div class="flex items-center justify-between">
                                                    <span class="flex items-center gap-x-2">
                                                        <i class="bi bi-alarm"></i>
                                                        {{ __('helpdesk.admin.tickets.sla.first_response') }}
                                                    </span>
                                                    @if ($ticket->first_response_at)
                                                        @if ($ticket->first_response_at->greaterThan($ticket->first_response_due_at))
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-500">
                                                                {{ __('helpdesk.admin.tickets.sla.breached') }}
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-500">
                                                                {{ __('helpdesk.admin.tickets.sla.met') }}
                                                            </span>
                                                        @endif
                                                    @else
                                                        @if ($slaStatus['first_response_breached'])
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-500">
                                                                {{ __('helpdesk.admin.tickets.sla.breached') }} ({{ __('helpdesk.admin.tickets.sla.breached_by', ['mins' => abs($slaStatus['first_response_due_in'])]) }})
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-500">
                                                                {{ __('helpdesk.admin.tickets.sla.due_in', ['mins' => $slaStatus['first_response_due_in']]) }}
                                                            </span>
                                                        @endif
                                                    @endif
                                                </div>
                                            </li>
                                        @endif
                                        @if ($ticket->resolution_due_at)
                                            <li class="inline-flex flex-col gap-y-1 py-3 px-4 text-sm font-medium bg-white border border-gray-200 text-gray-800 -mt-px dark:bg-neutral-900 dark:border-neutral-700 dark:text-white">
                                                <div class="flex items-center justify-between">
                                                    <span class="flex items-center gap-x-2">
                                                        <i class="bi bi-check-circle"></i>
                                                        {{ __('helpdesk.admin.tickets.sla.resolution') }}
                                                    </span>
                                                    @if (!$ticket->isOpen())
                                                        @if ($ticket->closed_at && $ticket->closed_at->greaterThan($ticket->resolution_due_at))
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-500">
                                                                {{ __('helpdesk.admin.tickets.sla.breached') }}
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-500">
                                                                {{ __('helpdesk.admin.tickets.sla.met') }}
                                                            </span>
                                                        @endif
                                                    @else
                                                        @if ($slaStatus['resolution_breached'])
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-500">
                                                                {{ __('helpdesk.admin.tickets.sla.breached') }} ({{ __('helpdesk.admin.tickets.sla.breached_by', ['mins' => abs($slaStatus['resolution_due_in'])]) }})
                                                            </span>
                                                        @else
                                                            <span class="inline-flex items-center gap-x-1.5 py-0.5 px-2 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-500">
                                                                {{ __('helpdesk.admin.tickets.sla.due_in', ['mins' => $slaStatus['resolution_due_in']]) }}
                                                            </span>
                                                        @endif
                                                    @endif
                                                </div>
                                            </li>
                                        @endif
                                    @endif
                                </ul>

                                <ul class="flex flex-col justify-end text-start -space-y-px mt-3">
                                    @foreach ($ticket->attachments as $attachment)
                                        <li
                                            class="flex items-center gap-x-2 p-3 text-sm bg-white border text-gray-800 first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-200">
                                            <div class="w-full flex justify-between truncate">
                                                <span class="me-3 flex-1 w-0 truncate">
                                                    {{ Str::limit($attachment->filename, 30) }}
                                                </span>
                                                <a href="{{ route('admin.helpdesk.tickets.download', ['ticket' => $ticket, 'attachment' => $attachment]) }}"
                                                    class="flex items-center gap-x-2 text-gray-500 hover:text-blue-600 whitespace-nowrap dark:text-neutral-500 dark:hover:text-blue-500">
                                                    <svg class="flex-shrink-0 size-4" xmlns="http://www.w3.org/2000/svg"
                                                        width="24" height="24" viewBox="0 0 24 24" fill="none"
                                                        stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                                        stroke-linejoin="round">
                                                        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                                                        <polyline points="7 10 12 15 17 10"></polyline>
                                                        <line x1="12" x2="12" y1="15"
                                                            y2="3"></line>
                                                    </svg>
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                                <button class="btn btn-secondary mt-2 w-full"
                                    data-hs-overlay="#edit-overlay">{{ __('global.edit') }}</button>
                                @if ($ticket->isOpen())
                                    <form method="POST"
                                        action="{{ route('admin.helpdesk.tickets.close', ['ticket' => $ticket]) }}">
                                        @csrf
                                        @include('admin/shared/textarea', [
                                            'name' => 'reason',
                                            'label' => __('helpdesk.support.show.close_reason'),
                                            'value' => old('reason', $ticket->close_reason),
                                        ])
                                        @method('DELETE')
                                        <button class="btn btn-danger mt-2 w-full"
                                            type="submit">{{ __('helpdesk.support.show.close') }}</button>
                                    </form>
                                @else
                                    <form method="POST"
                                        action="{{ route('admin.helpdesk.tickets.reopen', ['ticket' => $ticket]) }}">
                                        @csrf
                                        <button class="btn btn-primary mt-2 w-full"
                                            type="submit">{{ __('helpdesk.support.show.reopen') }}</button>
                                    </form>
                                @endif
                            </div>


                            <div class="card card-sm ml-2">
                                @include('admin/shared/input', [
                                    'name' => 'uuid',
                                    'label' => 'UUID',
                                    'value' => $ticket->uuid,
                                    'readonly' => true,
                                ])
                                <div class="grid grid-cols-2 gap-2">
                                    <div>
                                        @include('admin/shared/input', [
                                            'name' => 'id',
                                            'label' => 'ID',
                                            'value' => $ticket->id,
                                            'readonly' => true,
                                        ])
                                    </div>
                                    <div>
                                        @include('admin/shared/input', [
                                            'name' => 'created_at',
                                            'label' => __('global.created'),
                                            'value' => $ticket->created_at->format('d/m/y H:i'),
                                            'readonly' => true,
                                        ])
                                    </div>
                                </div>
                            </div>

                            <div class="card card-body ml-2">
                                <h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">
                                    {{ __('helpdesk.support.show.comments.title') }}
                                </h3>
                                @if ($ticket->comments->count() > 0)
                                    <ul class="space-y-3 mt-3">
                                        @foreach ($ticket->comments as $comment)
                                            <li>
                                                <div
                                                    class="bg-white border border-gray-200 rounded-2xl p-4 space-y-3 dark:bg-neutral-900 dark:border-neutral-700">
                                                    <div
                                                        class="space-y-1.5 max-w-xs sm:max-w-md md:max-w-lg lg:max-w-xl break-all">
                                                        <p>
                                                            {{ $comment->comment }}
                                                        </p>
                                                    </div>
                                                    <p class="text-sm text-gray-700 mt-2 flex justify-between">
                                                    <form method="POST" class="flex justify-between"
                                                        action="{{ route('admin.helpdesk.tickets.comments.delete', ['ticket' => $ticket, 'comment' => $comment]) }}">
                                                        <span>{{ $comment->created_at->format('d/m/y H:i') }} -
                                                            {{ $comment->staff->excerptFullName() }}
                                                        </span>

                                                        @csrf
                                                        @method('DELETE')
                                                        <button class="btn-sm text-danger ml-3" type="submit"><i
                                                                class="bi bi-trash-fill"></i></button>
                                                    </form>
                                                    </p>

                                                </div>

                                            </li>
                                        @endforeach
                                    </ul>
                                @else
                                    <p class="text-gray-600 dark:text-gray-400">
                                        {{ __('helpdesk.support.show.comments.no_comments') }}
                                    </p>
                                @endif
                                <form method="POST"
                                    action="{{ route('admin.helpdesk.tickets.comments', ['ticket' => $ticket]) }}">
                                    @csrf
                                    @include('admin/shared/textarea', [
                                        'name' => 'comment',
                                        'label' => __('helpdesk.support.show.comments.add_comment'),
                                    ])
                                    <button
                                        class="btn btn-primary mt-2">{{ __('helpdesk.support.show.comments.add') }}</button>
                                </form>
                            </div>

                        </div>

                    </div>


                </div>
            </div>
        </div>
    </div>

    <div id="edit-overlay"
        class="overflow-x-hidden overflow-y-auto hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-lg w-full w-full z-[80] bg-white border-s dark:bg-gray-800 dark:border-gray-700 hidden"
        tabindex="-1">
        <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
            <h3 class="font-bold text-gray-800 dark:text-white">
                {{ __($translatePrefix . '.edit') }}
            </h3>
            <button type="button"
                class="flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                data-hs-overlay="#metadata-overlay">
                <span class="sr-only">{{ __('global.closemodal') }}</span>
                <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                    viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                    stroke-linejoin="round">
                    <path d="M18 6 6 18" />
                    <path d="m6 6 12 12" />
                </svg>
            </button>
        </div>
        <div class="p-4">
            <form method="POST" action="{{ route($routePath . '.update', ['ticket' => $ticket]) }}">
                @csrf
                @method('PUT')
                <div>
                    @include('admin/shared/input', [
                        'name' => 'subject',
                        'label' => __('helpdesk.subject'),
                        'value' => old('subject', $ticket->subject),
                    ])
                </div>
                <div>
                    @include('admin/shared/select', [
                        'name' => 'priority',
                        'label' => __('helpdesk.priority'),
                        'options' => $priorities,
                        'value' => old('priority', $ticket->priority),
                    ])
                </div>
                <div>
                    @include('admin/shared/select', [
                        'name' => 'related_id',
                        'label' => __('helpdesk.support.create.relatedto'),
                        'options' => $related,
                        'value' => old('related_id', $ticket->relatedValue()),
                    ])
                </div>
                <div>
                    @include('admin/shared/select', [
                        'name' => 'department_id',
                        'label' => __('helpdesk.department'),
                        'options' => $departments,
                        'value' => old('department_id', $item->department_id),
                    ])
                </div>
                <div>
                    @include('admin/shared/select', [
                        'name' => 'assigned_to',
                        'label' => __('helpdesk.support.show.assigned_to'),
                        'options' => $staffs,
                        'value' => old($ticket->assigned_to ?? 'none', 'none'),
                    ])

                </div>
                @if ($ticket->isClosed())
                    <div>
                        @include('admin/shared/textarea', [
                            'name' => 'close_reason',
                            'label' => __('helpdesk.support.show.close_reason'),
                            'value' => old('close_reason', $item->close_reason),
                        ])
                    </div>
                @endif
                <button class="btn btn-primary mt-2">{{ trans('global.save') }}</button>
            </form>
        </div>
    </div>
    @foreach ($ticket->messages as $message)
        @if (!$message->isStaff())
            @continue
        @endif
        <div id="edit-message-{{ $message->id }}"
            class="overflow-x-hidden overflow-y-auto hs-overlay hs-overlay-open:translate-x-0 translate-x-full fixed top-0 end-0 transition-all duration-300 transform h-full max-w-lg w-full w-full z-[80] bg-white border-s dark:bg-gray-800 dark:border-gray-700 hidden"
            tabindex="-1">
            <div class="flex justify-between items-center py-3 px-4 border-b dark:border-gray-700">
                <h3 class="font-bold text-gray-800 dark:text-white">
                    {{ __('helpdesk.support.show.edit_message') }}
                </h3>
                <button type="button"
                    class="flex justify-center items-center w-7 h-7 text-sm font-semibold rounded-full border border-transparent text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none dark:text-white dark:hover:bg-gray-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-gray-600"
                    data-hs-overlay="#metadata-overlay">
                    <span class="sr-only">{{ __('global.closemodal') }}</span>
                    <svg class="flex-shrink-0 w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24"
                        viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                        stroke-linecap="round" stroke-linejoin="round">
                        <path d="M18 6 6 18" />
                        <path d="m6 6 12 12" />
                    </svg>
                </button>
            </div>
            <div class="p-4">
                <form method="POST"
                    action="{{ route('admin.helpdesk.tickets.messages.update', ['ticket' => $ticket, 'message' => $message]) }}">
                    @csrf
                    <div>
                        <textarea class="editor" name="content">{{ $message->message }}</textarea>
                    </div>
                    <button class="btn btn-primary mt-2">{{ __('global.save') }}</button>
                </form>
                <form method="POST"
                    action="{{ route('admin.helpdesk.tickets.messages.destroy', ['ticket' => $ticket, 'message' => $message]) }}">
                    @csrf
                    @method('DELETE')
                    <button class="btn btn-danger mt-2">{{ __('global.delete') }}</button>
                </form>
            </div>
        </div>
    @endforeach
@endsection