<style>
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}
</style>
<div class="row">
  <div class="table-responsive custom_table_area export_table_area">
    <table class="table table-striped table-bordered export_btn_dt c_table_style bktrns_report_table" id="docket_table">
        <thead>
            <tr>
              <th>View</th>                                
              <th>SL No.</th>                                
              <th>Date</th>
              <th>Shift Id</th>
              <th>Driver Name</th>
              <th>DC</th>
              <th>Acc. No</th>
              <th>Amount($)</th>
              <th>Bank($)</th>
              <th>Cash($)</th>
              <th>Credit Card($)</th>
              
            </tr>
        </thead>
        <tbody>
        <?php $total_docket_amt=0; if(!empty($bnk_trnf_report_data)): ?>
        <?php   foreach($bnk_trnf_report_data as $key => $list): $child_value='';$sl_no=0;
                foreach ($driver_settlement_list as $key1 => $driver_settlement){

                  if(date('Y-m-d H:i:s',strtotime($driver_settlement['updated_on'])) == date('Y-m-d H:i:s',strtotime($list['updated_on'])) && $driver_settlement['driver_id'] == $list['driver_id']){$sl_no++;
                    $child_value .= '<tr>';
                    $child_value .= '<td>'.$sl_no.'</td>';
                    $child_value .= '<td><a target="_blank" title="Detail/View" href="'.base_url('admin/DriverSettlement/DriverSettlementDetail/'.$driver_settlement['dr_settlement_id']).'" class="ser_book_btn"><i class="fa fa-eye" aria-hidden="true"></i></a>'; 
                    if($driver_settlement['driver_settlement_flag'] != 1){
                      $child_value .= '<a target="_blank" title="Edit" href="'.base_url('admin/DriverSettlement/DriverSettlementEditView/'.$driver_settlement['dr_settlement_id'].'/edit').'" class="ser_book_btn"><i class="fa fa-pencil" aria-hidden="true"></i></a>';
                    }
                    $child_value .= '</td>';
                    
                    $child_value .= '<td>'.$driver_settlement['shift_no'].'</td>';
                    $child_value .= '<td>'.$driver_settlement['final_due_amt'].'</td>';
                    $child_value .= '</tr>';
                } 
              }
            ?>

                
                <tr data-child-value='<?=$child_value?>'>
                    <td class="details-control"></td>
                    <td><?php echo $key+1; ?></td>
                    <td><?php echo $list['latest_update_ts']; ?></td>
                    <td><?php echo $list['shift_no']; ?></td>
                    <td><?php echo $list['FULLNAME']; ?></td>
                    <td><?php echo $list['dc_no']; ?></td>
                    <td><?php echo $list['account_no']; ?></td>
                    <td><?php echo $list['total_amount']; ?></td>
                    <td><?php echo $list['bank_transfer_amt_bulk']; ?></td>
                    <td><?php echo $list['cash_amt_bulk']; ?></td>
                    <td><?php echo $list['credit_card_amt_bulk']; ?></td>
                   
                </tr>
                
                
        <?php   endforeach; ?>
        <?php endif; ?>
        </tbody>                            
    </table>
    
                    
  </div>
</div>
<script>
  $('a.pay_btn').confirm({
    title: "Confirm Bank Payment",
    content:function(){return this.$target.data('status_change_msg');},
    buttons: {
      OK: {
        btnClass: 'btn-green',
        action: function() {
          var payin_id = this.$target.attr('id');
          $.ajax({
            type: "POST",
            url: '<?php echo base_url('admin/Report/BankPaymentStatusChange') ?>',
            data: {
              payin_id: payin_id
            },
            dataType: 'html',
            success: function(response) {
              if (response == '1') {
                // $("#" + payin_id).css({
                //   "pointer-events": "none",
                //   "cursor": "default"
                // });
                // $("#" + payin_id).addClass('paid');
                // $("#" + payin_id).html('<i class="fa fa-money" aria-hidden="true"></i> Paid');
                $.alert({
                  type: 'green',
                  title: 'Success',
                  content: 'Bank payment status updated successfully',
                });
                window.location.reload(true);
              } else {

                $.alert({
                type: 'red',
                title: 'Alert!',
                content: 'error',
              });

              }
            },
            error: function(response) {
              $.alert({
                type: 'red',
                title: 'Alert!',
                content: 'error',
              });
            }
          });
        }
      },
      Close: {
        btnClass: 'btn-default',
        action: function() {

        }
      },
    }
  });


  /* Formatting function for row details - modify as you need */
  function format(value) {
      return '<table width="100%" class="table table-striped table-border"><thead><tr style="background-color:#1db5bd !important;"><th>Sl. No</th><th>Action</th><th>Shift</th><th>Due Amount</th></tr></thead><tbody>'+ value + '</tbody></table>';
  }
 
$(document).ready(function() {
  $("#docket_table").dataTable().fnDestroy();
  var table = $('#docket_table').DataTable();
  $('#docket_table').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
      });
} );


 
  </script>