@extends('layouts.admin')

@section('title', 'Register New Member')
@section('header_title', 'Register Member Profile')

@section('content')
<div class="max-w-4xl mx-auto space-y-6">

    <div class="bg-white p-6 sm:p-8 rounded-2xl border border-slate-200/80 shadow-sm space-y-6">
        <div class="flex items-center justify-between border-b border-slate-100 pb-4">
            <div>
                <h3 class="text-base font-bold text-slate-800">New Member Registration</h3>
                <p class="text-xs text-slate-500">A permanent ID and unique Member Code will be generated upon creation.</p>
            </div>
            <a href="{{ route('admin.members.index') }}" class="text-xs font-semibold text-slate-500 hover:text-slate-800">
                Cancel
            </a>
        </div>

        <form method="POST" action="{{ route('admin.members.store') }}" class="space-y-6" id="memberCreateForm">
            @csrf

            <!-- Section 1: Association & Membership Type -->
            <div class="space-y-4">
                <h4 class="text-xs font-bold text-teal-700 uppercase tracking-wider flex items-center gap-1.5">
                    <i class="fa-solid fa-building text-teal-600"></i> Association & Chapter Assignment
                </h4>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Affiliated Association <span class="text-rose-500">*</span></label>
                        <select name="association_id" 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">
                            @foreach($associations as $assoc)
                                <option value="{{ $assoc->id }}">{{ $assoc->name }}</option>
                            @endforeach
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Membership Category <span class="text-rose-500">*</span></label>
                        <select name="membership_type" 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="Life Member">Life Member</option>
                            <option value="Senior Life Member">Senior Life Member</option>
                            <option value="Regular Member">Regular Member</option>
                            <option value="Youth Member">Youth Member</option>
                            <option value="Honorary Member">Honorary Member</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Association Membership # (Optional)</label>
                        <input type="text" name="membership_no" placeholder="e.g. ASIA/LM/2026/0912" 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>

            <!-- Section 2: Personal Details -->
            <div class="space-y-4 pt-4 border-t border-slate-100">
                <h4 class="text-xs font-bold text-teal-700 uppercase tracking-wider flex items-center gap-1.5">
                    <i class="fa-solid fa-user text-teal-600"></i> Individual Personal Details
                </h4>

                <div class="grid grid-cols-1 sm:grid-cols-3 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 placeholder="e.g. J. Vergees" 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-medium">
                        <span class="text-[11px] text-slate-400 mt-0.5 block">Multiple members may share the same name; each receives an individual ID.</span>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Gender</label>
                        <select name="gender" 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">Male</option>
                            <option value="Female">Female</option>
                            <option value="Other">Other</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Date of Birth</label>
                        <input type="date" name="date_of_birth" 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" 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" placeholder="Father or 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" placeholder="e.g. Professor, Engineer, Doctor, Business" 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">Joining / Enrollment Date</label>
                        <input type="date" name="joining_date" value="{{ date('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>

            <!-- Section 3: Contact & Address with Live Discovery -->
            <div class="space-y-4 pt-4 border-t border-slate-100">
                <h4 class="text-xs font-bold text-teal-700 uppercase tracking-wider flex items-center gap-1.5">
                    <i class="fa-solid fa-phone text-teal-600"></i> Contact & Address (Shared Family Allowed)
                </h4>

                <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Primary Mobile <span class="text-rose-500">*</span></label>
                        <input type="text" name="mobile_primary" id="input_mobile" required placeholder="+91 98765 43210" 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</label>
                        <input type="text" name="mobile_secondary" placeholder="+91 98240 12345" 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">Email Address</label>
                        <input type="email" name="email" id="input_email" placeholder="member@asiaassociation.org" 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-3">
                        <label class="block text-xs font-semibold text-slate-700 mb-1">Residential Address</label>
                        <textarea name="residential_address" id="input_address" rows="2" placeholder="House/Flat No., Society, Road..." class="block w-full text-xs rounded-xl border border-slate-300 p-3 focus:ring-2 focus:ring-teal-500"></textarea>
                    </div>

                    <div>
                        <label class="block text-xs font-semibold text-slate-700 mb-1">City</label>
                        <input type="text" name="city" id="input_city" value="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</label>
                        <input type="text" name="state" id="input_state" value="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</label>
                        <input type="text" name="pincode" id="input_pincode" placeholder="380054" 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>

                <!-- REAL-TIME CONTEXTUAL DISCOVERY PANEL (Section 9) -->
                <div id="sharedContactPanel" class="hidden p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-900 space-y-3 animate-fade-in">
                    <div class="flex items-center gap-2.5">
                        <i class="fa-solid fa-people-arrows text-amber-600 text-sm"></i>
                        <span class="text-xs font-bold" id="sharedContactTitle"></span>
                    </div>
                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-2" id="sharedMemberList">
                        <!-- Populated dynamically via JS -->
                    </div>
                    <p class="text-[11px] text-amber-700">
                        Notice: Workflow is NOT blocked. Shared family contacts are normal and recorded seamlessly.
                    </p>
                </div>
            </div>

            <!-- Submit Buttons -->
            <div class="pt-4 border-t border-slate-100 flex items-center justify-between">
                <a href="{{ route('admin.members.index') }}" class="px-4 py-2.5 rounded-xl text-xs font-semibold text-slate-600 hover:text-slate-800 transition">
                    Back to List
                </a>
                <button type="submit" class="px-6 py-2.5 rounded-xl text-xs font-bold text-white bg-teal-600 hover:bg-teal-700 transition shadow-md shadow-teal-500/20">
                    Complete Registration & Generate Member Code
                </button>
            </div>
        </form>
    </div>

</div>
@endsection

@push('scripts')
<script>
    const mobileInput = document.getElementById('input_mobile');
    const emailInput = document.getElementById('input_email');
    const sharedPanel = document.getElementById('sharedContactPanel');
    const sharedTitle = document.getElementById('sharedContactTitle');
    const sharedMemberList = document.getElementById('sharedMemberList');

    let debounceTimer;

    function checkContactDiscovery() {
        const mobile = mobileInput.value.trim();
        const email = emailInput.value.trim();

        if (mobile.length < 7 && email.length < 5) {
            sharedPanel.classList.add('hidden');
            return;
        }

        fetch(`{{ route('admin.members.check_contact') }}?mobile=${encodeURIComponent(mobile)}&email=${encodeURIComponent(email)}`)
            .then(res => res.json())
            .then(data => {
                if (data.count > 0) {
                    sharedTitle.textContent = `${data.count} existing member(s) are associated with this contact info:`;
                    sharedMemberList.innerHTML = '';

                    data.members.forEach(m => {
                        const card = document.createElement('div');
                        card.className = 'p-2.5 bg-white rounded-lg border border-amber-200 text-xs flex items-center justify-between';
                        card.innerHTML = `
                            <div>
                                <span class="font-bold text-slate-800">${m.full_name}</span>
                                <span class="text-[10px] text-slate-500 font-mono block">${m.member_code} (${m.association_name})</span>
                            </div>
                            <button type="button" onclick="autofillFromFound(${JSON.stringify(m).replace(/"/g, '&quot;')})" class="px-2 py-1 rounded bg-teal-50 text-teal-700 hover:bg-teal-100 border border-teal-200 text-[10px] font-semibold">
                                Copy Address
                            </button>
                        `;
                        sharedMemberList.appendChild(card);
                    });

                    sharedPanel.classList.remove('hidden');
                } else {
                    sharedPanel.classList.add('hidden');
                }
            })
            .catch(() => {
                sharedPanel.classList.add('hidden');
            });
    }

    function autofillFromFound(m) {
        if (m.address) document.getElementById('input_address').value = m.address;
        if (m.city) document.getElementById('input_city').value = m.city;
        if (m.state) document.getElementById('input_state').value = m.state;
        if (m.pincode) document.getElementById('input_pincode').value = m.pincode;
    }

    mobileInput.addEventListener('input', () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(checkContactDiscovery, 400);
    });

    emailInput.addEventListener('input', () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(checkContactDiscovery, 400);
    });
</script>
@endpush