@extends('layout.index')
@section('title', 'Farmer Data')

@section('content')
<div class="col-sm-12">
        <div class="content-body">
            <section id="multiple-column-form">
                <div class="row justify-content-center">
                    <div class="col-sm-12">
                                                <div class="col-sm-12">
                            <div class="card m-1" style="border-radius:15px">
                                <div class="card-body custom_active" style="margin-bottom: -10px">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <div class="row">
                                                <!-- Operation Buttons (Only if $aTab is not empty) -->
                                                @if (!empty($aTab))
                                                    <div class="col-sm-2 mt-1">
                                                        <select name="tabDropdown" id="tabDropdown" class="form-control form-select select2" multiple>
                                                            <option value="0">-- Select Tab --</option>
                                                            @foreach ($aTab as $tab)
                                                                <option value="{{ $tab->id }}">
                                                                    {{ $tab->tab_title }} ({{ $tab->question_type }})
                                                                </option>
                                                            @endforeach
                                                        </select>
                                                    </div>
                                                @else
                                                    <div class="col-sm-2 text-center">
                                                        <h2>No Data Found</h2>
                                                    </div>
                                                @endif

                                                
                                                <!-- Cancel Button (Always visible) -->
                                                <div class="col-sm-2 text-right">
                                                    <a href="{{ url('escalation_data?page=' . $pageNo) }}" class="btn btn-danger waves-effect waves-float waves-light m-1 ">Cancel</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                                                <div class="card m-1" style="border-radius:15px">
                            <div class="card-body custom_active" style="margin-bottom: -10px">
                                <div class="row">
                                  
                                    <div style="overflow-x: auto; white-space: nowrap;">
                                        <ul id="tab_outer" class="row dashboard-tab flex-nowrap" style="display: flex; padding-left: 0; margin: 0;">
                                        
                                                                                        <div class="col-sm-12 text-center"><h2>No Data Found</h2></div>
                                             
                                        </ul>
                                    </div>
                                    
                                </div>
                            </div>
                        </div>                                          
                        
                    </div>
                </div>
            </section>
        </div>
       
    
        <div class="tab-content" id="formTabsContent">
                                </div>
    </div>

    <div id="form_outer"></div>

    <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl" role="document">
            <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editModalLabel">Edit Form</h5>
                <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#editModal').modal('toggle');">

                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body" id="editModalBody">
                <!-- AJAX HTML will be injected here -->
            </div>
            </div>
        </div>
        </div>



<div id="notebox" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">Reject Note <span style="color:red;">*</span></h4>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body text-center">
                <textarea id="modalnote" name="modalnote" class="form-control"></textarea>
                <span id="modalnoteError" class="text-left" style="color: red;"></span>
                <br>
                <input type="button" name="notesubmit" value="Submit" class="btn btn-primary waves-effect waves-float waves-light" onclick="notesubmit()">
            </div>
            <!-- <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div> -->
        </div>
    </div>
</div>

<script>
 
    var countryId="";
    var farmerId="0";
    var tab = "";
    var questionType="";
    var userId = 0;
    var latitude = 0;
    var longitude = 0;
  
    @php
    $file_upload_url = config('custom.a_countries.' . $countryId) . '/api/file_upload_admin';
    @endphp
    const file_upload_url = "{{ $file_upload_url }}";

    var token = '{{csrf_token()}}';
    document.addEventListener('DOMContentLoaded', function () {
        document.querySelectorAll('.tabs-all').forEach(function(tab) {
            tab.addEventListener('click', function(event) {
                event.preventDefault();

                // Remove 'active' from all tabs
                document.querySelectorAll('.tabs-all').forEach(function(innerTab) {
                    innerTab.classList.remove('active');
                });

                // Add 'active' to the clicked tab
                this.classList.add('active');

                // Hide all tab content
                document.querySelectorAll('.tab-pane').forEach(function(content) {
                    content.style.display = 'none';
                });

                // Show the clicked tab's content
                var targetContentId = this.getAttribute('href');
                var target = document.querySelector(targetContentId);
                if (target) {
                    target.style.display = 'block';
                }
            });
        });
    });

    function operation_submit(operation,formName,formId,activityNumber,formType,programId=0) {
        let selectedTabs = $('#tabDropdown').val(); // get selected tabs (array)
      
        
        const activeTab = document.querySelector('.tabs-all.active');
        if (activeTab) {
            document.querySelectorAll('#selectedTab').forEach(function (input) {
                input.value = activeTab.id;
            });
        }

        if (operation === 'Reject') {
            if (confirm('Are you sure you want to ' + operation + ' data?')) {
                
                var form = $('#' + operation + '_form1');

                // Create or update hidden input: formName
                if ($('#rejectForm').length === 0) {
                    form.append('<input type="hidden" name="rejectForm" id="rejectForm">');
                }
                $('#rejectForm').val(formName);
                if ($('#rejectActivity').length === 0) {
                    form.append('<input type="hidden" name="rejectActivity" id="rejectActivity">');
                }
                $('#rejectActivity').val(activityNumber);

                form.submit();
            }
            return false;
            
        }else if (operation === 'Reject_All') {
            if (confirm('Are you sure you want to reject all data ?')) {
                let selectedTabs = $('#tabDropdown').val() || [];

                // get selected tabs
                if (selectedTabs.length === 0) {
                    alert("Please select at least one tab.");
                    return false;
                }

                // clear previous hidden inputs
                // clear old hidden inputs
                $('#Reject_form input[name="tab[]"]').remove();

                // add new hidden inputs for each selected tab
                selectedTabs.forEach(function(tabId) {
                    $('#Reject_form').append(
                        '<input type="hidden" name="tab[]" value="' + tabId + '">'
                    );
                });
                // console.log(object);
                // submit the form
                $('#Reject_form').submit();
                // return false;
            }
            // $('#notebox').modal('show');
            return false;

        } else if (operation === 'Edit') {
            get_farmer_data(operation, formName, formId, activityNumber, formType,programId);
            return false;
        } else {
            if (operation === 'Accept_All') {

                if (confirm('Are you sure you want to accept all data ?')) {
                    let selectedTabs = $('#tabDropdown').val() || [];

                    // get selected tabs
                    if (selectedTabs.length === 0) {
                        alert("Please select at least one tab.");
                        return false;
                    }

                    // clear previous hidden inputs
                 // clear old hidden inputs
                    $('#Accept_form input[name="tab[]"]').remove();

                    // add new hidden inputs for each selected tab
                    selectedTabs.forEach(function(tabId) {
                        $('#Accept_form').append(
                            '<input type="hidden" name="tab[]" value="' + tabId + '">'
                        );
                    });
                    // console.log(object);
                    // submit the form
                    $('#Accept_form').submit();
                    // return false;
                }
                return false;
                // return confirm('Are you sure you want to accept all data ?');
            } else {
                if (confirm('Are you sure you want to ' + operation + ' data?')) {
                    $('#formName').val(formName);
                    $('#activity_number').val(activityNumber);
                    $('#' + operation + '_form1').submit();
                }
                return false;
            }
        }

    }

    function notesubmit(){
        $('#modalnoteError').html('');

        let modalnote = $('#modalnote').val()
       
        if(modalnote!=''){
            $('#Reject_note').val(modalnote)
            $('#Reject_form').submit()
        }else{
            $('#modalnoteError').html('Please enter reject note');
        }
    }
    
    function get_farmer_data(operation,formName="",formId="0",activityNumber="",formType,programId=0) {
     
        const url = "{{ url('get_Farmer_form_data') }}"; // Blade-safe
        const token = "{{ csrf_token() }}";
       
        if (operation === 'Edit_All') {
            let form = $('#Edit_form').serializeArray();

            let tabId = form.find(item => item.name === 'tabId')?.value;
            let programIds = form.find(item => item.name === 'programId')?.value;
            
            var input ={
                "countryId": countryId,
                "farmerId": farmerId,
                "tabId":tabId,
                "programId":programIds
            }
        }else{
            var input = {
                "countryId": countryId,
                "farmerId": farmerId,
                "activityNumber": activityNumber,
                "formName": formName,
                "questionType": questionType,
                "formId":formId,
                "programId":programId
            };

        }
        $.ajax({
            type: "POST",
            url: url,
            data: JSON.stringify(input),
            contentType: "application/json; charset=utf-8",
            headers: {
                "X-CSRF-TOKEN": token,
            },
            success: function (response) {
              
                // Assuming response contains the data you want to show in modal
                $('#editModal').modal('show');
                if (operation === 'Edit_All') {
                    let html = '<form id="all_forms_container"><div class="row"><div class="col-md-12">';

                        $.each(response.aForms, function(index, formMeta) {
                            let formId = formMeta.form_id;
                            let formTitle = formMeta.form_title;
                            let formName = formMeta.form_table_name;
                            let formType = formMeta.form_type;

                            if (response.formData.hasOwnProperty(formId)) {
                                let formEntries = response.formData[formId];

                                $.each(formEntries, function(i, formEntry) {
                                    let activityNumber = formEntry.activity_number;

                                    html += get_questions_html1(
                                        response.Questions[formId],
                                        formEntry,
                                        formId,
                                        activityNumber,
                                        formType,
                                        formTitle,
                                        operation,
                                        formName
                                    );
                                });
                            }
                        });

                        html += '</div></div>'; // close inner rows
                        html += '<div class="row mt-3"><div class="col-md-12 text-center">';
                        html += '<input type="button" onclick="save_all_forms()" value="Save All Forms" class="btn btn-success">';
                        html += '</div></div></form>';

                    

                    // Finally set the modal body content
                    $('#editModalBody').html(html);

                } else {
                    
                    // Assuming question_obj, formData, formId are defined here for the else case
                    $('#editModalBody').html(get_questions_html(response.Questions,response.formData,formId, activityNumber,formType,operation,formName,activityNumber));
                }
                // $('#editModalBody').html(get_questions_html(response.Questions,response.formData,formId, activityNumber,formType,operation,formName,activityNumber)); // You should return HTML from backend
               
                // $('#add_cycle_html').html(get_questions_html(currentFormsData, activityNumber))
            },
            error: function (jqXHR, textStatus, error) {
                alert("Error loading data for editing: " + error);
            }
        });
    }

   

    var a_subquestions = [];
    var a_form_fields_data = [];

    function get_questions_html(Questions,forms_data,formId, activity_number = 0,formType,operation,formName,activityNumber){
       
        let questions = Questions
        
        html = '<div class="row">'
        html += '<div class="col-md-12">'
        html += '<form id="form_'+formId+'">'
        html += '<div class="error" id="form_error_'+formId+'"></div>'
        
        $.each(questions , function( key, question_obj ){
            let answer = forms_data.length > 0 ? forms_data[0][question_obj.id] : ''
            
            field = get_input(question_obj.type, question_obj, answer);
          
            if(field != ''){
                display = '';
                if(question_obj.parent_questions !== 0){
                    display = 'display:none';
                }
                let parent_questions = get_parent_ids(parseInt(question_obj.parent_questions), questions)
                
                html += '<div class="row mb-1 '+parent_questions+'" id="question_head_'+parseInt(question_obj.id)+'" style="'+display+'" ><div class="col-md-5">'+question_obj.name_description+'</div><div class="col-md-7">'+field+'<span class="error" id="error_'+question_obj.id+'"></span></div></div>';
            }
        })
        html += '<input type="hidden" name="questions" value=\''+JSON.stringify(questions)+'\'>'
        html += '<div class="row"><div class="col-md-12">' +'<input type="button" onclick="save_form(' + formId + ',' + formType + ',' + activity_number + ',\'' + operation + '\',\'' + formName + '\',' + activityNumber + ')" ' + 'value="Save" class="btn btn-primary waves-effect waves-float waves-light">' +'</div></div>';
        html += '</form>'
        html += '</div>'
        html += '</div>'
        return html;
    }
   
  

    function get_parent_ids(parent_ids, questions, parenthtml = ''){
        let htmlIds = parenthtml+' parent_'+parent_ids;
        let index = null;
        for(let i=0;i<questions.length;i++){
            if(questions[i].question_id==parent_ids && questions[i].parent_questions > 0){
                index = i;
                break;
            }
        }
        
        if(index != null){
            return get_parent_ids(questions[index].parent_questions, questions, htmlIds)
        }else{
            return htmlIds;
        }
    }

    function serializeArrayToObject(arr) {
        var obj = {};

        arr.forEach(function(item) {
            var name = item.name.split('[');
            var value = item.value;

            if (name.length === 1) {
                obj[name[0]] = value;
            } else {
                var current = obj;
                for (var i = 0; i < name.length; i++) {
                    var key = name[i].replace(']', '');
                    if (i === name.length - 1) {
                        if (!current[key]) {
                            current[key] = value;
                        } else {
                            if (Array.isArray(current[key])) {
                                current[key].push(value);
                                current[key] = current[key].join(',');
                            } else {
                                current[key] = [current[key], value].join(',');
                            }
                        }
                    } else {
                        current[key] = current[key] || {};
                        current = current[key];
                    }
                }
            }
        });

        return obj;
    }

    function add_key_to_answer(fieldsID, questions, answers){
        let parent_id = 0
        for(let i=0;i<questions.length;i++){
            if(questions[i].id==fieldsID){
                parent_id = questions[i].parent_questions
                break;
            }
        }

        if(parent_id > 0){
            let options = []
            for(i=0;i<questions.length;i++){
                if(questions[i].id==parent_id){
                    options = questions[i].options
                    break;
                }
            }

            if(options.length > 0){
                for(i=0;i<options.length;i++){
                    if(options[i].child_questions != null){
                        let child_questions = options[i].child_questions.split(',');
                        if(child_questions.includes(fieldsID)){
                            if(options[i].value==answers[parent_id]){
                                return true;
                            }
                        }
                    }
                }
            }
        }else{
            return true
        }
        return false
    }
    function clear_div_values(divclass){
        var formElements = document.querySelectorAll('.parent_'+divclass+' input[type="text"], .parent_'+divclass+' input[type="checkbox"], .parent_'+divclass+' input[type="radio"], .parent_'+divclass+' select');
    
        formElements.forEach(function(element) {
            if (element.type === 'text' || element.type === 'select-one') {
                element.value = '';
            } else if (element.type === 'checkbox' || element.type === 'radio') {
                element.checked = false;
            }
        });
    }

    function get_input(question_type, question_obj, answer){
        if(question_type == 'auto_next'){
            return '<lable>'+question_obj.question_text+'</lable>'
        }else if(question_type == 'hide_on_form'){
            return '';
        }else if(question_type == 'input'){
           
            return '<input class="form-select form-control" type="text" id=question_'+question_obj.id+' name="answer['+question_obj.id+']" value="'+answer+'">'
        }else if (question_type == 'selection') {
           
            // const rawOptions = JSON.parse(question_obj.options_inline);
            //     question_obj.options = [];

            //     Object.entries(rawOptions).forEach(([key, optionData]) => {
            //         question_obj.options.push({
            //             key: key,
            //             value: optionData.options?.en || key,
            //             child_questions: optionData.child_questions || ''
            //         });
            //     });

            // if ('has_question_onchange' in question_obj && question_obj.has_question_onchange) {
            //     // Unbind previous handler to avoid duplicate bindings
            //     $(document).off('change', '#question_' + question_obj.id);
                
            //     $(document).on('change', '#question_' + question_obj.id, function () {
            //         $('.parent_' + question_obj.id).hide();
            //         clear_div_values(question_obj.id);

            //         const selectedOption = this.options[this.selectedIndex];
            //         const childIds = selectedOption.getAttribute('childquestionids');

            //         if (childIds) {
            //             childIds.split(',').forEach(id => {
            //                 $('#question_head_' + id).show();
            //             });
            //         }
            //     });
            // }

            // let dropdown = '<select class="form-select form-control" id="question_' + question_obj.id + '" name="answer[' + question_obj.id + ']">';
            
            // question_obj.options.forEach(option => {
            //     const isSelected = answer == option.key ? 'selected' : '';
            //     dropdown += '<option childquestionids="' + option.child_questions + '" value="' + option.key + '" ' + isSelected + '>' + option.value + '</option>';

            //     // Show children if answer is pre-selected and has children
            //     if (answer == option.key && option.child_questions) {
            //         setTimeout(() => {
            //             $('.parent_' + question_obj.id).hide();
            //             option.child_questions.split(',').forEach(id => {
            //                 $('#question_head_' + id).show();
            //             });
            //         }, 500);
            //     }
            // });

            // dropdown += '</select>';
            // return dropdown;

            let rawOptions = {};
            try {
                rawOptions = question_obj.options_inline ? JSON.parse(question_obj.options_inline) : {};
            } catch (e) {
               
                console.error("Invalid JSON in options_inline for question:", question_obj.id, e);
                rawOptions = {};
            }

            question_obj.options = [];

            Object.entries(rawOptions).forEach(([key, optionData]) => {
                question_obj.options.push({
                    key: key,
                    value: optionData?.options?.en || key,
                    child_questions: optionData?.child_questions || ''
                });
            });

            if (question_obj.has_question_onchange) {
                // Unbind previous handler to avoid duplicate bindings
                $(document).off('change', '#question_' + question_obj.id);
                
                $(document).on('change', '#question_' + question_obj.id, function () {
                    $('.parent_' + question_obj.id).hide();
                    clear_div_values(question_obj.id);

                    const selectedOption = this.options[this.selectedIndex];
                    const childIds = selectedOption?.getAttribute('childquestionids');

                    if (childIds) {
                        childIds.split(',').forEach(id => {
                            $('#question_head_' + id).show();
                        });
                    }
                });
            }

            let dropdown = '<select class="form-select form-control" id="question_' + question_obj.id + '" name="answer[' + question_obj.id + ']">';

            question_obj.options.forEach(option => {
                const isSelected = answer == option.key ? 'selected' : '';
                dropdown += '<option childquestionids="' + option.child_questions + '" value="' + option.key + '" ' + isSelected + '>' + option.value + '</option>';

                // Show children if answer is pre-selected and has children
                if (answer == option.key && option.child_questions) {
                    setTimeout(() => {
                        $('.parent_' + question_obj.id).hide();
                        option.child_questions.split(',').forEach(id => {
                            $('#question_head_' + id).show();
                        });
                    }, 500);
                }
            });

            dropdown += '</select>';
            return dropdown;

        }
        else if(question_type == 'radio'){
            const rawOptions = JSON.parse(question_obj.options_inline);
                question_obj.options = [];

                Object.entries(rawOptions).forEach(([key, optionData]) => {
                    question_obj.options.push({
                        key: key,
                        value: optionData.options?.en || key,
                        child_questions: optionData.child_questions || ''
                    });
                });

                let radio = '<div>';
                radio += '<input type="hidden" name="extra_' + question_obj.id + '" value="' + question_obj.id + '" class="extra_field">';

                // Generate each radio input
                question_obj.options.forEach((option) => {
                    const isChecked = answer == option.key ? 'checked' : '';
                    radio += `<input class="form-radio answer_radio_${question_obj.id}" 
                                    childquestionids="${option.child_questions}" 
                                    type="radio" 
                                    value="${option.key}" 
                                    name="answer[${question_obj.id}]" 
                                    ${isChecked} />&nbsp;${option.value}&nbsp;&nbsp;&nbsp;`;

                    // Show child questions if pre-selected
                    if (isChecked && option.child_questions) {
                        setTimeout(() => {
                            $('.parent_' + question_obj.id).hide();
                            const a_question_ids = option.child_questions.split(',');
                            a_question_ids.forEach(id => {
                                $('#question_head_' + id).show();
                            });
                        }, 500);
                    }
                });

                radio += '</div>';

                // Bind onchange after rendering
                setTimeout(() => {
                    $(`.answer_radio_${question_obj.id}`).off('change').on('change', function () {
                        $('.parent_' + question_obj.id).hide();
                        clear_div_values(question_obj.id);

                        const ids = this.getAttribute('childquestionids');
                        if (ids) {
                            ids.split(',').forEach(id => {
                                $('#question_head_' + id).show();
                            });
                        }
                    });
                }, 10);

                return radio;
        }else if(question_type == 'checkbox'){
            const rawOptions = JSON.parse(question_obj.options_inline);
            question_obj.options = [];

            Object.entries(rawOptions).forEach(([key, optionData]) => {
                question_obj.options.push({
                    key: key,
                    value: optionData.options?.en || key,
                    child_questions: optionData.child_questions || ''
                });
            });
            check = '<div>';
            check += '<input type="hidden" name="extra_'+question_obj.id+'" value="'+question_obj.id+'" class="extra_field">';
            
            if( 'has_question_onchange' in question_obj){
                $(document).on('change', 'input[type=checkbox][id="answer_'+question_obj.id+'"]', function(){
                    // $('.parent_'+question_obj.id).hide();
                    a_question_ids = this.getAttribute('childquestionids').split(',')
                    
                    if(this.checked){
                        $.each(a_question_ids,function(key, options){
                            $('#question_head_'+options).show();
                        });
                    }else{
                        $.each(a_question_ids,function(key, options){
                            $('#question_head_'+options).hide();
                        });
                    }
                });
            }

            $.each(question_obj.options , function( key, options ){
                check += '<div class="form-check">'
                check += '<input class="form-check-input" childquestionids="'+options.child_questions+'" type="checkbox" value="'+options.key+'" name="answer['+question_obj.id+']['+key+']" id="answer_'+question_obj.id+'" '+(answer.includes(options.key) ? 'checked' : '')+'>'
                check += '<label class="form-check-label" for="answer_'+question_obj.id+'">'
                check += options.value
                check += '</label>'
                check += '</div>'
              
                if(answer==options.key && options.child_questions!=''|| answer.includes(options.key)){
                    setTimeout(()=>{
                        // $('.parent_'+question_obj.id).hide();
                        a_question_ids = options.child_questions.split(',')
                        $.each(a_question_ids,function(key, options){
                            $('#question_head_'+options).show();
                        });
                    }, 1000);
                }
            })

            check += '</div>'
            return check
        }else if(question_type == 'image'){
            // let html = '<span id="file_span_'+question_obj.id+'">'
            // html += '<input class="form-select form-control" type="file" id="file_'+question_obj.id+'" name="file" onchange="file_upload('+question_obj.id+')">'

            let html = '<span id="file_span_'+question_obj.id+'"><input type="hidden" id=question_'+question_obj.id+' name="answer['+question_obj.id+']" value="">';
            
            html += '<input class="form-select form-control" type="file" id="file_'+question_obj.id+'" name="file" onchange="file_upload('+question_obj.id+')">'
            if(answer!==''){
                html += '<a href="'+answer+'" target="_blank">Download</a>'   
            }
            html += '</span>'
            return html
        }else if(question_type == 'audio'){
            return '<span id="file_span_'+question_obj.id+'"><input class="form-select form-control" type="file" id="file_'+question_obj.id+'" name="file" onchange="file_upload('+question_obj.id+')"></span>'
        }else if(question_type == 'video'){
            return '<span id="file_span_'+question_obj.id+'"><input class="form-select form-control" type="file" id="file_'+question_obj.id+'" name="file" onchange="file_upload('+question_obj.id+')"></span>'
        }else if(question_type == 'datepicker'){
            return '<input class="form-select form-control" type="date" id=question_'+question_obj.id+' name="answer['+question_obj.id+']" value="'+answer+'">'
        }else{
            return answer;
        }
    }


    function save_form(form_id, form_type, activity_number,operation,formName,activityNumber){
       
        $('.error').html('')
        let formDataArray = $('#form_'+form_id).serializeArray();
     
        formDataArray.push(
            {name: 'country_id', value: countryId},
            {name: 'user_id', value: userId},
            {name: 'form_id', value: form_id},
            {name: 'farmer_id', value: farmerId},
            {name: 'form_type', value: form_type},
            {name: 'activity_number', value: activity_number},
            {name: 'escaltaionData', value:1},
            {name: 'latitude', value: latitude},
            {name: 'longitude', value: latitude}
        );
        
      
        var formData = serializeArrayToObject(formDataArray);
        console.log(formData);
        // let questions = JSON.parse(formData.questions)
        let questions = {};
        try {
            if (typeof formData.questions === "string") {
                // Clean common mistakes before parsing
                let cleanStr = formData.questions
                    .replace(/(\r\n|\n|\r)/gm, "")  // remove line breaks
                    .replace(/,\s*}/g, "}")         // remove trailing commas before }
                    .replace(/,\s*]/g, "]");        // remove trailing commas before ]

                questions = JSON.parse(cleanStr);
            } else {
                questions = formData.questions; // already an object/array
            }
        } catch (e) {
            // console.error("❌ Invalid JSON in formData.questions:", formData.questions, e);
            questions = {}; // fallback to empty object
        }

        delete formData['questions']

        for(obj in formData.answer){
          
            if (typeof formData.answer[obj] === 'object' && formData.answer[obj] !== null) {
                formData.answer[obj] = Object.entries(formData.answer[obj]).map(([key, value]) => value).join(',');
            }
        }
        
        if(formData.hasOwnProperty("answer")){
            $('#form_'+form_id+' .extra_field').each(function() {
                if(!formData.answer.hasOwnProperty($(this).val())){
                    if(add_key_to_answer($(this).val(), questions, formData.answer)){
                        formData.answer[$(this).val()] = ''
                    }
                }

                delete formData['extra_'+$(this).val()]
            });
            if (formData.hasOwnProperty("answer")) {
                Object.keys(formData.answer).forEach(function(qid) {
                    const $questionDiv = $('#question_head_' + qid);
                    if ($questionDiv.length && $questionDiv.is(':hidden')) {
                        delete formData.answer[qid];
                    }
                });
            }

        }
        
        
        $.ajax({
            headers: { "Authorization": 'Bearer ' + token },
            url: '{{config('custom.a_countries.'.$countryId)}}/api/form_save_form_data_admin',
            type: 'POST',
            data: formData,
            success: function(response) {
               
                let $form = $('#'+operation+'_form1');
                $form.append('<input type="hidden" name="formName" value="' + formName + '">');
                $form.append('<input type="hidden" name="activity_number" value="' + activityNumber + '">');
                $form.submit();
                alert('Form saved successfully')
                // let url = window.location.pathname;
                // console.log(url);
                // url += '?question_type='+questionType+'&tab='+tab
                // window.location.href = url;
            },
            error: function(e) {
                let message = e.responseJSON.message
                if(typeof message == 'string'){
                    $('#form_error_'+form_id).html(message)
                }else{
                    for (let key in message.errors) {
                        if(key=='activity'){
                            $('#form_error_'+form_id).html(message.errors[key])
                        }else{
                            $('#error_'+key).html(message.errors[key])
                        }
                    }
                }
            }
        });

    }

    


    function file_upload(question_id){
        var fileInput = $('#file_'+question_id)[0].files[0];
        if(fileInput){
            var formData = new FormData();
            formData.append('file', fileInput);

            $.ajax({
                url: file_upload_url, // Change this to your server endpoint
                type: 'POST',
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', 'Bearer randomtoken');
                },
                data: formData,
                processData: false,
                contentType: false,
                success: function(response){
                    alert(response.message);
                    if(response.error==0){
                        $('#file_span_'+question_id).append('<input type="hidden" id=question_'+question_id+' name="answer['+question_id+']" value="'+response.data.filename+'">')
                    }
                },
                error: function(xhr, status, error){
                    console.error("Error uploading file: " + error);
                }
            });
        }
    } 

</script>
@endsection