<style>
    .dataTables_filter{
        margin-top: -35px;

    }
    .buttons-csv{
        background-color: white;
        color: #002B60;
        border-color: #000;
    }
 </style>
<!-- start page title -->
<div class="row">
                            <div class="col-12">
                                <div class="page-title-box page-title-box-alt">
                                    <h4 class="page-title">Transaction Details</h4>
                                    <div class="page-title-right">
                                        <ol class="breadcrumb m-0">
                                            <!-- <li class="breadcrumb-item">
                                            <a href="<?= base_url() ?>credits_pack_add">
                                            <button type="button" class="btn btn-primary waves-effect waves-light">Add</button>
                                            </a>
                                            </li> -->
                                            <!-- <li class="breadcrumb-item"><a href="javascript: void(0);">Tables</a></li>
                                            <li class="breadcrumb-item active">Datatables</li> -->
                                        </ol>
                                    </div>
                                </div>
                            </div>
                        </div>     
                        <!-- end page title --> 




                        <div class="row">
                            <div class="col-12">
                                <div class="card">
                                    <div class="card-body">

                                        <!-- <h4 class="header-title">Buttons example</h4>
                                        <p class="text-muted font-13 mb-4">
                                           
                                        </p> -->

                                        <table id="datatable-buttons"  class="table table-striped dt-responsive nowrap w-100">
                                            <thead>
                                                <tr>
                                                   
                                                    <th>Order Id</th>
                                                    <th>Order Date</th>
                                                    <th>Transaction Id</th>
                                                    <th>Cost</th>
                                                    <th>Member</th>
                                                    <th>Payment Status</th>
                                                    

                                                </tr>
                                            </thead>
                                        
                                        
                                            <tbody>
                                            <?php foreach ($creditsData as $row)
                                                { ?>
                                                <tr class="order_details" id="<?php echo $row['member_id'];?>">
                                                       
                                                        <td><?php echo $row['order_id'];?></td>
                                                        <td><?php $date = new DateTime($row['created_at']);    echo $date->format('M d , Y');  ?></td>
                                                        <td><?php echo $row['transaction_id'];?></td>
                                                        <td><?php if($row['status'] == 'Success'){
                                                          $number =  json_decode($row['transaction'] , true)['payment']['amount_money']['amount'] / 100;
                                                          echo number_format($number, 2, '.', '');
                                                        }
                                                         ?></td>
                                                        <td><?php echo $row['member_name'];?></td> 
                                                        <?php if($row['status'] == 'Success'){ ?>
                                                            <td style="color:green;"><?php echo $row['status'];?></td>
                                                        <?php }?>
                                                        <?php if($row['status'] == 'Failed'){ ?>
                                                            <td style="color:red;"><?php echo $row['status'];?></td>
                                                        <?php }?>
                                                        <?php if($row['status'] == 'In-Progress'){ ?>
                                                            <td style="color:blue;"><?php echo $row['status'];?></td>
                                                        <?php }?>
                                                        
                                                      
                                                     

                                                </tr>    
                                                <?php } ?>
                                  
                                            </tbody>
                                        </table>
                                        
                                    </div> <!-- end card body-->
                                </div> <!-- end card -->
                            </div><!-- end col-->
                        </div>
                        <!-- end row-->


   <!--  Modal content for the Large example -->
   <div class="modal fade" id="bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <h4 class="modal-title" id="myLargeModalLabel">Order Details</h4>
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                  </div>
                                <div class="modal-body" id="model-table">
                              
                               
                                    </div>                   
                                </div>
                            </div><!-- /.modal-content -->
                         </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->




<script>
$(document).on('click','.order_details',function(){
 
    // var member_id = $(this).closest('i').attr('id');
    // var order_id = $(this).closest('i').attr('value');
    var member_id = $(this).closest('tr').attr('id');
   
    var order_id  = $(this).children("td:nth-child(1)").text();
    
  $.ajax({
    url:"<?= base_url(); ?>/order_details",
    method: 'POST',
    data: { 'member_id' : member_id , 'order_id' : order_id  },
   json: true,

    success: function(response) {
      
     $('#model-table').html(response);
     $('#bs-example-modal-lg').modal('show');
    },
    error: function(xhr, status, error) {
      // Handle the error here
      console.error(error);
    }
  });
});
</script>


<script>
  $(document).ready(function() {
    $('#datatable-buttons').DataTable({
      "order": [[2, 'desc']], // Set initial sorting to descending on the first column
      "dom": 'Bfrtip', // Show export buttons
      buttons: [
            {
                extend: 'pdfHtml5',
                title: 'Transactions', // Set your custom PDF title here
                text: 'PDF',
                customize: function(doc) {
                }
            },
            {
                extend: 'print',
                title: 'Transactions', // Set your custom print title here
                text: 'Print',
            },
            {
                extend: 'copy',
                text: 'Copy', // Set the title for the Copy button
                titleAttr: 'Copy', // Set the tooltip for the Copy button
            },
            {
                extend: 'csv',
                text: 'CSV', // Set the title for the CSV button
                title: 'Transactions', // Set your custom print title here
            }
        ],
      "language": {
        "search": "Search: " // Customize search label
      },
      "ordering": false
    });
  });
</script>