@extends('users.layouts.index')

@section('content')
<div class="max-w-3xl mx-auto bg-white p-6 rounded shadow">
    <h2 class="text-2xl font-bold mb-4">Ticket: {{ $ticket->title }}</h2>
    <p class="text-sm text-gray-600 mb-2"><strong>Status:</strong> {{ $ticket->status }}</p>
    <p class="mb-4">{{ $ticket->description }}</p>

    <h3 class="text-xl font-semibold mb-2">Conversation:</h3>
    <div class="space-y-4 mb-6">
        @foreach($ticket->replies as $reply)
            <div class="p-4 rounded-lg {{ $reply->is_support ? 'bg-blue-100 text-blue-900' : 'bg-gray-100' }}">
                <p class="text-sm font-semibold">
                    {{ $reply->user->name }} 
                    <span class="text-xs text-gray-500">({{ $reply->created_at ? $reply->created_at->diffForHumans() : 'Just now' }})</span>
                </p>
                <p class="mt-1">{{ $reply->message }}</p>
            </div>
        @endforeach
    </div>

    <form action="{{ route('ticket.reply', $ticket->id) }}" method="POST">
        @csrf
        <textarea name="message" rows="4" class="w-full p-3 border rounded mb-4" placeholder="Type your reply..." required></textarea>
        <button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">Send Reply</button>
    </form>
</div>
@endsection