$(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";

   $.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 ">'+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="/projectDetail?id='+data+'" >' +
                    '  <i class="fas fa-folder">' +
                    '  </i>'+
                    '   View' +
                    ' </a>' +

                    ' </td>'+ 
                    '</tr>' 
                    );
                
                
                },
            }
        ]
    });
    });
});


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



});
