@extends('layouts.user')

@section('title', 'Ticket #' . $ticket->id)

@section('content')
<div class="flex justify-between items-center mb-6">
    <h1 class="text-2xl font-bold">Ticket: {{ $ticket->subject }}</h1>
    <span class="px-3 py-1 text-sm rounded 
        @if($ticket->status == 'open') bg-green-100 text-green-800
        @else bg-gray-100 text-gray-800 @endif">
        {{ $ticket->status }}
    </span>
</div>

<div class="bg-white rounded-lg shadow mb-6">
    <div class="p-6 border-b">
        <h2 class="text-lg font-semibold">Messages</h2>
    </div>
    
    <div class="p-6 space-y-4">
        @foreach($ticket->messages as $message)
        <div class="flex {{ $message->sender == 'user' ? 'justify-end' : 'justify-start' }}">
            <div class="max-w-lg {{ $message->sender == 'user' ? 'bg-blue-600 text-white' : 'bg-gray-100' }} rounded-lg p-4">
                <p>{{ $message->message }}</p>
                <p class="text-xs mt-2 {{ $message->sender == 'user' ? 'text-blue-200' : 'text-gray-500' }}">
                    {{ $message->created_at }}
                </p>
            </div>
        </div>
        @endforeach
    </div>
</div>

@if($ticket->status == 'open')
<div class="bg-white rounded-lg shadow">
    <div class="p-6 border-b">
        <h2 class="text-lg font-semibold">Reply</h2>
    </div>
    
    <form action="/user/tickets/{{ $ticket->id }}/reply" method="POST" class="p-6">
        @csrf
        <div class="mb-4">
            <textarea name="message" rows="4" class="w-full px-3 py-2 border rounded" required></textarea>
        </div>
        <button type="submit" class="bg-blue-600 text-white px-6 py-2 rounded">Send Reply</button>
    </form>
</div>
@endif
@endsection