@extends('layouts.admin')

@section('title', 'Mensagem de ' . $contactMessage->nome)

@section('content')
<div class="p-6 max-w-4xl mx-auto">
    <a href="{{ route('admin.contact-messages.index') }}" class="inline-flex items-center gap-2 text-xs font-bold uppercase tracking-wider text-slate-500 hover:text-[#06458F] transition-colors mb-6">
        <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5"/></svg>
        Voltar
    </a>

    <div class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8 mb-6">
        <div class="flex items-start justify-between mb-6">
            <div>
                <h1 class="text-xl font-bold text-[#06458F] mb-1">{{ $contactMessage->nome }}</h1>
                <a href="mailto:{{ $contactMessage->email }}" class="text-sm text-blue-600 hover:underline">{{ $contactMessage->email }}</a>
            </div>
            <span class="text-xs text-slate-400">{{ $contactMessage->created_at->format('d/m/Y H:i') }}</span>
        </div>

        <div class="bg-slate-50 rounded-xl p-6">
            <h3 class="text-[10px] font-bold uppercase tracking-wider text-slate-500 mb-3">Mensagem</h3>
            <p class="text-sm text-slate-700 leading-relaxed whitespace-pre-wrap">{{ $contactMessage->mensagem }}</p>
        </div>

        @if($contactMessage->replied_at)
            <div class="mt-6 bg-green-50 border border-green-100 rounded-xl p-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-[10px] font-bold uppercase tracking-wider text-green-700">Resposta Enviada</h3>
                    <span class="text-xs text-green-500">{{ $contactMessage->replied_at->format('d/m/Y H:i') }}</span>
                </div>
                <p class="text-sm text-green-800 leading-relaxed whitespace-pre-wrap">{{ $contactMessage->reply }}</p>
            </div>
        @endif
    </div>

    @unless($contactMessage->replied_at)
        <div class="bg-white rounded-2xl border border-slate-100 shadow-sm p-8">
            <h2 class="text-sm font-bold text-[#06458F] uppercase tracking-wider mb-6">Responder</h2>

            <form action="{{ route('admin.contact-messages.reply', $contactMessage) }}" method="POST" class="space-y-5">
                @csrf
                <div>
                    <label for="reply" class="block text-[10px] font-semibold uppercase tracking-wider text-slate-500 mb-1.5">Mensagem de Resposta</label>
                    <textarea name="reply" id="reply" required rows="6"
                        class="w-full px-4 py-3 rounded-lg bg-slate-50 border border-slate-200 text-sm text-slate-800 transition-all focus:bg-white focus:border-[#06458F] focus:ring-1 focus:ring-[#06458F] outline-none resize-none"
                        placeholder="Escreva a sua resposta aqui..."></textarea>
                </div>
                <div class="flex gap-3">
                    <button type="submit"
                        class="px-8 py-3 bg-[#06458F] text-white font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-[#053A78] transition-all">
                        Enviar Resposta
                    </button>
                    <a href="{{ route('admin.contact-messages.index') }}"
                        class="px-8 py-3 bg-slate-50 border border-slate-200 text-slate-600 font-bold text-xs uppercase tracking-widest rounded-xl hover:bg-slate-100 transition-all">
                        Cancelar
                    </a>
                </div>
            </form>
        </div>
    @endunless
</div>
@endsection