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

@section('content')
@if($unread > 0)
<div class="bg-yellow-50 text-yellow-700 px-4 py-2 rounded-lg mb-4">
    {{ $unread }} unread message(s)
</div>
@endif

<div class="bg-white rounded-xl shadow-sm overflow-hidden">
    <table class="w-full">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Name</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Email</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Message</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Status</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Date</th>
                <th class="px-4 py-3 text-left text-sm font-semibold text-gray-600">Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach($contacts as $contact)
            <tr class="border-t hover:bg-gray-50 {{ !$contact->is_read ? 'bg-yellow-50' : '' }}">
                <td class="px-4 py-3 font-medium">{{ $contact->name }}</td>
                <td class="px-4 py-3 text-gray-600">{{ $contact->email }}</td>
                <td class="px-4 py-3 text-gray-500 text-sm max-w-xs truncate">{{ $contact->message }}</td>
                <td class="px-4 py-3">
                    <span class="px-2 py-1 text-xs rounded {{ $contact->is_read ? 'bg-gray-100 text-gray-600' : 'bg-yellow-100 text-yellow-700' }}">
                        {{ $contact->is_read ? 'Read' : 'Unread' }}
                    </span>
                </td>
                <td class="px-4 py-3 text-gray-500 text-sm">{{ $contact->created_at->format('M d, Y') }}</td>
                <td class="px-4 py-3">
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.contacts.show', $contact) }}" class="text-blue-600 hover:text-blue-800">View</a>
                        @if(!$contact->is_read)
                        <form method="POST" action="{{ route('admin.contacts.read', $contact) }}">@csrf<button type="submit" class="text-yellow-600 hover:text-yellow-800">Mark Read</button></form>
                        @endif
                        <form method="POST" action="{{ route('admin.contacts.destroy', $contact) }}" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')<button type="submit" class="text-red-600 hover:text-red-800">Delete</button></form>
                    </div>
                </td>
            </tr>
            @endforeach
            @if($contacts->isEmpty())
            <tr>
                <td colspan="6" class="px-4 py-8 text-center text-gray-500">No messages yet</td>
            </tr>
            @endif
        </tbody>
    </table>
</div>

<div class="mt-4">
    {{ $contacts->links() }}
</div>
@endsection