<x-app-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-400">{{ $ticket->ticketNumber() }}</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">{{ $ticket->subject }}</h2>
            </div>
            <a href="{{ route('admin.support.index') }}" class="rounded-lg border border-blue-100 px-4 py-2 text-sm font-bold text-blue-700 dark:border-blue-900 dark:text-blue-300">All Tickets</a>
        </div>
    </x-slot>

    <div class="grid gap-6 lg:grid-cols-[1fr_22rem]">
        <section class="space-y-5">
            <article class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                <div class="flex flex-wrap gap-2">
                    <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-black uppercase text-blue-700 dark:bg-blue-950 dark:text-blue-200">{{ $ticket->status }}</span>
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black uppercase text-slate-700 dark:bg-slate-800 dark:text-slate-200">{{ $ticket->priority }}</span>
                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-black uppercase text-slate-700 dark:bg-slate-800 dark:text-slate-200">{{ $ticket->category }}</span>
                </div>
                <p class="mt-4 text-sm font-bold text-slate-950 dark:text-white">{{ $ticket->name }} &lt;{{ $ticket->email }}&gt;</p>
                <p class="mt-4 whitespace-pre-line text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $ticket->message }}</p>
            </article>

            @foreach ($ticket->replies as $reply)
                <article class="rounded-lg border border-blue-100 bg-white p-5 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                    <p class="text-xs font-bold uppercase tracking-wide {{ $reply->admin_id ? 'text-blue-600 dark:text-blue-300' : 'text-slate-500 dark:text-slate-400' }}">
                        {{ $reply->admin_id ? 'Admin' : 'Customer' }} replied {{ $reply->created_at->diffForHumans() }}
                    </p>
                    <p class="mt-3 whitespace-pre-line text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $reply->message }}</p>
                </article>
            @endforeach

            <form method="POST" action="{{ route('admin.support.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-semibold text-slate-700 dark:text-slate-200">Admin Reply</label>
                <textarea id="message" name="message" rows="5" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm text-slate-900 shadow-sm focus:border-blue-500 focus:ring-blue-500 dark:border-blue-900 dark:bg-slate-950 dark:text-slate-100" required>{{ old('message') }}</textarea>
                @error('message') <p class="mt-1 text-sm text-red-600 dark:text-red-300">{{ $message }}</p> @enderror
                <button class="mt-4 rounded-lg bg-blue-600 px-5 py-2.5 text-sm font-bold text-white transition hover:bg-blue-700 dark:bg-blue-500">Send Reply</button>
            </form>
        </section>

        <aside class="space-y-4">
            <form method="POST" action="{{ route('admin.support.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-semibold text-slate-700 dark:text-slate-200">Change Status</label>
                <select id="status" name="status" class="mt-1 block w-full rounded-lg border-blue-100 bg-white px-3 py-2 text-sm dark:border-blue-900 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 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>

            <form method="POST" action="{{ route('admin.support.close', $ticket) }}">
                @csrf
                @method('PATCH')
                <button class="w-full rounded-lg bg-slate-800 px-4 py-3 text-sm font-bold text-white transition hover:bg-slate-900 dark:bg-slate-700">Close Ticket</button>
            </form>

            <form method="POST" action="{{ route('admin.support.destroy', $ticket) }}" onsubmit="return confirm('Delete this support ticket?');">
                @csrf
                @method('DELETE')
                <button class="w-full rounded-lg border border-red-200 px-4 py-3 text-sm font-bold text-red-700 transition hover:bg-red-50 dark:border-red-900/60 dark:text-red-300 dark:hover:bg-red-950/40">Delete Ticket</button>
            </form>
        </aside>
    </div>
</x-app-layout>
