

<style>

.cards tbody tr {
   float: left;
   width: 19rem;
   margin: 0.5rem;
   border: 0.0625rem solid rgba(0, 0, 0, .125);
   border-radius: .25rem;
   box-shadow: 0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.25);
}

.cards tbody td {
   display: block;
}

.cards thead {
   display: none;
}

.cards td:before {
   content: attr(data-label);
   position: relative;
   float: left;
   color: #808080;
   min-width: 4rem;
   margin-left: 0;
   margin-right: 1rem;
   text-align: left;   
}

tr.selected td:before {
   color: #CCC;
}

.table .avatar {
   width: 50px;
}

.cards .avatar {
   width: 150px;
   height: 150px;
   margin: 15px;
}
   </style>
<div class="container">

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sc-2.0.0/sl-1.3.0/datatables.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
   <?php
   $all_orders=array();
   $i=0;
   if ($sell_records) 
   {
         foreach ($sell_records as $key => $value) 
         { 
            $i++;
            if (!empty($value)) 
            {
               if($value->subsell_status == 1)
               {
                     $buy_sell_status = 'SUB-SELL';
                      $avg_trans_price = $value->live_price - $value->avg_price;
               }
               else
               { 

                      if($value->description == "manual_buy"){
                         $buy_sell_status = "Manual-Buy";
                      }else if($value->description == "manual_sell" ){
                        $buy_sell_status = "Manual-Sell";
                      }else{
                        if($value->type == 1)
                            $buy_sell_status = "Buy";
                        else
                            $buy_sell_status = "Sell";
                    }
                     
                        $avg_trans_price = $value->live_price;
                  }
               }
               if($value->type == 1)
               $class = "success";
               else
               $class = "fail";

               if($value->type == 2)
               { 
                  $profit= $value->avg_price; 
               }
               else
               { 
                  $profit='--';

               }
               $percentage='';
               if($value->type == 2)
               {
                   if($value->subsell_status == '1')
                   { 
                     $percentage= $value->profit_percentage;
                   }
                   else if($value->subsell_status == '' || $value->subsell_status == '0')
                   { 
                     $percentage=$value->profit_percentage; 
                   }
                   else
                   { 
                     $percentage='-';
                  }
               }
               else
               { 
               $percentage='-';
              }


               $all_orders[]=array("pair" =>$value->pair,"mode" =>$buy_sell_status,"time" => date('Y-m-d h:i:s',substr($value->time,0,-3)),"ordernumber" =>$value->order_id ,"quantity" => $value->quantity,"avarage" => $avg_trans_price,"profit" =>$profit ,"percentage" =>$percentage);
         }
      }

   
     
    
      
   ?>

   <table id="example" class="table table-sm table-hover" cellspacing="0" width="100%">
      <thead>
         <tr>
            <th>Trading pair</th>
            <th>Mode</th>
            <th>Time</th>
            <th>Order Number</th>
            <th>Quantity</th>
            <th>Average buyin price</th>
            <th>profit(USDT)</th>
            <th>profit(%)</th>
         </tr>
      </thead>
   </table>
</div>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/v/bs4/dt-1.10.18/b-1.5.6/sc-2.0.0/sl-1.3.0/datatables.min.js" type="text/javascript"></script>

<script>
       $(document).ready(function () {
   // Assuming originalData is populated from a server-side variable
   const originalData = <?php echo json_encode($all_orders); ?>;

   const formattedData = {
      data: originalData.map((item, index) => ({
         id: (index + 1).toString(),
         pair: item.pair,
         mode: item.mode,
         time: item.time,
         ordernumber: item.ordernumber,
         quantity: item.quantity,
         avarage: item.avarage,
         profit: item.profit,
         percentage: item.percentage,
      }))
   };

   var data_final = JSON.stringify(formattedData, null, 4);
   var dataObject = JSON.parse(data_final);

   var table = $('#example2').DataTable({
      'dom':
         "<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'<'float-md-right ml-2'B>f>>" +
         "<'row'<'col-sm-12'tr>>" +
         "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
      'data': dataObject.data,
      'buttons': ['csv', {
         'text': '<i class="fa fa-id-badge fa-fw" aria-hidden="true"></i>',
         'action': function (e, dt, node) {
            $(dt.table().node()).toggleClass('cards');
            $('.fa', node).toggleClass(['fa-table', 'fa-id-badge']);
            dt.draw('page');
         },
         'className': 'btn-sm',
         'attr': {
            'title': 'Change views',
         }
      }],
      'select': 'single',
      'columns': [
         {
            'data': 'pair'
         },
         {
            'data': 'mode'
         },
         {
            'data': 'time',
            'class': 'text-right'
         },
         {
            'data': 'ordernumber',
            'class': 'text-right'
         },
         {
            'data': 'quantity'
         },
         {
            'data': 'avarage'
         },
         {
            'data': 'profit'
         },
         {
            'data': 'percentage'
         }
      ],
      'drawCallback': function (settings) {
         var api = this.api();
         var $table = $(api.table().node());

         if ($table.hasClass('cards')) {
            // Create an array of labels containing all table headers
            var labels = [];
            $('thead th', $table).each(function () {
               labels.push($(this).text());
            });

            // Add data-label attribute to each cell
            $('tbody tr', $table).each(function () {
               $(this).find('td').each(function (column) {
                  $(this).attr('data-label', labels[column]);
               });
            });

            var max = 0;
            $('tbody tr', $table).each(function () {
               max = Math.max($(this).height(), max);
            }).height(max);

         } else {
            // Remove data-label attribute from each cell
            $('tbody td', $table).each(function () {
               $(this).removeAttr('data-label');
            });

            $('tbody tr', $table).each(function () {
               $(this).height('auto');
            });
         }
      }
   })
   .on('select', function (e, dt, type, indexes) {
      var rowData = table.rows(indexes).data().toArray()
      $('#row-data').html(JSON.stringify(rowData));
   })
   .on('deselect', function () {
      $('#row-data').empty();
   });
});
      </script>