@extends('layouts.admin')
@section('title', 'Message de ' . $message->name)

@section('content')

<div class="max-w-2xl">
    <div class="flex items-center gap-3 mb-6">
        <a href="{{ route('admin.messages.index') }}" class="text-gray-400 hover:text-gray-600"><i class="fas fa-arrow-left"></i></a>
        <h2 class="text-lg font-bold text-gray-900">Message de <span class="text-blue-600">{{ $message->name }}</span></h2>
    </div>

    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
        <div class="grid sm:grid-cols-2 gap-4 mb-6 text-sm">
            <div><p class="text-gray-400 text-xs mb-0.5">Expéditeur</p><p class="font-semibold text-gray-800">{{ $message->name }}</p></div>
            <div><p class="text-gray-400 text-xs mb-0.5">Email</p><a href="mailto:{{ $message->email }}" class="font-semibold text-blue-600 hover:underline">{{ $message->email }}</a></div>
            @if($message->phone)
            <div><p class="text-gray-400 text-xs mb-0.5">Téléphone</p><a href="tel:{{ $message->phone }}" class="font-semibold text-blue-600">{{ $message->phone }}</a></div>
            @endif
            <div><p class="text-gray-400 text-xs mb-0.5">Date</p><p class="font-semibold text-gray-800">{{ $message->created_at->format('d/m/Y à H:i') }}</p></div>
            <div class="sm:col-span-2"><p class="text-gray-400 text-xs mb-0.5">Sujet</p><p class="font-semibold text-gray-800">{{ $message->subject }}</p></div>
        </div>

        <div class="border-t border-gray-100 pt-5">
            <p class="text-gray-400 text-xs mb-2">Message</p>
            <div class="bg-gray-50 rounded-xl p-4 text-sm text-gray-700 leading-relaxed whitespace-pre-line">{{ $message->message }}</div>
        </div>

        <div class="flex gap-3 mt-6 pt-5 border-t border-gray-100">
            <a href="mailto:{{ $message->email }}" class="inline-flex items-center gap-2 bg-blue-600 text-white text-sm font-semibold px-5 py-2.5 rounded-xl hover:bg-blue-700 transition-colors">
                <i class="fas fa-reply"></i> Répondre par email
            </a>
            @if($message->phone)
            <a href="tel:{{ $message->phone }}" class="inline-flex items-center gap-2 bg-green-600 text-white text-sm font-semibold px-5 py-2.5 rounded-xl hover:bg-green-700 transition-colors">
                <i class="fas fa-phone"></i> Appeler
            </a>
            @endif
            <form action="{{ route('admin.messages.destroy', $message) }}" method="POST" onsubmit="return confirm('Supprimer ?')">
                @csrf @method('DELETE')
                <button type="submit" class="inline-flex items-center gap-2 bg-red-50 text-red-500 hover:bg-red-100 text-sm font-semibold px-5 py-2.5 rounded-xl transition-colors">
                    <i class="fas fa-trash"></i> Supprimer
                </button>
            </form>
        </div>
    </div>
</div>

@endsection