$(document).ready(function(){
    $(document).ajaxStart(function(){
        $("#wait").css("display", "block");
      });
      $(document).ajaxComplete(function(){
        $("#wait").css("display", "none");
      });
   
    //make sure change to your own machine ip or dmain url
    var urlBase = "http://0.0.0.0:30001";
   // var urlBase = "http://10.0.2.2:30001";
   var urltable ="/js/dataTable.js"
   var urlrender="/js/renderTable.js"

   var queryUrl = urlBase+"/queryAllProjects";
//  var llll= [
//     {
//         Key: "id1658909305782", 
//         Record: {      
//          projectID:125,
//         projectName:"projectName",
//         clientName:"clientName",
//         descreption:"descreption",
//         deadline:"descreption",
//         docType:"project",
//         projectStatus:"Success",
//         projectLeader:"projectLeader",
//         estimatedDuration:"estimatedDuration",
//         estimatedBudget:"estimatedBudget",
//         projectProgress:40,
//         createDateTime: "dt",
//         lastUpdated: "dt"
//     }

// },
//     {
//         Key: "id1658909305782", 
//         Record: { 
//         projectID:126,
//         projectName:"projectName",
//         clientName:"clientName",
//         descreption:"descreption",
//         deadline:"descreption",
//         docType:"project",
//         projectStatus:"Success",
//         projectLeader:"projectLeader",
//         estimatedDuration:"estimatedDuration",
//         estimatedBudget:"estimatedBudget",
//         projectProgress:50,
//         createDateTime: "dt",
//         lastUpdated: "dt"
//         }

// },]



 



   $.ajax({
     type: 'GET',
     url: queryUrl,
    
     success: function(data, status, jqXHR){


console.log(data);
        
$.getScript( urlrender, function() {
   $.getScript( urltable, function() {
    
    $('#queryAllProjectsTable').DataTable({
        data: data,
        
        columns: [                        
            { 
                data: 'Record.projectID',
                render: function (data, type, row, meta) {
                    return ('<tr>' +'<th scope="col">'+'</th>');    
                },
            },

            { 
                data: 'Record.projectName',
                render: function (data, type, row, meta) {
                    return   ('  <td >' +data + ' </td>')
                },
            },

            { 
                data: 'Record.estimatedBudget' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },
            { 
                data: 'Record.estimatedDuration' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },
            { 
                data: 'Record.deadline' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },
            { 
                data: 'Record.projectProgress' ,
                render: function (data, type, row, meta) {
                    return  (
                    '<td class="project_progress">' 
                    + '<div class="progress progress-sm">' +   
                    '<div class="progress-bar bg-green" role="progressbar" aria-valuenow="'+data+'" aria-valuemin="0" aria-valuemax="100" style="width:'+data+'% ">'   +   
                    ' </div>'  + 
                    '</div>'  + 
                    '<small>' +  
                    data+'% Complete' + 
                    '</small>' + 
                    '</td>')
                },
            },

            { 
                data: 'Record.projectStatus' ,
                render: function (data, type, row, meta) {
                    return  ('  <td class="project-state">'  + ' <span class="badge badge-success">'+data+'</span>' + ' </td>')
                },
            },

            { 
                data: 'Record.projectID' ,
                render: function (data, type, row, meta) {
                    return ('<td  class="project-actions text-right">' +
                    '<a  class="btn btn-primary btn-sm"  href="project-detail.html?id='+data+'" >' +
                    '  <i class="fas fa-folder">' +
                    '  </i>'+
                    '   View' +
                    ' </a>' +
                    '<a class="btn btn-info btn-sm" href="project-history.html?id='+data+'" >'+
                    '<i class="fas fa-book">' +
                    ' </i>' +
                    ' history'+
                    ' </a>'  +
                    ' </td>'+ 
                    '</tr>' 
                    );
                
                
                },
            }
        ]
    });
    });
});


     },
     error: function(xhr, textStatus, error){
         console.log(xhr.statusText);
         console.log(textStatus);
         console.log(error);
         alert("Error: "+ xhr.responseText);
     }
   });


 
});
