@extends('layouts.admin')
@section('header', 'Contact Messages')
@section('content')
<div class="bg-white rounded shadow overflow-x-auto">
    <table class="w-full whitespace-nowrap">
        <thead>
            <tr class="text-left font-bold bg-gray-50 border-b">
                <th class="px-6 py-3">Date</th>
                <th class="px-6 py-3">Name</th>
                <th class="px-6 py-3">Email</th>
                <th class="px-6 py-3">Status</th>
                <th class="px-6 py-3">Actions</th>
            </tr>
        </thead>
        <tbody>
            @forelse($messages as $message)
            <tr class="border-b focus-within:bg-gray-100 hover:bg-gray-100 {{ $message->is_read ? 'text-gray-500' : 'font-semibold' }}">
                <td class="px-6 py-4">{{ $message->created_at->format('M d, Y') }}</td>
                <td class="px-6 py-4">{{ $message->name }}</td>
                <td class="px-6 py-4">{{ $message->email }}</td>
                <td class="px-6 py-4">
                    @if(!$message->is_read)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Unread</span>
                    @else
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">Read</span>
                    @endif
                </td>
                <td class="px-6 py-4 flex space-x-2">
                    <a href="{{ route('admin.messages.show', $message) }}" class="text-teal-600 hover:text-teal-900">View</a>
                    <form action="{{ route('admin.messages.destroy', $message) }}" method="POST" onsubmit="return confirm('Delete this message?');">
                        @csrf @method('DELETE')
                        <button type="submit" class="text-red-600 hover:text-red-900">Delete</button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-6 py-4 text-center text-gray-500">No messages found.</td>
            </tr>
            @endforelse
        </tbody>
    </table>
    <div class="p-4">
        {{ $messages->links() }}
    </div>
</div>
@endsection
