@extends('layout.index')
@section('title', 'Dashboard')

<!-- Dashboard Ecommerce start -->
@section('content')
<style>
    .select2 {
        width: 100%;
    }
    </style>
{{-- <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script> --}}

    <section>
        {{-- <div class="content-header row"> --}}
         
        <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">
                            <form method="post">
                                @csrf
                            <div class="card mb-1" style="border-radius:15px;">
                                <div class="card-body" style="padding: 0.5rem 0.5rem">
                                    <div class="row justify-content-between mx-1">
                                        <input type="hidden" name="active_field" value="" id="active_field">
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Seasons</label>
                                                <select class="text-primary form-control form-select " id="chart_season" name='season' onchange="change_dropdown(false);">
                                                                                                    </select>
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Countries</label> 
                                                   
                                                <select class="text-primary form-control form-select" id="chart_country" name='country' onchange="change_country(); get_state();get_district(); get_block(); change_dropdown(false);">
                                                     <option value='0'>All Country</option>
                                                                                                    </select>
                                                <small class="text-danger" id="chart_country_err"></small> 
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> States</label>
                                                    
                                                <select class="text-primary form-control form-select " id="chart_state" name='state' onchange="get_district(); get_block(); change_dropdown(false);">
                                                    <option value='0'>All States</option>
                                                                                                    </select>
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Districts</label>
                                                <select class="form-control select2 form-select" id="chart_district" name='district[]'  onchange="get_block(); change_dropdown(false);" multiple>
                                                    <option value='0'>All Districts</option>
                                                                                                    </select>
                                            </div>
                                        </div>
                                        <div class="" style="min-width: 140px; ">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Blocks</label>
                                                <select class="text-primary form-control form-select select2" id="chart_block" name='block[]' multiple onchange="change_dropdown(false);">
                                                    <option value='0' >All Blocks</option>
                                                                                                    </select>
                                            </div>
                                        </div>
                                        {{-- <div class="" style="min-width: 140px;max-width:140px;  display:none;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Villages</label>
                                                <select class="text-primary form-control form-select" id="chart_village" name='village'>
                                                    <option value='0'>All Villages</option>
                                                                                                    </select>
                                            </div>
                                        </div> --}}
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Brands</label>
                                                <select class="text-primary form-control form-select" id="chart_brand_id" name='brand' onchange="change_dropdown(false);">
                                                    <option value='0'>All Brands</option>    
                                                                                                    </select>
                                                <!-- <h5><small class="text-danger" id="chart_brand_err"></small></h5> -->
                                            </div> 
                                        </div>
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Programmes</label>
                                                <select class="text-primary form-control form-select" id="chart_program_id" name='program' onchange="change_dropdown(false);">
                                                    <!-- <option value='0'>All Program</option> -->
                                                                                                    </select>
                                                <!-- <h5><small class="text-danger" id="chart_program_err"></small></h5> -->
                                            </div>
                                        </div>
                                        <div id='loader_outer'>
                                            <div id='loader' ></div>
                                        </div>
                                        <div class="" style="min-width: 140px;">
                                            <div class="form-group mb-0">
                                                <lable><br></label>
                                                <button type="button" name="button" value="Search" class="btn btn-primary waves-effect waves-float waves-light w-100" onclick="return fetchdata(); change_dropdown(true)" ><i class="fa fa-search"></i> Search</button>
                                            </div>
                                        </div>


                                        {{-- <div class="col-md-1">
                                            10
                                        </div> --}}
                                        
                                        {{-- <div class="col-md-1">
                                            10
                                        </div> --}}
                                    </div>
                                </div>
                            </div>
                          
                            </form>
                           
                           <div class="tab-content">
							
                           </div>
                        </div>
                    </div>
                   
        </section>
    </section>

<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>


<script src="https://maps.googleapis.com/maps/api/js?key={{ env('GOOGLE_API_KEY') }}&libraries=drawing"></script>
{{-- <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
({key: "{{ env('GOOGLE_API_KEY') }}", v: "weekly"});</script> --}}
        
<script>



//  var tab = 'overview'

 var a_country = [];
 var a_user_details=[];
 var a_user_details=[];
 var a_brand=[];
 var a_program=[];
 var aVillage=[];

$(document).ready(function() {

    var country_id = $('#chart_country').val();
	var field_executive=$('#field_executive').val();
    loadTabContent();

    if(country_id == 0)
    {
        $("#chart_state").prop("disabled", true);
        $("#chart_district").prop("disabled", true);
    }else{
		// show_village(field_executive);
        get_state();
        get_district();
        get_block();
        set_brand_program();
		
    }
 
});


 function set_brand_program()
{ 
    
        var country_id = $('#chart_country').val();
    
        var state_id = $('#chart_state').val();
        var district_id = $('#chart_district').val();
        
        $.each(a_user_details, function(key, item) {
            s_brand_options='<option value="0" > All brands </option>';
            s_program_options=' ';
            if(country_id != 0)
            {
                if(item.country_id==country_id && item.state_ids==state_id && item.district_ids==district_id)
                {
                    // $('#chart_program_id').val(item.program_id)
                    // $('#chart_brand_id').val(item.brand_id)
                    $.each(a_brand, function(key, val) {
                        if(val.id==item.brand_id)
                        {
                            s_brand_options += '<option value=' + val.id + ' >' + val.brand_name +
                            '</option>'
                        }
                        if(item.brand_id==0){
                            s_brand_options += '<option value=' + val.id + ' >'+val.brand_name+'</option>'
                        }
                    })

                    $.each(a_program, function(key1, value) {
                    
                        if(value.id==item.program_id)
                        {
                            s_program_options += '<option value=' + value.id + ' >' + value.program_name +
                            '</option>'
                        }if(item.program_id==0){
                            s_program_options += '<option value=' + value.id + ' >'+ value.program_name +'</option>'
                        }
                    })
                    // console.log(s_brand_options)
                    $('#chart_brand_id').html(s_brand_options)
                    $('#chart_program_id').html(s_program_options)

                }
            }
        
        })                  
                        
}
charts=[];
charts1=[];
charts2=[];
charts3=[];
charts4=[];
charts5=[];


function change_dropdown(flag)
{
   
   if(flag){
    $("#chart_village").prop("disabled", false);
    $("#field_executive").prop("disabled", false);
    $("#farmer").prop("disabled", false);

   }else{
    $("#chart_village").prop("disabled", true);
    $("#field_executive").prop("disabled", true);
    $("#farmer").prop("disabled", true);
   }
}
function change_country()
{
    var country_id = $('#chart_country').val();
	var field_executive=$('#field_executive').val();
    if(country_id == 0)
    {
        $("#chart_state").prop("disabled", true);
        $("#chart_district").prop("disabled", true);
        $('#currency_rate_li').hide()
       
    }else{
        $("#chart_district").prop("disabled", false);  
        $("#chart_state").prop("disabled", false);
        $('#currency_rate_li').show()
		// show_village(field_executive);
           get_state();
            get_district();
            get_block();
            set_brand_program();
			// loadTabContent();
    }
}
function fetchdata()
{
	loadTabContent();

}
function loadTabContent() {
   
    var country_id = $('#chart_country').val();

	if ($('#chart_country').val() == "0"){
		$('#chart_country').parent().addClass('has-error');
		$('#chart_country_err').html('Please Select country.');
		$('#chart_country').focus();
		$('#chart_country').click(function () {
		$('#chart_country').parent().removeClass('has-error');
		$('#chart_country_err').html('');
		});
		return false;
	}
   
    var state_id = $('#chart_state').val();
    var district_id = $('#chart_district').val();
    var block_id = $('#chart_block').val();
    var village_id = $('#chart_village').val();
    var season = $('#chart_season').val();
    var brand_id = $('#chart_brand_id').val();
    var program_id = $('#chart_program_id').val();
    var land_unit = $('#land_unit').val();
    var form_type='gis_fe_reporting';
	var field_executive=$('#field_executive').val();
    var farmer=$('#farmer').val();
    
    if(country_id !=0 || country_id !=''){
		$('#loader_outer').show(); // Show loader before AJAX request
        $.ajax({
            url: '/gis_fe_reporting',
            type: 'Post',
            data: {
                _token: "{{ csrf_token() }}",
                'season': season,
                'country': country_id,
                'state_id': state_id,
                'district_id': district_id,
                'block_id': block_id,
                'village_id': village_id,
                'brand_id': brand_id,
                'program_id': program_id,
                'land_unit': land_unit,
                'form_type': form_type,
				'field_executive':field_executive,
                'farmer':farmer
            },
            success: function(response) {
               
                if (response && response.html) {
                 
                    $('.tab-content').html(response.html);
                   
                    if (response.a_chart) {
                        $.each(response.a_chart, function(chart_id, chart) {
                        
                            if(chart.chart_type == 'pie'){
                                
                                let colors = ['#F09E29','#F54521','#D15E9C','#177029','#0F265C','#ABC4E8','#5c0f4b','#5c590f']
                                if(Object.values(chart.data).every(value => value === 0)){
                                  
                                    $('#chart_' + chart_id).html('<div>No Data Available</div>')
                                }else{
                                   
                                    let chartData = {
                                        chart: {
                                            type: 'pie',
                                            width: chart.width || 360,  // Set the desired width
                                            height: chart.width || 360 
                                        },
                                        exporting: {
                                            enabled: false
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        legend:{
                                            enabled: false,
                                            align: 'right',
                                            layout: 'proximate'
                                        },
                                        title: {
                                            text: ''
                                        },
                                        tooltip: {
                                            valueSuffix: ''
                                        },
                                        subtitle: {
                                            text: ''
                                        },
                                        plotOptions: {
                                            pie: {
                                                // tooltip:{
                                                //     pointFormatter: function (options) {
                                                //         let unit = (tab=='kpi_yield_inputcost_profit') ? ' (INR per acre)' : '';
                                                //         return this.y.toFixed(1)+unit;
                                                //     }
                                                // },
                                                allowPointSelect: true,
                                                cursor: 'pointer',
                                                dataLabels: {
                                                    enabled: false,
                                                },
                                                showInLegend: true,
                                                size: chart.size || '75%'
                                            },
                                            series: {
                                                allowPointSelect: true,
                                                cursor: 'pointer',
                                                dataLabels: [{
                                                    enabled: false,
                                                    distance: 10,
                                                    formatter: function (options) {
                                                        return this.percentage.toFixed(1)+'%'
                                                    },
                                                    style:{
                                                        fontWeight:'normal'
                                                    }
                                                }, {
                                                    enabled: false,
                                                    distance: -40,
                                                    format: '{point.percentage:.1f}%',
                                                    style: {
                                                        fontSize: '1.2em',
                                                        textOutline: 'none',
                                                        opacity: 0.7
                                                    },
                                                    filter: {
                                                        operator: '>',
                                                        property: 'percentage',
                                                        value: 10
                                                    }
                                                }]
                                            }
                                        },
                                        series: [
                                            {
                                                name: '',
                                                colorByPoint: true,
                                                colors: colors,
                                                data: 
                                                Object.keys(chart.data).map(key => ({
                                                    // name: ,
                                                    // y: chart.data
                                                    name: chart.label ? chart.label[key] :key ,
                                                    y: chart.data[key]
                                                }))
                                            }
                                        ]
                                    }

                                    charts1[chart_id]= Highcharts.chart(document.querySelector('#chart_' + chart_id), chartData)
                                    Highcharts.setOptions({
                                        lang: {
                                        thousandsSep: ''
                                        }
                                    });
                                    let html = ''
                                    let i = 0;
                                    for (const [key, value] of Object.entries(chart.data)) {
                                        html += '<div><svg xmlns="http://www.w3.org/2000/svg" class="" fill="'+colors[i]+'" height="15" width="15" viewBox="0 -960 960 960" ><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0 0q-134 0-227-93t-93-227q0-134 93-227t227-93q134 0 227 93t93 227q0 134-93 227t-227 93Z"/></svg> '+key+'&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>'
                                        i++
                                    }
                                    $('#legend_' + chart_id).html(html)
                                }
                            }
                            
                            if(chart.chart_type == "column_filter")
                            {
                                let chartData = {
                                    chart: {
                                        type: 'column'
                                    },
                                    exporting: {
                                        enabled: false
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    title: {
                                        text: '',
                                        align: 'left'
                                    },
                                    subtitle: {
                                        text:'',
                                        align: 'left'
                                    },
                                    xAxis: {
                                        categories: chart.label,
                                        crosshair: true,
                                        accessibility: {
                                            description: ''
                                        }
                                    },
                                    yAxis: {
                                        min: 0,
                                        title: {
                                            text: 'Percentage Data Collected',
                                          
                                            },
                                    },
                                    legend: {
                                        enabled: false  // Disable legend
                                    },
                                    tooltip: {
                                        valueSuffix: ''
                                    },
                                    plotOptions: {
                                        column: {
                                            pointPadding: 0.2,
                                            borderWidth: 0
                                        },
                                        series: {
                                            colors: ['#F09E29', '#F54521'],
                                            dataLabels: {
                                                enabled: true,
                                                formatter: function () {
                                                return (this.y > 0) ? this.y + ( ' ') : '';
                                            },
                                                style: {
                                                    fontSize: '15px',
                                                    fontWeight: 'normal'
                                                }
                                            },
                                            
                                        }
                                    },
                                    series: [
                                        {
                                            // data: chart.project,
                                            data: chart.project.map((value, index) => ({
                                                y: value,
                                                color: ['#BB7F95', '#607093', '#E095BD', '#66A072', '#F5BF72', '#F8846C', '#AC9ACF', '#6CC5B3', '#90E49F'][index % 9]  // Applying colors cyclically
                                            })),
                                            name:'',
                                            color: ""
                                        }
                                    ]
                                };
                              
                                charts5[chart.chart_id]= Highcharts.chart(document.querySelector('#' + chart.chart_id), chartData)
                                Highcharts.setOptions({
                                    lang: {
                                    thousandsSep: ''
                                    }
                                });

                            }
                        });
                    }
                 
                }
            },
            complete: function() {
                $('#loader_outer').hide(); // Hide loader after AJAX request completes
            },
            error: function(xhr, status, error) {
                console.error(error);
                $('#loader_outer').hide();
            }
        });
	}
    
}

</script>

    @endsection
    <script>  (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyCg_t7KnP2386-JBmsYIxldEmqQWVe7QWk", v: "weekly"});</script>
    <script>
   
   
    var a_states = [];
    var a_season = [];
    var a_districts = [];
    var a_block = [];
    var selected_block=[];
    var selected_district=[];

     
     function get_state() {
        // set_brand_program();
            // var val='chart_'+j+'_country';
            var country_id = $('#chart_country').val();
           
            s_states_options = '<option value="0" >Select State</option>'
            $.each(a_states, function(key, 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_state').html(s_states_options);
    }

	// function get_district() {
	// 	set_brand_program();
	// 	var country_id = $('#chart_country').val();
	// 	var state_id = parseInt($('#chart_state').val());
		
	// 	var selectedCountry = null;
	// 	if(state_id > 0){
	// 		var country_id = $('#chart_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; 
	// 			}
	// 		});
	// 	}
		
	// 	s_district_options = '<option value="0" >All Districts</option>'
	// 	$.each(a_districts, function(key, 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_district').html(s_district_options);
	// }
    function get_district() {
        set_brand_program();
        var country_id = $('#chart_country').val();
        var state_id = parseInt($('#chart_state').val());
      var selectedCountry = null;

      if(state_id > 0){
          var country_id = $('#chart_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_district_options = '';
      $.each(a_districts, function(key, district_obj) {
          var selected='';
          if(selected_district.includes(district_obj.id))
          { 
              selected='selected'
          }
          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+' '+selected+'>' + 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+' '+selected+' >' + district_obj.district_name +
                  '</option>'
                  }
              }
          }else{
              s_district_options += '<option value=' + district_obj.id + '  country_id='+district_obj.country_id+' '+selected+'>' + district_obj.district_name +
                  '</option>'
          }
      })
      $('#chart_district').html(s_district_options);

  }
   
	// function get_block() {
    //         set_brand_program();
    //         var country_id = $('#chart_country').val();
    //         var state_id = $('#chart_state').val();
    //         var district_id = $('#chart_district').val();

    //         var selectedCountry = null;
    //         if(district_id > 0){
    //             var country_id = $('#chart_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_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_block').html(s_block_options);

    // }
    function get_block() {
        set_brand_program();
        var country_id = $('#chart_country').val();
            var state_id = $('#chart_state').val();
            var district_id = $('#chart_district').val();

                    var selectedCountry = country_id;
            // if(district_id > 0){
            //     // var country_id = $('#chart_district option:selected').attr('country_id');   
            //          console.log(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_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 = '';
            $.each(a_block, function(key, block_obj) {
                var selected='';
                if(selected_block.includes(block_obj.id))
                { 
                    selected='selected'
                }
                // console.log(district_id)
              if(country_id != 0 || state_id != 0 || district_id != 0){
                  if(district_id != 0){
                    district_id.forEach(element => {
                    //  console.log(block_obj,selectedCountry)
                    if(block_obj.country_id == selectedCountry && block_obj.district_id == parseInt(element )){
                          s_block_options += '<option value=' + block_obj.id + ' country_id='+block_obj.country_id+' '+selected+'>' + 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+' '+selected+'>' + 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+' '+selected+'>' + block_obj.block_name +
                      '</option>'
                      }
                  }
              }else{
                  s_block_options += '<option value=' + block_obj.id + '  country_id='+block_obj.country_id+' '+selected+'>' + block_obj.block_name +
                      '</option>'
              }
                
            })
            // console.log(s_block_options)
            $('#chart_block').html(s_block_options);
            
            $('#chart_district').select2();
           $('#chart_block').select2({
               closeOnSelect: false
           });
           
    }
    function get_jpeg(id, title = '') {
       
        // console.log(id)
         if ( charts[id] != [] || charts1[id]!= []  || charts2[id]!= [] || charts3[id]!= [] || charts4[id]!=[] || charts5[id]!=[]) {
            // console.log(charts1[id])
            chart=charts[id]||charts1[id]||charts2[id]||charts3[id]||charts4[id]||charts5[id];
            
            let svgString = chart.getSVG();
            var imgURI = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svgString)));

            var canvas = document.createElement("canvas");
            
            var ctx = canvas.getContext('2d');

            var image = new Image();

            image.src = imgURI;

            image.onload = function() {
                canvas.width = image.width +100
                canvas.height = image.height + 100
                ctx.width = image.width
                ctx.height = image.height
                ctx.fillStyle = "#ffffff";
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(image,20,50,image.width,image.height);

                ctx.fillStyle = "#0F265C";
                ctx.font = 'bold 18px serif';
                ctx.fillText(title, 20, 20);

                element = document.createElement('a');
                element.setAttribute('href', canvas.toDataURL("image/jepg"));
                element.setAttribute('download', 'image');
                element.style.display = 'none';

                element.click();
            };

             
         }
    }

   
    function get_excel(id) {

        // console.log(charts2)
        chart=charts[id]||charts1[id] ||charts2[id]||charts3[id]||charts4[id]||charts5[id];
         
     
            var label=chart.xAxis[0].categories;
            var chart_data =chart.options.series[0].data;
            var season = $('#chart_season :selected').text();
            var country = $('#chart_country :selected').text();
            var state = $('#chart_state :selected').text();
            var district = $('#chart_district :selected').text();
            // var block = $('#chart_block :selected').text();
            // var kpi = $('#chart_kpi :selected').text();
            var brand = $('#chart_brand_id :selected').text();
            var program = $('#chart_program_id :selected').text();
      
      
            // var usertype = $('#chart_project_control :selected').text();
            // var chart_y_axis = $('#chart_y_axis_filter :selected').text();
            // var village = $('#chart_village :selected').text();
            // var filter_category = $('#chart_filter :selected').text();
            // var land_unit = $('#chart_land_unit :selected').text();
               
          
            // var usertype = $('#chart_project_control :selected').text();
            // var chart_y_axis = $('#chart_y_axis_filter :selected').text();
            // var village = $('#chart_village :selected').text();
            // var filter_category = $('#chart_filter :selected').text();
            // var land_unit = $('#chart_land_unit :selected').text();
               

                var url = '';
             
                if (country != 0) {
                    $.ajax({
                        url: "