@extends('layouts.admin')

@section('title', 'Members Directory')
@section('header_title', 'Association Members Directory')

@section('header_badge')
    <span class="text-xs text-slate-500 font-medium">
        Total Records: <strong class="text-slate-800">{{ $members->total() }}</strong>
    </span>
@endsection

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

    <!-- Top Action Bar & Filters -->
    <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">Master Member Roster</h3>
                <p class="text-xs text-slate-500">Every member has a permanent internal ID and unique human-readable Member Code.</p>
            </div>
            <div class="flex items-center gap-2.5">
                <a href="{{ route('admin.import.index') }}" class="px-3.5 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">
                    <i class="fa-solid fa-file-csv mr-1.5 text-teal-600"></i> Import CSV
                </a>
                <a href="{{ route('admin.members.create') }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm shadow-teal-500/20">
                    <i class="fa-solid fa-user-plus mr-1.5"></i> Register Member
                </a>
            </div>
        </div>

        <!-- Filter Form -->
        <form method="GET" action="{{ route('admin.members.index') }}" class="grid grid-cols-1 sm:grid-cols-12 gap-3 pt-3 border-t border-slate-100">
            <!-- Search Input -->
            <div class="sm:col-span-5 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 Name, Member Code, Mobile, Email, Membership #..." 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 focus:border-teal-500 text-slate-800 placeholder-slate-400">
            </div>

            <!-- Status Filter -->
            <div class="sm:col-span-3">
                <select name="kym_status" class="block w-full py-2 px-3 text-xs rounded-xl border border-slate-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-slate-700 bg-white">
                    <option value="">All KYM Statuses</option>
                    <option value="not_started" {{ ($filters['kym_status'] ?? '') === 'not_started' ? 'selected' : '' }}>Not Started</option>
                    <option value="draft" {{ ($filters['kym_status'] ?? '') === 'draft' ? 'selected' : '' }}>Draft</option>
                    <option value="submitted" {{ ($filters['kym_status'] ?? '') === 'submitted' ? 'selected' : '' }}>Submitted</option>
                    <option value="under_verification" {{ ($filters['kym_status'] ?? '') === 'under_verification' ? 'selected' : '' }}>Under Verification</option>
                    <option value="changes_required" {{ ($filters['kym_status'] ?? '') === 'changes_required' ? 'selected' : '' }}>Changes Required</option>
                    <option value="resubmitted" {{ ($filters['kym_status'] ?? '') === 'resubmitted' ? 'selected' : '' }}>Resubmitted</option>
                    <option value="verified" {{ ($filters['kym_status'] ?? '') === 'verified' ? 'selected' : '' }}>Verified</option>
                    <option value="rejected" {{ ($filters['kym_status'] ?? '') === 'rejected' ? 'selected' : '' }}>Rejected</option>
                </select>
            </div>

            <!-- Association Filter -->
            <div class="sm:col-span-3">
                <select name="association_id" class="block w-full py-2 px-3 text-xs rounded-xl border border-slate-300 focus:ring-2 focus:ring-teal-500 focus:border-teal-500 text-slate-700 bg-white">
                    <option value="">All Associations</option>
                    @foreach($associations as $assoc)
                        <option value="{{ $assoc->id }}" {{ ($filters['association_id'] ?? '') == $assoc->id ? 'selected' : '' }}>{{ $assoc->name }}</option>
                    @endforeach
                </select>
            </div>

            <!-- Filter Buttons -->
            <div class="sm:col-span-1 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">
                    Filter
                </button>
            </div>
        </form>
    </div>

    <!-- Duplicate Name & Shared Contact Demonstration Banner -->
    <div class="p-4 rounded-2xl bg-teal-50/60 border border-teal-200/80 text-teal-900 flex items-start gap-3.5 shadow-sm text-xs">
        <div class="w-6 h-6 rounded-lg bg-teal-600 text-white flex items-center justify-center shrink-0 mt-0.5 text-xs">
            <i class="fa-solid fa-info"></i>
        </div>
        <div class="space-y-1">
            <p class="font-bold text-teal-950">Architecture Demonstration Feature: Non-Unique Names & Shared Family Mobile Numbers</p>
            <p class="text-slate-600 leading-relaxed">
                Try searching <code class="px-1.5 py-0.5 rounded bg-white font-mono text-teal-800 border border-teal-200">J. Vergees</code> to observe multiple separate individuals with the identical name, each possessing their own permanent ID, Member Code, and verification state. Multiple members also legitimately share mobile numbers (e.g. the Vergees family sharing <code class="px-1.5 py-0.5 rounded bg-white font-mono text-teal-800 border border-teal-200">+91 98765 43210</code>) without being blocked as duplicate identities.
            </p>
        </div>
    </div>

    <!-- Members 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">
                <thead>
                    <tr class="bg-slate-50/80 text-[11px] font-semibold text-slate-500 uppercase tracking-wider border-b border-slate-200">
                        <th class="py-3.5 px-5">Member Name</th>
                        <th class="py-3.5 px-4">Member Code</th>
                        <th class="py-3.5 px-4">Membership #</th>
                        <th class="py-3.5 px-4">Masked Mobile</th>
                        <th class="py-3.5 px-4">Association</th>
                        <th class="py-3.5 px-4">KYM Status</th>
                        <th class="py-3.5 px-4">Last Updated</th>
                        <th class="py-3.5 px-5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-slate-100 text-sm">
                    @forelse($members as $m)
                        <tr class="hover:bg-slate-50/80 transition">
                            <!-- Name with Photo/Avatar -->
                            <td class="py-4 px-5">
                                <div class="flex items-center gap-3">
                                    <div class="w-9 h-9 rounded-full bg-slate-100 text-slate-600 flex items-center justify-center font-bold text-xs shrink-0 border border-slate-200 overflow-hidden">
                                        @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.members.show', $m) }}" class="font-bold text-slate-900 hover:text-teal-600 transition block">
                                            {{ $m->full_name }}
                                        </a>
                                        <span class="text-xs text-slate-400">{{ $m->membership_type }}</span>
                                    </div>
                                </div>
                            </td>

                            <!-- Member Code -->
                            <td class="py-4 px-4 font-mono text-xs font-semibold text-navy-800">
                                {{ $m->member_code }}
                            </td>

                            <!-- Membership No -->
                            <td class="py-4 px-4 text-xs font-mono text-slate-600">
                                {{ $m->membership_no ?? '—' }}
                            </td>

                            <!-- Masked Mobile with Shared Badge -->
                            <td class="py-4 px-4 text-xs">
                                <span class="font-medium text-slate-800">{{ $m->masked_mobile }}</span>
                                @if($m->shared_mobile_members->count() > 0)
                                    <span class="inline-flex items-center gap-1 ml-1.5 px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-50 text-amber-700 border border-amber-200" title="{{ $m->shared_mobile_members->count() }} other members share this number">
                                        <i class="fa-solid fa-users text-[9px]"></i> +{{ $m->shared_mobile_members->count() }}
                                    </span>
                                @endif
                            </td>

                            <!-- Association -->
                            <td class="py-4 px-4 text-xs text-slate-600">
                                <span class="truncate block max-w-[150px]" title="{{ $m->association?->name }}">{{ $m->association?->code ?? 'ASIA' }}</span>
                            </td>

                            <!-- Status Badge -->
                            <td class="py-4 px-4">
                                <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold border {{ $m->status_badge_class }}">
                                    {{ $m->status_label }}
                                </span>
                            </td>

                            <!-- Last Updated -->
                            <td class="py-4 px-4 text-xs text-slate-500">
                                {{ $m->updated_at->format('M d, Y') }}
                            </td>

                            <!-- Action Buttons -->
                            <td class="py-4 px-5 text-right whitespace-nowrap">
                                <div class="inline-flex items-center gap-1.5">
                                    <a href="{{ route('admin.members.show', $m) }}" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-slate-700 bg-slate-100 hover:bg-slate-200 transition" title="View Member Profile">
                                        Profile
                                    </a>
                                    <a href="{{ route('admin.members.reuse', $m) }}" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-teal-700 bg-teal-50 hover:bg-teal-100 transition border border-teal-200" title="Side-by-Side Data Reuse & Selective Copy">
                                        <i class="fa-solid fa-copy mr-1"></i> Copy Info
                                    </a>
                                    @if(in_array($m->kym_status, ['submitted', 'resubmitted', 'under_verification']))
                                        <a href="{{ route('admin.verification.show', $m) }}" class="px-2.5 py-1.5 rounded-lg text-xs font-medium text-white bg-slate-900 hover:bg-teal-600 transition shadow-sm" title="Verify KYM">
                                            Verify
                                        </a>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="py-12 text-center text-slate-400">
                                <div class="w-12 h-12 rounded-full bg-slate-100 flex items-center justify-center mx-auto mb-3 text-slate-400 text-lg">
                                    <i class="fa-solid fa-users-slash"></i>
                                </div>
                                <p class="text-sm font-semibold text-slate-700">No members found matching your search</p>
                                <p class="text-xs text-slate-400 mt-1">Try clearing filters or search by a different name or number.</p>
                            </td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <!-- Pagination -->
        @if($members->hasPages())
            <div class="px-6 py-4 border-t border-slate-200 flex items-center justify-between">
                {{ $members->links() }}
            </div>
        @endif
    </div>

</div>
@endsection