@extends('admin.layouts.dashboard')

@section('title', 'Members')

@section('content')
    <div class="space-y-6">
        <div class="flex flex-col lg:flex-row lg:justify-between lg:items-center gap-4"><div><h1 class="text-2xl font-bold text-white">Members</h1><p class="text-gray-400 text-sm mt-1">Manage all registered members.</p></div><form method="get" action="{{ route('admin.members') }}" class="flex gap-2"><input type="text" name="q" value="{{ $search }}" placeholder="Search members" class="px-3 py-2 rounded-lg bg-[#1e293b] border border-gray-700 text-sm text-white"><button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm font-medium">Search</button></form></div>

        @if(session('status'))
            <div class="rounded-xl border border-emerald-700 bg-emerald-900/20 px-4 py-3 text-sm text-emerald-300">{{ session('status') }}</div>
        @endif

        <div class="bg-[#1e293b] rounded-xl border border-gray-800 overflow-hidden"><div class="overflow-x-auto"><table class="w-full text-sm text-left"><thead class="text-xs text-gray-500 uppercase bg-[#0f172a]"><tr><th class="px-5 py-3">Member ID</th><th class="px-5 py-3">Name</th><th class="px-5 py-3">Plan</th><th class="px-5 py-3">Joined Date</th><th class="px-5 py-3">Status</th><th class="px-5 py-3 text-right">Actions</th></tr></thead><tbody class="divide-y divide-gray-800">@forelse($members as $member)<tr class="hover:bg-gray-800/50"><td class="px-5 py-4 text-gray-400 font-mono text-xs">MEM-{{ str_pad((string) $member->id, 3, '0', STR_PAD_LEFT) }}</td><td class="px-5 py-4"><div class="font-medium text-white">{{ $member->name }}</div><div class="text-xs text-gray-500">{{ $member->email }}</div></td><td class="px-5 py-4"><span class="px-2 py-1 rounded text-xs font-medium bg-blue-500/10 text-blue-400">{{ $member->membership_package ?: 'N/A' }}</span></td><td class="px-5 py-4 text-gray-400">{{ $member->created_at?->format('M d, Y') ?: 'N/A' }}</td><td class="px-5 py-4"><span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium {{ $member->membership_status === 'active' ? 'bg-green-500/10 text-green-400' : 'bg-gray-500/10 text-gray-400' }}">{{ ucfirst($member->membership_status ?: 'inactive') }}</span></td><td class="px-5 py-4 text-right"><div class="flex justify-end gap-2"><a href="{{ route('admin.members.show', $member) }}" class="p-1 text-gray-400 hover:text-white"><i data-lucide="eye" class="w-4 h-4"></i></a><a href="{{ route('admin.members.edit', $member) }}" class="p-1 text-gray-400 hover:text-blue-400"><i data-lucide="edit" class="w-4 h-4"></i></a><form action="{{ route('admin.members.destroy', $member) }}" method="post" onsubmit="return confirm('Delete this member?');">@csrf @method('delete')<button type="submit" class="p-1 text-gray-400 hover:text-red-400"><i data-lucide="trash-2" class="w-4 h-4"></i></button></form></div></td></tr>@empty<tr><td colspan="6" class="px-5 py-6 text-center text-gray-400">No members found.</td></tr>@endforelse</tbody></table></div></div>

        <div>{{ $members->links() }}</div>
    </div>
@endsection