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

@section('content')

<section>
    <div class="col-md-1"></div>
    <div class="content-body">
        <section id="multiple-column-form">
            <div class="row justify-content-center">
                <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">
                                    <ul id="tab_outer" class="row dashboard-tab"></ul>
                                </div>
                                <!-- <div class="col-sm-1">
                                    <select class="form-select form-control" id="question_type" name="question_type" onchange="get_farmer_data()">
                                        <option value="BASELINE">BASELINE</option>
                                        <option value="ENDLINE">ENDLINE</option>
                                    </select>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <div id="form_outer"></div>
    
    <div id="myModal" class="modal fade" role="dialog">
        <div class="modal-dialog">

            <!-- Modal content-->
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Add Cycle</h4>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body" id="add_cycle_html">
                    <p>Form loading...</p>
                </div>
                <!-- <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div> -->
            </div>

        </div>
    </div>
<section>

<script>
    const country_id = {{$country_id}};
    const farmer_id = {{$farmer_id}};
    const program_id = {{$program_id}};
    const brand_id = {{$brand_id}};
    const file_upload_url = '{{config('custom.a_countries.'.$country_id)}}/api/file_upload';

    var token = '{{csrf_token()}}';
    var input = {};

    var farmerData = {};
    var selectedFarmerData = {};
    var currentTabsForms = []
    var tab = "{{isset($_GET['tab']) ? $_GET['tab'] : ''}}"
    var question_type1 = "{{isset($_GET['question_type']) ? $_GET['question_type'] : 'ENDLINE'}}"
  
    function get_farmer_data(){
        // let question_type = $('#question_type').val();
        var input = {
            "country_id": country_id,
            "program_id": program_id,
            "brand_id": brand_id,
            "farmer_ids": [farmer_id],
            "question_type": question_type1
        };

        $.ajax({
            type:"POST",
            url:"{{config('custom.a_countries.'.$country_id)}}/api/form_get_tab_forms_data_admin",
            data: JSON.stringify(input),
            contentType: "application/json; charset=utf-8",
            headers: { "Authorization": 'Bearer ' + token },
            complete:function(response){
                var obj = jQuery.parseJSON( response.responseText );
                if(obj.error==0){
                    farmerData = obj.data
                    $.each( obj.data.farmers, function( key, singleObject ) {
                        if(farmer_id==singleObject.farmer_id){
                            selectedFarmerData = singleObject
                        }
                    });
                    if(obj.data.tabs.length > 0){
                        html = '';
                        $.each( obj.data.tabs, function( key, singleObject ) {
                            html += '<li class="col-xs-1 ml-1"  style="list-style: none;"><a style="font-size:15px" class="btn tabs-all" id="tab_'+singleObject.tab_id+'" href="javascript:void(0)" onclick="get_forms('+key+')">'+singleObject.tab_title+'</a></li>'
                        });
                    }else{
                        html = '<h2>No questions available for '+question_type1+'</h2>';
                    }
                    $("#tab_outer").html(html);

                    if(obj.data.tabs.length > 0){
                        if(tab!==''){
                            get_forms(tab)
                        }else{
                            get_forms(0)
                        }
                    }
                }
            }  
        });
    }
    get_farmer_data()

    function get_forms(key){
        tab = key;
        $('.tabs-all').removeClass('active');
        $('#tab_'+farmerData.tabs[key].tab_id).addClass('active')
        currentTabsForms = farmerData.tabs[key].forms_data
        render_form(farmerData.tabs[key].forms_data)
    }

    function render_form(forms_data){
        let formHtml = ''
        for(let i=0; i<forms_data.length; i++){
            formHtml += '<div class="content-body">'
            formHtml += '<section id="multiple-column-form">'
            formHtml += '<div class="row justify-content-center">'
            formHtml += '<div class="col-sm-12">'
            formHtml += '<div class="card m-1" style="border-radius:15px">'
            formHtml += '<div class="card-body custom_active" style="margin-bottom: -10px">'
            formHtml += '<h4>'+ forms_data[i].form_title +'</h4>'
            if((forms_data[i].form_type==0)){
                let questions = get_questions_html(forms_data[i])
                formHtml += questions
            }else{
                questionsData = get_questions_data_html(forms_data[i])
                formHtml += questionsData
            }
            formHtml += '</div>'
            formHtml += '</div>'
            formHtml += '</div>'
            formHtml += '</div>'
            formHtml += '</section>'
            formHtml += '</div>'
        }
        $("#form_outer").html(formHtml);
    }

    function get_questions_data_html(forms_data){
        let farmerActivites = []
        for(let i=0; i<selectedFarmerData.forms.length; i++){
            if(selectedFarmerData.forms[i].form_id==forms_data.form_id){
                farmerActivites = selectedFarmerData.forms[i].activities
            }
        }

        let questions = forms_data.questions
        let html = '<div class="mb-1 text-right"><input type="button" value="Add Cycle" class="btn btn-primary waves-effect waves-float waves-light" onclick="add_cycle('+forms_data.form_id+','+(farmerActivites.length+1)+')"></div>'
        html += '<div class="row">'
        html += '<div class="col-md-12 table-responsive">'
        html += '<table id="form_table_'+forms_data.form_id+'" class="table table-striped table-bordered">'
        html += '<tr>'
        for(let i=0; i<questions.length; i++){
            html += '<th>'+questions[i].question_text+'</th>'
        }
        html += '<th>Action</th>'
        html += '</tr>'

        for(let j=0; j<farmerActivites.length; j++){
            html += '<tr>'
            for(let i=0; i<questions.length; i++){
                html += '<td>'+farmerActivites[j][questions[i].question_id]+'</td>'
            }
            html += '<td><a href="javascript:void(0)" onclick="add_cycle('+forms_data.form_id+','+farmerActivites[j].activity_number+')" title="Edit"><i class="fa fa-edit"></i></a>&nbsp;<a href="javascript:void(0)" onclick="delete_cycle('+forms_data.form_id+','+farmerActivites[j].activity_number+')" title="Delete"><i class="fa fa-trash"></i></a></td>'
            html += '</tr>'
        }

        html += '</table>'
        html += '</div>'
        html += '</div>'
        return html;
    }

    function delete_cycle(form_id,activity_number){
        let result = confirm("Are sure you want to delete this activity?")
        if(!result){
            return false
        }
        $.ajax({
            headers: { "Authorization": 'Bearer ' + token },
            url: '{{config('custom.a_countries.'.$country_id)}}/api/delete_form_activity_admin',
            type: 'POST',
            data: {country_id:country_id,form_id:form_id,farmer_id:farmer_id,activity_number:activity_number},
            success: function(response) {
                alert('Activity deleted successfully')
                let url = window.location.pathname;
                url += '?question_type='+question_type1+'&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) {
                        $('#error_'+key).html(message[key])
                    }
                }
            }
        });
    }

    function add_cycle(form_id, activity_number=0){
        $('#myModal').modal('show')
        let currentFormsData = {}
        
        for(let i=0; i<currentTabsForms.length; i++){
            if(form_id==currentTabsForms[i].form_id){
                currentFormsData = currentTabsForms[i]
                break;
            }
        }
        
        $('#add_cycle_html').html(get_questions_html(currentFormsData, activity_number))
    }

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

    function get_questions_html(forms_data, activity_number = 0){
        let farmerActivites = []
        for(let i=0; i<selectedFarmerData.forms.length; i++){
            if(selectedFarmerData.forms[i].form_id==forms_data.form_id){
                farmerActivites = selectedFarmerData.forms[i].activities
            }
        }

        let activityIndex = 0
        for(let j=0; j<farmerActivites.length; j++){
            if(activity_number==farmerActivites[j].activity_number){
                activityIndex = j
            } 
        }
        
        let questions = forms_data.questions
        
        html = '<div class="row">'
        html += '<div class="col-md-12">'
        html += '<form id="form_'+forms_data.form_id+'">'
        html += '<div class="error" id="form_error_'+forms_data.form_id+'"></div>'
        
        $.each(questions , function( key, question_obj ){
            let answer = farmerActivites.length > 0 ? farmerActivites[activityIndex][question_obj.question_id] : ''
            
            if(forms_data.form_type==1 && activity_number > farmerActivites.length){
                answer = ''
            }
            
            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.question_text+'</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('+forms_data.form_id+','+forms_data.form_type+','+activity_number+')" 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 save_form(form_id, form_type, activity_number){
        $('.error').html('')
        let formDataArray = $('#form_'+form_id).serializeArray();
        formDataArray.push(
            {name: 'country_id', value: country_id},
            {name: 'form_id', value: form_id},
            {name: 'farmer_id', value: farmer_id},
            {name: 'form_type', value: form_type},
            {name: 'activity_number', value: activity_number},
            {name: 'latitude', value: 0},
            {name: 'longitude', value: 0}
        );
        
        var formData = serializeArrayToObject(formDataArray);
        
        let questions = JSON.parse(formData.questions)
        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()]
            });
        }
        
        $.ajax({
            headers: { "Authorization": 'Bearer ' + token },
            url: '{{config('custom.a_countries.'.$country_id)}}/api/form_save_form_data_admin',
            type: 'POST',
            data: formData,
            success: function(response) {
                alert('Form saved successfully')
                let url = window.location.pathname;
                url += '?question_type='+question_type1+'&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])
                        }
                    }
                }
            }
        });

        // $('#form_'+form_id).ajaxSubmit({
        //     headers: { "Authorization": 'Bearer ' + token }, 
        //     url: '/api/form_save_form_data_admin', 
        //     type: 'post',
        //     // data:{'country_id':country_id, 'form_id':form_id, 'farmer_id':farmer_id, 'form_type':form_type, 'activity_number':activity_number, 'latitude':0, 'longitude':0},
        //     data: formData,
        //     success: function(){
        //         alert('Form saved successfully')
        //         let url = window.location.pathname;
        //         url += '?question_type='+question_type1+'&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) {
        //                 $('#error_'+key).html(message[key])
        //             }
        //         }
        //     }
        // });
    }

    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'){
            if( 'has_question_onchange' in question_obj){
                $(document).on('change', '#question_'+question_obj.id, function(){
                    $('.parent_'+question_obj.id).hide();
                    clear_div_values(question_obj.id)
                    a_question_ids = this.options[this.selectedIndex].getAttribute('childquestionids').split(',')
                    $.each(a_question_ids,function(key, options){
                        $('#question_head_'+options).show();
                    });
                });
            }
            dropdown = '<select class="form-select form-control" id=question_'+question_obj.id+' name="answer['+question_obj.id+']">'
            $.each(question_obj.options , function( key, options ){
                dropdown += '<option childquestionids="'+options.child_questions+'" value="'+options.key+'" '+(answer==options.key ? 'selected' : '')+' >'+options.value+'</option>'
                
                if(answer==options.key && options.child_questions!=''){
                    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);
                }
            })
            dropdown += '</select>'
            return dropdown
        }else if(question_type == 'radio'){
            radio = '<div>';
            radio += '<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=radio][name="answer['+question_obj.id+']"]', function(){
                    $('.parent_'+question_obj.id).hide();
                    clear_div_values(question_obj.id)

                    a_question_ids = this.getAttribute('childquestionids').split(',')
                    $.each(a_question_ids,function(key, options){
                        $('#question_head_'+options).show();
                    });
                });
            }
            
            $.each(question_obj.options , function( key, options ){
                radio += '<input class="form-radio" childquestionids="'+options.child_questions+'" type="radio" value="'+options.key+'" name="answer['+question_obj.id+']" '+(answer==options.key ? 'checked' : '')+' />&nbsp;'+options.value+'&nbsp;&nbsp;&nbsp;'

                if(answer==options.key && options.child_questions!=''){
                    setTimeout(()=>{
                        $('.parent_'+question_obj.id).hide();
                        if(options.child_questions){
                            a_question_ids = options.child_questions.split(',')
                            $.each(a_question_ids,function(key, options){
                                $('#question_head_'+options).show();
                            });
                        }
                    }, 1000);
                }
            })
                radio += '</div>'
            return radio
        }else if(question_type == 'checkbox'){
            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+')">'
            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 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