<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>