@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();  get_block(); get_village();">
                                                    <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' onchange="get_block(); get_village();">
                                                    <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' onchange="get_village()">
                                                    <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>
                            @include('dashboard.tabs')

                                                       <div class="tab-content">
                           
                           </div>
                        </div>
                    </div>
                    <div class="modal fade" id="show_fe_list_modal" tabindex="-1" role="dialog" aria-labelledby="show_fe_list_modal" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                          <div class="modal-content">
                            <div class="col-xl-12">
                              <div class="social-profile mb-0">
                           
                                <div class="card-body" >
                                    <form class="form" id="model" action="" method="post">
                                        @csrf
                                        <div id="show_fe_list_modal_body">
                                            
                                        </div>
                                    </form>
                                </div>         
                                <br>
                              </div>
                            </div>  
                          </div>
                        </div>
                    </div>
                    <div class="modal fade" id="village_modal" tabindex="-1" role="dialog" aria-labelledby="village_modal" aria-hidden="true">
                        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
                          <div class="modal-content">
                            <div class="col-xl-12">
                              <div class="social-profile mb-0">
                           
                                <div class="card-body" >
                                    <form class="form" id="model" action="" method="post">
                                        @csrf
                                        <div id="village_modal_body">
                                            
                                        </div>
                                    </form>
                                </div>         
                                <br>
                              </div>
                            </div>  
                          </div>
                        </div>
                    </div>
        </section>
    </section>
{{-- <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/sunburst.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
<script src="https://unpkg.com/@googlemaps/markerclusterer/dist/index.min.js"></script>
<script src="assets/js/mapclusture.js"></script> --}}
<script src={{ asset('app-assets/js/scripts/charts/highcharts.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/sunburst.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/exporting.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/export-data.js') }}></script>
<script src={{ asset('app-assets/js/scripts/charts/accessibility.js') }}></script>
</script>


<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 = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//    const labels = count.map((position, i) => {
//        return position.value;
//    })
    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() {

    
    if(tab=='data_monitoring')
    {
    //    console.log(a_country)
        if(a_country.length>0){
            $('#chart_country').val(a_country[0].id);
        }
        if (Object.keys(a_country).length > 0) {
            let firstKey = Object.keys(a_country)[0];
            $('#chart_country').val(a_country[firstKey].id);
        }
       
    }
      category='';
    loadTabContent(tab,category);
   
    $('#'+tab).addClass('active');
    var country_id = $('#chart_country').val();
    
    if(country_id == 0)
    {
        $("#chart_state").prop("disabled", true);
        $("#chart_district").prop("disabled", true);
    }else{
        get_state();
        get_district();
        set_brand_program();
    }
 
    // document.getElementById("overview").addClass('active');
    // Handle click on tabs using event delegation
    $('.dashboard-tab').on('click', '.btn', function() {
        $('.tab-link').removeClass('active');
        
        tab = $(this).attr('id');
        if(!['kpi_yield_inputcost_profit','kpi_fertiliser','kpi_pesticide','kpi_water','overview'].includes(tab)){
            $('.btn-tabs').removeClass('active');
            $('#land_unit_li').hide()
        }else{
            $('#land_unit_li').show()
        }

        if(!['kpi_yield_inputcost_profit'].includes(tab)){
            $('.btn-tabs').removeClass('active');
            $('#currency_rate_li').hide()
        }else{
            $('#currency_rate_li').show()
        }

        $(this).addClass('active');
        category='';
        loadTabContent(tab,category);
        show_sync_btn();
    });
    
});

function show_sync_btn()
{
        if ( (!['kpi_yield_inputcost_profit', 'kpi_fertiliser', 'kpi_pesticide', 'kpi_water','outliers'].includes(tab))) {
             $("#sync_cron_btn").removeAttr("style").attr("style", "display:none !important;");
         
        } else {
            $("#sync_cron_btn").removeAttr("style").attr("style", "display:visible !important;");
        }
}

//function set_brand_program()
// { 
//     console.log(a_user_details)
//         var country_id = $('#chart_country').val();
    
//         var state_id = $('#chart_state').val();
//         var district_id = $('#chart_district').val();
//         if(a_user_details !=[]){
//             $.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)

//                 }
//             }
        
//         }) 
//         }
                        
                        
// }
function set_brand_program() { 
    // Get selected values
    const country_id = $('#chart_country').val();
    const state_id = $('#chart_state').val();
    const district_id = $('#chart_district').val();

    // Initialize dropdown options with default "All" options
    let s_brand_options = '<option value="0">All brands</option>';
    let s_program_options = '';

    // Check if user details are available and non-empty
    if (Array.isArray(a_user_details) && a_user_details.length > 0) {
        // Loop through user details to filter data
        $.each(a_user_details, function(_, item) {
            if (
                item.country_id == country_id &&
                (item.state_ids == state_id || state_id == 0) &&
                (item.district_ids == district_id || district_id == 0)
            ) {
                // Filter and append brand options
                $.each(a_brand, function(_, brand) {
                    if (brand.id == item.brand_id || item.brand_id == 0) {
                        if (!s_brand_options.includes(`value="${brand.id}"`)) {
                            s_brand_options += `<option value="${brand.id}">${brand.brand_name}</option>`;
                        }
                    }
                });

                // Filter and append program options
                $.each(a_program, function(_, program) {
                    if (program.id == item.program_id || item.program_id == 0) {
                        if (!s_program_options.includes(`value="${program.id}"`)) {
                            s_program_options += `<option value="${program.id}">${program.program_name}</option>`;
                        }
                    }
                });
            }
        });
    } else {
        // Populate options directly when user details are not available
        $.each(a_brand, function(_, brand) {
            if (!s_brand_options.includes(`value="${brand.id}"`)) {
                s_brand_options += `<option value="${brand.id}">${brand.brand_name}</option>`;
            }
        });

        $.each(a_program, function(_, program) {
            if (!s_program_options.includes(`value="${program.id}"`)) {
                s_program_options += `<option value="${program.id}">${program.program_name}</option>`;
            }
        });
    }

    // Update dropdowns
    $('#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()
        set_brand_program();
           get_state();
            get_district();
            get_block();
            get_village();
          
    }
}
function loadTabContent(tab,category,field_executive=0) {
   
    if(tab=="data_monitoring" || tab=="fe_reporting" || tab=="outliers")
    {
        var question_type= $('#question_type').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;
        }
    }
    // 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 currency= $('#currency_rate').val();
    
    if (tab) {
        $('#loader_outer').show(); // Show loader before AJAX request
        $.ajax({
            url: '/dashboard/' + tab,
            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,
                'currency':currency,
                'category':category,
                'field_executive':field_executive,
                'question_type':question_type
            },
            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 == 'bar') {
                                let yAxisText = 'Percentage'
                                if(chart.kpi_name){
                                    yAxisText = chart.kpi_name
                                }else if(['Soil and Biodiversity Practices (in %)','Water Management Practices (in %)','Pest Management Practices (in %)','Agroforestry Practices (in %)','Animal Welfare Practices (in %)'].includes(chart.name_description)){
                                    yAxisText = 'Percentage Adoption'
                                }

                                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: yAxisText
                                    }
                                },
                                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: '',
                                            formatter: function () {
                                                return this.y+" ("+this.percentage.toFixed(1)+"%)"
                                            },
                                        },
                                        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 =='donut')
                            {
                               
                                charts2[chart.chart_name] = new Highcharts.Chart({
                                  
                                    chart: {
                                        renderTo: chart.chart_name,
                                        type: 'pie',
                                        height: chart.type === 'small' ? 120 : 450,
                                        width: chart.type === 'small' ? 120 : 450,
                                    },
                                    
                                    title:{
                                        text: null
                                        },
                                    labels: {
                                        items: {
                                            style: {
                                                fontSize: '16px'
                                            }
                                        }
                                    },
                                    credits: {
                                        enabled: false
                                    },
                                    plotOptions: {
                                        pie: {
                                            size: '65%'
                                        },
                                        
                                        series: {
                                            // dataLabels: [{
                                            //     connectorWidth: 0,
                                            //     style:{
                                            //         fontWeight:'normal',
                                            //         textOutline: 'none'
                                            //     }
                                            // }]
                                            dataLabels: {
                                                enabled: false 
                                            }
                                        }
                                    },
                                    colors: ['#0F265C', '#ABC4E8', '#177029'],
                                    series: [{
                                        innerSize: '70%',
                                        data: [{
                                            name: chart.label[0],
                                            y: chart.data1,
                                            color:'#ABC4E8'
                                        }, {
                                            name: chart.label[1],
                                            y: chart.data2,
                                            color:'#0F265C'
                                        }]
                                    }],
                                    navigation: {
                                    buttonOptions: {
                                        enabled: false
                                    }
                                }
                                });
                              
                               
                            }
                            
                            if(chart.chart_type=='sunburst')
                            {   
                                const data=chart.country_data;
                            
                                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(tab=='overview')
                    {
                        if(response.location != [])
                        {
                             initMap(response.location,response.district_cnt);
                        }
                        // initMap(response.location,response.district_cnt);
                    }
                    if(tab=="data_monitoring")
                    {
                        if(response.location !=[])
                        {
                            initMap(response.location,response.district_data);
                        }
                    }
                    
                }
            },
            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 a_village = [];
   
    
     
     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_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_village() {
            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 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
                    }
                });
            }

            if(block_id > 0){
                var country_id = $('#chart_block option:selected').attr('country_id');

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

                if(country_id != 0 || state_id != 0 || district_id != 0 || block_id !=0){

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

        }

        function fetchdata()
        {
            // var tab = $('.active').attr('id');
            // console.log(tab) 
            category='';
            loadTabContent(tab,category);
        
        }
       
    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];
            if(charts2[id] != [])
            {
                var label=chart.options.series[0].data;
                if(label !=[]){
                    var labelName1= label[0].name
                    var labelName2= label[1].name
                    var data1= label[0].y
                    var data2= label[1].y
                }
            }
             
            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';

                // Handle long title by wrapping text
                const maxWidth = canvas.width - 40; // Leave some margin
                const lineHeight = 22;  // Adjust line height based on your font size
                const x = 20;
                let y = 20;

                // Calculate the height of the wrapped title
                const titleHeight = wrapText(ctx, title, x, y, maxWidth, lineHeight);
                
                // Adjust y position for additional data below the title
                y += titleHeight; // Move y down by the total height of the title

                // Draw additional data if available
                if (typeof data1 !== 'undefined' && typeof data2 !== 'undefined' &&
                    typeof labelName1 !== 'undefined' && typeof labelName2 !== 'undefined') {
                    
                    const additionalDataHeight = lineHeight * 2; // Assuming two lines of data
                    ctx.fillText(labelName1 + ': ' + data1, x, y); // Label 1 with data
                    ctx.fillText(labelName2 + ': ' + data2, x, y + lineHeight); // Label 2 with data
                    
                    // Update y position for any further elements you might want to add later
                    y += additionalDataHeight;
                }
                const element = document.createElement('a');
                element.setAttribute('href', canvas.toDataURL("image/jpeg"));
                element.setAttribute('download', 'image');
                element.style.display = 'none';

                element.click();
            };

             
         }
    }

    function wrapText(context, text, x, y, maxWidth, lineHeight) {
        const words = text.split(' ');
        let line = '';
        let lineCount = 0;

        for (let n = 0; n < words.length; n++) {
            const testLine = line + words[n] + ' ';
            const metrics = context.measureText(testLine);
            const testWidth = metrics.width;

            if (testWidth > maxWidth && n > 0) {
                context.fillText(line, x, y);
                line = words[n] + ' ';
                y += lineHeight;
                lineCount++;
            } else {
                line = testLine;
            }
        }
        context.fillText(line, x, y);
        lineCount++;

        return lineCount * lineHeight; // Return the total height of the wrapped text
    }
    function showlist(value)
    { var url;
        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();
    
        $.ajax({
            url: "