@extends('layout.index')
@section('title', 'Dashboard')
<style>
    .form-control {
        font-family: '&#xF002;', 'FontAwesome', 'Arial', sans-serif;
    }
    .btn_remove_chart{
        position: absolute;
        right: 5px;
        top: 5px;
    }
</style>
<!-- Dashboard Ecommerce start -->
@section('content')
    
    <section>
        <div class="row">
            <div class="col-md-12" id="chart_outer">
               
            </div>
            <div class="col-md-12  row d-flex justify-content-end">
                <div class="text-right">
                    
                        <p><button type="button" class="btn btn-outline-danger" onclick="add_chart()">
                                <i class="fa fa-plus"  aria-hidden="true"></i>Add Chart</button></p>
                   
                </div>
            </div>
           
    </section>
    {{-- <script src="https://code.highcharts.com/highcharts.js"></script>
    <script src="https://code.highcharts.com/modules/sunburst.js"></script>
    <script src="https://code.highcharts.com/modules/exporting.js"></script>
    <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <script src="https://code.highcharts.com/modules/accessibility.js"></script> --}}
    <script src={{ asset('app-assets/js/scripts/charts/highcharts.js') }}></script>
    <script src={{ asset('app-assets/js/scripts/charts/sunburst.js') }}></script>
    <script src={{ asset('app-assets/js/scripts/charts/exporting.js') }}></script>
    <script src={{ asset('app-assets/js/scripts/charts/export-data.js') }}></script>
    <script src={{ asset('app-assets/js/scripts/charts/accessibility.js') }}></script>
    <script type="text/javascript">
        var card_height = window.innerHeight / 2;
        if(card_height < 450){
            card_height = 450;
        }
        var chart_height = card_height - 100;
        var a_country = [];
        var a_states = [];
        var a_season = [];
        var a_districts = [];
        var a_block = [];
        var a_village = [];
        var a_kpi = [];
        var a_filter = [];
        var a_y_axis = [];
        var current_season=;
        var a_land_area=;
        var a_currency=;
        var a_cost_kpi_id=;
        var userdata = [];
        var superadmin=0;
      
        var chart_data='';
        var chart_number = 1;
        $(document).ready(function() {

            if (a_country.length === 0) {
                $('#chart_outer').html('<div class="card"><div class="card-body"><h2 class="text-center">No Country Access</h2></div></div>');
            } else {
                add_chart();
                get_state(1);
                get_district(1);
                get_block(1);
                get_village(1);
            }

        });
        var charts1=[];
        function add_chart() {
            // console.log(j)
            j = chart_number;
            // $('.main_card_' + chart1 + '').addClass('overflow-auto');
            // $('.main_container_' + chart1 + '').addClass('m-1');
            // $('.main_card_' + chart1 + '').css('height', '300px');

            var country = '';
            if (a_country != []) {
                $.each(a_country, function(key, country_obj) {
                    country += '<option value=' + country_obj.id + ' >' + country_obj.country_name + '</option>'
                })
            }

            var state = '';
            if (a_states != []) {
                $.each(a_states, function(key, state_obj) {
                    state += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' >' + state_obj.state_name + '</option>'
                })
            }

            var district = '';
            if (a_districts != []) {
                $.each(a_districts, function(key, district_obj) {
                    district += '<option value=' + district_obj.id +  ' country_id='+district_obj.country_id+'>' + district_obj.district_name + '</option>'
                })
            }

            var block = '';
            if (a_block != []) {
                $.each(a_block, function(key, block_obj) {
                    block += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name + '</option>'
                })
            }

            var village = '';
            if (a_village != []) {
                $.each(a_village, function(key, village_obj) {
                    village += '<option value=' + village_obj.id + '  country_id='+village_obj.country_id+' >' + village_obj.village_name + '</option>'
                })
            }

            var x_filter = '';
            if (a_filter != []) {
                $.each(a_filter, function(key, x_filter_obj) {
                    x_filter += '<option value=' + x_filter_obj.id + ' >' + x_filter_obj.filter_name + '</option>'
                })
            }

            var currency_dropdown='';
            if (a_currency != []) {
                $.each(a_currency, function(key, currency_obj) {
                    currency_dropdown += '<option value=' + key + ' >' + currency_obj + '</option>'
                })
            }
            
            var kpi = '';
            if (a_kpi != []) {
                $.each(a_kpi, function(key, kpi_obj) {
                    kpi += '<option value=' + kpi_obj.id + ' >' + kpi_obj.name + '</option>'
                })
            }
            // console.log(a_season)
             var seasons='';
             if(a_season !=[])
             {
                $.each(a_season,function(key,season_obj){
                    selected = '';
                    if(season_obj.season==current_season)
                    {
                        selected='selected'
                    }
                    seasons += '<option value=' + season_obj.season + ' '+selected+'>' + season_obj.season + '</option>'
                })
             }
             var land_area_dropdown = '';
             if(a_land_area != []){
                $.each(a_land_area,function(key,obj){
                    selected = '';
                    
                    land_area_dropdown += '<option value="'+key+'" >' + obj+ '</option>'
                })
             }
            remove_btn_html = '';
            if(j> 1){
                remove_btn_html = get_remove_button(j);
            }
          
            var result = `<div class="row " >
            <div class="col-md-3 ">
                <div class="card main_card_` + j + `" style="overflow-y:scroll; overflow-x: hidden;border-radius: 15px; height:`+card_height+`px">
                    <div class="container main_container_` + j + ` my-1 ">
                        <input type='hidden' class="hidden `+j+`" name="hidden_data[]">
                        <h4 class="text-primary">Chart `+j+` Filter</h4>  
                        `+remove_btn_html+`
                        <hr/>
                        <div class="row">
                            <div class="col-md-6 col-12 ">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Seasons</label>
                                    <select class=" form-control form-select text-primary" id="chart_` + j + `_season"
                                        name='season'  onchange="change_season(` + j + `);">
                                        <option value='0'>All Seasons</option>
                                            `+seasons+`
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-12 ">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Countries</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_country" name='country[]'
                                        onchange="get_state(` + j + `);get_village(` + j + `);get_block(` + j + `); get_district(` + j + `);"> 
                                        `+country+`
                                    </select>
                                    <h5><small class="text-danger" id="chart_` + j + `_country_err"></small></h5>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 ">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">States</label>
                                    <select class=" form-control form-select text-primary" id="chart_` + j + `_state"
                                        name='state' onchange="get_district(` + j + `); get_village(` + j + `);get_block(` + j + `);">
                                        <option value='0'>All States</option>
                                        ` + state + `
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 ">
                                <div class="form-group text-primary">
                                    <label class="form-label" for="validationTooltip01">Districts</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_district" name='district'
                                        onchange="get_block(` + j + `);get_village(` + j + `); ">
                                        <option value='0'>All Districts</option>
                                        ` + district + `
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 col-12" style="display:none;">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Blocks</label>
                                    <select class=" form-control form-select text-primary" id="chart_` + j + `_block"
                                        name='block' onchange="get_village(` + j + `)">
                                        <option value='0'>All Blocks</option>
                                        ` + block + `
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-12" style="display:none;">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Villages</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_village" name='village'>
                                        <option value='0'>All Villages</option>
                                        ` + village + `
                                    </select>
                                </div>
                            </div>

                            <div class="col-md-6 col-12 ">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Brands</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_brand_id" name='brand'>
                                        <option value='0'>All Brands</option>

                                        
                                    </select>
                                    <h5><small class="text-danger"
                                            id="chart_` + j + `_brand_err"></small></h5>
                                </div>
                            </div>
                            <div class="col-md-6 col-12 ">
                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Programmes</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_program_id" name='program'>
                                        
                                    </select>
                                    <h5><small class="text-danger" id="chart_` + j + `_program_err"></small></h5>
                                </div>
                            </div>

                            <div class="col-md-6 col-12 ">

                                <div class="form-group">
                                    <label class="form-label text-primary" for="validationTooltip01">Project/Control</label>
                                    <select class=" form-control form-select text-primary"
                                        id="chart_` + j + `_project_control" name='project_control' ">
                                        
                                    </select>
                                    <h5><small class="text-danger" id="chart_` + j + `_country_err"></small></h5>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-md-9 ">
                <div class="card main_card_` + j + `" style=" border-radius: 15px; height:`+card_height+`px">
                    <div class="container" style="margin-top: 10px">
                        <div class="row">
                           
                            <div class="col-md-2 d-flex align-items-center">
                                <div class="form-group w-100 mb-0">
                                    <label class="mb-0 text-primary" for="x-axis"> X Axis </label>
                            
                                    <select class="text-primary form-control form-select" id="chart_` + j + `_filter" name='filter[]'>
                                                                                                                    </select>                                            
                                </div>
                            </div>
                            <div class="col-md-2 d-flex align-items-center">
                                
                                <div class="form-group mb-0">
                                    <label class="mb-0 text-primary" for="x-axis"> KPI  <small class="text-danger" id="chart_` + j + `_kpi_err"></small> </label>
                                    <select class="text-primary form-control form-select"
                                        id="chart_` + j + `_kpi" name='kpi[]'
                                        onchange="return change_que(` + j + `)">
                                        <option value='0'>Select KPI</option>
                                        
                                    </select>
                                </div>
                            </div>
                                <div class="col-md-2 d-flex align-items-center" id="div_questions_exists_` + j +`" style="display:none !important">
                                        <div class="form-group mb-0">
                                            <label class="mb-0 text-primary" for="y-axis"> Y Axis </label>
                                            <select  class="text-primary form-control form-select"
                                                id="chart_` + j + `_y_axis_filter"
                                                name='y_filter[]'>
                                                <option value='0'>Select KPI first</option>
                                                ` + x_filter + `  
                                            </select>
                                        </div>
                                </div>
                                <div class="col-sm-2" id="div_land_area_exists_` + j +`" style="display:none !important">
                                    <div class=" mb-0form-group">
                                        <label class="mb-0 text-primary" for="y-axis">Land Area</label>
                                        <select class="text-primary mb-0 form-control form-select"
                                            id="chart_` + j + `_land_unit"
                                            name='unit[]'>
                                            `+land_area_dropdown+`
                                        </select>
                                        
                                    </div>
                                </div>
                                 <div class="col-sm-2" id="div_cost_exists_` + j +`" style="display:none !important">
                                    <div class=" mb-0form-group">
                                        <label class="mb-0 text-primary" for="y-axis">Currency</label>
                                        <select class="text-primary mb-0 form-control form-select"
                                            id="chart_` + j + `_currency"
                                            name='currency[]'>
                                            `+currency_dropdown+`
                                        </select>
                                        
                                    </div>
                                </div>
                                <div id='loader_outer'>
                                    <div id='loader' ></div>
                                </div>
                                <div class="col-md-1">
                                        <button type="button" style="margin-top: 21px;max-width:140px" class="form-control btn btn-primary "  onclick=" drawchart(` + j + `);" title="Search"><i class="fa fa-search"></i></button>
                                </div>
                                <div class="col-md-1 dropdown" id="download_chart_outer_`+j+`" style="position: absolute; right: 0px; top: 30px;display:none">
                                    <button class="btn  dropdown-toggle" type="button" id="chart_`+j+`_download" style="background-color: #D15E9C; color:white" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <i class="fa fa-download "></i>
                                    </button>
                                    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                                       
                                        <!--<a class="dropdown-item" href="#" onclick=" get_pdf(` + j + `);"><b>Export PDF</b></a>-->
                                        <a class="dropdown-item" href="#" onclick="get_jpeg(` + j + `)"><b>Export JPEG</b></a>
                                        <a class="dropdown-item" href="#" onclick="get_excel(` + j + `)"><b>Export CSV</b></a>

                                    </div>
                                </div>
                        </div>
                        <div class=" chart_container` + j + `" ></div>          
                    </div>
                </div>
            </div>
            `;
            $("#chart_outer").append(result);
            //$('#chart_'+chart_number+'_district').select2();
            chart_number++;
        }
        function get_remove_button(chart_number){
            return `<div class="btn_remove_chart">
                            <i class="fa fa-trash btn btn-danger float-lg-right" aria-hidden="true" onclick="return remove_card(`+chart_number+`)"  ></i>
                        </div>`
        }

        function get_state(chart_number) {
            // var val='chart_'+j+'_country';
            var country_id = $('#chart_' + chart_number + '_country').val();

            s_states_options = '<option value="0" >All States</option>'
            $.each(a_states, function(key, state_obj) {
                // console.log(state_obj)
                if (country_id != 0 && state_obj.country_id == country_id) {
                    s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' >' + state_obj.state_name + '</option>'
                } else if (country_id == 0) {
                    s_states_options += '<option value=' + state_obj.id + ' country_id='+state_obj.country_id+' >' + state_obj.state_name + '</option>'
                }
            })
            $('#chart_' + chart_number + '_state').html(s_states_options);
        }

        function get_district(chart_number) {
            var country_id = $('#chart_' + chart_number + '_country').val();
            var state_id = parseInt($('#chart_' + chart_number + '_state').val());
            // alert(state_id);
            var selectedCountry = null;
            if(state_id > 0){
                var country_id = $('#chart_' + chart_number + '_state option:selected').attr('country_id');
                $.each(a_states, function(key, state_obj) {
                // console.log(state_obj)
                    if (state_obj.id == state_id && state_obj.country_id == country_id) {
                        selectedCountry = state_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }
            // console.log(selectedCountry)
            s_district_options = '<option value="0" >All Districts</option>'
            $.each(a_districts, function(key, district_obj) {
                // console.log(district_obj)

                if(country_id != 0 || state_id != 0){
                  
                    if(state_id != 0){
                        if(district_obj.country_id == selectedCountry && district_obj.state_id == state_id){
                            s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' >' + district_obj.district_name +
                        '</option>'
                        }
                    }else if(country_id != 0){
                        if( district_obj.country_id == country_id){
                            s_district_options += '<option value=' + district_obj.id + ' country_id='+district_obj.country_id+' >' + district_obj.district_name +
                        '</option>'
                        }
                    }
                }else{
                    s_district_options += '<option value=' + district_obj.id + '  country_id='+district_obj.country_id+'>' + district_obj.district_name +
                        '</option>'
                }
            })
            $('#chart_' + chart_number + '_district').html(s_district_options);
        }
   
        function get_block(chart_number) {
            var country_id = $('#chart_' + chart_number + '_country').val();
            var state_id = $('#chart_' + chart_number + '_state').val();
            var district_id = $('#chart_' + chart_number + '_district').val();

                    var selectedCountry = null;
            if(district_id > 0){
                var country_id = $('#chart_' + chart_number + '_district option:selected').attr('country_id');        
                $.each(a_districts, function(key, district_obj) {
                    if (district_obj.id == district_id && district_obj.country_id == country_id) {
                        selectedCountry = district_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }

            if(state_id > 0){
                var country_id = $('#chart_' + chart_number + '_state option:selected').attr('country_id');
                $.each(a_states, function(key, state_obj) {
                    if (state_obj.id == state_id && state_obj.country_id == country_id) {
                        selectedCountry = state_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }

            s_block_options = '<option value="0" >All Blocks</option>'
            $.each(a_block, function(key, block_obj) {

                if(country_id != 0 || state_id != 0 || district_id != 0){
                  if(district_id != 0){
                    if(block_obj.country_id == selectedCountry && block_obj.district_id == district_id ){
                          s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                      '</option>'
                      }
                  }else if(state_id != 0){
                   
                    if(block_obj.country_id == selectedCountry && block_obj.state_id == state_id ){
                          s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                      '</option>'
                      }
                  }else if(country_id != 0){
                      if( block_obj.country_id == country_id){
                       
                          s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' >' + block_obj.block_name +
                      '</option>'
                      }
                  }
              }else{
                  s_block_options += '<option value=' + block_obj.id + '  country_id='+block_obj.country_id+'>' + block_obj.block_name +
                      '</option>'
              }
                
            })
            $('#chart_' + chart_number + '_block').html(s_block_options);

        }

        function get_village(chart_number) {
            var country_id = $('#chart_' + chart_number + '_country').val();
            var state_id = $('#chart_' + chart_number + '_state').val();
            var district_id = $('#chart_' + chart_number + '_district').val();
            var block_id = $('#chart_' + chart_number + '_block').val();

            var selectedCountry = null;
            if(district_id > 0){
                var country_id = $('#chart_' + chart_number + '_district option:selected').attr('country_id');        
                $.each(a_districts, function(key, district_obj) {
                    if (district_obj.id == district_id && district_obj.country_id == country_id) {
                        selectedCountry = district_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }

            if(state_id > 0){
                var country_id = $('#chart_' + chart_number + '_state option:selected').attr('country_id');
                $.each(a_states, function(key, state_obj) {
                    if (state_obj.id == state_id && state_obj.country_id == country_id) {
                        selectedCountry = state_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }

            if(block_id > 0){
                var country_id = $('#chart_' + chart_number + '_block option:selected').attr('country_id');

                $.each(a_block, function(key, block_obj) {
                    if (block_obj.id == block_id && block_obj.country_id == country_id) {
                        selectedCountry = block_obj.country_id;
                        return false; // Exit the loop early since we found the district
                    }
                });
            }    
            // console.log(selectedCountry)
            s_village_options = '<option value="0" >All Villages</option>'
            $.each(a_village, function(key, village_obj) {

                if(country_id != 0 || state_id != 0 || district_id != 0 || block_id !=0){
                    if(block_id != 0){
                        if(village_obj.country_id == selectedCountry && village_obj.block_id == block_id ){
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                        '</option>'
                        }
                    }else if(district_id != 0){
                        if(village_obj.country_id == selectedCountry && village_obj.district_id == district_id ){
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                        '</option>'
                        }
                    }else if(state_id != 0){
                    
                        if(village_obj.country_id == selectedCountry && village_obj.state_id == state_id ){
                            s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                        '</option>'
                        }
                    }else if(country_id != 0){
                      if( village_obj.country_id == country_id){
                        
                        s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                        '</option>'
                      }
                  }
              }else{
                    s_village_options += '<option value=' + village_obj.id + ' country_id='+village_obj.country_id+'>' + village_obj.village_name +
                        '</option>'
              }
                
            })
            $('#chart_' + chart_number + '_village').html(s_village_options);

        }

        function change_que(chart_number) {
            var kpi_id = $('#chart_' + chart_number + '_kpi').val();
            var season = $('#chart_' + chart_number + '_season').val();

            var is_question = $('#chart_' + chart_number + '_kpi option:selected').attr('is_questions');
            var is_land_area = $('#chart_' + chart_number + '_kpi option:selected').attr('is_land_area');
            if(is_question == 1){
                $('#div_questions_exists_'+chart_number).show();
            }else{
                $('#div_questions_exists_'+chart_number).attr('style', 'display:none !important');
            }
           
            if ($.inArray(kpi_id, a_cost_kpi_id) !== -1 && season !=0) {              
                $('#div_cost_exists_' + chart_number).show();
            } else {
                
                $('#div_cost_exists_' + chart_number).attr('style', 'display:none !important');
            }

            if(is_land_area == 1){
                $('#div_land_area_exists_'+chart_number).show();
            }else{
                $('#div_land_area_exists_'+chart_number).attr('style', 'display:none !important');
            }
            y_axis_option = '<option value="0" >All</option>'
            $.each(a_y_axis, function(key, y_axis_obj) {

                if (kpi_id == y_axis_obj.kpi_id) {
                    y_axis_option += '<option value=' + y_axis_obj.id + ' >' +y_axis_obj.form_name+'(' + y_axis_obj.name_description +')'
                        '</option>'
                } else if (kpi_id == 0) {
                    y_axis_option += '<option value=' + y_axis_obj.id + ' >' +y_axis_obj.form_name+ '('+ y_axis_obj.name_description +')'
                        '</option>'
                }
            })
            $('#chart_' + chart_number + '_y_axis_filter').html(y_axis_option);

        }
       
        function change_season(chart_number){
            var season = $('#chart_' + chart_number + '_season').val();
            if (season ==0) {
                $('#div_cost_exists_' + chart_number).attr('style', 'display:none !important');
            }else{
                $('#div_cost_exists_' + chart_number).show();
            }
        }
        var charts = [];
        function drawchart(chart_number) {
            is_valid = chartvalidation(chart_number);
            var season = $('#chart_' + chart_number + '_season').val();
            var country_id = $('#chart_' + chart_number + '_country').val();
            var state_id = $('#chart_' + chart_number + '_state').val();
            var district_id = $('#chart_' + chart_number + '_district').val();
            var block_id = $('#chart_' + chart_number + '_block').val();
            var village_id = $('#chart_' + chart_number + '_village').val();
            var brand_id = $('#chart_' + chart_number + '_brand_id').val();
            var project_control = $('#chart_' + chart_number + '_project_control').val();
            var x_axis = $('#chart_' + chart_number + '_filter').val();
            var kpi_id = $('#chart_' + chart_number + '_kpi').val();
            var kpi_has_fields = $('#chart_' + chart_number + '_kpi option:selected').attr('is_questions');
            var program_id = $('#chart_' + chart_number + '_program_id').val();
            var y_axis = $('#chart_' + chart_number + '_y_axis_filter').val();
            var currency = $('#chart_' + chart_number + '_currency').val();
            var land_unit = $('#chart_' + chart_number + '_land_unit').val();
            
            if (is_valid && country_id !=null) {
                $('#loader_outer').show();
                $.ajax({
                    url: "{{ url('api/get_comparison_chart_data') }}",
                    type: 'post',
                    data: {
                        _token: "{{ csrf_token() }}",
                        'season': season,
                        'country_id': country_id,
                        'state_id':state_id,
                        'district_id':district_id,
                        'block_id':block_id,
                        'village_id':village_id,
                        'brand_id':brand_id,
                        'project_control':project_control,
                        'xaxis': x_axis,
                        'kpi_id': kpi_id,
                        'program_id': program_id,
                        'yaxis_id': y_axis,
                        'kpi_has_fields':kpi_has_fields,
                        'land_unit':land_unit,
                        'currency':currency,
                        'userdata':userdata,
                        'superadmin':superadmin
                    },
                    success: function(result) {
                        has_sub_question = parseInt($('#chart_'+chart_number+'_kpi option:selected').attr('is_questions'));
                        if(has_sub_question){
                            if(parseInt($('#chart_'+chart_number+'_y_axis_filter option:selected').val()) == 0){
                                y_axis_lable = $('#chart_'+chart_number+'_kpi option:selected').text();
                            }else{
                                y_axis_lable = $('#chart_'+chart_number+'_y_axis_filter option:selected').text();
                            }
                        }  else{
                            y_axis_lable = $('#chart_'+chart_number+'_kpi option:selected').text();
                        }
                        // var series1 = result.data.series1 || [];
                        // console.log(series1)
                        // //var series2 = result.data.series2;
                        // var labels = result.data.labels || [];
                        // console.log(result.data.series1)
                        // console.log(result.data.labels)
                        var series1 = []
                        var labels = []
                        for(let i=0;i<result.data.series1.length;i++){
                            if(result.data.series1[i]!=0){
                                series1.push(result.data.series1[i])
                                labels.push(result.data.labels[i])
                            }
                        }
                        // console.log(series1)
                        // console.log(labels)
                        var seriesLength = labels.length || 0;

                        let chartData = {
                            chart: {
                                type: 'column',
                                height: chart_height,
                            },
                            exporting: {
                                enabled: false
                            },
                            credits: {
                                enabled: false
                            },
                            legend:{
                                enabled:false
                            },
                            title: {
                                text: '',
                                align: 'left'
                            },
                            subtitle: {
                                text:'',
                                align: 'left'
                            },
                            xAxis: {
                                categories: labels,
                                crosshair: true,
                                accessibility: {
                                    description: ''
                                }
                            },
                            yAxis: {
                                min: 0,
                                title: {
                                    text: y_axis_lable+' ('+currency+')'
                                }
                            },
                            tooltip: {
                                valueSuffix: ''
                            },
                            plotOptions: {
                                column: {
                                    pointPadding: 0.2,
                                    borderWidth: 0
                                },
                                series: {
                                    dataLabels: {
                                        enabled: true,
                                        formatter: function (options) {
                                            return (this.y>0) ? this.y : ''
                                        },
                                        style:{
                                            fontSize:'15px',
                                            fontWeight:'normal'
                                        }
                                    }
                                }
                            },
                            series: [
                                {
                                    name:  '',
                                    data: series1,
                                    color: "#F09E29"
                                }
                            ]
                        }
                        charts[chart_number] =  Highcharts.chart(document.querySelector(".chart_container" + chart_number), chartData)

                        Highcharts.setOptions({
                            lang: {
                            thousandsSep: ''
                            }
                        });

                        $('#download_chart_outer_'+chart_number).show();
                        $('#loader_outer').hide();                    
                    },
                    error: function(jqXHR, testStatus, error) {
                        alert("Page cannot open. Error: " + error);
                        $('#loader_outer').hide()
                    }
                });
                
            }
        }   
    
        function get_pdf(chart_number) {
            
            let chart_length=charts.length;
           
            charts[chart_length-1].dataURI().then(({ imgURI, blob }) => {
        
                var imgbase64 = imgURI;
                var label=charts[chart_length-1].data.w.globals.labels;
                var chart_data = charts[chart_length-1].data.w.globals.series[0];
                var season = $('#chart_' + chart_number + '_season :selected').text();
                var country = $('#chart_' + chart_number + '_country :selected').text();
                var state = $('#chart_' + chart_number + '_state :selected').text();
                var district = $('#chart_' + chart_number + '_district :selected').text();
                var block = $('#chart_' + chart_number + '_block :selected').text();
                var kpi = $('#chart_' + chart_number + '_kpi :selected').text();
                var brand = $('#chart_' + chart_number + '_brand_id :selected').text();
                var program = $('#chart_' + chart_number + '_program_id :selected').text();
                var usertype = $('#chart_' + chart_number + '_project_control :selected').text();
                var chart_y_axis = $('#chart_' + chart_number + '_y_axis_filter :selected').text();
                var village = $('#chart_' + chart_number + '_village :selected').text();
                var filter_category = $('#chart_' + chart_number + '_filter :selected').text();
                var land_unit = $('#chart_' + chart_number + '_land_unit :selected').text();
                var url = '';
             
                if (country != 0) {
                    $.ajax({
                        url: "