@extends('layouts.user')

@section('page-title', __('Ticket') . ' ' . $ticket->code)

@section('content')
<div class="max-w-4xl mx-auto">
    <div class="bg-white rounded-xl border border-gray-200 p-6 mb-6">
        <div class="flex items-start justify-between">
            <div>
                <h2 class="font-bold text-lg">{{ $ticket->subject }}</h2>
                <p class="text-sm text-gray-500 font-mono">{{ $ticket->code }}</p>
            </div>
            <div class="flex gap-2">
                <span class="px-2 py-1 text-xs font-medium rounded-full bg-blue-100 text-blue-700">{{ ucfirst($ticket->priority) }}</span>
                <span class="px-2 py-1 text-xs font-medium rounded-full
                    {{ $ticket->status === 'closed' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                    {{ ucfirst($ticket->status) }}
                </span>
            </div>
        </div>
    </div>

    <div class="space-y-4 mb-6 max-h-[500px] overflow-y-auto pr-2">
        @foreach($ticket->messages as $message)
            <div class="flex {{ $message->is_admin ? 'justify-start' : 'justify-end' }}">
                <div class="max-w-[75%] p-4 rounded-lg
                    {{ $message->is_admin ? 'bg-gray-100 text-gray-900' : 'bg-indigo-600 text-white' }}">
                    <p class="text-xs font-medium mb-1 {{ $message->is_admin ? 'text-gray-500' : 'text-indigo-200' }}">
                        {{ $message->is_admin ? __('Support Team') : __('You') }} · {{ $message->created_at->format('M d, H:i') }}
                    </p>
                    <p class="text-sm whitespace-pre-line">{{ $message->message }}</p>
                    @if($message->attachment)
                        <a href="{{ asset('storage/'.$message->attachment) }}" target="_blank" class="text-xs underline mt-2 inline-block">{{ __('View attachment') }}</a>
                    @endif
                </div>
            </div>
        @endforeach
    </div>

    @if($ticket->status !== 'closed')
        <div class="bg-white rounded-xl border border-gray-200 p-4">
            <form action="{{ route('user.tickets.reply', $ticket) }}" method="POST" enctype="multipart/form-data">
                @csrf
                <textarea name="message" rows="3" required placeholder="{{ __('Type your reply...') }}"
                          class="w-full px-4 py-2.5 border border-gray-300 rounded-lg focus:ring-indigo-500 focus:border-indigo-500"></textarea>
                <div class="flex items-center gap-3 mt-3">
                    <input type="file" name="attachment" accept="image/*,.pdf,.zip" class="text-sm text-gray-500">
                    <button type="submit" class="ml-auto px-6 py-2 text-sm font-medium text-white bg-indigo-600 rounded-lg hover:bg-indigo-700">{{ __('Send') }}</button>
                </div>
            </form>
        </div>
    @else
        <div class="p-4 bg-green-50 border border-green-200 rounded-lg text-center text-sm text-green-700">
            {{ __('This ticket is closed.') }}
        </div>
    @endif

    @if($ticket->status !== 'closed')
        <div class="mt-4 text-center">
            <form action="{{ route('user.tickets.close', $ticket) }}" method="POST">
                @csrf
                <button type="submit" class="text-sm text-gray-500 hover:text-red-600">{{ __('Close ticket') }}</button>
            </form>
        </div>
    @endif
</div>
@endsection