@extends('layouts.member')

@section('title', 'KYM Verification Status')

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

    <!-- Member Overview Header Card -->
    <div class="bg-white p-6 sm:p-8 rounded-3xl 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">
            <div class="w-20 h-20 rounded-2xl bg-slate-100 border-2 border-slate-200 overflow-hidden shrink-0 shadow-sm">
                @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">
                        <i class="fa-solid fa-user text-2xl"></i>
                    </div>
                @endif
            </div>

            <div class="space-y-1">
                <span class="text-xs font-semibold px-2.5 py-0.5 rounded-full border {{ $member->status_badge_class }}">
                    {{ $member->status_label }}
                </span>
                <h2 class="text-2xl font-extrabold text-navy-900">{{ $member->full_name }}</h2>
                <p class="text-xs text-slate-500 font-mono">
                    Member Code: <strong class="text-slate-800">{{ $member->member_code }}</strong> • Membership #: <strong class="text-slate-700">{{ $member->membership_no ?? 'Pending' }}</strong>
                </p>
                <p class="text-xs text-slate-500">{{ $member->association?->name }} • {{ $member->membership_type }}</p>
            </div>
        </div>

        <div>
            @if(in_array($member->kym_status, ['not_started', 'draft']))
                <a href="{{ route('member.kym.wizard', ['step' => $profile->current_step ?: 1]) }}" class="px-6 py-3 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-md shadow-teal-500/20 inline-flex items-center gap-2">
                    <i class="fa-solid fa-play"></i>
                    <span>{{ $member->kym_status === 'draft' ? 'Continue KYM Application' : 'Start KYM Verification' }}</span>
                </a>
            @elseif($member->kym_status === 'changes_required')
                <a href="{{ route('member.kym.wizard', ['step' => 7]) }}" class="px-6 py-3 rounded-xl text-xs font-bold text-white bg-orange-600 hover:bg-orange-700 transition shadow-md shadow-orange-500/20 inline-flex items-center gap-2">
                    <i class="fa-solid fa-pen-to-square"></i>
                    <span>Review & Correct Details</span>
                </a>
            @elseif($member->kym_status === 'verified')
                <div class="text-right">
                    <span class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl bg-emerald-50 text-emerald-800 border border-emerald-200 text-xs font-bold shadow-xs">
                        <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i> Officially Verified Member
                    </span>
                    <p class="text-[11px] text-slate-400 mt-1">Verified on {{ $profile->verified_at?->format('F d, Y') }}</p>
                </div>
            @else
                <span class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl bg-blue-50 text-blue-800 border border-blue-200 text-xs font-semibold">
                    <i class="fa-solid fa-clock-rotate-left text-blue-600"></i> Verification Under Review
                </span>
            @endif
        </div>
    </div>

    <!-- Alert for Changes Required -->
    @if($member->kym_status === 'changes_required' && $profile->requested_changes)
        <div class="p-6 rounded-2xl bg-orange-50 border border-orange-200 text-orange-950 space-y-3 shadow-xs animate-fade-in">
            <div class="flex items-center gap-3">
                <div class="w-8 h-8 rounded-lg bg-orange-500 text-white flex items-center justify-center font-bold text-sm">
                    <i class="fa-solid fa-triangle-exclamation"></i>
                </div>
                <div>
                    <h4 class="font-bold text-sm text-orange-950">Action Required: Verifier Requested Corrections</h4>
                    <p class="text-xs text-orange-800">Please review the remarks below and update your details or re-upload documents.</p>
                </div>
            </div>

            <div class="p-4 rounded-xl bg-white border border-orange-200 text-xs text-slate-800 space-y-1">
                <span class="font-bold text-slate-500 uppercase tracking-wider text-[10px]">Verifier Remarks:</span>
                <p class="leading-relaxed font-medium">{{ $profile->requested_changes }}</p>
            </div>

            <div class="pt-2 flex justify-end">
                <a href="{{ route('member.kym.wizard', ['step' => 7]) }}" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-orange-600 hover:bg-orange-700 shadow-sm">
                    Open KYM Form & Resubmit →
                </a>
            </div>
        </div>
    @endif

    <!-- Official Verified Badge Dossier Card -->
    @if($member->kym_status === 'verified')
        <div class="bg-gradient-to-br from-emerald-900 via-teal-900 to-navy-950 text-white p-8 rounded-3xl shadow-xl relative overflow-hidden border border-emerald-500/30">
            <div class="absolute -right-8 -bottom-8 w-64 h-64 rounded-full bg-emerald-500/10 blur-2xl"></div>

            <div class="relative z-10 flex flex-col md:flex-row items-center justify-between gap-6">
                <div class="space-y-3 text-center md:text-left">
                    <div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-400/20 text-emerald-300 border border-emerald-400/30 text-xs font-bold uppercase tracking-wider">
                        <i class="fa-solid fa-award"></i> Certificate of Official Community KYM Verification
                    </div>
                    <h3 class="text-2xl font-black text-white">Ahmedabad South Indian Association</h3>
                    <p class="text-xs text-slate-200 max-w-xl leading-relaxed">
                        This certifies that <strong>{{ $member->full_name }}</strong> (Member Code: <code class="text-emerald-300 font-mono">{{ $member->member_code }}</code>) has completed comprehensive Know Your Member (KYM) identity, address, and mobile-camera portrait authentication in accordance with association bylaws.
                    </p>
                    <div class="pt-2 text-xs text-slate-300 space-y-0.5">
                        <p>Association Registry ID: <span class="font-mono text-emerald-300 font-bold">#{{ $member->id }}</span> • Membership #: <span class="font-mono text-emerald-300">{{ $member->membership_no ?? 'N/A' }}</span></p>
                        <p>Verified on: <span class="text-white font-medium">{{ $profile->verified_at?->format('F d, Y') }}</span> by ASIA Verification Authority</p>
                    </div>
                </div>

                <div class="shrink-0 text-center">
                    <div class="w-28 h-28 rounded-2xl bg-white/10 backdrop-blur-md border border-white/20 p-2 mx-auto shadow-inner">
                        <div class="w-full h-full rounded-xl overflow-hidden bg-slate-900">
                            @if($member->photo_path)
                                <img src="{{ route('member.photo.stream', $member) }}" alt="{{ $member->full_name }}" class="w-full h-full object-cover">
                            @endif
                        </div>
                    </div>
                    <span class="text-[10px] text-emerald-300 font-bold block mt-2 tracking-wider uppercase">Authenticated Seal</span>
                </div>
            </div>
        </div>
    @endif

    <!-- KYM Process Visual Timeline Tracker -->
    <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-200/80 shadow-sm space-y-6">
        <h4 class="text-sm font-bold text-slate-800 border-b border-slate-100 pb-3">KYM Process Progression</h4>

        <div class="grid grid-cols-1 sm:grid-cols-4 gap-4 text-xs">
            <!-- Stage 1 -->
            <div class="p-4 rounded-2xl border {{ $member->kym_status !== 'not_started' ? 'border-teal-300 bg-teal-50/40' : 'border-slate-200 bg-slate-50' }} space-y-2">
                <div class="flex items-center justify-between">
                    <span class="w-7 h-7 rounded-full bg-teal-600 text-white font-bold inline-flex items-center justify-center text-xs">1</span>
                    @if($member->kym_status !== 'not_started')
                        <i class="fa-solid fa-circle-check text-teal-600 text-sm"></i>
                    @endif
                </div>
                <h5 class="font-bold text-slate-900">Information Drafted</h5>
                <p class="text-slate-500 text-[11px]">Personal, contact, and household address information recorded.</p>
            </div>

            <!-- Stage 2 -->
            <div class="p-4 rounded-2xl border {{ $member->photo_path ? 'border-teal-300 bg-teal-50/40' : 'border-slate-200 bg-slate-50' }} space-y-2">
                <div class="flex items-center justify-between">
                    <span class="w-7 h-7 rounded-full bg-teal-600 text-white font-bold inline-flex items-center justify-center text-xs">2</span>
                    @if($member->photo_path)
                        <i class="fa-solid fa-circle-check text-teal-600 text-sm"></i>
                    @endif
                </div>
                <h5 class="font-bold text-slate-900">Phone Portrait</h5>
                <p class="text-slate-500 text-[11px]">Portrait captured via smartphone camera using secure QR link.</p>
            </div>

            <!-- Stage 3 -->
            <div class="p-4 rounded-2xl border {{ $member->documents->count() > 0 ? 'border-teal-300 bg-teal-50/40' : 'border-slate-200 bg-slate-50' }} space-y-2">
                <div class="flex items-center justify-between">
                    <span class="w-7 h-7 rounded-full bg-teal-600 text-white font-bold inline-flex items-center justify-center text-xs">3</span>
                    @if($member->documents->count() > 0)
                        <i class="fa-solid fa-circle-check text-teal-600 text-sm"></i>
                    @endif
                </div>
                <h5 class="font-bold text-slate-900">Documents Attached</h5>
                <p class="text-slate-500 text-[11px]">Identification & residential verification documents uploaded safely.</p>
            </div>

            <!-- Stage 4 -->
            <div class="p-4 rounded-2xl border {{ $member->kym_status === 'verified' ? 'border-emerald-300 bg-emerald-50/40' : 'border-slate-200 bg-slate-50' }} space-y-2">
                <div class="flex items-center justify-between">
                    <span class="w-7 h-7 rounded-full bg-slate-800 text-white font-bold inline-flex items-center justify-center text-xs">4</span>
                    @if($member->kym_status === 'verified')
                        <i class="fa-solid fa-circle-check text-emerald-600 text-sm"></i>
                    @endif
                </div>
                <h5 class="font-bold text-slate-900">Admin Review</h5>
                <p class="text-slate-500 text-[11px]">Final verification and registry synchronization by KYM verifier desk.</p>
            </div>
        </div>
    </div>

    <!-- Uploaded Documents Overview -->
    <div class="bg-white p-6 sm:p-8 rounded-3xl border border-slate-200/80 shadow-sm space-y-4">
        <div class="flex items-center justify-between border-b border-slate-100 pb-3">
            <h4 class="text-sm font-bold text-slate-800">Your Submitted KYM Documents</h4>
            <span class="text-xs text-slate-500">{{ $documents->count() }} attached</span>
        </div>

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
            @forelse($documents as $doc)
                <div class="p-4 rounded-2xl border border-slate-200 bg-slate-50/50 flex items-start justify-between gap-3 text-xs">
                    <div class="flex items-start gap-3">
                        <div class="w-9 h-9 rounded-xl bg-teal-100 text-teal-700 flex items-center justify-center shrink-0">
                            <i class="fa-solid fa-file-shield"></i>
                        </div>
                        <div>
                            <h5 class="font-bold text-slate-900">{{ $doc->documentType?->name ?? strtoupper($doc->document_type_code) }}</h5>
                            <p class="text-slate-500 font-mono text-[11px] mt-0.5">Masked Number: {{ $doc->document_number_masked ?? 'Document Attached' }}</p>
                            <p class="text-slate-400 text-[10px]">{{ $doc->original_filename }}</p>
                        </div>
                    </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>
            @empty
                <div class="col-span-2 py-6 text-center text-slate-400 text-xs">
                    No documents uploaded yet. Click "Start / Continue KYM" above to upload your documents.
                </div>
            @endforelse
        </div>
    </div>

</div>
@endsection