@extends('laravelticket::layouts.master')
@section('page', trans('laravelticket::lang.show-ticket-title') . trans('laravelticket::lang.colon') . $ticket->subject)
@section('page_title', $ticket->subject)

@section('laravelticket_header')
    <div class="flex flex-wrap gap-2">
        @if(! $ticket->completed_at && $close_perm == 'yes')
            {!! html()->a(route($setting->grab('main_route').'.complete', $ticket->id), trans('laravelticket::lang.btn-mark-complete'))
                ->class('inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md transition-colors') !!}
        @elseif($ticket->completed_at && $reopen_perm == 'yes')
            {!! html()->a(route($setting->grab('main_route').'.reopen', $ticket->id), trans('laravelticket::lang.reopen-ticket'))
                ->class('inline-flex items-center px-4 py-2 bg-green-600 hover:bg-green-700 text-white text-sm font-medium rounded-md transition-colors') !!}
        @endif
        @if($u->isAgent() || $u->isAdmin())
            <button type="button"
                    @click="editOpen = true"
                    class="inline-flex items-center px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md transition-colors">
                {{ trans('laravelticket::lang.btn-edit') }}
            </button>
        @endif
        @if($u->isAdmin())
            @if($setting->grab('delete_modal_type') == 'builtin')
                {!! html()->a(route($setting->grab('main_route').'.destroy', $ticket->id), trans('laravelticket::lang.btn-delete'))->attributes([
                    'class'   => 'inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors',
                    'form'    => "delete-ticket-$ticket->id",
                    'node'    => $ticket->subject,
                    'onclick' => "event.preventDefault(); if(confirm('" . addslashes(trans('laravelticket::lang.show-ticket-js-delete')) . " ' + this.getAttribute('node') + ' ?')){ document.getElementById(this.getAttribute('form')).submit(); }",
                ]) !!}
            @elseif($setting->grab('delete_modal_type') == 'modal')
                {!! html()->form('delete', route($setting->grab('main_route').'.destroy', $ticket->id))
                    ->id("delete-ticket-modal-form-$ticket->id")->style('display:inline')->open() !!}
                <button type="button"
                        @click="deleteOpen = true"
                        class="inline-flex items-center px-4 py-2 bg-red-600 hover:bg-red-700 text-white text-sm font-medium rounded-md transition-colors">
                    {{ trans('laravelticket::lang.btn-delete') }}
                </button>
                {!! html()->closeModelForm() !!}
            @endif
        @endif
    </div>
@stop

@section('laravelticket_content')
    @include('laravelticket::tickets.partials.ticket_body')
@endsection

@section('laravelticket_extra_content')
    <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
        <div class="p-6 space-y-4">
            <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">{{ trans('laravelticket::lang.comments') }}</h2>
            @include('laravelticket::tickets.partials.comments')
            {!! $comments->render("pagination::tailwind") !!}
            @include('laravelticket::tickets.partials.comment_form')
        </div>
    </div>
@stop

@section('footer')
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            var categorySelect = document.getElementById('category_id');
            if (categorySelect) {
                categorySelect.addEventListener('change', function() {
                    var loadpage = "{!! route($setting->grab('main_route').'agentselectlist') !!}/" + this.value + "/{{ $ticket->id }}";
                    fetch(loadpage).then(r => r.text()).then(html => {
                        document.getElementById('agent_id').innerHTML = html;
                    });
                });
            }
        });
    </script>
@append