@extends('layouts.admin')
@section('title', 'Messages')

@section('content')

<div class="flex items-center justify-between mb-6">
    <div>
        <h2 class="text-lg font-bold text-gray-900">Messages clients</h2>
        <p class="text-sm text-gray-500">{{ $messages->total() }} message(s)</p>
    </div>
    <div class="flex gap-2">
        <a href="{{ route('admin.messages.index') }}" class="text-sm px-3 py-2 rounded-lg {{ !request('filter') ? 'bg-blue-600 text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50' }}">Tous</a>
        <a href="{{ route('admin.messages.index', ['filter' => 'unread']) }}" class="text-sm px-3 py-2 rounded-lg {{ request('filter') === 'unread' ? 'bg-red-500 text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50' }}">Non lus</a>
        <a href="{{ route('admin.messages.index', ['filter' => 'read']) }}" class="text-sm px-3 py-2 rounded-lg {{ request('filter') === 'read' ? 'bg-green-600 text-white' : 'bg-white border border-gray-200 text-gray-600 hover:bg-gray-50' }}">Lus</a>
    </div>
</div>

<div class="bg-white rounded-2xl shadow-sm border border-gray-100 overflow-hidden">
    @forelse($messages as $message)
    <div class="flex items-center gap-4 px-5 py-4 border-b border-gray-50 hover:bg-gray-50 transition-colors {{ !$message->is_read ? 'bg-blue-50/50' : '' }}">
        <div class="w-10 h-10 {{ !$message->is_read ? 'bg-blue-100' : 'bg-gray-100' }} rounded-full flex items-center justify-center flex-shrink-0">
            <i class="fas fa-user text-sm {{ !$message->is_read ? 'text-blue-500' : 'text-gray-400' }}"></i>
        </div>
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-2 flex-wrap">
                <p class="font-semibold text-gray-800 text-sm">{{ $message->name }}</p>
                @if(!$message->is_read)
                    <span class="bg-blue-500 text-white text-xs font-bold px-1.5 py-0.5 rounded-full">Nouveau</span>
                @endif
            </div>
            <p class="text-sm text-gray-600 truncate">{{ $message->subject }}</p>
            <p class="text-xs text-gray-400">{{ $message->email }} {{ $message->phone ? '· ' . $message->phone : '' }}</p>
        </div>
        <div class="text-right flex-shrink-0">
            <p class="text-xs text-gray-400">{{ $message->created_at->format('d/m/Y') }}</p>
            <div class="flex items-center gap-1 mt-2 justify-end">
                <a href="{{ route('admin.messages.show', $message) }}" class="p-1.5 bg-blue-50 text-blue-600 hover:bg-blue-100 rounded-lg transition-colors">
                    <i class="fas fa-eye text-xs"></i>
                </a>
                <form action="{{ route('admin.messages.destroy', $message) }}" method="POST" onsubmit="return confirm('Supprimer ce message ?')">
                    @csrf @method('DELETE')
                    <button type="submit" class="p-1.5 bg-red-50 text-red-500 hover:bg-red-100 rounded-lg transition-colors">
                        <i class="fas fa-trash text-xs"></i>
                    </button>
                </form>
            </div>
        </div>
    </div>
    @empty
    <div class="py-16 text-center text-gray-400">
        <i class="fas fa-inbox text-4xl mb-3"></i>
        <p>Aucun message.</p>
    </div>
    @endforelse
    @if($messages->hasPages())
        <div class="px-5 py-4 border-t border-gray-100">{{ $messages->links() }}</div>
    @endif
</div>

@endsection