@extends('layouts.admin')

@section('title', 'KYM Review — ' . $member->full_name)
@section('header_title', 'KYM Verification Dossier Review')

@section('header_badge')
    <span class="inline-flex items-center px-2.5 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" x-data="{ actionModal: null }">

    <!-- Header Action Ribbon -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col md:flex-row md:items-center justify-between gap-4">
        <div>
            <div class="flex items-center gap-3">
                <h3 class="text-lg font-extrabold text-navy-900">{{ $member->full_name }}</h3>
                <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 mt-0.5">
                Submitted: {{ $member->kymProfile?->submitted_at?->format('M d, Y H:i') ?? 'Pending' }} • Association: {{ $member->association?->name }}
            </p>
        </div>

        <!-- Verification Action Triggers -->
        <div class="flex items-center gap-2.5">
            <button type="button" @click="actionModal = 'approve'" class="px-4 py-2 rounded-xl text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 transition shadow-sm shadow-emerald-500/20 flex items-center gap-1.5">
                <i class="fa-solid fa-circle-check"></i>
                <span>Approve KYM</span>
            </button>

            <button type="button" @click="actionModal = 'request_changes'" class="px-4 py-2 rounded-xl text-xs font-bold text-orange-700 bg-orange-50 hover:bg-orange-100 border border-orange-200 transition shadow-sm flex items-center gap-1.5">
                <i class="fa-solid fa-pen-to-square text-orange-600"></i>
                <span>Request Corrections</span>
            </button>

            <button type="button" @click="actionModal = 'reject'" class="px-4 py-2 rounded-xl text-xs font-bold text-rose-700 bg-rose-50 hover:bg-rose-100 border border-rose-200 transition shadow-sm flex items-center gap-1.5">
                <i class="fa-solid fa-ban text-rose-600"></i>
                <span>Reject</span>
            </button>
        </div>
    </div>

    <!-- Reviewer Workspace: 2 Columns -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        
        <!-- Left: Dossier & Field Inspection (8 cols) -->
        <div class="lg:col-span-8 space-y-6">
            
            <!-- Side-by-Side Field Comparison (Registry vs Submitted) -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
                <div class="p-4 border-b border-slate-200 bg-slate-50/50 flex items-center justify-between text-xs">
                    <span class="font-bold text-slate-700 uppercase tracking-wider">Field Comparison: Registry vs Submitted KYM</span>
                    <span class="text-slate-500 text-[11px]"><i class="fa-solid fa-shield-halved text-teal-600 mr-1"></i>Manual Document Verification Mode</span>
                </div>

                <div class="divide-y divide-slate-100 text-xs">
                    <!-- Row 1: Full Name -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 p-3.5 items-center gap-2">
                        <span class="sm:col-span-3 text-slate-500 font-medium">Full Name:</span>
                        <div class="sm:col-span-4 font-semibold text-slate-800">{{ $member->full_name }}</div>
                        <div class="sm:col-span-5 font-semibold text-teal-700 flex items-center gap-1.5">
                            <i class="fa-solid fa-circle-check text-emerald-500"></i>
                            <span>{{ $member->kymProfile?->draft_data['full_name'] ?? $member->full_name }}</span>
                        </div>
                    </div>

                    <!-- Row 2: Date of Birth -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 p-3.5 items-center gap-2">
                        <span class="sm:col-span-3 text-slate-500 font-medium">Date of Birth:</span>
                        <div class="sm:col-span-4 text-slate-800">{{ $member->date_of_birth?->format('F d, Y') ?? 'Not in Registry' }}</div>
                        <div class="sm:col-span-5 text-slate-900 font-medium">
                            {{ $member->kymProfile?->draft_data['date_of_birth'] ?? ($member->date_of_birth?->format('Y-m-d') ?? 'Pending') }}
                        </div>
                    </div>

                    <!-- Row 3: Primary Mobile -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 p-3.5 items-center gap-2">
                        <span class="sm:col-span-3 text-slate-500 font-medium">Primary Mobile:</span>
                        <div class="sm:col-span-4 font-mono font-semibold text-slate-800">{{ $member->mobile_primary }}</div>
                        <div class="sm:col-span-5 font-mono text-slate-900">
                            {{ $member->kymProfile?->draft_data['mobile_primary'] ?? $member->mobile_primary }}
                            @if($sharedMobileMembers->count() > 0)
                                <span class="ml-2 text-[10px] px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-sans font-semibold">Shared with {{ $sharedMobileMembers->count() }} family members</span>
                            @endif
                        </div>
                    </div>

                    <!-- Row 4: Email Address -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 p-3.5 items-center gap-2">
                        <span class="sm:col-span-3 text-slate-500 font-medium">Email Address:</span>
                        <div class="sm:col-span-4 text-slate-800">{{ $member->email ?? 'None' }}</div>
                        <div class="sm:col-span-5 text-slate-900">{{ $member->kymProfile?->draft_data['email'] ?? ($member->email ?? 'None') }}</div>
                    </div>

                    <!-- Row 5: Residential Address -->
                    <div class="grid grid-cols-1 sm:grid-cols-12 p-3.5 items-start gap-2">
                        <span class="sm:col-span-3 text-slate-500 font-medium">Residential Address:</span>
                        <div class="sm:col-span-4 text-slate-800 leading-relaxed">{{ $member->residential_address ?? 'Not recorded' }}</div>
                        <div class="sm:col-span-5 text-slate-900 leading-relaxed">
                            {{ $member->kymProfile?->draft_data['residential_address'] ?? $member->residential_address }}
                            <p class="text-slate-500 text-[11px] mt-1">{{ $member->city }}, {{ $member->state }} - {{ $member->pincode }}</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Uploaded Documents Inspection -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 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>Submitted Verification Documents</span>
                    <span class="text-xs text-slate-500 font-normal">{{ $member->documents->count() }} files attached</span>
                </h4>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    @forelse($member->documents as $doc)
                        <div class="p-4 rounded-xl border border-slate-200 bg-slate-50/60 space-y-3 text-xs">
                            <div class="flex items-start justify-between gap-2">
                                <div>
                                    <h5 class="font-bold text-slate-900 text-xs">{{ $doc->documentType?->name ?? strtoupper($doc->document_type_code) }}</h5>
                                    <p class="text-[11px] font-mono text-slate-600 mt-0.5">Masked Number: {{ $doc->document_number_masked ?? 'Verified UID' }}</p>
                                    <p class="text-[10px] text-slate-400">{{ $doc->original_filename }} ({{ $doc->file_size_kb }} KB)</p>
                                </div>
                                <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold {{ $doc->upload_status === 'verified' ? 'bg-emerald-100 text-emerald-800' : 'bg-slate-200 text-slate-700' }}">
                                    {{ ucfirst($doc->upload_status) }}
                                </span>
                            </div>

                            <div class="flex items-center gap-2 pt-2 border-t border-slate-200/70">
                                <a href="{{ route('documents.view', $doc) }}" target="_blank" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 transition flex items-center gap-1.5">
                                    <i class="fa-solid fa-eye text-slate-400"></i> View Document
                                </a>
                                <a href="{{ route('documents.download', $doc) }}" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-white hover:bg-slate-100 border border-slate-200 text-slate-700 transition flex items-center gap-1.5">
                                    <i class="fa-solid fa-download text-slate-400"></i> Download
                                </a>
                            </div>
                        </div>
                    @empty
                        <div class="col-span-2 py-6 text-center text-slate-400 text-xs">
                            No documents submitted yet.
                        </div>
                    @endforelse
                </div>
            </div>

        </div>

        <!-- Right: Mobile-Captured Photograph & Identity Checks (4 cols) -->
        <div class="lg:col-span-4 space-y-6">
            
            <!-- Photograph Card -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-6 text-center space-y-4">
                <div class="flex items-center justify-between border-b border-slate-100 pb-3">
                    <span class="text-xs font-bold text-slate-700 uppercase tracking-wider">Mobile Portrait</span>
                    @if($member->photo_path)
                        <span class="text-[11px] font-semibold text-emerald-700 bg-emerald-50 px-2 py-0.5 rounded border border-emerald-200">Phone Captured</span>
                    @else
                        <span class="text-[11px] font-semibold text-rose-700 bg-rose-50 px-2 py-0.5 rounded border border-rose-200">Missing</span>
                    @endif
                </div>

                <div class="w-48 h-48 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 text-slate-500">Official member portrait captured via smartphone camera</p>
            </div>

            <!-- Verification History -->
            <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm p-5 text-xs space-y-3">
                <h5 class="font-bold text-slate-800 uppercase tracking-wider text-[11px]">Audit Events for this Profile</h5>
                <div class="space-y-2 max-h-48 overflow-y-auto custom-scrollbar">
                    @foreach($member->auditLogs->take(5) as $log)
                        <div class="p-2 rounded-lg bg-slate-50 border border-slate-100 text-[11px]">
                            <p class="font-bold text-slate-800">{{ str_replace('_', ' ', $log->action) }}</p>
                            <p class="text-slate-500 mt-0.5">{{ $log->created_at->format('M d, Y H:i') }} by {{ $log->actor_name }}</p>
                        </div>
                    @endforeach
                </div>
            </div>

        </div>

    </div>

    <!-- ======================================================== -->
    <!-- ACTION MODALS (Approve, Request Changes, Reject)         -->
    <!-- ======================================================== -->

    <!-- Approve Modal -->
    <div x-show="actionModal === 'approve'" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 backdrop-blur-xs p-4" x-cloak>
        <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 space-y-4 animate-scale-in" @click.outside="actionModal = null">
            <div class="flex items-center gap-3 text-emerald-600">
                <i class="fa-solid fa-circle-check text-2xl"></i>
                <h3 class="text-lg font-bold text-slate-900">Approve KYM Verification</h3>
            </div>
            <p class="text-xs text-slate-600 leading-relaxed">
                You are approving the Know Your Member (KYM) verification for <strong>{{ $member->full_name }}</strong> ({{ $member->member_code }}). The member record will be marked as <strong>Verified</strong> and an audit log will be permanently stored.
            </p>

            <form method="POST" action="{{ route('admin.verification.approve', $member) }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Verifier Notes / Endorsement</label>
                    <textarea name="reviewer_notes" rows="3" class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-emerald-500" placeholder="e.g. Identity and address documents inspected and matched with community registry records."></textarea>
                </div>

                <div class="flex items-center justify-end gap-3 pt-2">
                    <button type="button" @click="actionModal = null" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 shadow-md shadow-emerald-500/20">
                        Confirm & Mark Verified
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Request Changes Modal -->
    <div x-show="actionModal === 'request_changes'" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 backdrop-blur-xs p-4" x-cloak>
        <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 space-y-4 animate-scale-in" @click.outside="actionModal = null">
            <div class="flex items-center gap-3 text-orange-600">
                <i class="fa-solid fa-pen-to-square text-2xl"></i>
                <h3 class="text-lg font-bold text-slate-900">Request Corrections from Member</h3>
            </div>
            <p class="text-xs text-slate-600 leading-relaxed">
                Specify the exact issues or replacement documents required from <strong>{{ $member->full_name }}</strong>. The status will become <strong>Changes Required</strong> and the member will be notified.
            </p>

            <form method="POST" action="{{ route('admin.verification.request_changes', $member) }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Required Corrections / Notes <span class="text-rose-500">*</span></label>
                    <textarea name="requested_changes" required rows="4" class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-orange-500" placeholder="e.g. Uploaded address proof is blurry. Please upload a clear PDF of your electricity bill or rent agreement."></textarea>
                </div>

                <div class="flex items-center justify-end gap-3 pt-2">
                    <button type="button" @click="actionModal = null" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-orange-600 hover:bg-orange-700 shadow-md shadow-orange-500/20">
                        Send Correction Request
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Reject Modal -->
    <div x-show="actionModal === 'reject'" class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/60 backdrop-blur-xs p-4" x-cloak>
        <div class="bg-white rounded-2xl max-w-lg w-full p-6 shadow-2xl border border-slate-200 space-y-4 animate-scale-in" @click.outside="actionModal = null">
            <div class="flex items-center gap-3 text-rose-600">
                <i class="fa-solid fa-ban text-2xl"></i>
                <h3 class="text-lg font-bold text-slate-900">Reject KYM Application</h3>
            </div>
            <p class="text-xs text-slate-600 leading-relaxed">
                You are rejecting the KYM application for <strong>{{ $member->full_name }}</strong>. Please provide a formal rejection reason.
            </p>

            <form method="POST" action="{{ route('admin.verification.reject', $member) }}" class="space-y-4">
                @csrf
                <div>
                    <label class="block text-xs font-semibold text-slate-700 mb-1">Formal Rejection Reason <span class="text-rose-500">*</span></label>
                    <textarea name="rejection_reason" required rows="4" class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-rose-500" placeholder="e.g. Identity documents cannot be reconciled with membership records."></textarea>
                </div>

                <div class="flex items-center justify-end gap-3 pt-2">
                    <button type="button" @click="actionModal = null" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        Cancel
                    </button>
                    <button type="submit" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-rose-600 hover:bg-rose-700 shadow-md shadow-rose-500/20">
                        Confirm Rejection
                    </button>
                </div>
            </form>
        </div>
    </div>

</div>
@endsection

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