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


   $("#edit-client").on('shown.bs.modal', function () {
    $("#clientPhone").keypress(function (e) {
      console.log("pressed")
      //if the letter is not digit then display error and don't type anything
    if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
       //display error message
       $("#clientPhoneError").html("Digits Only").show().fadeOut("slow");
          return false;
     }
    });

    $("#editClient").click(function(){
      console.log($('#clientEmail').val());
      console.log("in modal")
      var addEditUserUrl = urlBase+"/editClient";
      var formData = {
        firstName: $('#clientFirstName').val(),
        lastName: $('#clientLastName').val(),
        phoneNumber:$('#clientPhone').val(),
        email: $('#clientEmail').val(),
      }

      $.ajax({
        type: 'POST',
        url: addEditUserUrl,
        data: formData,
        success: function(data, status, jqXHR){
          if(status==='success'){
           console.log("successfully add user  in blockchain");
            alert("successfully add user  in blockchain");
         }
        },
        error: function(xhr, textStatus, error){
         console.log("error add project  in blockchain");
    
            console.log(xhr.statusText);
            console.log(textStatus);
            console.log(error);
            alert("Error while adding user: "+ xhr.responseText);
        }
      });
    })
});

   $.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.clientId',
                render: function (data, type, row, meta) {
                    return ('<tr>' +'<th scope="col">'+data+'</th>');    
                },
            },

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

            { 
                data: 'Record.lastName' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },
            { 
                data: 'Record.phoneNumber' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },
            { 
                data: 'Record.email' ,
                render: function (data, type, row, meta) {
                    return  '<tr>'+'<th scope="col">'+ '</th>'+'  <td >'+data +' </td>'
                },
            },




            { 
                data: 'Record' ,
                render: function (data, type, row, meta) {         
                    editClient(data);
                   return (
                       '<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#Edit-client" >'+
                      ' Edit'+
                     '</button>'
                   )
                },


            },
        ]
    });
    });
});


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


 
});
function  editClient(d)
{
    $("#firstName").val(d.firstName);
    $("#lastName").val(d.lastName);
    $("#phoneNumber").val(d.phoneNumber);
    $("#email").val(d.email);
    
}