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

<!-- Dashboard Ecommerce start -->
@section('content')
<style>
    .gm-style-cc {
        display: none;
    }
    .legend {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .highcharts-breadcrumbs-group {
        display: none;
    }
    #multiple-column-form .card-body h5 {
       /* min-height: 35px;*/
    }
    </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'>
                                                                                                    </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()">
                                                     <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();">
                                                    <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="text-primary form-control form-select" id="chart_district" name='district'>
                                                    <option value='0'>All Districts</option>
                                                                                                    </select>
                                            </div>
                                        </div>
                                        {{-- <div class="" style="min-width: 140px; display:none;">
                                            <div class="form-group mb-0">
                                                <lable class="text-primary"> Blocks</label>
                                                <select class="text-primary form-control form-select" id="chart_block" name='block'>
                                                    <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'>
                                                    <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'>
                                                    <!-- <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()" ><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 class="row">
								
								<div class="col-sm-4">
									<div class="card">
										<div class="card-body">
											<div class="row">
												<div class="col-md-12">
													<h5 class="text-primary mb-1 pull-left">Total Farmers: </h5>
													<button class="btn  dropdown-toggle pull-right" type="button" id="chart_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('number_of_farmer_chart','Total Farmers:')"><b>Export JPEG</b></a>
														<a class="dropdown-item" href="#" onclick="get_excel('number_of_farmer_chart')"><b>Export CSV</b></a>
									
													</div>
												</div>
											</div>
											 <div class="dashboard-card canvas1 "  id="number_of_farmer_chart"></div>
										  </div>
									   </div>
								</div>
								<div class="col-sm-4">
								   <div class="card">
									  <div class="card-body">
										<div class="row">
											<div class="col-md-12">
												<h5 class="text-primary mb-1 pull-left">Total Cotton Area (Verification)</h5>
												<button class="btn  dropdown-toggle pull-right" type="button" id="chart_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('total_cotton_area','Total Cotton Area (Verification)')"><b>Export JPEG</b></a>
												   <a class="dropdown-item" href="#" onclick="get_excel('total_cotton_area')"><b>Export CSV</b></a>
								   
											   </div>
											</div>
										</div>
										
										 <div class="dashboard-card canvas1"  id="total_cotton_area"></div>
									  </div>
								   </div>
								</div>
								<div class="col-sm-4">
									<div class="card">
									   <div class="card-body">
										 <div class="row">
											 <div class="col-md-12">
												 <h5 class="text-primary mb-1 pull-left">Total Geo-Fenced Area </h5>
												 <button class="btn  dropdown-toggle pull-right" type="button" id="chart_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=""><b>Export JPEG</b></a>
													<a class="dropdown-item" href="#" onclick=""><b>Export CSV</b></a>
									
												</div>
											 </div>
										 </div>
										 
										  <div class="dashboard-card canvas1"  id=""></div>
									   </div>
									</div>
								</div>
                                <div class="col-sm-4">
                                    <div class="card">
                                       <div class="card-body">
                                          <h5 class="text-primary mb-1">Map</h5>
                                          
                                          <div class="dashboard-card " id="map"></div>
                                       </div>
                                    </div>
                                 </div>
							 </div>
                           </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>
async function initMap(locations,count) {
   
  // Request needed libraries.
  const { Map, InfoWindow } = await google.maps.importLibrary("maps");
  const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary(
    "marker",
  );
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: locations[0] || { lat: 21.7679, lng:78.8718},
    mapId: "DEMO_MAP_ID",
  });

  

    const labels = Array.isArray(count) ? count.map((position, i) => position.value) : [];
    
  // Add some markers to the map.
 
  const markers = locations.map((position, i) => {
    
    const label = labels[i % labels.length];
    const pinGlyph = new google.maps.marker.PinElement({
      glyph: label,
      glyphColor: "white",
    });
    const marker = new google.maps.marker.AdvancedMarkerElement({
      position,
      content: pinGlyph.element,
    });
   

    return marker;
  });

  
  // Add a marker clusterer to manage the markers.
  const markerCluster = new markerClusterer.MarkerClusterer({ markers, map });

}


//  var tab = 'overview'
//  var tab = 'data_monitoring';
 var a_country = [];
 var a_user_details=[];
 var a_user_details=[];
 var a_brand=[];
 var a_program=[];

$(document).ready(function() {

    var country_id = $('#chart_country').val();
    loadTabContent();
    if(country_id == 0)
    {
        $("#chart_state").prop("disabled", true);
        $("#chart_district").prop("disabled", true);
    }else{
        get_state();
        get_district();
        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_country()
{
    var country_id = $('#chart_country').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()
           get_state();
            get_district();
            set_brand_program();
    }
}
function fetchdata()
{
	loadTabContent();

}
function loadTabContent() {
   
    // alert(category,"here")
    var country_id = $('#chart_country').val();

    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_overview';
  
    if(country_id !=0 || country_id !=''){
		$('#loader_outer').show(); // Show loader before AJAX request
        $.ajax({
            url: '/gis_overview',
            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
            },
            success: function(response) {
               
                if (response ) {
                  
                    // $('.tab-content').html(response.html);
                   
                    // if (response.a_chart) {
                    //     $.each(response.a_chart, function(chart_id, chart) {
                        
                          
                    //         if (chart.chart_type == 'bar') {
                           
                    //             let isKPI = ['kpi_yield_inputcost_profit','kpi_fertiliser','kpi_pesticide','kpi_water'].includes(tab) ? true : false;
                    //             let showLegend = (tab==='health_and_safety') ? true : false;

                    //             var Project_data = chart.project || [];
                    //             var Control_data = chart.control || [];
                    //             var labels = chart.label || [];

                    //             Project_data = Project_data.map(function(value) {
                    //                 return Number(value);
                    //             });

                    //             Control_data = Control_data.map(function(value) {
                    //                 return Number(value);
                    //             });
                              
                               
                    //             let chartData = {
                    //             chart: {
                    //                 type: 'column'
                    //             },
                    //             exporting: {
                    //                 enabled: false
                    //             },
                    //             credits: {
                    //                 enabled: false
                    //             },
                    //             legend: {
                    //                 enabled: showLegend
                    //             },
                    //             title: {
                    //                 text: '',
                    //                 align: 'left'
                    //             },
                    //             subtitle: {
                    //                 text: '',
                    //                 align: 'left'
                    //             },
                    //             xAxis: {
                    //                 categories: labels,
                    //                 crosshair: true,
                    //                 accessibility: {
                    //                     description: ''
                    //                 }
                    //             },
                    //             yAxis: {
                    //                 min: 0,
                    //                 title: {
                    //                     text: chart.kpi_name?chart.kpi_name+'('+currency+')':'Percentage Data Collected'
                                        
                    //                 }
                    //             },
                    //             tooltip: {
                    //                 valueSuffix: ''
                    //             },
                    //             plotOptions: {
                    //                 column: {
                    //                     pointPadding: 0.2,
                    //                     borderWidth: 0,
                    //                     point: {} // Initialize empty object
                    //                 },
                    //                 series: {
                    //                     colorByPoint: isKPI,
                    //                     colors:['#F09E29', '#F54521'],
                    //                     dataLabels: {
                    //                         enabled: true,
                    //                         formatter: function () {
                    //                             return (this.y > 0) ? this.y + (isKPI ? '' : ' %') : '';
                    //                         },
                    //                         style: {
                    //                             fontSize: '15px',
                    //                             fontWeight: 'normal'
                    //                         }
                    //                     }
                    //                 }
                    //             },
                    //             series: [
                    //                 {
                    //                     name: (Control_data.length > 0) ? 'Project' : '',
                    //                     data: Project_data,
                    //                     color: chart.color?chart.color: "#F09E29",
                    //                     point: {} // Initialize empty object
                    //                 }
                    //             ]
                    //         };
                            
                    //         // Dynamically add point event based on chart_id
                    //         if (chart_id === "districtData") {
                               
                    //             // chartData.series.color='#BB7F95'
                            
                    //             // chartData.plotOptions.column.point.events = {
                                  
                    //             //     click: function () {
                    //             //         show_village(this.category,chart.selected_tab);
                    //             //     }
                    //             // };
                    //             change_tab(tab,chart.selected_tab,'#BB7F95')
                               
                    //         } else if (chart_id === "outlier_district_chart") {
                    //             chartData.plotOptions.column.point.events = {
                    //                 click: function () {
                                       
                    //                     show_outlier_village(this.category,chart.selected_tab);
                    //                 }
                    //             };
                              
                    //         }

                    //         // Add Control series if Control_data exists
                    //         if (Control_data.length > 0) {
                    //             chartData.series.push({
                    //                 name: 'Control',
                    //                 data: Control_data,
                    //                 color: "#F54521",
                    //                 point: {} // Initialize empty object
                    //             });
                    //         }

                    //             charts[chart_id]=Highcharts.chart(document.querySelector('#chart_' + chart_id), chartData);
                    //             Highcharts.setOptions({
                    //                     lang: {
                    //                     thousandsSep: ''
                    //                     }
                    //                 });
                                  
                    //         }

                    //         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 === "bar_chart") {
                    //                 let chartData = {
                    //                     chart: {
                    //                         type: 'bar'
                    //                     },
                    //                     title: {
                    //                         text: ''
                    //                     },
                    //                     exporting: {
                    //                         enabled: false
                    //                     },
                    //                     credits: {
                    //                         enabled: false
                    //                     },
                    //                     xAxis: {
                    //                         categories: chart.label,
                    //                         title: {
                    //                             text: 'In-active FE',
                    //                         },
                    //                         gridLineWidth: 1,
                    //                         lineWidth: 0
                    //                     },
                    //                     yAxis: {
                    //                         min: 0,
                    //                         title: {
                    //                             text: '',
                    //                             align: 'high'
                    //                         },
                                            
                    //                         labels: {
                    //                              overflow: 'justify',
                    //                              enabled: false,
                    //                             formatter: function() {
                    //                                 return this.value; // Format labels to remove decimals
                    //                             }
                    //                         },
                    //                         gridLineWidth: 0
                    //                     },
                    //                     tooltip: {
                    //                         valueSuffix: ' '
                    //                     },
                    //                     plotOptions: {
                    //                         bar: {
                    //                             borderRadius: 0,
                    //                             dataLabels: {
                    //                                 enabled: true
                    //                             },
                                               
                    //                             groupPadding: 0.1,
                    //                             point: {
                    //                                 events: {
                    //                                     click: function() {
                    //                                         // alert(this.category);
                    //                                         showlist(this.category)
                    //                                     }
                    //                                 }
                    //                             }
                    //                         }
                    //                     },
                    //                     legend: {
                    //                         enabled: false,
                    //                         layout: 'vertical',
                    //                         align: 'right',
                    //                         verticalAlign: 'top',
                    //                         x: -40,
                    //                         y: 80,
                    //                         floating: true,
                    //                         borderWidth: 1,
                    //                         backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || '#FFFFFF',
                    //                         shadow: true
                    //                     },
                    //                     credits: {
                    //                         enabled: false
                    //                     },
                    //                     series: [{
                    //                         name: '',
                    //                         data: chart.project,
                    //                         color:'#F09E29'
                    //                     }]
                    //                 };

                    //                 charts5[chart.chart_name] = Highcharts.chart(document.querySelector('#' + chart.chart_name), chartData);
                    //                 Highcharts.setOptions({
                    //                     lang: {
                    //                         thousandsSep: ''
                    //                     }
                    //                 });
                    //             }

                            
                    //         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',
                                          
                    //                         },
                    //                 },
                    //                 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'
                    //                             }
                    //                         },
                    //                         point: {
                    //                             events: {
                    //                                 click: function () {
                    //                                     change_tab(tab,this.category,this.color)
                    //                                     // alert(
                    //                                     //     'Category: ' + this.category 
                    //                                     // );
                    //                                 }
                    //                             }
                    //                         }
                    //                     }
                    //                 },
                    //                 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:chart.legend,
                    //                         // color: "#F09E29"
                    //                     }
                    //                 ]
                    //             };
                              
                    //             charts5[chart.chart_id]= Highcharts.chart(document.querySelector('#' + chart.chart_id), chartData)
                    //             Highcharts.setOptions({
                    //                 lang: {
                    //                 thousandsSep: ''
                    //                 }
                    //             });

                    //         }
                    //     });
                    // }
                    if (response.p_chart) {
                       
                        $.each(response.p_chart, function(chart_id, chart) {
                          
                            if(chart.chart_type=='sunburst')
                            {     
                                const data=chart.countryData;
                            
                                charts3[chart.chart_name]= Highcharts.chart(chart.chart_name, {
                                        chart: {
                                            height: '79%',
                                            backgroundColor: 'transparent',  
                                        },
                                        title:{
                                        text: null
                                        },
                                        exporting: {
                                            enabled: false
                                        },
                                        credits: {
                                            enabled: false
                                        },
                                        colors: ['#505c73','#D15E9C','#F09E29','#F54521','#177029'],
                                        series: [{
                                            type: 'sunburst',
                                            data: data,
                                            name: 'Root',
                                            allowDrillToNode: true,
                                            borderRadius: 3,
                                            cursor: 'pointer',
                                            dataLabels: {
                                                format: '{point.name}',
                                                filter: {
                                                    property: 'innerArcLength',
                                                    operator: '>',
                                                    value: 16
                                                },
                                                style: {
                                                    textOutline: false,
                                                    fontSize:'13px'

                                                },
                                               color:'#ffffff'
                                            },
                                            levels: [{
                                                level: 1,
                                                levelIsConstant: false,
                                                dataLabels: {
                                                    filter: {
                                                        property: 'outerArcLength',
                                                        operator: '>',
                                                        value: 64
                                                    }
                                                }
                                            }, {
                                                level: 2,
                                                colorByPoint: true
                                            },
                                            {
                                                level: 3,
                                                colorVariation: {
                                                    key: 'brightness',
                                                    to: -0.5
                                                }
                                            }, {
                                                level: 4,
                                                colorVariation: {
                                                    key: 'brightness',
                                                    to: 0.5
                                                }
                                            }]

                                        }],

                                        tooltip: {
                                            headerFormat: '',
                                            pointFormat: chart.chart_name == 'number_of_farmer_chart' ?
                                            ' <b>{point.name}</b> is <b>{point.value:.0f}</b>' :
                                            ' <b>{point.name}</b> is <b>{point.value:.1f}</b>'
                                        }
                                });
                           
                            }

                            // if (chart.chart_type == "semi_circle") {
                            //     charts4[chart.chart_name] = Highcharts.chart(chart.chart_name, {
                            //         chart: {
                            //             backgroundColor: null,
                            //             plotBorderWidth: 0,
                            //             plotShadow: false,
                            //             height: 120, 
                            //             width: 150,
                            //         },
                            //         colors: ['#20A78C','#B2E2D8'],
                            //         title: {
                            //             text: '',
                            //             // align: 'center',
                            //             // verticalAlign: 'middle',
                            //             // y: 60,
                            //             // style: {
                            //             // fontSize: '1.1em'
                            //             // }
                            //         },
                            //         exporting: {
                            //             enabled: false
                            //         },
                            //         credits: {
                            //             enabled: false
                            //         },
                            //         accessibility: {
                            //             point: {
                            //                 valueSuffix: '%'
                            //             }
                            //         },
                            //         plotOptions: {
                            //             pie: {
                            //                 dataLabels: {
                            //                     enabled: false,
                            //                     distance: -40,
                                               
                            //                     style: {
                            //                         fontWeight: 'bold',
                            //                         color: 'white'
                            //                     }
                            //                 },
                            //                 startAngle: -90,
                            //                 endAngle: 90,
                            //                 center: ['50%', '75%'],
                            //                 size: '110%',
                            //                 innerSize: '70%' 
                            //             }
                            //         },
                            //         series: [{
                            //             type: 'pie',
                            //             name: '',
                            //             innerSize: '70%',
                            //             data: [
                            //                 // ['',chart.inactive_fe],
                            //                 // ['',chart.active_fe],
                            //                 { name: 'Active FE', y: chart.active_fe },
                            //                 { name: 'Inactive FE', y: chart.inactive_fe }
                                           
                            //             ],
                            //             color:['#20A78C','#B2E2D8']
                            //         }], 
                                   
                            //     });
                            // }
                          
                        });
                    }
                    if(response.location != [])
                    {
                            initMap(response.location,response.district_cnt);
                    }
                        initMap(response.location,response.district_cnt);
                    
                }
            },
            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 = [];
    
     
     function get_state() {
        set_brand_program();
            // var val='chart_'+j+'_country';
            var country_id = $('#chart_country').val();
           
            s_states_options = '<option value="0" >All States</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());
		// alert(state_id);
		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 = '<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_district').html(s_district_options);
	}
   

     
    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 change_tab(tab,category,color)
    {
      
        var country_id = $('#chart_country').val();
        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 field_executive = $('#field_executive').val();
        var question_type=$('#question_type').val();
       
        var url= "