<style>
    .padding-5{
        padding: 5px !important;
    }
</style>
<div class="row grid-margin">
    <div class="col-md-12">
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">UUID</h4>
                <table id="table_id" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>UUID</th>
                            <th>Assigned</th>
                            <th style="width:125px;">Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php 
                            $i = 1;
                            foreach ($uuids as $uuid) {?>
				            <tr>
				                <td><?=$i?></td>
				                <td><?=$uuid["uuid"]?></td>
								<td><?=$uuid['assigned']?></td>
								<td>
									<button class="btn btn-danger padding-5" onclick="delete_uuid(<?php echo $uuid["id"] ?>)"><i class="icon-trash"></i></button>
								</td>
				            </tr>
                        <?php 
                            $i++;
                        }?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
$(function() {
    $('#table_id').DataTable();
});

 function delete_uuid(id)
 {
   if(confirm('Are you sure delete this data?'))
   {
     // ajax delete data from database
       $.ajax({
         url : "<?php echo site_url('uuid/delete_uuid')?>/"+id,
         type: "POST",
         dataType: "JSON",
         success: function(data)
         {
            location.reload();
         },
         error: function (jqXHR, textStatus, errorThrown)
         {
             alert('Error deleting data');
         }
     });
   }
 }
</script>
