@extends('layouts.client')

@section('header_title', 'Ticket #' . $ticket->id)
@section('header_subtitle', 'Detalhes do pedido de suporte.')

@section('content')
    <div class="mb-6">
        <a href="{{ route('client.tickets.index') }}" class="text-sm font-medium text-slate-400 hover:text-white transition-colors">Voltar aos tickets</a>
    </div>

    @if (session('success'))
        <div class="mb-6 p-4 rounded-xl bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-sm">{{ session('success') }}</div>
    @endif

    <div class="bg-slate-900 border border-white/5 rounded-2xl p-6 md:p-8 shadow-xl max-w-4xl">
        <div class="flex flex-col md:flex-row md:items-start md:justify-between gap-4 mb-6">
            <div>
                <h3 class="text-2xl font-bold text-white">{{ $ticket->subject }}</h3>
                <p class="text-sm text-slate-500 mt-2">{{ $ticket->installation->address ?? 'Pedido geral' }}</p>
            </div>
            <div class="flex gap-2">
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-blue-500/10 text-blue-400">{{ $ticket->status }}</span>
                <span class="px-3 py-1 rounded-full text-xs font-semibold bg-slate-800 text-slate-300">{{ $ticket->priority }}</span>
            </div>
        </div>
        <div class="prose prose-invert max-w-none">
            <p class="text-slate-300 whitespace-pre-line">{{ $ticket->description }}</p>
        </div>
        <div class="mt-8 pt-6 border-t border-white/5 grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
            <p class="text-slate-500">Técnico: <span class="text-slate-300">{{ $ticket->technician->name ?? 'Ainda não atribuído' }}</span></p>
            <p class="text-slate-500">Atualizado: <span class="text-slate-300">{{ $ticket->updated_at->format('d/m/Y H:i') }}</span></p>
        </div>
    </div>
@endsection