@extends('layouts.app')

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

@section('content')
<div class="max-w-3xl mx-auto py-8 px-4">
    <h2 class="text-2xl font-bold text-gray-800 mb-4">
        Ticket #{{ $ticket->id }} - {{ ucfirst($ticket->category) }}
    </h2>

    <div class="bg-white p-4 rounded shadow mb-6">
        <p class="text-gray-700 mb-2"><strong>Initial Message:</strong></p>
        <p class="text-gray-800">{{ $ticket->message }}</p>

        @if ($ticket->file_path)
            <p class="mt-2 text-sm">
                📎 <a href="{{ asset('storage/' . $ticket->file_path) }}" class="text-blue-600 underline" target="_blank">Download Attachment</a>
            </p>
        @endif

        @if($ticket->admin_response)
            <div class="mt-4">
                <p class="text-blue-700 font-semibold">Admin Response:</p>
                <p class="text-gray-800">{{ $ticket->admin_response }}</p>
            </div>
        @endif

        <p class="mt-4 text-sm text-gray-500">
            Status: <span class="font-medium">{{ ucfirst($ticket->status) }}</span>
        </p>
    </div>

    <h3 class="text-lg font-semibold mb-2">Conversation</h3>

    <div class="space-y-4 mb-6">
        @forelse($ticket->messages as $msg)
            <div class="bg-gray-100 p-3 rounded">
                <div class="flex justify-between items-center text-sm text-gray-600 mb-1">
                    <span>
                        <strong>{{ $msg->user->name }}</strong>
                        <span class="ml-1 text-xs text-gray-500">({{ ucfirst(optional($msg->user->roles->first())->name ?? 'User') }})</span>
                    </span>
                    <span>{{ $msg->created_at->format('M d, Y H:i') }}</span>
                </div>
                <p class="text-gray-800 whitespace-pre-wrap">{{ $msg->message }}</p>
            </div>
        @empty
            <p class="text-gray-500">No replies yet.</p>
        @endforelse
    </div>

    @if($ticket->status !== 'closed')
    <h4 class="text-lg font-semibold mb-2">Send a Reply</h4>

    <form method="POST" action="{{ route('tickets.reply', $ticket) }}" enctype="multipart/form-data" class="space-y-4">
        @csrf

        <textarea 
            name="message" 
            rows="4" 
            required 
            class="w-full p-3 border border-gray-300 rounded focus:outline-none focus:ring focus:border-blue-300" 
            placeholder="Type your reply here..."
        >{{ old('message') }}</textarea>

        <div>
            <label class="block text-sm font-medium text-gray-700">Optional Attachment</label>
            <input type="file" name="attachment" class="mt-1 block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:border file:rounded file:border-gray-300 file:text-sm file:font-semibold file:bg-gray-50 hover:file:bg-gray-100" />
        </div>

        <button 
            type="submit" 
            class="bg-yellow-400 hover:bg-yellow-300 text-black font-semibold px-5 py-2 rounded transition"
        >
            Submit Reply
        </button>
    </form>
    @else
        <p class="text-red-600 font-medium mt-6">This ticket is closed and no longer accepts replies.</p>
    @endif
</div>
@endsection