<script src="<?php echo admin_css() ?>js/dragula.min.js"></script>
<script src="<?php echo admin_css() ?>js/onDomChange.js"></script>
<script src="<?php echo admin_css() ?>js/component.dragula.js"></script>

<?php
$section_details = $this->course_model->get_section('section', $param2)->row_array();
$lessons = $this->course_model->get_lessons('section', $section_details['id'])->result_array();
?>
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <div class="row" id = "parent-div" data-plugin="dragula" data-containers='["lesson-list"]'>
                    <div class="col-md-12">
                        <div class="bg-dragula p-2 p-lg-4">
                            <h5 class="mt-0"><?php echo get_phrase('sort_lessons_of').': '.$section_details['title'].' '.get_phrase('section'); ?>
                                <button style="float: right;" type="button" class="btn btn-outline-primary btn-sm btn-rounded alignToTitle" id = "lesson-sort-btn" onclick="sort()" name="button"><?php echo get_phrase('update_sorting'); ?></button>
                            </h5>
                            <div id="lesson-list" class="py-2">
                                <?php foreach ($lessons as $lesson): ?>
                                    <!-- item -->
                                    <div class="card mb-0 mt-2 draggable-item" id = "<?php echo $lesson['id']; ?>">
                                        <div class="card-body">
                                            <div class="media">
                                                <div class="media-body">
                                                    <h5 class="mb-1 mt-0"><?php echo $lesson['title']; ?></h5>
                                                </div> <!-- end media-body -->
                                            </div> <!-- end media -->
                                        </div> <!-- end card-body -->
                                    </div> <!-- end col -->
                                    <!-- item ends -->
                                <?php endforeach; ?>
                            </div> <!-- end company-list-1-->
                        </div> <!-- end div.bg-light-->
                    </div> <!-- end col -->
                </div> <!-- end row -->
            </div> <!-- end card-body -->
        </div> <!-- end card -->
    </div> <!-- end col -->
</div>

<style>
    .draggable-item {
  cursor: all-scroll;
}
</style>
<!-- Init Dragula -->
<script type="text/javascript">
! function(r) {
    "use strict";
    var a = function() {
        this.$body = r("body")
    };
    a.prototype.init = function() {
        r('[data-plugin="dragula"]').each(function() {
            var a = r(this).data("containers"),
            t = [];
            if (a)
            for (var n = 0; n < a.length; n++) t.push(r("#" + a[n])[0]);
            else t = [r(this)[0]];
            var i = r(this).data("handleclass");
            i ? dragula(t, {
                moves: function(a, t, n) {
                    return n.classList.contains(i)
                }
            }) : dragula(t)
        })
    }, r.Dragula = new a, r.Dragula.Constructor = a
}(window.jQuery),
function(a) {
    "use strict";
    window.jQuery.Dragula.init()
}();
</script>
<script type="text/javascript">
function sort() {
    var containerArray = ['lesson-list'];
    var itemArray = [];
    var itemJSON;
    for(var i = 0; i < containerArray.length; i++) {
        $('#'+containerArray[i]).each(function () {
            $(this).find('.draggable-item').each(function() {
                //console.log(this.id);
                itemArray.push(this.id);
            });
        });
    }

    itemJSON = JSON.stringify(itemArray);
    $.ajax({
        url: '<?php echo site_url('admin/course/ajax_sort_lesson/');?>',
        type : 'POST',
        data : {itemJSON : itemJSON},
        success: function(response)
        {
            swal("Wow", "<?php echo get_phrase('lessons_have_been_sorted'); ?>", "success")
            setTimeout(
                function()
                {
                    location.reload();
                }, 1000);
            }
        });
    }
</script>
