@extends('admin.layouts.app')
@section('title', 'Messages')
@section('page-title', 'Contact Messages')
@section('page-subtitle', 'Manage customer inquiries and messages')

@section('content')
<div class="glass rounded-3xl p-5 mb-6 flex flex-wrap gap-4 items-center">
    <form method="GET" class="flex flex-wrap gap-3 flex-1">
        <input type="text" name="search" value="{{ request('search') }}" placeholder="Search messages..."
               class="bg-white/5 border border-white/10 rounded-2xl px-5 py-3 text-sm text-white placeholder-slate-500 focus:outline-none focus:border-accent flex-1 min-w-48">
        <select name="status" class="bg-white/5 border border-white/10 rounded-2xl px-5 py-3 text-sm text-white focus:outline-none focus:border-accent">
            <option value="">All</option>
            @foreach(['unread','read','replied'] as $s)
            <option value="{{ $s }}" {{ request('status') == $s ? 'selected' : '' }} class="bg-slate-900">{{ ucfirst($s) }}</option>
            @endforeach
        </select>
        <button type="submit" class="bg-accent hover:bg-accent-dark px-6 py-3 rounded-2xl text-white font-bold text-sm transition-colors"><i class="fas fa-search mr-2"></i>Filter</button>
        @if(request()->hasAny(['search','status']))<a href="{{ route('admin.messages.index') }}" class="bg-white/5 hover:bg-white/10 px-6 py-3 rounded-2xl text-slate-400 font-bold text-sm transition-colors">Clear</a>@endif
    </form>
</div>
<div class="glass rounded-3xl overflow-hidden">
    <table class="w-full">
        <thead><tr class="border-b border-white/5">
            <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest">From</th>
            <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest hidden md:table-cell">Subject</th>
            <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest">Status</th>
            <th class="px-6 py-4 text-left text-xs font-black text-slate-500 uppercase tracking-widest hidden lg:table-cell">Date</th>
            <th class="px-6 py-4 text-right text-xs font-black text-slate-500 uppercase tracking-widest">Actions</th>
        </tr></thead>
        <tbody class="divide-y divide-white/5">
            @forelse($messages as $msg)
            <tr class="hover:bg-white/3 transition-colors {{ $msg->status === 'unread' ? 'bg-cyan-500/3' : '' }}">
                <td class="px-6 py-4">
                    <div class="flex items-center space-x-3">
                        <div class="w-9 h-9 rounded-xl bg-gradient-to-br from-cyan-500/20 to-blue-500/20 flex items-center justify-center text-xs font-black text-neon-cyan flex-shrink-0">{{ strtoupper(substr($msg->name, 0, 1)) }}</div>
                        <div><p class="text-sm font-bold text-white {{ $msg->status === 'unread' ? '' : 'font-normal' }}">{{ $msg->name }}</p><p class="text-xs text-slate-500">{{ $msg->email }}</p></div>
                    </div>
                </td>
                <td class="px-6 py-4 hidden md:table-cell"><p class="text-sm text-slate-400 truncate max-w-xs">{{ $msg->subject ?? Str::limit($msg->message, 50) }}</p></td>
                <td class="px-6 py-4"><span class="badge-{{ $msg->status }} text-xs font-bold px-3 py-1.5 rounded-xl capitalize">{{ $msg->status }}</span></td>
                <td class="px-6 py-4 hidden lg:table-cell"><span class="text-xs text-slate-500">{{ \Carbon\Carbon::parse($msg->created_at)->format('M j, Y') }}</span></td>
                <td class="px-6 py-4 text-right">
                    <div class="flex items-center justify-end space-x-2">
                        <a href="{{ route('admin.messages.show', $msg->id) }}" class="w-8 h-8 rounded-xl bg-accent/10 hover:bg-accent/20 flex items-center justify-center text-accent transition-colors"><i class="fas fa-eye text-xs"></i></a>
                        <form action="{{ route('admin.messages.destroy', $msg->id) }}" method="POST" onsubmit="return confirm('Delete?')">@csrf @method('DELETE')<button type="submit" class="w-8 h-8 rounded-xl bg-rose-500/10 hover:bg-rose-500/20 flex items-center justify-center text-rose-400 transition-colors"><i class="fas fa-trash text-xs"></i></button></form>
                    </div>
                </td>
            </tr>
            @empty
            <tr><td colspan="5" class="px-6 py-16 text-center text-slate-500">No messages found.</td></tr>
            @endforelse
        </tbody>
    </table>
    @if($messages->hasPages())<div class="px-6 py-4 border-t border-white/5">{{ $messages->withQueryString()->links() }}</div>@endif
</div>
@endsection