@include('layouts.header', ['title' => 'Add Survey Details'])
    <div class="wrapper">
    @include('layouts.agency-user-navbar')
    @include('layouts.agency-user-sidebar')

        <div class="content-page">
            <div class="content">
                <div class="container-fluid">
                    <div class="row">
                        <div class="col-12">
                            <div class="page-title-box">
                                <div class="page-title-right"></div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Name Of The Project: {{ $project['name'] ?? 'N/A' }}</h4>
                                <h4 class="page-title">Structure</h4>
                                <h4 class="page-title">
                                {{ isset($surveyData['structure_use'])
                                    ? ($surveyData['structure_use'] == 1
                                        ? 'Residential'
                                        : ($surveyData['structure_use'] == 3
                                            ? 'Residential + Commercial'
                                            : 'N/A'))
                                    : 'N/A'
                                }}
                                </h4>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-lg-12">
                            <div class="card">
                                <div class="card-header">
                                <h4 class="page-title">Details Of Household Members</h4>
                                </div>
                                <div class="card-body">
                                    <div class="row">
                                    <div class="col-lg-6">
                                        <label>Family Photo</label>
                                        <input type="file" class="form-control" name="family_photo" required>
                                        {{-- Show image preview if exists --}}
                                        @if(isset($surveyData['survey_user_residential'][0]['family_photo']) && !empty($surveyData['survey_user_residential'][0]['family_photo']))
                                            <div class="mt-2" style="width: 100px; height: 100px;">
                                                <img src="{{ asset($surveyData['survey_user_residential'][0]['family_photo']) }}"
                                                    alt="Family Photo"
                                                    style="width: 100%; height: 100%; object-fit: cover; border: 1px solid #ccc; border-radius: 4px;">
                                            </div>
                                        @endif
                                    </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div class="mb-3">
                                                <label for="document_type" class="form-label">Add Members<span class="text-danger">*</span></label>
                                                <button id="addMemberBtn" class="btn btn-success">+ Add Member</button>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="row">
                                        <!-- Container where forms get added -->
                                        <div id="memberFormContainer"></div>
                                    </div>

                                    <div class="row">
                                        <div class="col-lg-6">
                                            <div id="memberList" class="mt-3"></div>
                                        </div>
                                    </div>



                                </div>

                                <div class="card-footer border-top border-light d-flex justify-content-between">
                                        <a href="{{ route('agencyUser.add.screen2.serveyDetails', ['project_id' => encrypt($projectId), 'survey_id' => encrypt($surveyId)]) }}" class="btn btn-secondary">Back</a>
                                        <button id="saveNextBtn" class="btn btn-success" onclick="submitHouseholdData()">Save & Next</button>
                                    </div>

                        </div>
                    </div>

                </div>
            </div>

            @include('layouts.footer')
        </div>
    </div>

    <!-- Vendor JS -->
    <script src="{{ asset('assets/js/vendor.min.js') }}"></script>
    <script src="{{ asset('assets/js/app.min.js') }}"></script>
    <!--  Select2 Plugin Js -->
    <script src="{{ asset('assets/vendor/select2/js/select2.min.js') }}"></script>

    <script>
        $(document).ready(function() {


            @if (session('success'))
                toastr.success("{{ session('success') }}");
            @endif

            @if (session('error'))
                toastr.error("{{ session('error') }}");
            @endif


        });
    </script>

<script>
const API_TOKEN = "{{ $token }}"; // passed from backend securely
const projectId = "{{ $projectId }}";
const surveyId = "{{ $surveyId }}";
const agencyUserId = "{{ $user['id'] }}";
const backendFamilyMembers = @json($surveyData['survey_user_residential_household_members'] ?? []);

let formCounter = 0;

document.getElementById('addMemberBtn').addEventListener('click', () => {
    addMemberForm();
});

function addMemberForm(memberData = {}, isEdit = false) {
    console.log('add member', memberData);

    formCounter++;

    const formId = `memberForm${formCounter}`;
    const container = document.getElementById('memberFormContainer');
    // Prevent multiple forms
    if (container.querySelector('form')) {
        return;
    }
    document.getElementById('addMemberBtn').disabled = true;

    const formHtml = `
        <form id="${formId}" class="mb-4" onsubmit="${isEdit ? `updateMember(event, '${formId}', ${memberData.id}, ${memberData.from_backend})` : `saveMember(event, '${formId}')`}">
        <input type="hidden" name="is_edit" value="${isEdit}">
        <input type="hidden" name="project_id" value="{{$projectId}}">
        <input type="hidden" name="survey_id" value="{{$surveyId}}">
        <input type="hidden" name="agency_user_id" value="{{$user['id']}}">
            <div class="card">
                <div class="card-body">
                    <div class="row">

                        <div class="col-lg-6 mt-3">
                            <label>Name</label>
                            <input type="text" class="form-control" name="name" value="${memberData.name || ''}">
                            <div class="text-danger error-message" data-error-for="name"></div>
                        </div>


                        <div class="col-lg-6 mt-3">
                            <label>Relationship to the Head of HouseHold</label>
                            <select class="form-control relation-select" name="relation_id">
                                <option value="">Select Relation</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="relation_id"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Monthly Range</label>
                            <select class="form-control monthly-income-range-select" name="monthly_range_id">
                                <option value="">Select Monthly Range</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="monthly_range_id"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Age</label>
                            <input type="text" class="form-control" name="age" maxlength="3" value="${memberData.age || ''}">
                            <div class="text-danger error-message" data-error-for="age"></div>
                        </div>

                         <div class="col-lg-6 mt-3">
                            <label>Gender</label>
                            <select class="form-control gender-select" name="gender_id">
                                <option value="">Select Gender</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="gender_id"></div>
                            <!-- Hidden input shown when "Other" is selected -->
                            <div class="mt-2 gender-other-field d-none">
                                <input type="text" class="form-control" name="gender_other" placeholder="Enter other gender" value="${memberData.gender_other || ''}">
                                <div class="text-danger error-message" data-error-for="gender_other"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Marital Status</label>
                            <select class="form-control marital-status-select" name="marital_status_id">
                                <option value="">Select Marital Status</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="marital_status_id"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Education</label>
                            <select class="form-control education-select" name="education_id">
                                <option value="">Select Education</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="education_id"></div>
                            <!-- "Other" input field hidden by default -->
                            <div class="mt-2 other-education-field d-none">
                                <input type="text" class="form-control" name="education_other" placeholder="Enter other education" value="${memberData.education_other || ''}">
                                <div class="text-danger error-message" data-error-for="education_other"></div>
                            </div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Occupation</label>
                            <select class="form-control occupation-select" name="occupation_id">
                                <option value="">Select Occupation</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="occupation_id"></div>
                        <!-- Hidden input for other occupation -->
                        <div class="mt-2 occupation-other-field d-none">
                            <input type="text" class="form-control" name="occupation_other" placeholder="Enter other occupation" value="${memberData.occupation_other || ''}">
                            <div class="text-danger error-message" data-error-for="occupation_other"></div>
                        </div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Secondary (if any other-part time)</label>
                            <input type="text" class="form-control" name="secondary_part_time_income" maxlength="100" value="${memberData.secondary_part_time_income || ''}">
                            <div class="text-danger error-message" data-error-for="secondary_part_time_income"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Hands in (Saving)</label>
                            <input type="text" class="form-control" name="hand_llln" maxlength="100" value="${(memberData.Hand_llln || memberData.hand_llln) || ''}">
                            <div class="text-danger error-message" data-error-for="hand_llln"></div>
                        </div>

                         <div class="col-lg-6 mt-3">
                            <label>Skill/Vocational Training</label>
                            <select class="form-control training-select" name="training_id">
                                <option value="">Select Vocational Training</option>
                            </select>
                            <div class="text-danger error-message" data-error-for="training_id"></div>
                        <!-- Hidden input for other training -->
                        <div class="mt-2 training-other-field d-none">
                            <input type="text" class="form-control" name="training_other" placeholder="Enter other training" value="${memberData.training_other || ''}">
                            <div class="text-danger error-message" data-error-for="training_other"></div>
                        </div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Distance from Place of employment(Km)</label>
                            <input type="text" class="form-control" name="distance_place_employment" maxlength="100" value="${memberData.distance_place_employment || ''}">
                            <div class="text-danger error-message" data-error-for="distance_place_employment"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Location of work</label>
                            <input type="text" class="form-control" name="work_location" maxlength="100" value="${memberData.work_location || ''}">
                            <div class="text-danger error-message" data-error-for="work_location"></div>
                        </div>

                        <div class="col-lg-6 mt-3">
                            <label>Aadhar No</label>
                            <input type="text" class="form-control" name="aadhaar_number" maxlength="12" value="${memberData.aadhaar_number || ''}">
                            <div class="text-danger error-message" data-error-for="aadhaar_number"></div>
                        </div>

                    </div>
                </div>

                <div class="card-footer border-top border-light">
                    <button type="submit" class="btn btn-success">Save Member</button>
                </div>
            </div>
        </form>
    `;

    container.insertAdjacentHTML('beforeend', formHtml);

    // Populate dropdowns after inserting form
    populateDropdowns(formId, memberData);
}


function saveMember(e, formId) {
    e.preventDefault();

    const form = document.getElementById(formId);
    const formData = new FormData(form);

    // Clear old errors
    form.querySelectorAll('.error-message').forEach(el => el.textContent = '');

    let hasError = false;

    // Name: Only alphabets
    const name = formData.get('name').trim();
    if (!/^[A-Za-z\s]+$/.test(name)) {
        showError(form, 'name', 'Name must contain only alphabets.');
        hasError = true;
    }

    // Aadhar: 12-digit number
    const aadhaar = formData.get('aadhaar_number').trim();
    if (!/^\d{12}$/.test(aadhaar)) {
        showError(form, 'aadhaar_number', 'Aadhar number must be a 12-digit number.');
        hasError = true;
    }

    // Age: must be numeric and > 0
    const age = formData.get('age').trim();
    if (!age || isNaN(age) || parseInt(age) <= 0) {
        showError(form, 'age', 'Enter a valid age.');
        hasError = true;
    }

    const distance = formData.get('distance_place_employment');
    if (!/^\d+$/.test(distance)) {
        showError(form, 'distance_place_employment', 'Distance must be a number');
        return;
    }

    // Required fields check
    const requiredFields = [
        'relation_id', 'monthly_range_id', 'gender_id',
        'marital_status_id', 'education_id', 'training_id',
        'distance_place_employment', 'work_location'
    ];

    requiredFields.forEach(field => {
        const value = formData.get(field);
        if (!value || value.trim() === '') {
            showError(form, field, 'This field is required.');
            hasError = true;
        }
    });

    if (hasError) return;

    // Construct member object
    const newMember = {
        id: Date.now(),
        name,
        aadhaar_number: aadhaar,
        relation_id: formData.get('relation_id'),
        age,
        gender_id: formData.get('gender_id'),
        gender_other: formData.get('gender_other') || null,
        marital_status_id: formData.get('marital_status_id'),
        education_id: formData.get('education_id'),
        education_other: formData.get('education_other') || null,
        occupation_id: formData.get('occupation_id'),
        occupation_other: formData.get('occupation_other'),
        monthly_range_id: formData.get('monthly_range_id'),
        secondary_part_time_income: formData.get('secondary_part_time_income'),
        hand_llln: formData.get('hand_llln'),
        training_id: formData.get('training_id'),
        training_other: formData.get('training_other') || null,
        distance_place_employment: formData.get('distance_place_employment'),
        work_location: formData.get('work_location'),
        from_backend: false
    };

    let members = JSON.parse(localStorage.getItem('family_members') || '[]');
    members.push(newMember);
    localStorage.setItem('family_members', JSON.stringify(members));

    form.remove();
    document.getElementById('addMemberBtn').disabled = false; // Re-enable button
    displayMembers();
}

function showError(form, fieldName, message) {
    const errorDiv = form.querySelector(`.error-message[data-error-for="${fieldName}"]`);
    if (errorDiv) errorDiv.textContent = message;
}






/*function displayMembers() {
    const members = JSON.parse(localStorage.getItem('family_members') || '[]');
    const listContainer = document.getElementById('memberList');
    listContainer.innerHTML = '';

    members.forEach(member => {
        const item = document.createElement('div');
        item.className = "border rounded p-3 mb-3";

        item.innerHTML = `
            <h5><strong>Member Details:</strong></h5>
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <strong>Name:</strong> ${member.name} <br>
                    <strong>Age:</strong> ${member.age} <br>
                    <strong>Aadhar:</strong> ${member.aadhaar_number}
                </div>
                <button class="btn btn-danger btn-sm" onclick="deleteMember(${member.id})">Delete</button>
            </div>
        `;

        listContainer.appendChild(item);
    });
}*/

function displayMembers() {
    const backend = backendFamilyMembers || [];
    const local = JSON.parse(localStorage.getItem('family_members') || '[]');

    // Add from_backend flag for API deletion
    const backendWithFlag = backend.map(m => ({ ...m, from_backend: true }));

    // Avoid duplicates by Aadhaar or custom key
    const combined = [
        ...backendWithFlag,
        ...local.filter(lm => !backend.some(bm => bm.aadhaar_number === lm.aadhaar_number))
    ];

    const listContainer = document.getElementById('memberList');
    listContainer.innerHTML = '';
    combined.forEach(member => {
        const item = document.createElement('div');
        item.className = "border rounded p-3 mb-3";

        item.innerHTML = `
            <h5><strong>Member Details:</strong></h5>
            <div class="row align-items-center">
                <div class="col-md-8">
                    <strong>Name:</strong> ${member.name} <br>
                    <strong>Age:</strong> ${member.age} <br>
                    <strong>Aadhar:</strong> ${member.aadhaar_number}
                </div>
                <div class="col-md-4 text-end">
                    <button class="btn btn-warning btn-sm me-2" onclick="editMember(${member.id}, ${member.from_backend})">
                        Edit
                    </button>
                    <button class="btn btn-danger btn-sm" onclick="deleteMember(${member.id}, ${member.from_backend})">
                        Delete
                    </button>
                </div>
            </div>
        `;

        listContainer.appendChild(item);
    });
}

function editMember(id, fromBackend) {
    const container = document.getElementById('memberFormContainer');
    if (container.querySelector('form')) return;

    document.getElementById('addMemberBtn').disabled = true;

    if (fromBackend) {
        fetch(`{{ config('app.api_url') }}/api/surveys_household_list/${id}/edit`, {
            method: 'GET',
            headers: {
                'Authorization': `Bearer {{ $token }}`,
                'Accept': 'application/json',
            },
        })
        .then(res => {
            if (!res.ok) throw new Error('Failed to fetch member data');
            return res.json();
        })
        .then(data => {
            data.data.household_member.from_backend = true;
            addMemberForm(data.data.household_member, true); // true = editing mode
        })
        .catch(err => {
            console.error(err);
            toastr.error('Error fetching member data.');
            document.getElementById('addMemberBtn').disabled = false;
        });
    } else {
        const localMembers = JSON.parse(localStorage.getItem('family_members') || '[]');
        const member = localMembers.find(m => m.id === id);
        if (member) {
            addMemberForm(member, true);
        }
    }
}



function updateMember(event, formId, id, fromBackend) {
    event.preventDefault();

    const form = document.getElementById(formId);
    const formData = new FormData(form);

        // Clear old errors
        form.querySelectorAll('.error-message').forEach(el => el.textContent = '');

        let hasError = false;

        // Name: Only alphabets
        const name = formData.get('name').trim();
        if (!/^[A-Za-z\s]+$/.test(name)) {
            showError(form, 'name', 'Name must contain only alphabets.');
            hasError = true;
        }

        // Aadhar: 12-digit number
        const aadhaar = formData.get('aadhaar_number').trim();
        if (!/^\d{12}$/.test(aadhaar)) {
            showError(form, 'aadhaar_number', 'Aadhar number must be a 12-digit number.');
            hasError = true;
        }

        // Age: must be numeric and > 0
        const age = formData.get('age').trim();
        if (!age || isNaN(age) || parseInt(age) <= 0) {
            showError(form, 'age', 'Enter a valid age.');
            hasError = true;
        }

        const distance = formData.get('distance_place_employment');
        if (!/^\d+$/.test(distance)) {
            showError(form, 'distance_place_employment', 'Distance must be a number');
            hasError = true;
        }

        // Required fields check
        const requiredFields = [
            'relation_id', 'monthly_range_id', 'gender_id',
            'marital_status_id', 'education_id', 'training_id',
            'distance_place_employment', 'work_location'
        ];

        requiredFields.forEach(field => {
            const value = formData.get(field);
            if (!value || value.trim() === '') {
                showError(form, field, 'This field is required.');
                hasError = true;
            }
        });

        if (hasError) return;

    const payload = Object.fromEntries(formData.entries());

    if (fromBackend) {
        fetch(`{{ config('app.api_url') }}/api/surveys_household_list_update/${id}`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ $token }}',
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            },
            body: JSON.stringify(payload)
        })
        .then(res => {
            if (!res.ok) {
                throw new Error('Failed to update member.');
            }
            return res.json();
        })
        .then(response => {
            toastr.success('Member updated successfully!');
            document.getElementById('memberFormContainer').innerHTML = '';
            document.getElementById('addMemberBtn').disabled = false;
            location.reload();
            //displayMembers();
        })
        .catch(error => {
            console.error('Error updating member:', error);
            toastr.error('An error occurred while updating the member.');
        });

    } else {
        // LocalStorage Update
        let local = JSON.parse(localStorage.getItem('family_members') || '[]');
        const index = local.findIndex(m => m.id == id);

        if (index !== -1) {
            local[index] = { ...local[index], ...payload };
            localStorage.setItem('family_members', JSON.stringify(local));
            //alert('Local member updated!');

        } else {
            toastr.error('Member not found in localStorage!');
        }

        document.getElementById('memberFormContainer').innerHTML = '';
        document.getElementById('addMemberBtn').disabled = false;
        displayMembers();
    }
}








/*function deleteMember(id) {
    let members = JSON.parse(localStorage.getItem('family_members') || '[]');
    members = members.filter(m => m.id !== id);
    localStorage.setItem('family_members', JSON.stringify(members));
    displayMembers();
}*/

function deleteMember(id, fromBackend = false) {
    if (fromBackend) {
        if (!confirm('Are you sure you want to delete this saved member?')) return;

        fetch(`{{ config('app.api_url') }}/api/surveys_household_delete/${id}`, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer {{ $token }}',
                'Content-Type': 'application/json'
            }
        })
        .then(res => res.json())
        .then(result => {
            if (result.status === 'success') {
                toastr.success('Member deleted successfully!');
                location.reload();
            } else {
                toastr.error(result.message || 'Failed to delete member.');
            }
        })
        .catch(err => {
            console.error(err);
            toastr.error('Something went wrong.');
        });

    } else {
        let members = JSON.parse(localStorage.getItem('family_members') || '[]');
        members = members.filter(m => m.id !== id);
        localStorage.setItem('family_members', JSON.stringify(members));
        displayMembers();
    }
}


function handleEducationChange(selectElement) {
    const container = selectElement.closest('.col-lg-6');
    const otherInput = container.querySelector('.other-education-field');

    if (selectElement.value === '9') {
        otherInput.classList.remove('d-none');
    } else {
        otherInput.classList.add('d-none');
        otherInput.querySelector('input').value = ''; // clear input when hidden
    }
}

function handleGenderChange(selectElement) {
    const container = selectElement.closest('.col-lg-6');
    const otherInputDiv = container.querySelector('.gender-other-field');

    if (selectElement.value === '3') {
        otherInputDiv.classList.remove('d-none');
    } else {
        otherInputDiv.classList.add('d-none');
        otherInputDiv.querySelector('input').value = '';
    }
}

function handleOccupationChange(selectElement) {
    const container = selectElement.closest('.col-lg-6');
    const otherInputDiv = container.querySelector('.occupation-other-field');

    if (selectElement.value === '17') {
        otherInputDiv.classList.remove('d-none');
    } else {
        otherInputDiv.classList.add('d-none');
        otherInputDiv.querySelector('input').value = '';
    }
}

function handleTrainingChange(selectElement) {
    const container = selectElement.closest('.col-lg-6');
    const otherInputDiv = container.querySelector('.training-other-field');

    if (selectElement.value === '11') {
        otherInputDiv.classList.remove('d-none');
    } else {
        otherInputDiv.classList.add('d-none');
        otherInputDiv.querySelector('input').value = '';
    }
}


async function populateDropdowns(formId, memberData = {}) {
    console.log('memberData', memberData);
    const token = "{{ $token }}"; // assuming you're passing it from backend

    const headers = {
        'Authorization': `Bearer ${token}`
    };

    try {
        const [relationRes, occupationRes, monthlyIncomeRangeRes, genderRes, maritalStatusRes, educationRes, trainingRes] = await Promise.all([
            fetch("{{ config('app.api_url') }}/api/relation", { headers }),
            fetch("{{ config('app.api_url') }}/api/occupation", { headers }),
            fetch("{{ config('app.api_url') }}/api/monthly_income_range", { headers }),
            fetch("{{ config('app.api_url') }}/api/gender", { headers }),
            fetch("{{ config('app.api_url') }}/api/marital_list", { headers }),
            fetch("{{ config('app.api_url') }}/api/education", { headers }),
            fetch("{{ config('app.api_url') }}/api/training", { headers }),

        ]);

        const relationTypes = await relationRes.json();
        const occupations = await occupationRes.json();
        const monthlyIncomeRange = await monthlyIncomeRangeRes.json();
        const gender = await genderRes.json();
        const maritalStatus = await maritalStatusRes.json();
        const education = await educationRes.json();
        const training = await trainingRes.json();

        const form = document.getElementById(formId);

        const relationSelect = form.querySelector('.relation-select');
        relationTypes.data.relation.forEach(rel => {
            const option = document.createElement('option');
            option.value = rel.id;
            option.textContent = rel.name;

            // Set selected if editing and match found
            if (memberData.relation_id && memberData.relation_id == rel.id) {
                option.selected = true;
            }

            relationSelect.appendChild(option);
        });


        const occupationSelect = form.querySelector('.occupation-select');
        occupations.data.occupation.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (memberData.occupation_id && memberData.occupation_id == occ.id) {
                option.selected = true;
            }
            occupationSelect.appendChild(option);
        });

        // Show/hide "other" field on change
        occupationSelect.addEventListener('change', function () {
            handleOccupationChange(this);
        });
        // Manually trigger to show/hide the "Other" input based on selected value
        handleOccupationChange(occupationSelect);

        // Pre-fill "other" occupation input if needed
        if (memberData.occupation_id == 17 && memberData.occupation_other) {
            const container = occupationSelect.closest('.col-lg-6');
            const otherInput = container.querySelector('.occupation-other-field input');
            if (otherInput) {
                otherInput.value = memberData.occupation_other;
            }
        }

        const monthlyIncomeRangeSelect = form.querySelector('.monthly-income-range-select');
        monthlyIncomeRange.data.monthly_range_lists.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.range;
            // Set selected if editing and match found
            if (memberData.monthly_range_id && memberData.monthly_range_id == occ.id) {
                option.selected = true;
            }
            monthlyIncomeRangeSelect.appendChild(option);
        });

        const genderSelect = form.querySelector('.gender-select');
        gender.data.gender.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (memberData.gender_id && memberData.gender_id == occ.id) {
                option.selected = true;
            }
            genderSelect.appendChild(option);
        });
        // Handle show/hide for gender other
        genderSelect.addEventListener('change', function () {
            handleGenderChange(this);
        });
        handleGenderChange(genderSelect);

        if (memberData.gender_id == 3 && memberData.gender_other) {
            const container = genderSelect.closest('.col-lg-6');
            const otherInput = container.querySelector('.gender-other-field input');
            if (otherInput) {
                otherInput.value = memberData.gender_other;
            }
        }

        const maritalStatusSelect = form.querySelector('.marital-status-select');
        maritalStatus.data.marital.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (memberData.marital_status_id && memberData.marital_status_id == occ.id) {
                option.selected = true;
            }
            maritalStatusSelect.appendChild(option);
        });

        const educationSelect = form.querySelector('.education-select');
        education.data.education.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (memberData.education_id && memberData.education_id == occ.id) {
                option.selected = true;
            }
            educationSelect.appendChild(option);
        });
        educationSelect.addEventListener('change', function () {
            handleEducationChange(this);
        });

        const trainingSelect = form.querySelector('.training-select');
        training.data.training.forEach(occ => {
            const option = document.createElement('option');
            option.value = occ.id;
            option.textContent = occ.name;
            // Set selected if editing and match found
            if (memberData.training_id && memberData.training_id == occ.id) {
                option.selected = true;
            }
            trainingSelect.appendChild(option);
        });

        trainingSelect.addEventListener('change', function () {
            handleTrainingChange(this);
        });

        handleTrainingChange(trainingSelect);

        if (memberData.training_id == 11 && memberData.training_other) {
            const container = trainingSelect.closest('.col-lg-6');
            const otherInput = container.querySelector('.training-other-field input');
            if (otherInput) {
                otherInput.value = memberData.training_other;
            }
        }


    } catch (err) {
        console.error('Dropdown fetch failed:', err);
        alert('Failed to load dropdown data. Please try again.');
    }
}


async function submitHouseholdData() {


        let projectId = @json(encrypt($projectId));
             let surveyId =  @json(encrypt($surveyId));

    const members = JSON.parse(localStorage.getItem('family_members') || '[]');
    const backend = backendFamilyMembers || [];

    // ✅ Check if there's no member locally AND no member in backend
    if (members.length === 0 && backend.length === 0) {
        toastr.error("Please add at least one family member.");
        return;
    }
    if (members.length === 0 && backend.length != 0) {
        toastr.success('Submission successful!');
        localStorage.removeItem('family_members');
        window.location.href = `/agency-user/add-servey-screen4/${projectId}/${surveyId}`;
        return false;
    }


    const photoInput = document.querySelector('input[name="family_photo"]');
    const formData = new FormData();

    formData.append('project_id', '{{ $projectId }}');
    formData.append('survey_id', '{{ $surveyId }}');
    formData.append('agency_user_id', '{{ $user["id"] }}');

    // Check if photo is uploaded
    if (photoInput && photoInput.files.length > 0) {
        const photoFile = photoInput.files[0];
        const base64 = await toBase64(photoFile);
        const blob = await (await fetch(base64)).blob();
        formData.append('family_photo', blob, photoFile.name);
    }

    // Add members
    members.forEach((member, index) => {
        Object.keys(member).forEach(key => {
            if (member[key] !== null && member[key] !== undefined) {
                formData.append(`records[${index}][${key}]`, member[key]);
            }
        });
    });


    try {
        const res = await fetch("{{ config('app.api_url') }}/api/add_surveys_household", {
            method: "POST",
            headers: {
                'Authorization': `Bearer {{$token}}`
            },
            body: formData
        });

        const result = await res.json();
        if (res.ok) {
            toastr.success('Submission successful!');
            localStorage.removeItem('family_members');
            window.location.href = `/agency-user/add-servey-screen4/${projectId}/${surveyId}`;
        } else {
            toastr.error("Error: " + result.message);
        }
    } catch (error) {
        toastr.error("Something went wrong");
        console.error(error);
    }
}


// Utility function to convert file to base64
function toBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = error => reject(error);
    });
}





// Helper to convert base64 to Blob
function dataURLtoBlob(dataurl) {
    const arr = dataurl.split(",");
    const mime = arr[0].match(/:(.*?);/)[1];
    const bstr = atob(arr[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);

    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }

    return new Blob([u8arr], { type: mime });
}





// Initialize on page load
document.addEventListener('DOMContentLoaded', displayMembers);
</script>


</body>

</html>