@extends('layouts.member')

@section('title', 'KYM Verification Wizard — Step ' . $step . ' of 8')

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

    <!-- 8-Step Progress Indicator (Section 11) -->
    <div class="bg-white p-6 rounded-3xl border border-slate-200/80 shadow-sm">
        <div class="flex items-center justify-between mb-4">
            <span class="text-xs font-bold text-teal-700 uppercase tracking-wider">Step {{ $step }} of 8</span>
            <span class="text-xs font-semibold text-slate-500">
                @if($step === 1) Member Identification
                @elseif($step === 2) Personal Information
                @elseif($step === 3) Contact & Address
                @elseif($step === 4) Membership Information
                @elseif($step === 5) Photograph (Phone Capture)
                @elseif($step === 6) Identity Verification
                @elseif($step === 7) Supporting Documents
                @elseif($step === 8) Review & Submit
                @endif
            </span>
        </div>

        <!-- Progress Track -->
        <div class="w-full bg-slate-100 rounded-full h-2.5 overflow-hidden">
            <div class="bg-teal-600 h-2.5 rounded-full transition-all duration-300" style="width: {{ ($step / 8) * 100 }}%"></div>
        </div>

        <!-- Step Pill Dots -->
        <div class="grid grid-cols-8 gap-2 mt-4 text-center">
            @for($i = 1; $i <= 8; $i++)
                <a href="{{ route('member.kym.wizard', ['step' => $i]) }}" class="block p-1.5 rounded-lg text-[10px] font-bold transition {{ $step === $i ? 'bg-teal-600 text-white shadow-sm' : ($step > $i ? 'bg-teal-50 text-teal-800 border border-teal-200' : 'bg-slate-50 text-slate-400') }}">
                    <span class="block">Step {{ $i }}</span>
                </a>
            @endfor
        </div>
    </div>

    <!-- Wizard Form Card -->
    <div class="bg-white p-6 sm:p-10 rounded-3xl border border-slate-200/80 shadow-sm space-y-8">
        
        <!-- STEP 1: MEMBER IDENTIFICATION -->
        @if($step === 1)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 1: Member Identification</h3>
                    <p class="text-xs text-slate-500 mt-1">Review your unique association identification credentials.</p>
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 p-5 rounded-2xl bg-slate-50 border border-slate-200 text-xs">
                    <div>
                        <span class="text-slate-400 block font-medium">Full Name (Registered):</span>
                        <span class="text-sm font-bold text-slate-900">{{ $member->full_name }}</span>
                    </div>

                    <div>
                        <span class="text-slate-400 block font-medium">Permanent Member Code:</span>
                        <span class="text-sm font-mono font-bold text-teal-700">{{ $member->member_code }}</span>
                    </div>

                    <div>
                        <span class="text-slate-400 block font-medium">Affiliated Association:</span>
                        <span class="font-semibold text-slate-800">{{ $member->association?->name }}</span>
                    </div>

                    <div>
                        <span class="text-slate-400 block font-medium">Membership Number:</span>
                        <span class="font-mono text-slate-800">{{ $member->membership_no ?? 'Pending Assignment' }}</span>
                    </div>
                </div>

                <form method="POST" action="{{ route('member.kym.save_step') }}" class="pt-4 flex items-center justify-between border-t border-slate-100">
                    @csrf
                    <input type="hidden" name="step" value="1">
                    <button type="submit" name="action" value="save_draft" class="px-4 py-2.5 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        Save Draft & Exit
                    </button>
                    <button type="submit" name="action" value="next" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                        Continue to Personal Info →
                    </button>
                </form>
            </div>
        @endif

        <!-- STEP 2: PERSONAL INFORMATION -->
        @if($step === 2)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 2: Personal Information</h3>
                    <p class="text-xs text-slate-500 mt-1">Verify and complete your legal personal information.</p>
                </div>

                <form method="POST" action="{{ route('member.kym.save_step') }}" class="space-y-6">
                    @csrf
                    <input type="hidden" name="step" value="2">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div class="sm:col-span-2">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Full Legal Name <span class="text-rose-500">*</span></label>
                            <input type="text" name="full_name" required value="{{ old('full_name', $member->full_name) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-semibold">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Gender <span class="text-rose-500">*</span></label>
                            <select name="gender" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                                <option value="Male" {{ $member->gender === 'Male' ? 'selected' : '' }}>Male</option>
                                <option value="Female" {{ $member->gender === 'Female' ? 'selected' : '' }}>Female</option>
                                <option value="Other" {{ $member->gender === 'Other' ? 'selected' : '' }}>Other</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Date of Birth <span class="text-rose-500">*</span></label>
                            <input type="date" name="date_of_birth" required value="{{ old('date_of_birth', $member->date_of_birth?->format('Y-m-d')) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Blood Group</label>
                            <input type="text" name="blood_group" value="{{ old('blood_group', $member->blood_group) }}" placeholder="e.g. O+, B+, A+" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 uppercase">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Father / Husband Name</label>
                            <input type="text" name="father_husband_name" value="{{ old('father_husband_name', $member->father_husband_name) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>

                        <div class="sm:col-span-2">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Occupation / Profession</label>
                            <input type="text" name="occupation" value="{{ old('occupation', $member->occupation) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>
                    </div>

                    <div class="pt-4 flex items-center justify-between border-t border-slate-100">
                        <button type="submit" name="action" value="prev" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            ← Previous
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="submit" name="action" value="save_draft" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                                Save Draft
                            </button>
                            <button type="submit" name="action" value="next" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                                Continue to Contact Info →
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        <!-- STEP 3: CONTACT & ADDRESS -->
        @if($step === 3)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 3: Contact & Address Information</h3>
                    <p class="text-xs text-slate-500 mt-1">Shared household mobile numbers and residential addresses are supported.</p>
                </div>

                <form method="POST" action="{{ route('member.kym.save_step') }}" class="space-y-6">
                    @csrf
                    <input type="hidden" name="step" value="3">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Primary Mobile Number <span class="text-rose-500">*</span></label>
                            <input type="text" name="mobile_primary" required value="{{ old('mobile_primary', $member->mobile_primary) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Secondary Mobile Number</label>
                            <input type="text" name="mobile_secondary" value="{{ old('mobile_secondary', $member->mobile_secondary) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                        </div>

                        <div class="sm:col-span-2">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Email Address</label>
                            <input type="email" name="email" value="{{ old('email', $member->email) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>

                        <div class="sm:col-span-2">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Residential Address <span class="text-rose-500">*</span></label>
                            <textarea name="residential_address" required rows="2" class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-teal-500">{{ old('residential_address', $member->residential_address) }}</textarea>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">City <span class="text-rose-500">*</span></label>
                            <input type="text" name="city" required value="{{ old('city', $member->city ?? 'Ahmedabad') }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">State <span class="text-rose-500">*</span></label>
                            <input type="text" name="state" required value="{{ old('state', $member->state ?? 'Gujarat') }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Postal PIN Code <span class="text-rose-500">*</span></label>
                            <input type="text" name="pincode" required value="{{ old('pincode', $member->pincode) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                        </div>
                    </div>

                    <div class="pt-4 flex items-center justify-between border-t border-slate-100">
                        <button type="submit" name="action" value="prev" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            ← Previous
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="submit" name="action" value="save_draft" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                                Save Draft
                            </button>
                            <button type="submit" name="action" value="next" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                                Continue to Membership Info →
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        <!-- STEP 4: MEMBERSHIP INFORMATION -->
        @if($step === 4)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 4: Membership Information</h3>
                    <p class="text-xs text-slate-500 mt-1">Review your membership category and enrollment date.</p>
                </div>

                <form method="POST" action="{{ route('member.kym.save_step') }}" class="space-y-6">
                    @csrf
                    <input type="hidden" name="step" value="4">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Membership Category <span class="text-rose-500">*</span></label>
                            <input type="text" name="membership_type" required value="{{ old('membership_type', $member->membership_type) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-semibold">
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Enrollment Date</label>
                            <input type="date" name="joining_date" value="{{ old('joining_date', $member->joining_date?->format('Y-m-d')) }}" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>
                    </div>

                    <div class="pt-4 flex items-center justify-between border-t border-slate-100">
                        <button type="submit" name="action" value="prev" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            ← Previous
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="submit" name="action" value="save_draft" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                                Save Draft
                            </button>
                            <button type="submit" name="action" value="next" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                                Continue to Photo Capture →
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        <!-- ======================================================== -->
        <!-- STEP 5: PHONE-ONLY PHOTOGRAPH CAPTURE VIA QR (SECTION 12) -->
        <!-- ======================================================== -->
        @if($step === 5)
            <div class="space-y-8" x-data="laptopPhotoCaptureApp({{ $member->id }})">
                <div class="border-b border-slate-100 pb-4">
                    <span class="text-[11px] font-bold uppercase tracking-wider text-teal-700 bg-teal-50 px-2.5 py-1 rounded border border-teal-200">
                        Mandatory Security Requirement
                    </span>
                    <h3 class="text-xl font-extrabold text-navy-900 mt-2">Capture Your Photograph Using Your Phone</h3>
                    <p class="text-xs text-slate-500 mt-1">
                        Laptop webcams are not permitted for member verification portraits. Please scan the secure QR code using your phone's camera.
                    </p>
                </div>

                <!-- Existing Photo Display if already captured -->
                <div x-show="isCaptured" class="p-6 rounded-2xl bg-emerald-50 border border-emerald-200 text-center space-y-4">
                    <div class="w-40 h-40 mx-auto rounded-2xl overflow-hidden border-4 border-white shadow-lg bg-slate-900 relative">
                        <img :src="photoUrl" alt="Member Portrait" class="w-full h-full object-cover">
                    </div>
                    <div>
                        <span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-600 text-white text-xs font-bold shadow-xs">
                            <i class="fa-solid fa-circle-check"></i> Photograph Captured Successfully
                        </span>
                        <p class="text-xs text-emerald-800 mt-1.5">Your official portrait is recorded and attached to your KYM dossier.</p>
                    </div>

                    <div class="pt-2 flex items-center justify-center gap-4">
                        <button type="button" @click="regenerateQr()" class="px-4 py-2 rounded-xl text-xs font-semibold text-emerald-800 bg-white hover:bg-emerald-100 border border-emerald-300 transition shadow-xs">
                            <i class="fa-solid fa-arrows-rotate mr-1"></i> Retake Photo via Phone
                        </button>
                    </div>
                </div>

                <!-- QR Code & Instructions Panel (Laptop View) -->
                <div x-show="!isCaptured" class="grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
                    
                    <!-- Left: Step-by-Step Instructions (7 cols) -->
                    <div class="md:col-span-7 space-y-4 text-xs">
                        <h4 class="font-bold text-slate-900 text-sm">Instructions:</h4>
                        <ol class="space-y-3 text-slate-600">
                            <li class="flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full bg-teal-100 text-teal-800 font-bold flex items-center justify-center shrink-0 text-xs">1</span>
                                <span>Open the native Camera app on your smartphone.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full bg-teal-100 text-teal-800 font-bold flex items-center justify-center shrink-0 text-xs">2</span>
                                <span>Point your camera at the QR code shown on the right.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full bg-teal-100 text-teal-800 font-bold flex items-center justify-center shrink-0 text-xs">3</span>
                                <span>Tap the secure notification link that appears on your phone screen.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full bg-teal-100 text-teal-800 font-bold flex items-center justify-center shrink-0 text-xs">4</span>
                                <span>Allow camera access and align your face in the portrait guide.</span>
                            </li>
                            <li class="flex items-start gap-3">
                                <span class="w-6 h-6 rounded-full bg-teal-100 text-teal-800 font-bold flex items-center justify-center shrink-0 text-xs">5</span>
                                <span>Snap and confirm your photo — this laptop screen will update automatically!</span>
                            </li>
                        </ol>

                        <!-- Live Polling Status Box -->
                        <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 space-y-2 mt-4">
                            <div class="flex items-center justify-between">
                                <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider">Live Synchronization Status:</span>
                                <span class="text-[11px] font-mono text-slate-400">Expires in: <strong class="text-slate-700" x-text="formatTime(countdown)"></strong></span>
                            </div>

                            <div class="flex items-center gap-3">
                                <template x-if="sessionStatus === 'pending'">
                                    <div class="flex items-center gap-2 text-xs font-semibold text-slate-700">
                                        <span class="w-2.5 h-2.5 rounded-full bg-amber-500 animate-ping"></span>
                                        <span>Waiting for phone camera connection...</span>
                                    </div>
                                </template>

                                <template x-if="sessionStatus === 'connected'">
                                    <div class="flex items-center gap-2 text-xs font-semibold text-teal-700">
                                        <span class="w-2.5 h-2.5 rounded-full bg-teal-500 animate-pulse"></span>
                                        <span>Mobile device connected! Capturing photograph...</span>
                                    </div>
                                </template>

                                <template x-if="sessionStatus === 'expired'">
                                    <div class="flex items-center gap-2 text-xs font-semibold text-rose-700">
                                        <i class="fa-solid fa-circle-xmark"></i>
                                        <span>QR Session Expired. Please generate a new QR code.</span>
                                    </div>
                                </template>
                            </div>
                        </div>

                        <!-- Direct Link Copy for testing without physical QR scanner -->
                        <div class="pt-2 flex items-center gap-3">
                            <button type="button" @click="copyMobileUrl()" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-100 hover:bg-slate-200 text-slate-700 border border-slate-200 transition flex items-center gap-1.5">
                                <i class="fa-solid fa-link text-slate-500"></i>
                                <span x-text="copiedLink ? 'Link Copied to Clipboard!' : 'Copy Mobile Link (for testing)'"></span>
                            </button>

                            <button type="button" @click="regenerateQr()" class="px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-500 hover:text-slate-800 transition">
                                <i class="fa-solid fa-arrows-rotate mr-1"></i> Regenerate QR
                            </button>
                        </div>
                    </div>

                    <!-- Right: Dynamic QR Code Box (5 cols) -->
                    <div class="md:col-span-5 text-center">
                        <div class="p-6 bg-white rounded-3xl border-2 border-slate-200/90 shadow-md inline-block max-w-[280px] w-full">
                            <template x-if="qrCodeData">
                                <div class="space-y-3">
                                    <img :src="qrCodeData" alt="Scan QR Code with Phone" class="w-full h-auto rounded-xl mx-auto border border-slate-100 shadow-xs">
                                    <span class="text-[11px] font-bold text-slate-700 block tracking-wider uppercase">Scan with Phone</span>
                                    <p class="text-[10px] text-slate-400">Single-use secure cryptographic token</p>
                                </div>
                            </template>

                            <template x-if="!qrCodeData">
                                <div class="py-16 text-slate-400 text-xs">
                                    <i class="fa-solid fa-spinner fa-spin text-2xl text-teal-600 mb-2"></i>
                                    <p>Generating secure session token...</p>
                                </div>
                            </template>
                        </div>
                    </div>

                </div>

                <!-- Navigation Bottom Bar -->
                <div class="pt-6 flex items-center justify-between border-t border-slate-100">
                    <a href="{{ route('member.kym.wizard', ['step' => 4]) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        ← Previous
                    </a>

                    <div class="flex items-center gap-3">
                        <a href="{{ route('member.kym.status') }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            Save Draft & Exit
                        </a>

                        <a href="{{ route('member.kym.wizard', ['step' => 6]) }}" :class="!isCaptured ? 'opacity-50 pointer-events-none' : ''" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm shadow-teal-500/20">
                            Continue to Identity Verification →
                        </a>
                    </div>
                </div>
            </div>
        @endif

        <!-- STEP 6: IDENTITY VERIFICATION -->
        @if($step === 6)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 6: Identity Document Details</h3>
                    <p class="text-xs text-slate-500 mt-1">Specify your government identity credential to be verified against supporting proofs.</p>
                </div>

                <form method="POST" action="{{ route('member.kym.save_step') }}" class="space-y-6">
                    @csrf
                    <input type="hidden" name="step" value="6">

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Primary Identity Document Type</label>
                            <select class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 bg-white">
                                <option value="aadhaar">Aadhaar Card (UIDAI)</option>
                                <option value="pan">Permanent Account Number (PAN)</option>
                                <option value="passport">Indian Passport</option>
                                <option value="voter_id">Voter ID / Driving License</option>
                            </select>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Masked Identification Number</label>
                            <input type="text" placeholder="e.g. XXXX-XXXX-4812 (only last 4 digits visible)" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                            <span class="text-[10px] text-slate-400 mt-1 block">Full numbers are never stored in plain text.</span>
                        </div>
                    </div>

                    <div class="pt-4 flex items-center justify-between border-t border-slate-100">
                        <button type="submit" name="action" value="prev" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            ← Previous
                        </button>
                        <div class="flex items-center gap-3">
                            <button type="submit" name="action" value="save_draft" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                                Save Draft
                            </button>
                            <button type="submit" name="action" value="next" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                                Continue to Document Uploads →
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        @endif

        <!-- STEP 7: SUPPORTING DOCUMENTS UPLOAD -->
        @if($step === 7)
            <div class="space-y-8">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 7: Upload Supporting Documents</h3>
                    <p class="text-xs text-slate-500 mt-1">Attach legible PDF, JPG or PNG scans of your mandatory identity and address documents.</p>
                </div>

                <!-- Upload New Document Form -->
                <div class="p-6 rounded-2xl bg-slate-50 border border-slate-200 space-y-4">
                    <h4 class="text-xs font-bold text-slate-800 uppercase tracking-wider">Upload Document File</h4>

                    <form method="POST" action="{{ route('member.kym.save_step') }}" enctype="multipart/form-data" class="grid grid-cols-1 sm:grid-cols-12 gap-4 items-end">
                        @csrf
                        <input type="hidden" name="step" value="7">

                        <div class="sm:col-span-4">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Document Category <span class="text-rose-500">*</span></label>
                            <select name="document_type_code" required class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 bg-white focus:ring-2 focus:ring-teal-500">
                                @foreach($documentTypes as $dt)
                                    <option value="{{ $dt->code }}">{{ $dt->name }} {{ $dt->is_required ? '(Required)' : '' }}</option>
                                @endforeach
                            </select>
                        </div>

                        <div class="sm:col-span-3">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Document Number / Ref</label>
                            <input type="text" name="document_number" placeholder="Last 4 digits or ID" class="block w-full text-xs rounded-xl border border-slate-300 py-2.5 px-3 focus:ring-2 focus:ring-teal-500 font-mono">
                        </div>

                        <div class="sm:col-span-3">
                            <label class="block text-xs font-semibold text-slate-700 mb-1">Select File (PDF / Image) <span class="text-rose-500">*</span></label>
                            <input type="file" name="document_file" required accept=".pdf,.jpg,.jpeg,.png,.webp" class="block w-full text-xs text-slate-500 file:mr-2 file:py-2 file:px-3 file:rounded-lg file:border-0 file:text-xs file:font-semibold file:bg-teal-50 file:text-teal-700 hover:file:bg-teal-100">
                        </div>

                        <div class="sm:col-span-2">
                            <button type="submit" class="w-full py-2.5 px-3 bg-teal-600 hover:bg-teal-700 text-white font-bold text-xs rounded-xl transition shadow-sm">
                                <i class="fa-solid fa-upload mr-1"></i> Upload
                            </button>
                        </div>
                    </form>
                </div>

                <!-- Uploaded Documents List -->
                <div class="space-y-3">
                    <h4 class="text-xs font-bold text-slate-700 uppercase tracking-wider">Uploaded Documents Status</h4>

                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                        @foreach($documentTypes as $dt)
                            @php
                                $doc = $uploadedDocs->get($dt->code);
                            @endphp
                            <div class="p-4 rounded-xl border {{ $doc ? 'border-emerald-200 bg-emerald-50/20' : ($dt->is_required ? 'border-amber-200 bg-amber-50/20' : 'border-slate-200 bg-white') }} flex items-start justify-between gap-3 text-xs">
                                <div>
                                    <div class="flex items-center gap-2">
                                        <h5 class="font-bold text-slate-900">{{ $dt->name }}</h5>
                                        @if($dt->is_required)
                                            <span class="text-[10px] px-1.5 py-0.2 rounded font-bold bg-amber-100 text-amber-800">Required</span>
                                        @endif
                                    </div>
                                    @if($doc)
                                        <p class="text-emerald-700 font-semibold mt-1 flex items-center gap-1">
                                            <i class="fa-solid fa-check"></i> {{ $doc->original_filename }} ({{ $doc->file_size_kb }} KB)
                                        </p>
                                    @else
                                        <p class="text-slate-400 mt-1">Not yet uploaded</p>
                                    @endif
                                </div>

                                <div>
                                    @if($doc)
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-emerald-100 text-emerald-800">Uploaded</span>
                                    @else
                                        <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold bg-slate-100 text-slate-500">Pending</span>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>

                <div class="pt-4 flex items-center justify-between border-t border-slate-100">
                    <a href="{{ route('member.kym.wizard', ['step' => 6]) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                        ← Previous
                    </a>
                    <div class="flex items-center gap-3">
                        <a href="{{ route('member.kym.status') }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            Save Draft
                        </a>
                        <a href="{{ route('member.kym.wizard', ['step' => 8]) }}" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-sm">
                            Review & Submit Final KYM →
                        </a>
                    </div>
                </div>
            </div>
        @endif

        <!-- STEP 8: REVIEW & SUBMIT -->
        @if($step === 8)
            <div class="space-y-6">
                <div>
                    <h3 class="text-lg font-bold text-slate-900">Step 8: Review & Formal Submission</h3>
                    <p class="text-xs text-slate-500 mt-1">Please inspect your complete dossier before submitting to the verifier desk.</p>
                </div>

                <!-- Review Summary Cards -->
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div class="md:col-span-2 space-y-4">
                        <div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 text-xs space-y-3">
                            <h4 class="font-bold text-slate-800 uppercase tracking-wider text-[11px] border-b border-slate-200/80 pb-2">Profile Dossier Summary</h4>
                            <div class="grid grid-cols-2 gap-3">
                                <div>
                                    <span class="text-slate-400 block font-medium">Full Name:</span>
                                    <span class="font-bold text-slate-900">{{ $member->full_name }}</span>
                                </div>
                                <div>
                                    <span class="text-slate-400 block font-medium">Member Code:</span>
                                    <span class="font-mono font-bold text-teal-700">{{ $member->member_code }}</span>
                                </div>
                                <div>
                                    <span class="text-slate-400 block font-medium">Date of Birth:</span>
                                    <span class="font-semibold text-slate-800">{{ $member->date_of_birth?->format('F d, Y') ?? 'Not provided' }}</span>
                                </div>
                                <div>
                                    <span class="text-slate-400 block font-medium">Primary Mobile:</span>
                                    <span class="font-mono font-semibold text-slate-800">{{ $member->mobile_primary }}</span>
                                </div>
                                <div class="col-span-2">
                                    <span class="text-slate-400 block font-medium">Residential Address:</span>
                                    <span class="text-slate-800 font-medium">{{ $member->residential_address }}, {{ $member->city }}, {{ $member->state }} - {{ $member->pincode }}</span>
                                </div>
                            </div>
                        </div>

                        <!-- Uploaded Documents Review -->
                        <div class="p-4 rounded-2xl bg-slate-50 border border-slate-200 text-xs space-y-2">
                            <h4 class="font-bold text-slate-800 uppercase tracking-wider text-[11px]">Attached Documents ({{ $member->documents->count() }})</h4>
                            <ul class="divide-y divide-slate-200/60">
                                @forelse($member->documents as $doc)
                                    <li class="py-2 flex items-center justify-between">
                                        <span class="font-semibold text-slate-800">{{ $doc->documentType?->name ?? strtoupper($doc->document_type_code) }}</span>
                                        <span class="text-emerald-700 font-medium"><i class="fa-solid fa-check mr-1"></i>Attached</span>
                                    </li>
                                @empty
                                    <li class="py-2 text-rose-600 font-semibold">No documents attached! Please go back to step 7.</li>
                                @endforelse
                            </ul>
                        </div>
                    </div>

                    <!-- Right Portrait preview -->
                    <div class="text-center p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-3">
                        <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">Official Portrait</span>
                        <div class="w-36 h-36 mx-auto rounded-2xl overflow-hidden border-2 border-slate-200 bg-slate-900 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 text-xs">
                                    <i class="fa-solid fa-camera text-2xl mb-1"></i>
                                    <span>Missing</span>
                                </div>
                            @endif
                        </div>
                        <p class="text-xs font-semibold text-slate-800">{{ $member->full_name }}</p>
                    </div>
                </div>

                <!-- Formal Declaration Checkbox -->
                <form method="POST" action="{{ route('member.kym.submit') }}" class="space-y-6 pt-4 border-t border-slate-100">
                    @csrf
                    
                    <div class="p-4 rounded-xl bg-teal-50/60 border border-teal-200 text-xs">
                        <label class="flex items-start gap-3 cursor-pointer">
                            <input type="checkbox" name="declaration" value="1" required class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                            <span class="text-slate-700 leading-relaxed">
                                I hereby declare that the personal details, residential address, telephone contact, and identity proofs submitted above are authentic, correct, and represent my true membership record in the Ahmedabad South Indian Association (ASIA).
                            </span>
                        </label>
                    </div>

                    <div class="flex items-center justify-between">
                        <a href="{{ route('member.kym.wizard', ['step' => 7]) }}" class="px-4 py-2 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800">
                            ← Back to Documents
                        </a>

                        <button type="submit" class="px-8 py-3 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-md shadow-teal-500/20 flex items-center gap-2">
                            <i class="fa-solid fa-paper-plane"></i>
                            <span>Submit KYM Application for Verification</span>
                        </button>
                    </div>
                </form>
            </div>
        @endif

    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
    function kymWizardApp() {
        return {
            step: {{ $step }},
        }
    }

    function laptopPhotoCaptureApp(memberId) {
        return {
            memberId: memberId,
            token: null,
            qrCodeData: null,
            mobileUrl: null,
            sessionStatus: 'pending',
            isCaptured: {{ !empty($member->photo_path) ? 'true' : 'false' }},
            photoUrl: '{{ route('member.photo.stream', $member) }}',
            countdown: 900,
            timerInterval: null,
            pollInterval: null,
            copiedLink: false,

            init() {
                if (!this.isCaptured) {
                    this.startSession();
                }
            },

            startSession() {
                fetch(`{{ url('/kym/members') }}/${this.memberId}/photo-session`, {
                    method: 'POST',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                        'Accept': 'application/json'
                    }
                })
                .then(res => res.json())
                .then(data => {
                    this.token = data.token;
                    this.qrCodeData = data.qr_code;
                    this.mobileUrl = data.mobile_url;
                    this.countdown = data.expires_in_seconds || 900;
                    this.sessionStatus = 'pending';

                    this.startCountdown();
                    this.startPolling();
                });
            },

            regenerateQr() {
                this.isCaptured = false;
                this.stopPolling();
                this.startSession();
            },

            startCountdown() {
                clearInterval(this.timerInterval);
                this.timerInterval = setInterval(() => {
                    if (this.countdown > 0) {
                        this.countdown--;
                    } else {
                        this.sessionStatus = 'expired';
                        this.stopPolling();
                    }
                }, 1000);
            },

            formatTime(seconds) {
                const m = Math.floor(seconds / 60);
                const s = seconds % 60;
                return `${m}:${s < 10 ? '0' : ''}${s}`;
            },

            copyMobileUrl() {
                if (!this.mobileUrl) return;
                navigator.clipboard.writeText(this.mobileUrl).then(() => {
                    this.copiedLink = true;
                    setTimeout(() => { this.copiedLink = false; }, 3000);
                });
            },

            startPolling() {
                clearInterval(this.pollInterval);
                this.pollInterval = setInterval(() => {
                    if (!this.token) return;

                    fetch(`{{ url('/kym/sessions') }}/${this.token}/status`)
                        .then(res => res.json())
                        .then(data => {
                            this.sessionStatus = data.status;

                            if (data.status === 'captured') {
                                this.isCaptured = true;
                                this.photoUrl = data.photo_url;
                                this.stopPolling();
                            } else if (data.status === 'expired') {
                                this.stopPolling();
                            }
                        })
                        .catch(() => {});
                }, 2000);
            },

            stopPolling() {
                clearInterval(this.pollInterval);
                clearInterval(this.timerInterval);
            }
        }
    }
</script>
@endpush