@extends('layouts.admin')

@section('title', 'Side-by-Side Data Reuse — ' . $member->full_name)
@section('header_title', 'Smart Side-by-Side KYM Data Entry & Selective Reuse')

@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">
        <i class="fa-solid fa-code-compare mr-1"></i> Data Reuse Workspace
    </span>
@endsection

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

    <!-- Info Explanation Banner -->
    <div class="p-4 rounded-2xl bg-slate-900 text-white flex items-start justify-between gap-4 shadow-md">
        <div class="flex items-start gap-3.5">
            <div class="w-9 h-9 rounded-xl bg-teal-500 text-white flex items-center justify-center shrink-0 font-bold text-base shadow-sm">
                <i class="fa-solid fa-wand-magic-sparkles"></i>
            </div>
            <div>
                <h4 class="font-bold text-sm text-teal-300">Family & Household Selective Information Sharing</h4>
                <p class="text-xs text-slate-300 mt-0.5 leading-relaxed">
                    Search and inspect existing verified members on the <strong>Right Panel</strong>. Select permitted reusable contact/address fields and click <strong>"Copy Selected Information"</strong> to safely populate the current member's form on the <strong>Left Panel</strong>.
                </p>
                <p class="text-[11px] text-teal-400 mt-1">
                    <i class="fa-solid fa-shield mr-1"></i> Strict Privacy Guard: Individual identity information (Full Name, Date of Birth, Photograph, Identity Documents, and Verification Status) is strictly protected and can never be overwritten from another member.
                </p>
            </div>
        </div>
        <a href="{{ route('admin.members.show', $member) }}" class="px-3 py-1.5 rounded-lg text-xs font-semibold bg-slate-800 hover:bg-slate-700 text-slate-200 border border-slate-700 transition shrink-0">
            Cancel & Return
        </a>
    </div>

    <!-- 2-Panel Side-by-Side Workspace -->
    <div class="grid grid-cols-1 lg:grid-cols-12 gap-6 items-start">
        
        <!-- ======================================================== -->
        <!-- LEFT PANEL: CURRENT MEMBER / NEW KYM DATA (7 Cols)      -->
        <!-- ======================================================== -->
        <div class="lg:col-span-7 bg-white rounded-2xl border border-slate-200/90 shadow-sm p-6 space-y-6">
            <div class="flex items-center justify-between border-b border-slate-100 pb-4">
                <div>
                    <span class="text-[11px] font-bold uppercase tracking-wider text-teal-700 bg-teal-50 px-2 py-0.5 rounded border border-teal-200">Current Target Member</span>
                    <h3 class="text-lg font-extrabold text-slate-900 mt-1">{{ $member->full_name }}</h3>
                    <p class="text-xs text-slate-500 font-mono">Member Code: {{ $member->member_code }} • Association: {{ $member->association?->name }}</p>
                </div>
                <span class="text-xs font-semibold px-2.5 py-1 rounded-full border {{ $member->status_badge_class }}">
                    {{ $member->status_label }}
                </span>
            </div>

            <!-- Form to save target member data -->
            <form id="targetMemberForm" method="POST" action="{{ route('admin.members.reuse_apply', $member) }}" class="space-y-5">
                @csrf
                <input type="hidden" name="source_member_id" :value="selectedSource ? selectedSource.id : ''">

                <!-- Non-copyable Individual Protected Fields -->
                <div class="p-4 rounded-xl bg-slate-50 border border-slate-200/80 space-y-3">
                    <span class="text-[11px] font-bold text-slate-500 uppercase tracking-wider block">
                        <i class="fa-solid fa-lock text-slate-400 mr-1"></i> Individual Identity Information (Protected)
                    </span>
                    <div class="grid grid-cols-2 gap-4 text-xs">
                        <div>
                            <label class="text-slate-500 font-medium block">Full Legal Name</label>
                            <input type="text" disabled value="{{ $member->full_name }}" class="mt-1 block w-full rounded-lg border border-slate-200 bg-white text-slate-800 font-semibold text-xs py-2 px-3">
                        </div>
                        <div>
                            <label class="text-slate-500 font-medium block">Date of Birth</label>
                            <input type="text" disabled value="{{ $member->date_of_birth?->format('Y-m-d') ?? 'Not specified' }}" class="mt-1 block w-full rounded-lg border border-slate-200 bg-white text-slate-800 text-xs py-2 px-3">
                        </div>
                    </div>
                </div>

                <!-- Reusable Target Fields -->
                <div class="space-y-4">
                    <span class="text-[11px] font-bold text-teal-700 uppercase tracking-wider block">
                        <i class="fa-solid fa-share-nodes mr-1 text-teal-600"></i> Target Member Contact & Address Details
                    </span>

                    <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</label>
                            <input type="text" name="mobile_primary_display" id="target_mobile_primary" value="{{ $member->mobile_primary }}" class="block w-full rounded-xl border border-slate-300 text-xs 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">Secondary Mobile</label>
                            <input type="text" name="mobile_secondary_display" id="target_mobile_secondary" value="{{ $member->mobile_secondary }}" class="block w-full rounded-xl border border-slate-300 text-xs 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">Email Address</label>
                            <input type="email" name="email_display" id="target_email" value="{{ $member->email }}" class="block w-full rounded-xl border border-slate-300 text-xs 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">Father / Husband Name</label>
                            <input type="text" name="father_husband_name_display" id="target_father_husband" value="{{ $member->father_husband_name }}" class="block w-full rounded-xl border border-slate-300 text-xs 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</label>
                            <textarea rows="2" name="residential_address_display" id="target_address" class="block w-full rounded-xl border border-slate-300 text-xs p-3 focus:ring-2 focus:ring-teal-500">{{ $member->residential_address }}</textarea>
                        </div>

                        <div>
                            <label class="block text-xs font-semibold text-slate-700 mb-1">City</label>
                            <input type="text" name="city_display" id="target_city" value="{{ $member->city }}" class="block w-full rounded-xl border border-slate-300 text-xs 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</label>
                            <input type="text" name="state_display" id="target_state" value="{{ $member->state }}" class="block w-full rounded-xl border border-slate-300 text-xs 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">Postal PIN Code</label>
                            <input type="text" name="pincode_display" id="target_pincode" value="{{ $member->pincode }}" class="block w-full sm:w-1/2 rounded-xl border border-slate-300 text-xs py-2.5 px-3 focus:ring-2 focus:ring-teal-500">
                        </div>
                    </div>
                </div>

                <!-- Hidden form inputs for submission -->
                <template x-for="field in selectedFields" :key="field">
                    <input type="hidden" name="fields[]" :value="field">
                </template>

                <!-- Action Button -->
                <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                    <p class="text-xs text-slate-500">
                        <span x-text="selectedFields.length"></span> fields selected for copying.
                    </p>
                    <button type="button" @click="confirmAndApply()" :disabled="!selectedSource || selectedFields.length === 0" class="px-5 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 disabled:opacity-50 disabled:cursor-not-allowed transition shadow-md shadow-teal-500/20 flex items-center gap-2">
                        <i class="fa-solid fa-copy"></i>
                        <span>Copy Selected Information</span>
                    </button>
                </div>
            </form>
        </div>

        <!-- ======================================================== -->
        <!-- RIGHT PANEL: EXISTING MEMBER INFORMATION (5 Cols)       -->
        <!-- ======================================================== -->
        <div class="lg:col-span-5 bg-white rounded-2xl border border-slate-200/90 shadow-sm p-6 space-y-5">
            <div>
                <span class="text-[11px] font-bold uppercase tracking-wider text-slate-500 bg-slate-100 px-2 py-0.5 rounded border border-slate-200">Source Repository</span>
                <h3 class="text-base font-extrabold text-slate-900 mt-1">Existing Member Information</h3>
                <p class="text-xs text-slate-500">Find candidate household/family members to reuse permitted data</p>
            </div>

            <!-- Search box -->
            <div class="relative">
                <input type="text" x-model="searchTerm" @input.debounce.300ms="searchMembers()" placeholder="Search existing member by Name, Phone, Code..." 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 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>
            </div>

            <!-- List of Suggested / Found Members -->
            <div class="space-y-2 max-h-56 overflow-y-auto custom-scrollbar border border-slate-100 rounded-xl p-1 bg-slate-50/50">
                <template x-for="item in searchResults" :key="item.id">
                    <div @click="selectSource(item)" :class="selectedSource && selectedSource.id === item.id ? 'bg-teal-50 border-teal-300 ring-1 ring-teal-400' : 'bg-white hover:bg-slate-50 border-slate-200'" class="p-3 rounded-xl border cursor-pointer transition text-xs">
                        <div class="flex items-center justify-between mb-1">
                            <span class="font-bold text-slate-900" x-text="item.full_name"></span>
                            <span class="px-2 py-0.5 rounded-full text-[10px] font-semibold border" :class="item.badge_class" x-text="item.kym_status"></span>
                        </div>
                        <p class="text-[11px] text-slate-500 font-mono" x-text="item.member_code"></p>
                        <p class="text-[11px] text-slate-600 mt-0.5 flex items-center gap-2">
                            <span><i class="fa-solid fa-phone text-[9px] text-slate-400 mr-1"></i><span x-text="item.masked_mobile"></span></span>
                            <span>•</span>
                            <span class="truncate" x-text="item.city || 'No City'"></span>
                        </p>
                    </div>
                </template>

                <div x-show="searchResults.length === 0" class="py-6 text-center text-slate-400 text-xs">
                    No matching members found.
                </div>
            </div>

            <!-- Selected Source Member Field Inspection & Checkboxes -->
            <div x-show="selectedSource" class="pt-4 border-t border-slate-200 space-y-4 animate-fade-in">
                <div class="flex items-center justify-between bg-teal-50/60 p-3 rounded-xl border border-teal-200 text-xs">
                    <div>
                        <span class="text-[10px] text-teal-700 font-bold uppercase tracking-wider">Selected Source:</span>
                        <p class="font-bold text-slate-900" x-text="selectedSource ? selectedSource.full_name : ''"></p>
                        <p class="font-mono text-[11px] text-slate-500" x-text="selectedSource ? selectedSource.member_code : ''"></p>
                    </div>
                    <button type="button" @click="selectAllReusable()" class="text-xs font-semibold text-teal-700 hover:text-teal-900 underline">
                        Select All Reusable
                    </button>
                </div>

                <!-- Field Checkboxes -->
                <div class="space-y-2 text-xs">
                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="mobile_primary" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">Primary Mobile</span>
                            <p class="text-slate-500 font-mono text-[11px]" x-text="selectedSource ? selectedSource.mobile_primary : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="mobile_secondary" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">Secondary Mobile</span>
                            <p class="text-slate-500 font-mono text-[11px]" x-text="selectedSource ? (selectedSource.mobile_secondary || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="email" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">Email Address</span>
                            <p class="text-slate-500 text-[11px]" x-text="selectedSource ? (selectedSource.email || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="father_husband_name" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">Father / Husband Name</span>
                            <p class="text-slate-500 text-[11px]" x-text="selectedSource ? (selectedSource.father_husband_name || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="residential_address" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">Residential Address</span>
                            <p class="text-slate-500 text-[11px] leading-snug" x-text="selectedSource ? (selectedSource.residential_address || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="city" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">City</span>
                            <p class="text-slate-500 text-[11px]" x-text="selectedSource ? (selectedSource.city || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="state" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">State</span>
                            <p class="text-slate-500 text-[11px]" x-text="selectedSource ? (selectedSource.state || 'None') : ''"></p>
                        </div>
                    </label>

                    <label class="flex items-start gap-2.5 p-2.5 rounded-lg border border-slate-200 hover:bg-slate-50 cursor-pointer">
                        <input type="checkbox" value="pincode" x-model="selectedFields" class="mt-0.5 rounded text-teal-600 focus:ring-teal-500">
                        <div class="min-w-0">
                            <span class="font-bold text-slate-800">PIN Code</span>
                            <p class="text-slate-500 text-[11px]" x-text="selectedSource ? (selectedSource.pincode || 'None') : ''"></p>
                        </div>
                    </label>
                </div>
            </div>

            <div x-show="!selectedSource" class="py-8 text-center text-slate-400 text-xs">
                Select an existing member above to inspect and copy permitted fields.
            </div>
        </div>

    </div>

</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
<script>
    function dataReuseApp() {
        return {
            targetMemberId: {{ $member->id }},
            searchTerm: '',
            searchResults: @json($suggestedMembers->map(fn($m) => [
                'id' => $m->id,
                'full_name' => $m->full_name,
                'member_code' => $m->member_code,
                'membership_no' => $m->membership_no ?? 'N/A',
                'mobile_primary' => $m->mobile_primary,
                'masked_mobile' => $m->masked_mobile,
                'mobile_secondary' => $m->mobile_secondary,
                'email' => $m->email,
                'father_husband_name' => $m->father_husband_name,
                'residential_address' => $m->residential_address,
                'city' => $m->city,
                'state' => $m->state,
                'pincode' => $m->pincode,
                'kym_status' => $m->status_label,
                'badge_class' => $m->status_badge_class,
                'association_name' => $m->association?->name,
            ])),
            selectedSource: null,
            selectedFields: [],

            searchMembers() {
                fetch(`{{ route('admin.members.reuse_search') }}?target_id=${this.targetMemberId}&term=${encodeURIComponent(this.searchTerm)}`)
                    .then(res => res.json())
                    .then(data => {
                        this.searchResults = data.members;
                    });
            },

            selectSource(item) {
                this.selectedSource = item;
                // Preselect contact and address
                this.selectedFields = ['mobile_primary', 'residential_address', 'city', 'state', 'pincode'];
                this.previewFieldsOnLeft();
            },

            selectAllReusable() {
                this.selectedFields = ['mobile_primary', 'mobile_secondary', 'email', 'father_husband_name', 'residential_address', 'city', 'state', 'pincode'];
                this.previewFieldsOnLeft();
            },

            previewFieldsOnLeft() {
                if (!this.selectedSource) return;

                if (this.selectedFields.includes('mobile_primary') && this.selectedSource.mobile_primary) {
                    document.getElementById('target_mobile_primary').value = this.selectedSource.mobile_primary;
                }
                if (this.selectedFields.includes('mobile_secondary') && this.selectedSource.mobile_secondary) {
                    document.getElementById('target_mobile_secondary').value = this.selectedSource.mobile_secondary;
                }
                if (this.selectedFields.includes('email') && this.selectedSource.email) {
                    document.getElementById('target_email').value = this.selectedSource.email;
                }
                if (this.selectedFields.includes('father_husband_name') && this.selectedSource.father_husband_name) {
                    document.getElementById('target_father_husband').value = this.selectedSource.father_husband_name;
                }
                if (this.selectedFields.includes('residential_address') && this.selectedSource.residential_address) {
                    document.getElementById('target_address').value = this.selectedSource.residential_address;
                }
                if (this.selectedFields.includes('city') && this.selectedSource.city) {
                    document.getElementById('target_city').value = this.selectedSource.city;
                }
                if (this.selectedFields.includes('state') && this.selectedSource.state) {
                    document.getElementById('target_state').value = this.selectedSource.state;
                }
                if (this.selectedFields.includes('pincode') && this.selectedSource.pincode) {
                    document.getElementById('target_pincode').value = this.selectedSource.pincode;
                }
            },

            confirmAndApply() {
                if (confirm(`Are you sure you want to copy ${this.selectedFields.length} selected field(s) from ${this.selectedSource.full_name} to {{ $member->full_name }}? An audit record of this action will be saved.`)) {
                    document.getElementById('targetMemberForm').submit();
                }
            }
        }
    }
</script>
@endpush