@extends('layouts.admin')

@section('title', 'KYM Verification Queue')
@section('header_title', 'KYM Verification Queue')

@section('header_badge')
    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-blue-50 text-blue-700 border border-blue-200">
        Reviewer Inbox: {{ $members->total() }} records
    </span>
@endsection

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

    <!-- Filters Bar -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm space-y-4">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
            <div>
                <h3 class="text-base font-bold text-slate-800">Verification Processing Queue</h3>
                <p class="text-xs text-slate-500">Examine submitted documentation, mobile-captured photographs, and issue verification decisions.</p>
            </div>
            
            <div class="flex items-center gap-2">
                <span class="text-xs text-slate-500 font-medium">Quick Status Filter:</span>
                <a href="{{ route('admin.verification.index', ['status' => 'submitted']) }}" class="px-2.5 py-1 rounded-lg text-xs font-semibold {{ ($filters['status'] ?? '') === 'submitted' ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    Submitted
                </a>
                <a href="{{ route('admin.verification.index', ['status' => 'under_verification']) }}" class="px-2.5 py-1 rounded-lg text-xs font-semibold {{ ($filters['status'] ?? '') === 'under_verification' ? 'bg-amber-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    Under Review
                </a>
                <a href="{{ route('admin.verification.index', ['status' => 'changes_required']) }}" class="px-2.5 py-1 rounded-lg text-xs font-semibold {{ ($filters['status'] ?? '') === 'changes_required' ? 'bg-orange-600 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    Changes Req.
                </a>
                <a href="{{ route('admin.verification.index') }}" class="px-2.5 py-1 rounded-lg text-xs font-semibold {{ empty($filters['status']) ? 'bg-slate-800 text-white' : 'bg-slate-100 text-slate-700 hover:bg-slate-200' }}">
                    All
                </a>
            </div>
        </div>

        <form method="GET" action="{{ route('admin.verification.index') }}" class="grid grid-cols-1 sm:grid-cols-12 gap-3 pt-3 border-t border-slate-100">
            <div class="sm:col-span-8 relative">
                <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-slate-400">
                    <i class="fa-solid fa-magnifying-glass text-xs"></i>
                </div>
                <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Search by Member Name, Member Code, Mobile..." class="block w-full pl-9 pr-3 py-2 text-xs rounded-xl border border-slate-300 focus:ring-2 focus:ring-teal-500">
            </div>

            <div class="sm:col-span-4 flex items-center gap-2">
                <button type="submit" class="w-full py-2 px-3 bg-navy-800 hover:bg-navy-900 text-white rounded-xl text-xs font-semibold transition text-center shadow-sm">
                    Search Queue
                </button>
            </div>
        </form>
    </div>

    <!-- Verification Table -->
    <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse text-sm">
                <thead>
                    <tr class="bg-slate-50 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3.5 px-5">Member Name & Code</th>
                        <th class="py-3.5 px-4">Association</th>
                        <th class="py-3.5 px-4">Submission Date</th>
                        <th class="py-3.5 px-4">Photograph Status</th>
                        <th class="py-3.5 px-4">Documents Count</th>
                        <th class="py-3.5 px-4">KYM Status</th>
                        <th class="py-3.5 px-5 text-right">Review Action</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-xs">
                    @forelse($members as $m)
                        <tr class="hover:bg-slate-50/80 transition">
                            <td class="py-4 px-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-slate-100 border border-slate-200 overflow-hidden shrink-0 flex items-center justify-center font-bold text-slate-600 text-xs">
                                        @if($m->photo_path)
                                            <img src="{{ route('member.photo.stream', $m) }}" alt="{{ $m->full_name }}" class="w-full h-full object-cover">
                                        @else
                                            {{ substr($m->full_name, 0, 1) }}
                                        @endif
                                    </div>
                                    <div>
                                        <a href="{{ route('admin.verification.show', $m) }}" class="font-bold text-slate-900 hover:text-teal-600 block text-xs">
                                            {{ $m->full_name }}
                                        </a>
                                        <span class="font-mono text-[11px] text-slate-500">{{ $m->member_code }}</span>
                                    </div>
                                </div>
                            </td>

                            <td class="py-4 px-4 text-slate-600">
                                {{ $m->association?->code ?? 'ASIA' }}
                            </td>

                            <td class="py-4 px-4 text-slate-500">
                                {{ $m->kymProfile?->submitted_at?->format('M d, Y H:i') ?? $m->updated_at->diffForHumans() }}
                            </td>

                            <td class="py-4 px-4">
                                @if($m->photo_path)
                                    <span class="inline-flex items-center gap-1 text-emerald-700 font-semibold">
                                        <i class="fa-solid fa-camera text-emerald-600"></i> Captured
                                    </span>
                                @else
                                    <span class="inline-flex items-center gap-1 text-amber-700 font-medium">
                                        <i class="fa-solid fa-clock text-amber-600"></i> Missing Photo
                                    </span>
                                @endif
                            </td>

                            <td class="py-4 px-4 font-semibold text-slate-700">
                                {{ $m->documents->count() }} docs
                            </td>

                            <td class="py-4 px-4">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-[11px] font-semibold border {{ $m->status_badge_class }}">
                                    {{ $m->status_label }}
                                </span>
                            </td>

                            <td class="py-4 px-5 text-right">
                                <a href="{{ route('admin.verification.show', $m) }}" class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-bold text-white bg-slate-900 hover:bg-teal-600 transition shadow-sm">
                                    <i class="fa-solid fa-magnifying-glass text-[10px]"></i> Open Review
                                </a>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="7" class="py-10 text-center text-slate-400">
                                No records currently matching verification queue criteria.
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        @if($members->hasPages())
            <div class="px-6 py-4 border-t border-slate-200">
                {{ $members->links() }}
            </div>
        @endif
    </div>

</div>
@endsection