<div class="card">
    <div class="card-body">
        <div id="shcedule_table"></div>
    </div>
</div>

<script>
    
    $(document).on('click', '.remove-schedule', function(){
        let id = $(this).data("id");
        swal({
              title: "Are you sure?",
              text: "Once deleted, you will not be able to recover this data file!",
              icon: "warning",
              buttons: true,
              dangerMode: true,
            })
            .then((willDelete) => {
              if (willDelete) {
                 $.ajax({
                        method: 'POST',
                        url: 'query/schedule_query.php',
                        data:{
                            "removing_schedule": 1,
                            "id": id
                        },
                        success: function(res){

                            load_schedule();
                        }
                    });
                swal("Poof! Your data file has been deleted!", {
                  icon: "success",
                });
              } else {
                swal("Your data file is safe!");
              }
            });        
    });

    load_schedule();
    function load_schedule(){
        $.ajax({
            method: 'post',
            url: 'query/schedule_query.php',
            data:{
                "loading_schedule": 1
            },
            success: function(res){
                $('#shcedule_table').html(res);
                $('#mytable').DataTable({
                    columnControl: [{
                        extend: 'order',
                        statusOnly: true
                    }],
                    ordering: {
                        indicators: false
                    }
                });
            }
        })
    }
</script>