<div class="row mt-4">
                <!-- upcoming schedules -->
                <div class="col-12 col-md-6 col-xl-4">
                    <p class="fw-medium mb-3 h6">Upcoming</p>
            
                    <!-- upcoming schedule cards -->
                    <div id="upcomingschedules" class="dragzonecard miheight-150">
                        <!-- booking cards -->
                        <div class="card mb-3">
                            <div class="card-body">
                                Booking 1
                            </div>
                        </div>
                        <div class="card mb-3">
                            <div class="card-body">
                            Booking 2
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- current in progress schedules -->
                <div class="col-12 col-md-6 col-xl-4">
                    <p class="fw-medium mb-3 h6">On-Going</p>
            
                    <!-- current in progress schedule cards -->
                    <div id="ongoingschedules" class="dragzonecard miheight-150">
                        <!-- booking cards -->
                        <div class="card mb-3">
                            <div class="card-body">
                            Booking 3
                            </div>
                        </div>
                        <!-- Meeting cards -->
                        <div class="card bg-orange-subtle mb-3">
                            <div class="card-body">
                                Booking 4
                            </div>
                        </div>
                    </div>
                </div>
            
                <!-- recently completed schedules -->
                <div class="col-12 col-md-6 col-xl-4">
                    <p class="fw-medium mb-3 h6">Completed</p>
            
                    <!-- recently completed schedule cards -->
                    <div id="completedchedules" class="dragzonecard miheight-150">
                        <!-- booking cards -->
                        <div class="card bg-success-subtle mb-3">
                            <div class="card-body">
                                Booking 5
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <script>
                "use strict";
            
                $(document).ready(function () {
                    dragula([document.querySelector('#upcomingschedules'), document.querySelector('#ongoingschedules'), document.querySelector('#completedchedules')]);
                });
            </script>