@extends('admin.layout')

@section('title', 'Messages reçus')
@section('header', 'Messages reçus')

@section('content')
<div class="bg-white rounded-2xl border border-slate-200 overflow-hidden">
    @if($messages->isEmpty())
        <div class="p-12 text-center text-slate-500">
            <svg class="w-16 h-16 mx-auto mb-4 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
            <p class="font-medium">Aucun message pour le moment</p>
            <p class="text-sm mt-1">Les messages envoyés via le formulaire de contact apparaîtront ici.</p>
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full">
                <thead class="bg-slate-50 border-b border-slate-200">
                    <tr>
                        <th class="text-left px-6 py-4 text-sm font-semibold text-slate-700">De</th>
                        <th class="text-left px-6 py-4 text-sm font-semibold text-slate-700">Sujet</th>
                        <th class="text-left px-6 py-4 text-sm font-semibold text-slate-700">Date</th>
                        <th class="text-right px-6 py-4 text-sm font-semibold text-slate-700">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100">
                    @foreach($messages as $msg)
                        <tr class="{{ $msg->read_at ? '' : 'bg-slate-50/50' }} hover:bg-slate-50/80 transition">
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.contact-messages.show', $msg) }}" class="block">
                                    <span class="font-medium text-slate-900">{{ $msg->name }}</span>
                                    <span class="text-slate-500 text-sm block">{{ $msg->email }}</span>
                                </a>
                            </td>
                            <td class="px-6 py-4">
                                <a href="{{ route('admin.contact-messages.show', $msg) }}" class="text-slate-600 hover:text-slate-900">
                                    {{ Str::limit($msg->subject ?? $msg->message, 40) }}
                                </a>
                            </td>
                            <td class="px-6 py-4 text-slate-500 text-sm">{{ $msg->created_at->format('d/m/Y H:i') }}</td>
                            <td class="px-6 py-4 text-right">
                                <a href="{{ route('admin.contact-messages.show', $msg) }}" class="text-primary-600 hover:underline text-sm">Voir</a>
                                <form method="POST" action="{{ route('admin.contact-messages.destroy', $msg) }}" class="inline ml-2" onsubmit="return confirm('Supprimer ce message ?')">
                                    @csrf
                                    @method('DELETE')
                                    <button type="submit" class="text-red-600 hover:underline text-sm">Supprimer</button>
                                </form>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        <div class="px-6 py-4 border-t border-slate-200">
            {{ $messages->links() }}
        </div>
    @endif
</div>
@endsection
