@extends('admin.layout')
@section('title', $message->subject)

@section('content')

<div class="mb-4">
    <a href="{{ route('admin.contact.index') }}" class="text-sm text-gray-400 hover:text-gray-600 transition">
        ← Contactberichten
    </a>
</div>

<div class="max-w-2xl space-y-4">

    {{-- Message card --}}
    <div class="bg-white rounded-lg border border-gray-100 p-5">
        <div class="flex items-start justify-between gap-4 mb-4">
            <div>
                <h2 class="text-base font-semibold text-gray-800">{{ $message->subject }}</h2>
                <div class="flex items-center gap-2 mt-1 text-sm text-gray-500">
                    <span>{{ $message->name }}</span>
                    <span class="text-gray-300">·</span>
                    <a href="mailto:{{ $message->email }}" class="hover:underline">{{ $message->email }}</a>
                    @if ($message->category)
                        <span class="text-gray-300">·</span>
                        <span class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500">
                            {{ str_replace('-', ' ', $message->category) }}
                        </span>
                    @endif
                </div>
                <p class="text-xs text-gray-400 mt-0.5">{{ $message->created_at->format('d/m/Y H:i:s') }}</p>
            </div>

            @if ($message->user)
                <a href="{{ route('admin.users.show', $message->user) }}"
                   class="shrink-0 text-xs text-blue-500 hover:underline whitespace-nowrap">
                    Profiel bekijken →
                </a>
            @endif
        </div>

        <div class="prose prose-sm max-w-none text-gray-700 whitespace-pre-wrap border-t border-gray-100 pt-4">{{ $message->message }}</div>
    </div>

    {{-- Actions --}}
    <div class="flex items-center gap-3">
        <a href="mailto:{{ $message->email }}?subject=Re: {{ urlencode($message->subject) }}"
           class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
            Beantwoorden
        </a>

        @if ($message->isUnread())
            <form method="POST" action="{{ route('admin.contact.read', $message) }}">
                @csrf
                <button type="submit"
                        class="px-4 py-2 text-sm border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 transition">
                    Markeer als gelezen
                </button>
            </form>
        @else
            <form method="POST" action="{{ route('admin.contact.unread', $message) }}">
                @csrf
                <button type="submit"
                        class="px-4 py-2 text-sm border border-gray-200 text-gray-600 rounded-lg hover:bg-gray-50 transition">
                    Markeer als ongelezen
                </button>
            </form>
        @endif

        <form method="POST" action="{{ route('admin.contact.destroy', $message) }}" class="ml-auto"
              onsubmit="return confirm('Bericht verwijderen?')">
            @csrf @method('DELETE')
            <button type="submit"
                    class="px-4 py-2 text-sm border border-red-200 text-red-500 rounded-lg hover:bg-red-50 transition">
                Verwijderen
            </button>
        </form>
    </div>

</div>

@endsection