@extends('layouts.admin')

@section('title', $member->full_name . ' (' . $member->member_code . ')')
@section('header_title', 'Member Profile & KYM Dossier')

@section('header_badge')
    <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold border {{ $member->status_badge_class }}">
        {{ $member->status_label }}
    </span>
@endsection

@section('content')
<div class="space-y-6">

    <!-- Top Profile Header Card -->
    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-6">
        <div class="flex items-center gap-5">
            <!-- Member Photo -->
            <div class="w-20 h-20 rounded-2xl bg-slate-100 border-2 border-slate-200 overflow-hidden shrink-0 shadow-sm relative group">
                @if($member->photo_path)
                    <img src="{{ route('member.photo.stream', $member) }}" alt="{{ $member->full_name }}" class="w-full h-full object-cover">
                @else
                    <div class="w-full h-full flex flex-col items-center justify-center text-slate-400 bg-slate-50">
                        <i class="fa-solid fa-camera text-2xl"></i>
                        <span class="text-[9px] mt-1 font-semibold uppercase">No Photo</span>
                    </div>
                @endif
            </div>

            <!-- Header Info -->
            <div class="space-y-1">
                <div class="flex items-center gap-3">
                    <h2 class="text-xl font-extrabold text-navy-900">{{ $member->full_name }}</h2>
                    <span class="px-2.5 py-0.5 rounded-md text-xs font-mono font-bold bg-navy-50 text-navy-800 border border-navy-200">
                        {{ $member->member_code }}
                    </span>
                </div>
                <p class="text-xs text-slate-500 flex items-center gap-3">
                    <span><i class="fa-solid fa-id-badge mr-1 text-slate-400"></i>Membership # <strong class="text-slate-700 font-mono">{{ $member->membership_no ?? 'Pending Assignment' }}</strong></span>
                    <span>•</span>
                    <span><i class="fa-solid fa-building mr-1 text-slate-400"></i>{{ $member->association?->name }}</span>
                    <span>•</span>
                    <span><i class="fa-solid fa-ribbon mr-1 text-teal-600"></i>{{ $member->membership_type }}</span>
                </p>
                <p class="text-xs text-slate-500 flex items-center gap-2 pt-0.5">
                    <span>Registered: {{ $member->created_at->format('M d, Y') }}</span>
                    <span>•</span>
                    <span>Last Activity: {{ $member->updated_at->diffForHumans() }}</span>
                </p>
            </div>
        </div>

        <!-- Action CTAs -->
        <div class="flex flex-wrap items-center gap-2.5">
            <a href="{{ route('admin.members.reuse', $member) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-teal-700 bg-teal-50 hover:bg-teal-100 transition border border-teal-200 shadow-sm flex items-center gap-1.5">
                <i class="fa-solid fa-clone text-teal-600"></i>
                <span>Side-by-Side Data Reuse</span>
            </a>

            <a href="{{ route('admin.members.edit', $member) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-700 bg-slate-100 hover:bg-slate-200 transition border border-slate-200 shadow-sm flex items-center gap-1.5">
                <i class="fa-solid fa-user-pen text-slate-500"></i>
                <span>Edit Profile</span>
            </a>

            @if(in_array($member->kym_status, ['submitted', 'resubmitted', 'under_verification', 'changes_required']))
                <a href="{{ route('admin.verification.show', $member) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-white bg-slate-900 hover:bg-teal-600 transition shadow-sm flex items-center gap-1.5">
                    <i class="fa-solid fa-shield-halved"></i>
                    <span>Verify KYM Application</span>
                </a>
            @endif
        </div>
    </div>

    <!-- Contextual Shared Contact Alert Panel (Section 9) -->
    @if($sharedMobileMembers->count() > 0)
        <div class="p-5 rounded-2xl bg-amber-50/70 border border-amber-200 text-amber-900 shadow-sm space-y-3">
            <div class="flex items-start gap-3">
                <div class="w-8 h-8 rounded-xl bg-amber-500 text-white flex items-center justify-center shrink-0 text-sm shadow-sm">
                    <i class="fa-solid fa-people-arrows"></i>
                </div>
                <div class="flex-1">
                    <h4 class="font-bold text-amber-950 text-sm">
                        {{ $sharedMobileMembers->count() }} existing members are associated with this primary mobile number ({{ $member->masked_mobile }})
                    </h4>
                    <p class="text-xs text-amber-800 mt-0.5">
                        Multiple family members legitimately share contact information. Identity records, photographs, and verification decisions remain completely individual.
                    </p>
                </div>
            </div>

            <!-- Grid of Shared Members -->
            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3 pt-2">
                @foreach($sharedMobileMembers as $shared)
                    <div class="p-3 bg-white rounded-xl border border-amber-200/80 shadow-xs flex flex-col justify-between">
                        <div>
                            <div class="flex items-center justify-between mb-1">
                                <span class="font-bold text-slate-800 text-xs">{{ $shared->full_name }}</span>
                                <span class="text-[10px] px-2 py-0.5 rounded-full font-semibold border {{ $shared->status_badge_class }}">{{ $shared->status_label }}</span>
                            </div>
                            <p class="font-mono text-[11px] text-slate-500">{{ $shared->member_code }}</p>
                            <p class="text-[11px] text-slate-400 mt-0.5">{{ $shared->association?->code ?? 'ASIA' }}</p>
                        </div>
                        <div class="pt-2.5 mt-2 border-t border-slate-100 flex items-center justify-between">
                            <a href="{{ route('admin.members.show', $shared) }}" class="text-[11px] font-semibold text-teal-600 hover:text-teal-800">
                                View Member →
                            </a>
                            <a href="{{ route('admin.members.reuse', $member) }}?source={{ $shared->id }}" class="text-[11px] font-semibold text-slate-600 hover:text-slate-900">
                                Copy Fields
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    <!-- Profile Tabs -->
    <div x-data="{ tab: 'overview' }" class="space-y-6">
        
        <!-- Tab Navigation Bar -->
        <div class="flex items-center gap-2 border-b border-slate-200 overflow-x-auto custom-scrollbar pb-px">
            <button @click="tab = 'overview'" :class="tab === 'overview' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-id-card"></i> Overview
            </button>
            <button @click="tab = 'personal'" :class="tab === 'personal' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-user"></i> Personal Details
            </button>
            <button @click="tab = 'contact'" :class="tab === 'contact' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-location-dot"></i> Contact & Address
            </button>
            <button @click="tab = 'membership'" :class="tab === 'membership' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-certificate"></i> Membership Info
            </button>
            <button @click="tab = 'kym'" :class="tab === 'kym' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-shield-check"></i> KYM Verification Details
            </button>
            <button @click="tab = 'documents'" :class="tab === 'documents' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-folder-open"></i> Documents ({{ $member->documents->count() }})
            </button>
            <button @click="tab = 'history'" :class="tab === 'history' ? 'border-teal-500 text-teal-700 font-bold' : 'border-transparent text-slate-500 hover:text-slate-700'" class="px-4 py-3 text-xs border-b-2 font-medium transition whitespace-nowrap flex items-center gap-2">
                <i class="fa-solid fa-timeline"></i> Audit Trail ({{ $member->auditLogs->count() }})
            </button>
        </div>

        <!-- Tab 1: Overview -->
        <div x-show="tab === 'overview'" class="space-y-6">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                <!-- Left 2 cols: Verification dossier -->
                <div class="md:col-span-2 space-y-6">
                    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
                        <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3 flex items-center justify-between">
                            <span>Verification Status Summary</span>
                            <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full border {{ $member->status_badge_class }}">{{ $member->status_label }}</span>
                        </h4>

                        @if($member->kymProfile?->reviewer_notes)
                            <div class="p-4 rounded-xl bg-slate-50 border border-slate-200 text-xs">
                                <span class="font-bold text-slate-700 uppercase tracking-wider block mb-1">Verifier Notes:</span>
                                <p class="text-slate-700 leading-relaxed">{{ $member->kymProfile->reviewer_notes }}</p>
                                <p class="text-[11px] text-slate-400 mt-2">Verified by: {{ $member->kymProfile->reviewer?->name ?? 'Verifier' }} on {{ $member->kymProfile->verified_at?->format('M d, Y') }}</p>
                            </div>
                        @endif

                        @if($member->kym_status === 'changes_required' && $member->kymProfile?->requested_changes)
                            <div class="p-4 rounded-xl bg-orange-50 border border-orange-200 text-xs text-orange-900">
                                <span class="font-bold text-orange-950 uppercase tracking-wider block mb-1">Corrections Requested:</span>
                                <p class="leading-relaxed">{{ $member->kymProfile->requested_changes }}</p>
                                <p class="text-[11px] text-orange-700 mt-2">Requested on: {{ $member->kymProfile->changes_requested_at?->format('M d, Y') }}</p>
                            </div>
                        @endif

                        @if($member->kym_status === 'rejected' && $member->kymProfile?->rejection_reason)
                            <div class="p-4 rounded-xl bg-rose-50 border border-rose-200 text-xs text-rose-900">
                                <span class="font-bold text-rose-950 uppercase tracking-wider block mb-1">Rejection Reason:</span>
                                <p class="leading-relaxed">{{ $member->kymProfile->rejection_reason }}</p>
                            </div>
                        @endif

                        <div class="grid grid-cols-2 gap-4 text-xs pt-2">
                            <div>
                                <span class="text-slate-400 block font-medium">Photograph Capture:</span>
                                @if($member->photo_path)
                                    <span class="font-semibold text-emerald-700"><i class="fa-solid fa-check text-emerald-600 mr-1"></i>Captured via Phone</span>
                                @else
                                    <span class="font-semibold text-amber-700"><i class="fa-solid fa-clock text-amber-600 mr-1"></i>Pending Capture</span>
                                @endif
                            </div>

                            <div>
                                <span class="text-slate-400 block font-medium">Supporting Documents:</span>
                                <span class="font-semibold text-slate-800">{{ $member->documents->count() }} Uploaded</span>
                            </div>

                            <div>
                                <span class="text-slate-400 block font-medium">Submission Timestamp:</span>
                                <span class="font-semibold text-slate-800">{{ $member->kymProfile?->submitted_at?->format('M d, Y H:i') ?? 'Not Submitted' }}</span>
                            </div>

                            <div>
                                <span class="text-slate-400 block font-medium">Last Audited Action:</span>
                                <span class="font-semibold text-slate-800">{{ $member->auditLogs->first()?->action ?? 'None' }}</span>
                            </div>
                        </div>
                    </div>

                    <!-- Quick Contact Summary Card -->
                    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
                        <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3">Primary Contact & Address</h4>
                        <div class="grid grid-cols-2 gap-4 text-xs">
                            <div>
                                <span class="text-slate-400 block font-medium">Primary Mobile:</span>
                                <span class="font-semibold text-slate-900 font-mono">{{ $member->mobile_primary }}</span>
                            </div>
                            <div>
                                <span class="text-slate-400 block font-medium">Email Address:</span>
                                <span class="font-semibold text-slate-900">{{ $member->email ?? 'N/A' }}</span>
                            </div>
                            <div class="col-span-2">
                                <span class="text-slate-400 block font-medium">Residential Address:</span>
                                <span class="font-medium text-slate-800 leading-relaxed">{{ $member->residential_address ?? 'Not Provided' }}</span>
                                <p class="text-slate-500 mt-1">{{ $member->city }}, {{ $member->state }} - {{ $member->pincode }}</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Right 1 col: Photograph Preview & Security Specs -->
                <div class="space-y-6">
                    <div class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm text-center">
                        <h4 class="text-xs font-bold text-slate-500 uppercase tracking-wider mb-4">Official Portrait</h4>
                        <div class="w-40 h-40 mx-auto rounded-2xl overflow-hidden border-4 border-slate-100 shadow-md bg-slate-50 relative group">
                            @if($member->photo_path)
                                <img src="{{ route('member.photo.stream', $member) }}" alt="{{ $member->full_name }}" class="w-full h-full object-cover">
                            @else
                                <div class="w-full h-full flex flex-col items-center justify-center text-slate-300">
                                    <i class="fa-solid fa-camera text-4xl"></i>
                                    <span class="text-xs mt-2 font-medium">No Photograph</span>
                                </div>
                            @endif
                        </div>
                        <p class="text-xs font-semibold text-slate-700 mt-3">{{ $member->full_name }}</p>
                        <p class="text-[11px] text-slate-400 font-mono">{{ $member->member_code }}</p>
                    </div>

                    <!-- Association details -->
                    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm text-xs space-y-2">
                        <h5 class="font-bold text-slate-700 uppercase tracking-wider text-[11px]">Affiliated Chapter</h5>
                        <p class="font-semibold text-slate-900">{{ $member->association?->name }}</p>
                        <p class="text-slate-500">{{ $member->association?->address }}</p>
                        <p class="text-slate-400 text-[11px]">Contact: {{ $member->association?->contact_phone }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Tab 2: Personal Details -->
        <div x-show="tab === 'personal'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3 mb-5">Individual Identification Profile</h4>
            <dl class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 text-xs">
                <div>
                    <dt class="text-slate-400 font-medium">Full Name (Registry):</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-0.5">{{ $member->full_name }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Gender:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->gender ?? 'Not Specified' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Date of Birth:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->date_of_birth?->format('F d, Y') ?? 'Not Provided' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Blood Group:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->blood_group ?? 'Not Provided' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Father / Husband Name:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->father_husband_name ?? 'Not Provided' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Occupation / Profession:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->occupation ?? 'Not Provided' }}</dd>
                </div>
            </dl>
        </div>

        <!-- Tab 3: Contact & Address -->
        <div x-show="tab === 'contact'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3 mb-5">Contact Details & Residential Verification</h4>
            <dl class="grid grid-cols-1 sm:grid-cols-2 gap-6 text-xs">
                <div>
                    <dt class="text-slate-400 font-medium">Primary Mobile:</dt>
                    <dd class="text-sm font-bold font-mono text-slate-900 mt-0.5">{{ $member->mobile_primary }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Secondary / Emergency Phone:</dt>
                    <dd class="text-sm font-mono text-slate-800 mt-0.5">{{ $member->mobile_secondary ?? 'None' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Email Address:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->email ?? 'None' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">City, State & PIN:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->city }}, {{ $member->state }} - {{ $member->pincode }}</dd>
                </div>
                <div class="sm:col-span-2">
                    <dt class="text-slate-400 font-medium">Full Residential Address:</dt>
                    <dd class="text-sm text-slate-800 mt-0.5 leading-relaxed">{{ $member->residential_address ?? 'Not Provided' }}</dd>
                </div>
            </dl>
        </div>

        <!-- Tab 4: Membership Info -->
        <div x-show="tab === 'membership'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3 mb-5">Official Association Membership Details</h4>
            <dl class="grid grid-cols-1 sm:grid-cols-3 gap-6 text-xs">
                <div>
                    <dt class="text-slate-400 font-medium">Permanent Database ID:</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-0.5 font-mono">#{{ $member->id }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">System Member Code:</dt>
                    <dd class="text-sm font-bold text-teal-700 mt-0.5 font-mono">{{ $member->member_code }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Association Membership Number:</dt>
                    <dd class="text-sm font-bold text-slate-900 mt-0.5 font-mono">{{ $member->membership_no ?? 'Pending Assignment' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Membership Category:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->membership_type }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Joining / Enrollment Date:</dt>
                    <dd class="text-sm font-semibold text-slate-800 mt-0.5">{{ $member->joining_date?->format('F d, Y') ?? 'N/A' }}</dd>
                </div>
                <div>
                    <dt class="text-slate-400 font-medium">Roster Status:</dt>
                    <dd class="text-sm font-semibold text-emerald-700 mt-0.5">{{ $member->membership_status }}</dd>
                </div>
            </dl>
        </div>

        <!-- Tab 5: KYM Verification Details -->
        <div x-show="tab === 'kym'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3">KYM Workflow Timeline & Decisions</h4>
            <div class="grid grid-cols-2 gap-4 text-xs">
                <div>
                    <span class="text-slate-400 block font-medium">Current KYM Step:</span>
                    <span class="font-bold text-slate-900">Step {{ $member->kymProfile?->current_step ?? 1 }} of 8</span>
                </div>
                <div>
                    <span class="text-slate-400 block font-medium">Reviewing Administrator:</span>
                    <span class="font-bold text-slate-900">{{ $member->kymProfile?->reviewer?->name ?? 'Unassigned' }}</span>
                </div>
                <div>
                    <span class="text-slate-400 block font-medium">Submitted At:</span>
                    <span class="font-semibold text-slate-800">{{ $member->kymProfile?->submitted_at?->format('M d, Y H:i:s') ?? '—' }}</span>
                </div>
                <div>
                    <span class="text-slate-400 block font-medium">Verified At:</span>
                    <span class="font-semibold text-emerald-700">{{ $member->kymProfile?->verified_at?->format('M d, Y H:i:s') ?? '—' }}</span>
                </div>
            </div>
        </div>

        <!-- Tab 6: Documents -->
        <div x-show="tab === 'documents'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3">Uploaded Identification Documents</h4>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                @forelse($member->documents as $doc)
                    <div class="p-4 rounded-xl border border-slate-200 bg-slate-50 flex items-start justify-between gap-4">
                        <div class="flex items-start gap-3">
                            <div class="w-10 h-10 rounded-lg bg-teal-100 text-teal-700 flex items-center justify-center shrink-0 text-base">
                                <i class="fa-solid fa-file-pdf"></i>
                            </div>
                            <div>
                                <h5 class="font-bold text-slate-800 text-xs">{{ $doc->documentType?->name ?? strtoupper($doc->document_type_code) }}</h5>
                                <p class="text-[11px] text-slate-500 font-mono mt-0.5">Masked ID: {{ $doc->document_number_masked ?? 'Document Uploaded' }}</p>
                                <p class="text-[10px] text-slate-400 mt-1">{{ $doc->original_filename }} ({{ $doc->file_size_kb }} KB)</p>
                            </div>
                        </div>

                        <div class="flex items-center gap-2">
                            <a href="{{ route('documents.view', $doc) }}" target="_blank" class="px-2.5 py-1.5 rounded-lg text-xs font-medium bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 transition" title="Preview Document">
                                View
                            </a>
                            <a href="{{ route('documents.download', $doc) }}" class="px-2.5 py-1.5 rounded-lg text-xs font-medium bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 transition" title="Download Document">
                                <i class="fa-solid fa-download"></i>
                            </a>
                        </div>
                    </div>
                @empty
                    <div class="col-span-2 py-8 text-center text-slate-400 text-xs">
                        No supporting identity documents uploaded yet.
                    </div>
                @endforelse
            </div>
        </div>

        <!-- Tab 7: History / Audit Logs -->
        <div x-show="tab === 'history'" class="bg-white p-6 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
            <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3">Complete Member Audit Trail</h4>
            
            <div class="space-y-3">
                @forelse($member->auditLogs as $log)
                    <div class="p-3.5 rounded-xl border border-slate-100 bg-slate-50/60 text-xs flex items-start justify-between gap-4">
                        <div class="space-y-1">
                            <div class="flex items-center gap-2">
                                <span class="font-bold text-slate-800">{{ str_replace('_', ' ', $log->action) }}</span>
                                <span class="text-[10px] px-2 py-0.5 rounded bg-slate-200 text-slate-700 font-mono">{{ $log->event_type }}</span>
                            </div>
                            <p class="text-slate-600">{{ $log->description }}</p>
                            @if($log->metadata)
                                <pre class="p-2 rounded bg-slate-100 text-[10px] font-mono text-slate-700 overflow-x-auto">{{ json_encode($log->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES) }}</pre>
                            @endif
                        </div>
                        <div class="text-right shrink-0">
                            <span class="text-[11px] font-medium text-slate-500 block">{{ $log->actor_name }}</span>
                            <span class="text-[10px] text-slate-400 block">{{ $log->created_at->format('M d, Y H:i') }}</span>
                        </div>
                    </div>
                @empty
                    <p class="text-center text-slate-400 text-xs py-6">No audit records found for this member.</p>
                @endforelse
            </div>
        </div>

    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
@endpush