@extends('admin.layout')

@section('content')
<div class="flex items-center justify-between mb-12 text-gray-900 uppercase tracking-tighter">
    <h1 class="text-4xl font-black">Client <span class="text-[#CC2128]">Inquiries</span></h1>
</div>

<div class="bg-white shadow-3xl overflow-hidden border border-gray-100">
    <table class="w-full text-left border-collapse">
        <thead>
            <tr class="bg-gray-900 text-white">
                <th class="px-8 py-6 font-black uppercase tracking-widest text-[10px]">Status</th>
                <th class="px-8 py-6 font-black uppercase tracking-widest text-[10px]">Client Name</th>
                <th class="px-8 py-6 font-black uppercase tracking-widest text-[10px]">Service</th>
                <th class="px-8 py-6 font-black uppercase tracking-widest text-[10px]">Date</th>
                <th class="px-8 py-6 font-black uppercase tracking-widest text-[10px] text-right">Actions</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            @forelse($messages as $msg)
            <tr class="hover:bg-gray-50 transition-colors group {{ !$msg->is_read ? 'bg-red-50/30' : '' }}">
                <td class="px-8 py-6">
                    @if(!$msg->is_read)
                        <span class="px-3 py-1 bg-[#CC2128] text-white text-[8px] font-black uppercase tracking-widest italic animate-pulse">New</span>
                    @else
                        <span class="px-3 py-1 bg-gray-100 text-gray-400 text-[8px] font-black uppercase tracking-widest italic">Read</span>
                    @endif
                </td>
                <td class="px-8 py-6">
                    <div class="flex flex-col">
                        <span class="font-black uppercase tracking-tight text-gray-900">{{ $msg->name }}</span>
                        <span class="text-[10px] text-gray-400 font-bold uppercase tracking-widest">{{ $msg->email }}</span>
                    </div>
                </td>
                <td class="px-8 py-6">
                    <span class="text-[10px] font-black uppercase tracking-widest text-[#CC2128]">{{ $msg->service ?? 'N/A' }}</span>
                </td>
                <td class="px-8 py-6">
                    <span class="text-[10px] font-bold text-gray-400 uppercase tracking-widest">{{ $msg->created_at->format('M d, Y') }}</span>
                </td>
                <td class="px-8 py-6 text-right space-x-2">
                    <a href="{{ route('admin.contacts.show', $msg) }}" class="inline-block p-3 bg-gray-900 text-white hover:bg-[#CC2128] transition-all">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/></svg>
                    </a>
                    <form action="{{ route('admin.contacts.destroy', $msg) }}" method="POST" class="inline-block">
                        @csrf
                        @method('DELETE')
                        <button type="submit" onclick="return confirm('Are you sure?')" class="p-3 bg-gray-100 text-gray-400 hover:bg-[#CC2128] hover:text-white transition-all">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                        </button>
                    </form>
                </td>
            </tr>
            @empty
            <tr>
                <td colspan="5" class="px-8 py-20 text-center">
                    <div class="flex flex-col items-center justify-center opacity-20">
                        <svg class="w-20 h-20 text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0a2 2 0 01-2 2H6a2 2 0 01-2-2m16 0l-8 5-8-5"/></svg>
                        <span class="font-black uppercase tracking-[0.5em] text-xs">Inbox Empty</span>
                    </div>
                </td>
            </tr>
            @endforelse
        </tbody>
    </table>
    <div class="px-8 py-6 bg-gray-50 border-t border-gray-100 font-bold">
        {{ $messages->links() }}
    </div>
</div>
@endsection