@extends('admin.layout')

@section('content')
    <div class="flex items-start justify-between gap-4">
        <div>
            <div class="text-2xl font-semibold">{{ $ticket->ticket_number }}</div>
            <div class="mt-1 text-sm text-gray-600">{{ $ticket->subject }}</div>
        </div>
        <a href="{{ route('admin.tickets.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Back</a>
    </div>

    <div class="mt-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
        <div class="lg:col-span-2 bg-white border border-gray-200 rounded-xl overflow-hidden">
            <div class="px-6 py-4 border-b border-gray-200 flex items-center justify-between gap-4">
                <div class="text-sm font-semibold text-gray-900">Conversation</div>
                <div class="text-xs text-gray-600">{{ str_replace('_', ' ', ucwords($ticket->status, '_')) }} • {{ ucfirst($ticket->priority) }}</div>
            </div>

            <div class="p-6 space-y-4">
                @foreach ($ticket->messages as $m)
                    @php($isAdmin = $m->sender_type === 'admin')
                    <div class="flex {{ $isAdmin ? 'justify-end' : 'justify-start' }}">
                        <div class="{{ $isAdmin ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-900' }} rounded-lg px-4 py-3 max-w-[85%]">
                            <div class="text-xs {{ $isAdmin ? 'text-gray-200' : 'text-gray-600' }} flex items-center justify-between gap-4">
                                <div>
                                    {{ $isAdmin ? ($m->user?->name ?? 'Admin') : ($m->customer?->name ?? 'Customer') }}
                                </div>
                                <div>{{ $m->created_at?->format('d M Y, h:i A') }}</div>
                            </div>
                            <div class="mt-2 text-sm whitespace-pre-wrap">{{ $m->message }}</div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="border-t border-gray-200 p-6">
                <form method="POST" action="{{ route('admin.tickets.messages.store', $ticket) }}" class="space-y-3">
                    @csrf
                    <div>
                        <label class="text-sm font-medium text-gray-700">Reply</label>
                        <textarea name="message" rows="4" required class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900"></textarea>
                        <x-input-error :messages="$errors->get('message')" class="mt-2" />
                    </div>
                    <div class="flex items-center justify-end">
                        <button type="submit" class="rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Send reply</button>
                    </div>
                </form>
            </div>
        </div>

        <div class="bg-white border border-gray-200 rounded-xl p-6 space-y-6">
            <div>
                <div class="text-sm font-semibold text-gray-900">Customer</div>
                <div class="mt-2 text-sm text-gray-700 space-y-1">
                    <div class="font-semibold">{{ $ticket->customer?->name ?? 'Guest' }}</div>
                    <div class="text-gray-600">{{ $ticket->customer?->phone ?? '-' }}</div>
                    <div class="text-gray-600">{{ $ticket->customer?->email ?? '-' }}</div>
                </div>
            </div>

            <div>
                <div class="text-sm font-semibold text-gray-900">Manage</div>
                <form method="POST" action="{{ route('admin.tickets.update', $ticket) }}" class="mt-3 space-y-3">
                    @csrf
                    @method('PATCH')
                    <div>
                        <label class="text-xs font-semibold text-gray-600">Assignee</label>
                        <select name="assigned_to" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900">
                            <option value="">Unassigned</option>
                            @foreach ($assignees as $u)
                                <option value="{{ $u->id }}" @selected((string) $ticket->assigned_to === (string) $u->id)>{{ $u->name }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-600">Status</label>
                        <select name="status" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900">
                            @foreach (['open' => 'Open', 'in_progress' => 'In Progress', 'closed' => 'Closed'] as $k => $label)
                                <option value="{{ $k }}" @selected($ticket->status === $k)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div>
                        <label class="text-xs font-semibold text-gray-600">Priority</label>
                        <select name="priority" class="mt-1 w-full rounded-md border-gray-300 focus:border-gray-900 focus:ring-gray-900">
                            @foreach (['low' => 'Low', 'medium' => 'Medium', 'high' => 'High'] as $k => $label)
                                <option value="{{ $k }}" @selected($ticket->priority === $k)>{{ $label }}</option>
                            @endforeach
                        </select>
                    </div>
                    <button type="submit" class="w-full rounded-md bg-gray-900 px-5 py-2 text-white text-sm font-semibold hover:bg-black">Update ticket</button>
                </form>
            </div>
        </div>
    </div>
@endsection