@extends('layouts.admin')

@section('title', 'Reports & KYM Analytics')
@section('header_title', 'KYM Completion Reports & Compliance')

@section('header_badge')
    <span class="text-xs font-semibold px-2.5 py-1 rounded-full bg-teal-50 text-teal-700 border border-teal-200">
        Audit & Verification Analytics
    </span>
@endsection

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

    <!-- Top Action Ribbon with Export -->
    <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-sm flex flex-col sm:flex-row items-center justify-between gap-4">
        <div>
            <h3 class="text-base font-bold text-slate-800">Association Verification Compliance</h3>
            <p class="text-xs text-slate-500">Real-time completion analytics, document exception logs, and exportable reports.</p>
        </div>

        <div class="flex items-center gap-3">
            <form method="GET" action="{{ route('admin.reports.index') }}" class="flex items-center gap-2">
                <select name="association_id" onchange="this.form.submit()" class="text-xs rounded-xl border border-slate-300 py-2 px-3 bg-white focus:ring-2 focus:ring-teal-500">
                    <option value="">All Associations</option>
                    @foreach($associations as $a)
                        <option value="{{ $a->id }}" {{ ($associationId ?? '') == $a->id ? 'selected' : '' }}>{{ $a->name }}</option>
                    @endforeach
                </select>
            </form>

            <a href="{{ route('admin.reports.export') }}{{ $associationId ? '?association_id='.$associationId : '' }}" class="px-4 py-2 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm shadow-teal-500/20 flex items-center gap-2">
                <i class="fa-solid fa-file-excel"></i>
                <span>Export Report to CSV</span>
            </a>
        </div>
    </div>

    <!-- Status Breakdown Metrics -->
    <div class="grid grid-cols-2 sm:grid-cols-4 gap-4">
        <div class="bg-white p-5 rounded-2xl border border-slate-200/80 shadow-xs text-center">
            <span class="text-xs text-slate-500 font-medium uppercase tracking-wider">Total Members</span>
            <p class="text-3xl font-extrabold text-navy-900 mt-1">{{ number_format($totalMembers) }}</p>
        </div>

        <div class="bg-white p-5 rounded-2xl border border-emerald-200 text-center shadow-xs bg-emerald-50/20">
            <span class="text-xs text-emerald-700 font-medium uppercase tracking-wider">Verified Members</span>
            <p class="text-3xl font-extrabold text-emerald-700 mt-1">{{ number_format($verifiedCount) }}</p>
            <span class="text-[11px] text-emerald-600 font-semibold">{{ $completionRate }}% of Total</span>
        </div>

        <div class="bg-white p-5 rounded-2xl border border-blue-200 text-center shadow-xs bg-blue-50/20">
            <span class="text-xs text-blue-700 font-medium uppercase tracking-wider">Pending Action</span>
            <p class="text-3xl font-extrabold text-blue-700 mt-1">{{ number_format($pendingCount) }}</p>
            <span class="text-[11px] text-blue-600 font-medium">Under Review</span>
        </div>

        <div class="bg-white p-5 rounded-2xl border border-orange-200 text-center shadow-xs bg-orange-50/20">
            <span class="text-xs text-orange-700 font-medium uppercase tracking-wider">Changes Required</span>
            <p class="text-3xl font-extrabold text-orange-700 mt-1">{{ number_format($changesCount) }}</p>
            <span class="text-[11px] text-orange-600 font-medium">Corrections Pending</span>
        </div>
    </div>

    <!-- Progress Breakdown -->
    <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">Community KYC Status Distribution</h4>
        
        <div class="w-full bg-slate-100 rounded-full h-4 overflow-hidden flex">
            @if($totalMembers > 0)
                <div class="bg-emerald-500 h-full" style="width: {{ ($verifiedCount / $totalMembers) * 100 }}%" title="Verified: {{ $verifiedCount }}"></div>
                <div class="bg-blue-500 h-full" style="width: {{ ($pendingCount / $totalMembers) * 100 }}%" title="Pending: {{ $pendingCount }}"></div>
                <div class="bg-orange-500 h-full" style="width: {{ ($changesCount / $totalMembers) * 100 }}%" title="Changes Required: {{ $changesCount }}"></div>
                <div class="bg-rose-500 h-full" style="width: {{ ($rejectedCount / $totalMembers) * 100 }}%" title="Rejected: {{ $rejectedCount }}"></div>
                <div class="bg-slate-300 h-full" style="width: {{ (($notStartedCount + $draftCount) / $totalMembers) * 100 }}%" title="Not Started / Draft"></div>
            @endif
        </div>

        <div class="flex flex-wrap items-center justify-between text-xs text-slate-600 pt-2">
            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-emerald-500"></span> Verified ({{ $verifiedCount }})</span>
            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-blue-500"></span> Pending ({{ $pendingCount }})</span>
            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-orange-500"></span> Changes Req. ({{ $changesCount }})</span>
            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-rose-500"></span> Rejected ({{ $rejectedCount }})</span>
            <span class="flex items-center gap-1.5"><span class="w-2.5 h-2.5 rounded-full bg-slate-400"></span> Not Started / Draft ({{ $notStartedCount + $draftCount }})</span>
        </div>
    </div>

    <!-- Exceptions: Members Without Photos & Missing Documents -->
    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        
        <!-- Members Without Photographs -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col">
            <div class="p-5 border-b border-slate-200 flex items-center justify-between">
                <div>
                    <h4 class="font-bold text-slate-800 text-sm">Members Without Photographs ({{ $missingPhotosCount }})</h4>
                    <p class="text-xs text-slate-500">Requires mobile-camera portrait capture</p>
                </div>
            </div>

            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left border-collapse text-xs">
                    <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 px-4">Member Name</th>
                            <th class="py-3 px-4">Member Code</th>
                            <th class="py-3 px-4">KYM Status</th>
                            <th class="py-3 px-4 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($missingPhotos as $mp)
                            <tr class="hover:bg-slate-50/80">
                                <td class="py-3 px-4 font-bold text-slate-900">{{ $mp->full_name }}</td>
                                <td class="py-3 px-4 font-mono text-slate-500">{{ $mp->member_code }}</td>
                                <td class="py-3 px-4">
                                    <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold border {{ $mp->status_badge_class }}">
                                        {{ $mp->status_label }}
                                    </span>
                                </td>
                                <td class="py-3 px-4 text-right">
                                    <a href="{{ route('admin.members.show', $mp) }}" class="text-teal-600 hover:text-teal-800 font-bold">
                                        Open →
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-6 text-center text-slate-400">All members have portraits.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Members Missing Mandatory Documents -->
        <div class="bg-white rounded-2xl border border-slate-200/80 shadow-sm overflow-hidden flex flex-col">
            <div class="p-5 border-b border-slate-200 flex items-center justify-between">
                <div>
                    <h4 class="font-bold text-slate-800 text-sm">Missing Mandatory Documents ({{ $missingDocsCount }})</h4>
                    <p class="text-xs text-slate-500">Missing Aadhaar, PAN, or Address Proof</p>
                </div>
            </div>

            <div class="overflow-x-auto flex-1">
                <table class="w-full text-left border-collapse text-xs">
                    <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 px-4">Member Name</th>
                            <th class="py-3 px-4">Member Code</th>
                            <th class="py-3 px-4">Current Docs</th>
                            <th class="py-3 px-4 text-right">Action</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($missingDocs as $md)
                            <tr class="hover:bg-slate-50/80">
                                <td class="py-3 px-4 font-bold text-slate-900">{{ $md->full_name }}</td>
                                <td class="py-3 px-4 font-mono text-slate-500">{{ $md->member_code }}</td>
                                <td class="py-3 px-4 text-amber-700 font-medium">0 uploaded</td>
                                <td class="py-3 px-4 text-right">
                                    <a href="{{ route('admin.members.show', $md) }}" class="text-teal-600 hover:text-teal-800 font-bold">
                                        Open →
                                    </a>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="4" class="py-6 text-center text-slate-400">No members missing documents.</td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

    </div>

</div>
@endsection