<x-app-layout>
    <div class="py-12 px-6 lg:px-12 min-h-screen">
        <div class="max-w-7xl mx-auto space-y-12">
            <!-- Phase 15: Member Intelligence Directory -->
            <header class="flex flex-col md:flex-row md:items-end justify-between gap-10 animate-in fade-in slide-in-from-top-4 duration-1000">
                <div class="space-y-4 border-l-4 border-white/20 pl-6">
                    <h2 class="font-display text-4xl font-black text-white tracking-tighter italic uppercase leading-none">Direktori Member</h2>
                    <p class="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em] italic leading-none">Database Pengguna Perorangan — Sistem Intelligence Pro v2.5</p>
                </div>
            </header>

            <div class="bg-white/5 rounded-[48px] border border-white/5 shadow-[0_40px_100px_-20px_rgba(0,0,0,0.6)] overflow-hidden">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-white/5 border-b border-white/5 text-slate-500 text-[9px] font-black uppercase tracking-[0.4em] italic">
                            <tr>
                                <th class="px-12 py-8">Identitas Member</th>
                                <th class="px-12 py-8">Kronologi Kontak</th>
                                <th class="px-12 py-8">Status Subscription</th>
                                <th class="px-12 py-8">Security Status</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-white/5">
                            @forelse($members as $member)
                                <tr class="hover:bg-white/5 transition-all duration-300 group">
                                    <td class="px-12 py-10">
                                        <div class="font-display font-black text-white text-[15px] mb-1.5 uppercase italic tracking-tight group-hover:text-indigo-400 transition-colors">{{ $member->user->name }}</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-[0.3em] leading-none italic">Verified Individual Asset</div>
                                    </td>
                                    <td class="px-12 py-10 text-slate-400">
                                        <div class="text-[12px] font-bold uppercase tracking-tight">{{ $member->user->email }}</div>
                                        <div class="text-[9px] font-black text-slate-600 uppercase tracking-widest mt-2 italic flex items-center gap-2">
                                            <svg class="w-3 h-3 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.948V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path></svg>
                                            {{ $member->user->phone ?: 'Data Undefined' }}
                                        </div>
                                    </td>
                                    <td class="px-12 py-10">
                                        @php $sub = $member->user->subscriptions()->active()->first(); @endphp
                                        @if($sub)
                                            <div class="flex items-center gap-4">
                                                <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse shadow-[0_0_10px_rgba(16,185,129,0.5)]"></div>
                                                <div>
                                                    <div class="text-[11px] font-black text-emerald-400 uppercase tracking-widest italic leading-none">Aktif</div>
                                                    <div class="text-[8px] font-bold text-slate-600 uppercase tracking-widest mt-1.5 italic">Ekselerasi s/d {{ $sub->end_date->format('d/m/Y') }}</div>
                                                </div>
                                            </div>
                                        @else
                                            <div class="flex items-center gap-4 opacity-40">
                                                <div class="w-2 h-2 bg-slate-700 rounded-full"></div>
                                                <div class="text-[11px] font-black text-slate-500 uppercase tracking-widest italic leading-none">Inaktif</div>
                                            </div>
                                        @endif
                                    </td>
                                    <td class="px-12 py-10">
                                        <span class="inline-flex items-center px-5 py-2 {{ $member->user->account_status === 'active' ? 'bg-emerald-500/10 text-emerald-400 border-emerald-500/20' : 'bg-rose-500/10 text-rose-400 border-rose-500/20' }} rounded-xl text-[9px] font-black uppercase tracking-[0.2em] border italic shadow-2xl">
                                            {{ $member->user->account_status }}
                                        </span>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="4" class="px-12 py-40 text-center">
                                        <div class="w-24 h-24 bg-white/5 rounded-[40px] flex items-center justify-center mx-auto mb-10 border border-white/10 shadow-3xl">
                                            <svg class="w-12 h-12 text-slate-800" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
                                        </div>
                                        <h4 class="text-3xl font-display font-black text-white uppercase italic tracking-tighter mb-4 leading-none">Database Kosong</h4>
                                        <p class="text-slate-700 text-[10px] font-black uppercase tracking-[0.3em] max-w-sm mx-auto leading-relaxed italic text-balance">Belum ada member yang terkonfigurasi dalam arsitektur intelijen Anda.</p>
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
                
                @if($members->hasPages())
                    <div class="p-12 bg-white/[0.02] border-t border-white/5">
                        {{ $members->links() }}
                    </div>
                @endif
            </div>
        </div>
    </div>
</x-app-layout>
