<x-support-team-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-300">{{ $ticket->ticketNumber() }}</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">{{ $ticket->subject }}</h2>
            </div>
            <a href="{{ route('support-team.tickets.index') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-semibold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Back to Tickets</a>
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-[1fr_22rem]">
        <section class="space-y-6">
            <article class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-300">Original Message</p>
                <p class="mt-4 whitespace-pre-line text-sm leading-7 text-slate-700 dark:text-slate-200">{{ $ticket->message }}</p>
            </article>

            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <h3 class="text-lg font-bold text-slate-950 dark:text-white">Conversation</h3>
                <div class="mt-5 space-y-4">
                    @forelse ($ticket->replies as $reply)
                        <div class="rounded-lg border border-blue-100 p-4 dark:border-blue-900/50">
                            <div class="flex flex-wrap items-center justify-between gap-2">
                                <p class="text-sm font-bold text-slate-950 dark:text-white">
                                    {{ $reply->admin?->name ?? $reply->user?->name ?? 'Guest' }}
                                </p>
                                <p class="text-xs text-slate-500 dark:text-slate-400">{{ $reply->created_at->format('M d, Y H:i') }}</p>
                            </div>
                            <p class="mt-3 whitespace-pre-line text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $reply->message }}</p>
                        </div>
                    @empty
                        <p class="rounded-lg border border-dashed border-blue-200 p-6 text-center text-sm text-slate-500 dark:border-blue-900 dark:text-slate-400">No replies yet.</p>
                    @endforelse
                </div>
            </section>

            @if ($ticket->status !== \App\Models\SupportTicket::STATUS_CLOSED)
                <form method="POST" action="{{ route('support-team.tickets.reply', $ticket) }}" class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    @csrf
                    <label for="message" class="text-sm font-bold text-slate-700 dark:text-slate-200">Reply to Customer</label>
                    <textarea id="message" name="message" rows="6" class="mt-2 w-full rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100" required>{{ old('message') }}</textarea>
                    <x-input-error :messages="$errors->get('message')" class="mt-2" />
                    <button type="submit" class="mt-4 rounded-lg bg-blue-600 px-5 py-3 text-sm font-bold text-white transition hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-400">Send Reply</button>
                </form>
            @endif
        </section>

        <aside class="space-y-6">
            <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <h3 class="text-lg font-bold text-slate-950 dark:text-white">Ticket Details</h3>
                <dl class="mt-5 space-y-4 text-sm">
                    <div>
                        <dt class="text-slate-500 dark:text-slate-400">Customer</dt>
                        <dd class="mt-1 font-semibold text-slate-950 dark:text-white">{{ $ticket->name }}</dd>
                    </div>
                    <div>
                        <dt class="text-slate-500 dark:text-slate-400">Email</dt>
                        <dd class="mt-1 font-semibold text-slate-950 dark:text-white">{{ $ticket->email }}</dd>
                    </div>
                    <div>
                        <dt class="text-slate-500 dark:text-slate-400">Category</dt>
                        <dd class="mt-1 font-semibold text-slate-950 dark:text-white">{{ $ticket->category }}</dd>
                    </div>
                    <div>
                        <dt class="text-slate-500 dark:text-slate-400">Priority</dt>
                        <dd class="mt-1 font-semibold capitalize text-slate-950 dark:text-white">{{ $ticket->priority }}</dd>
                    </div>
                    <div>
                        <dt class="text-slate-500 dark:text-slate-400">Status</dt>
                        <dd class="mt-1 font-semibold capitalize text-blue-600 dark:text-blue-300">{{ $ticket->status }}</dd>
                    </div>
                </dl>
            </section>

            <form method="POST" action="{{ route('support-team.tickets.status', $ticket) }}" class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                @csrf
                @method('PATCH')
                <label for="status" class="text-sm font-bold text-slate-700 dark:text-slate-200">Change Status</label>
                <select id="status" name="status" class="mt-2 w-full rounded-lg border-slate-300 bg-white text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-slate-700 dark:bg-slate-950 dark:text-slate-100">
                    @foreach ($statuses as $value => $label)
                        <option value="{{ $value }}" @selected($ticket->status === $value)>{{ $label }}</option>
                    @endforeach
                </select>
                <button type="submit" class="mt-4 w-full rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 transition hover:bg-blue-50 dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60">Update Status</button>
            </form>

            @if ($ticket->status !== \App\Models\SupportTicket::STATUS_CLOSED)
                <form method="POST" action="{{ route('support-team.tickets.close', $ticket) }}">
                    @csrf
                    @method('PATCH')
                    <button type="submit" class="w-full rounded-lg bg-red-600 px-4 py-3 text-sm font-bold text-white transition hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-400">Close Ticket</button>
                </form>
            @endif
        </aside>
    </div>
</x-support-team-layout>
