@extends('admin.layouts.app')

@section('title', 'View Message')
@section('page-title', 'Contact Message')

@section('content')
<div class="max-w-3xl">
    <div class="bg-white dark:bg-slate-800 rounded-2xl shadow-sm border border-slate-200 dark:border-slate-700 p-6">
        <div class="flex items-start justify-between mb-6">
            <div>
                <h2 class="text-xl font-semibold text-slate-900 dark:text-white">{{ $contact->subject ?? 'No Subject' }}</h2>
                <p class="text-sm text-slate-500 mt-1">{{ $contact->created_at->format('F d, Y \a\t H:i') }}</p>
            </div>
            <div class="flex gap-2">
                @if($contact->status != 'replied')
                <form action="{{ route('admin.contacts.mark-replied', $contact) }}" method="POST">
                    @csrf
                    <button type="submit" class="px-4 py-2 bg-green-600 text-white rounded-xl hover:bg-green-700 text-sm">Mark as Replied</button>
                </form>
                @endif
            </div>
        </div>

        <div class="border-t border-slate-200 dark:border-slate-700 pt-6">
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">From</p>
                    <p class="font-medium text-slate-900 dark:text-white">{{ $contact->name }}</p>
                </div>
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Email</p>
                    <a href="mailto:{{ $contact->email }}" class="font-medium text-indigo-600 hover:text-indigo-700">{{ $contact->email }}</a>
                </div>
                @if($contact->phone)
                <div>
                    <p class="text-sm text-slate-500 dark:text-slate-400">Phone</p>
                    <a href="tel:{{ $contact->phone }}" class="font-medium text-indigo-600 hover:text-indigo-700">{{ $contact->phone }}</a>
                </div>
                @endif
            </div>

            <div>
                <p class="text-sm text-slate-500 dark:text-slate-400 mb-2">Message</p>
                <div class="bg-slate-50 dark:bg-slate-700/50 rounded-xl p-4">
                    <p class="text-slate-700 dark:text-slate-300 whitespace-pre-wrap">{{ $contact->message }}</p>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-4 flex gap-3">
        <a href="{{ route('admin.contacts.index') }}" class="px-6 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-300">Back to List</a>
        <a href="mailto:{{ $contact->email }}?subject=Re: {{ $contact->subject }}" class="px-6 py-2.5 rounded-xl bg-indigo-600 text-white hover:bg-indigo-700">Reply via Email</a>
    </div>
</div>
@endsection