@use('App\Modules\Support\Models\SupportTicket')
<x-layouts.admin :title="$ticket->number">
    <p class="mb-4 text-sm"><a href="{{ route('admin.support.index') }}" class="text-slate-500 hover:text-slate-800">← Support</a></p>

    <div class="grid gap-6 lg:grid-cols-3">
        <div class="grid gap-4 lg:col-span-2">
            <x-ui.card :title="$ticket->subject" :description="SupportTicket::CATEGORIES[$ticket->category] ?? $ticket->category">
                <ol class="space-y-4">
                    @foreach ($ticket->messages as $message)
                        <li @class([
                            'rounded-lg p-3 text-sm',
                            'bg-amber-50 border border-amber-200' => $message->is_internal,
                            'bg-rose-50' => $message->fromStaff() && ! $message->is_internal,
                            'bg-slate-50' => ! $message->fromStaff(),
                        ])>
                            <p class="mb-1 text-xs text-slate-500">
                                {{ $message->fromStaff() ? ($message->staff?->name ?? 'Staff') : $ticket->user->name }}
                                {{ $message->is_internal ? '· internal note' : '' }} · {{ $message->created_at->toDayDateTimeString() }}
                            </p>
                            <p class="whitespace-pre-line text-slate-800">{{ $message->body }}</p>
                        </li>
                    @endforeach
                </ol>
            </x-ui.card>

            @can('admin.support.reply')
                <x-ui.card title="Reply">
                    <form method="POST" action="{{ route('admin.support.reply', $ticket) }}" class="grid gap-3" novalidate>
                        @csrf
                        <x-form.textarea name="body" label="Message" rows="5" required />
                        <div class="flex flex-wrap items-end gap-4">
                            <x-form.select name="status" label="Then set status to" :value="'waiting_on_customer'" :options="SupportTicket::STATUSES" />
                            <label class="flex items-center gap-2 text-sm"><input type="checkbox" name="internal" value="1" class="rounded border-slate-300"> Internal note (not sent to the customer)</label>
                        </div>
                        <div><x-ui.button>Send</x-ui.button></div>
                    </form>
                </x-ui.card>
            @endcan
        </div>

        <x-ui.card title="Details">
            <dl class="space-y-2 text-sm">
                <div><dt class="text-slate-500">Customer</dt><dd>
                    @can('admin.users.view')
                        <a href="{{ route('admin.users.show', $ticket->user->ulid) }}" class="text-rose-700 hover:underline">{{ $ticket->user->email }}</a>
                    @else
                        {{ $ticket->user->email }}
                    @endcan
                </dd></div>
                <div><dt class="text-slate-500">Status</dt><dd>{{ SupportTicket::STATUSES[$ticket->status] }}</dd></div>
                <div><dt class="text-slate-500">Opened</dt><dd>{{ $ticket->created_at->toDayDateTimeString() }}</dd></div>
            </dl>
            @can('admin.support.reply')
                <form method="POST" action="{{ route('admin.support.assign', $ticket) }}" class="mt-4 grid gap-2">
                    @csrf @method('PUT')
                    <x-form.select name="assigned_to" label="Assigned to" :value="$ticket->assigned_to" :options="['' => 'Unassigned'] + $staff->pluck('name', 'id')->all()" />
                    <div><x-ui.button variant="secondary">Assign</x-ui.button></div>
                </form>
                @unless ($ticket->isClosed())
                    <div class="mt-4"><x-ui.confirm-form :action="route('admin.support.close', $ticket)" method="PUT" variant="ghost" label="Close ticket" /></div>
                @endunless
            @endcan
        </x-ui.card>
    </div>
</x-layouts.admin>