@extends('site.layout')

@section('content')
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-10">
        <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('customer.tickets.index') }}" class="text-sm font-semibold text-gray-700 hover:underline">Back</a>
        </div>

        <div class="mt-6 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($isCustomer = $m->sender_type === 'customer')
                    <div class="flex {{ $isCustomer ? 'justify-end' : 'justify-start' }}">
                        <div class="{{ $isCustomer ? 'bg-red-700 text-white' : 'bg-gray-100 text-gray-900' }} rounded-lg px-4 py-3 max-w-[85%]">
                            <div class="text-xs {{ $isCustomer ? 'text-red-100' : 'text-gray-600' }} flex items-center justify-between gap-4">
                                <div>{{ $isCustomer ? 'You' : ($m->user?->name ?? 'Support') }}</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('customer.tickets.reply', $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-red-500 focus:ring-red-500"></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-red-700 px-5 py-2 text-white text-sm font-semibold hover:bg-red-800">Send reply</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection