@extends('layouts.app')

@section('content')
<div class="max-w-4xl mx-auto px-4 py-8">
    <a href="{{ route('client.tickets.index') }}" class="text-gray-500 hover:text-gray-700 mb-4 inline-block font-bold">
        <i class="fas fa-arrow-left mr-1"></i> Retour aux tickets
    </a>

    <div class="bg-white shadow rounded-lg p-6 mb-6 border-l-4 {{ $ticket->status == 'ferme' ? 'border-gray-500' : 'border-primary' }}">
        <div class="flex justify-between items-start">
            <div>
                <h1 class="text-2xl font-bold text-gray-800 mb-1">{{ $ticket->subject }}</h1>
                <p class="text-sm text-gray-500">Ticket #{{ $ticket->id }} • Ouvert {{ $ticket->created_at->diffForHumans() }}</p>
            </div>
            <div class="text-right">
                <span class="block text-xs font-bold text-gray-400 uppercase tracking-wide">Statut</span>
                @if($ticket->status == 'ouvert')
                    <span class="text-blue-600 font-bold">En cours de traitement</span>
                @elseif($ticket->status == 'repondu')
                    <span class="text-green-600 font-bold">Réponse reçue</span>
                @else
                    <span class="text-gray-600 font-bold">Clôturé</span>
                @endif
            </div>
        </div>
    </div>

    <div class="space-y-6 mb-8">
        @foreach($ticket->messages as $message)
            <div class="flex {{ $message->user_id == Auth::id() ? 'justify-end' : 'justify-start' }}">
                <div class="max-w-[85%] {{ $message->user_id == Auth::id() ? 'bg-blue-600 text-white' : 'bg-white border text-gray-800' }} rounded-2xl px-6 py-4 shadow-sm">
                    <div class="flex items-center gap-2 mb-2 border-b {{ $message->user_id == Auth::id() ? 'border-blue-400' : 'border-gray-100' }} pb-2">
                        <span class="font-bold text-sm">{{ $message->user->name }}</span>
                        <span class="text-xs {{ $message->user_id == Auth::id() ? 'text-blue-200' : 'text-gray-400' }}">{{ $message->created_at->format('d/m/Y H:i') }}</span>
                    </div>
                    <div class="whitespace-pre-wrap">{{ $message->content }}</div>
                </div>
            </div>
        @endforeach
    </div>

    @if($ticket->status != 'ferme')
        <div class="bg-white shadow rounded-lg p-6">
            <h3 class="font-bold text-gray-700 mb-4">Ajouter une réponse</h3>
            <form action="{{ route('client.tickets.reply', $ticket->id) }}" method="POST">
                @csrf
                <textarea name="content" rows="4" class="w-full border-gray-300 rounded-lg focus:ring-primary focus:border-primary mb-4" placeholder="Votre réponse..." required></textarea>
                <div class="text-right">
                    <button type="submit" class="bg-gray-800 hover:bg-black text-white font-bold py-2 px-6 rounded shadow transition">
                        Envoyer
                    </button>
                </div>
            </form>
        </div>
    @else
        <div class="text-center p-6 bg-gray-100 rounded-lg border border-gray-200 text-gray-500 italic">
            Ce ticket est fermé. Vous ne pouvez plus y répondre.
        </div>
    @endif
</div>
@endsection