
    $(document).on('click', 'td.details-control', function() {
      $('.overlay').show();
        var tr = $(this).closest('tr');
        var row = table.row(tr);
        var tableId = 'purchases-' + row.data().id;
        var client_id = row.data().id;
        if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
        } else {
          // Open this row
          row.child(template(row.data())).show();
          initTable(tableId, row.data(),client_id);
          console.log(row.data());
          tr.addClass('shown');
          tr.next().find('td').addClass('no-padding bg-gray');
        }
        $('.overlay').hide();
      });

      function initTable(tableId, data,client_id) {
        $('.main-spinner').show();
        var id = client_id;
        $.ajax({

            type: 'GET',
            url: '/realty/get-detail-deposit/'+id,
            dataType:'json',
            async:false,
            data: {'id': id},
            success: function (data){
              $('.project').text(data.project);
              $('.item-code').text(data.item_house);
              $('.category').text(data.category);
              $('.price').text("$ "+data.price);
              $('.deposit').text("$ "+data.deposit);
              $('.discount').text("$ "+data.discount);
              $('.remain-amount').text("$ "+parseFloat(data.remain).toFixed(2));
              $('.paid').text("$ "+parseFloat(data.paid).toFixed(2));
              $('.balance').text("$ "+ parseFloat(data.remain,2).toFixed(2));

            }
        });

        $('#' + tableId).DataTable({

          paging: false,
          searching: false,
          ordering: false,
          info:false,
          ajax: data.details_url,
          columns: [
            { data: 'loanprocess_no', name: 'loanprocess_no' },
            { data: 'loanprocess_datepayment', name: 'loanprocess_datepayment' },
            { data: 'loanprocess_principle', name: 'loanprocess_principle'},
            { data: 'loanprocess_interest', name: 'loanprocess_interest'},
            { data: 'loanprocess_owe', name: 'loanprocess_owe'},
            { data: 'loanprocess_principleos', name: 'loanprocess_principleos'},
            { data: 'status', name: 'status'},
          ],
          "initComplete": function(settings, json) {
            $('.main-spinner').hide();
          }
        });
      }