@extends('admin.layouts.admin')

@section('title', 'Message from '.$message->name)

@section('content')

    <a href="{{ route('admin.messages.index') }}" class="text-sm font-semibold text-brand-green-800 hover:underline">&larr; Back to Messages</a>

    <div class="card border border-brand-green-200 mt-6 p-8">
        <div class="flex flex-wrap items-start justify-between gap-4 border-b border-brand-green-100 pb-6">
            <div>
                <h1 class="text-xl font-extrabold text-brand-ink">{{ $message->subject ?: 'No subject' }}</h1>
                <p class="mt-1 text-sm text-brand-ink/65">
                    {{ $message->name }} &lt;{{ $message->email }}&gt;
                    @if ($message->phone) &middot; {{ $message->phone }} @endif
                </p>
            </div>
            <span class="text-xs text-brand-ink/65">{{ $message->created_at->format('d M Y, h:i A') }}</span>
        </div>
        <p class="mt-6 whitespace-pre-line leading-relaxed text-brand-ink/80">{{ $message->message }}</p>

        <div class="mt-8 flex gap-3">
            <a href="mailto:{{ $message->email }}" class="btn-primary">Reply by Email</a>
            <form method="POST" action="{{ route('admin.messages.destroy', $message) }}" onsubmit="return confirm('Delete this message?');">
                @csrf @method('DELETE')
                <button type="submit" class="btn-secondary !border-accent-liver !text-accent-liver hover:!bg-accent-liver hover:!text-white">Delete</button>
            </form>
        </div>
    </div>

@endsection