@extends('admin.layouts.app')

@section('content')
<div class="max-w-4xl space-y-6">
    <div class="flex items-center justify-between">
        <div>
            <h2 class="text-4xl font-extrabold">Message Details</h2>
            <p class="text-gray-400 mt-2">Full contact message information.</p>
        </div>

        <a href="{{ route('admin.messages.index') }}" class="border border-red-700 hover:bg-red-600/10 px-5 py-3 rounded-xl font-semibold">
            Back
        </a>
    </div>

    <div class="glass-card rounded-[1.8rem] p-8 space-y-6">
        <div class="grid md:grid-cols-2 gap-6">
            <div>
                <p class="text-gray-400 text-sm mb-2">Name</p>
                <p class="text-white font-semibold">{{ $message->name }}</p>
            </div>

            <div>
                <p class="text-gray-400 text-sm mb-2">Email</p>
                <p class="text-white font-semibold">{{ $message->email }}</p>
            </div>

            <div>
                <p class="text-gray-400 text-sm mb-2">Phone</p>
                <p class="text-white font-semibold">{{ $message->phone ?: '—' }}</p>
            </div>

            <div>
                <p class="text-gray-400 text-sm mb-2">Date</p>
                <p class="text-white font-semibold">{{ $message->created_at?->format('F d, Y h:i A') }}</p>
            </div>
        </div>

        <div>
            <p class="text-gray-400 text-sm mb-2">Subject</p>
            <p class="text-white font-semibold">{{ $message->subject }}</p>
        </div>

        <div>
            <p class="text-gray-400 text-sm mb-2">Message</p>
            <div class="rounded-2xl border border-red-950 bg-black/40 p-5 text-gray-300 leading-8 whitespace-pre-line">
                {{ $message->message }}
            </div>
        </div>
    </div>
</div>
@endsection