$(document).ready(function(){
    $(document).ajaxStart(function(){
      $("#wait").css("display", "block");
    });
    $(document).ajaxComplete(function(){
      $("#wait").css("display", "none");
    });

var url_string = window.location.href;
var url = new URL(url_string);
var searchKey = url.searchParams.get("id");

urlDrop="/dist/js/select2.min.js";
var urltable ="/js/dataTable.js"
var urlrender="/js/renderTable.js"
var urlBase = "http://0.0.0.0:30001";
// var urlBase = "http://10.0.2.2:30001";

var queryAllTasksEmployee = urlBase+"/queryAllTasksEmployee";



var notStarted=0;
var onHold=0;
var canceled=0;
var success=0;
var inProgress=0;


$.ajax({
    type: 'GET',
    url: queryAllTasksEmployee,
    data: { key: searchKey },
    success: function(data, status, jqXHR){
        let record = data.Record;

        





      
        $.getScript( urlrender, function() {
            $.getScript( urltable, function() {
                   //     console.log("before  data table===== "+data); 
             $('#queryAllTasksTable').DataTable({
                 data: data,
    
                 columns: [                        
                     { 
                         data: 'Record.taskId',
                         render: function (data, type, row, meta) {
                             return ('<tr>' +'<th scope="col">'+'</th>');    
                         },
                     },
         
                     { 
                         data: 'Record.taskName',
                         render: function (data, type, row, meta) {
                             return   ('  <td >' +data + ' </td>')
                         },
                     },
         
                     { 
                         data: 'Record.estematedTaskDuration' ,
                         render: function (data, type, row, meta) {
                             return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                         },
                     },
                     { 
                      data: 'Record.taskDeadline' ,
                      render: function (data, type, row, meta) {
                          return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                      },
                  },
                     { 
                         data: 'Record.defecaltDegree' ,
                         render: function (data, type, row, meta) {
                             return  (
                               '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>')
                         },
                     },
                     { 
                      data: 'Record.taskWage' ,
                      render: function (data, type, row, meta) {
                          return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                      },
                  },
         
                     { 
                         data: 'Record.taskStatus' ,
                         render: function (data, type, row, meta) {                         
                             return  ('  <td class="project-state">'  + ' <span class="badge ">'+data+'</span>' + ' </td>')
                         },
                     },
         


                     { 
                      data: 'Record.taskId' ,
                      render: function (data, type, row, meta) {

                       return (
                        '<td  class="project-actions text-right">' +
                        '<a  class="btn btn-primary btn-sm"  href="/taskDetail?id='+data+'" >' +
                        '  <i class="fas fa-folder">' +
                        '  </i>'+
                        '   View' +
                        ' </a>' +
                        
                        ' </td>'+ 
                        '</tr>' 
                        
                        
                       )
      
                      
                      },

                  },







                 ],
    
             });
            //  $('#queryAllTasksTable tbody').on('click', 'button', function () {
            //   var data = table.row($(this).parents('tr')).data();
            //   alert(data[1] + data[2]);
    
    
            //  });




             });
         });


console.log(data)
for (let i = 0; i < data.length; i++) {
 // console.log("i="+i)
  //console.log(data[i].Record.taskStatus)

          switch(data[i].Record.taskStatus) {
            case "Not Started":
              // console.log("in")
               notStarted++;
              // console.log(notStarted)
              break;
            case "On Hold":
              onHold++;
              break;
            case "In progress":
              inProgress;
              break;
            case "Canceled":
              canceled++;
              break;  
            case "Success":
              success++;
              break 

         }
   
         
       
      }
var donutChartCanvas = $('#donutChart').get(0).getContext('2d')
var donutData        = {
  labels: [
    'Canceled',
      'Success',
      'In progress',
      'Not Started',
      'On Hold',
      
  ],
  datasets: [
    {
      //data: [7,4,5,4,4],
     data: [canceled,success,inProgress,notStarted,onHold],
      backgroundColor : ['#f56954', '#00a65a', '#f39c12', '#00c0ef' ,'#d2d6de'],
    }
  ]
}

var donutOptions     = {
  maintainAspectRatio : false,
  responsive : true,
}
//Create pie or douhnut chart
// You can switch between pie and douhnut using the method below.
new Chart(donutChartCanvas, {
  type: 'doughnut',
  data: donutData,
  options: donutOptions
})
    },
    error: function(xhr, textStatus, error){
        console.log(xhr.statusText);
        console.log(textStatus);
        console.log(error);
        alert("Error: llllllllllllllllllllll"+ xhr.responseText);
    }
  });

////////////////////////////////////////////////////////////





 
});


